Add new header

Author: krystian50

src/App.tsx

@@ -3,12 +3,8 @@ import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 import { Header } from "@/components/Header";
-import { PvmSelect } from "@/components/PvmSelect";
-import { NumeralSystemSwitch } from "@/components/NumeralSystemSwitch";
 import { useAppSelector } from "@/store/hooks.ts";
 import { DebuggerControlls } from "./components/DebuggerControlls";
-import classNames from "classnames";
-import { DebuggerSettings } from "./components/DebuggerSettings";
 import DebuggerContent from "@/pages/DebuggerContent.tsx";
 import ProgramLoader from "@/pages/ProgramLoader.tsx";
 import { Navigate, Route, Routes } from "react-router";
@@ -22,22 +18,7 @@ function App() {
       <div className="p-3 text-left w-screen">
         <div className="flex flex-col gap-5">
           <div className="grid grid-rows md:grid-cols-12 gap-1.5 pt-2">
-            {pvmInitialized ? <DebuggerControlls /> : null}
-
-            <div
-              className={classNames("col-span-12 max-sm:order-first flex align-middle items-center justify-end", {
-                "md:col-span-6": pvmInitialized,
-              })}
-            >
-              <div className="mx-3">
-                <DebuggerSettings />
-              </div>
-
-              <div className="w-full md:w-[350px]">
-                <PvmSelect />
-              </div>
-              <NumeralSystemSwitch className="hidden md:flex ml-3" />
-            </div>
+            <div className="col-span-12 flex justify-center"> {pvmInitialized ? <DebuggerControlls /> : null}</div>
 
             <Routes>
               <Route index element={pvmInitialized ? <DebuggerContent /> : <Navigate to={"/load"} />} />

src/assets/logo.png

@@ -17,6 +17,7 @@ import { useDebuggerActions } from "@/hooks/useDebuggerActions";
 import { useState } from "react";
 import { ErrorWarningTooltip } from "../ErrorWarningTooltip";
 import { isSerializedError } from "@/store/utils";
+import { Separator } from "../ui/separator";
 
 export const DebuggerControlls = () => {
   const debuggerActions = useDebuggerActions();
@@ -89,7 +90,7 @@ export const DebuggerControlls = () => {
   };
 
   return (
-    <div className="col-span-12 md:col-span-6 max-sm:order-2 flex align-middle max-sm:justify-between mb-3">
+    <div className="col-span-12 md:col-span-6 max-sm:order-2 flex align-middle max-sm:justify-between mb-3 bg-gray-100 p-3 rounded-xl border border-gray-200">
       <div className="md:mr-3">
         <ProgramLoader
           initialState={initialState}
@@ -99,8 +100,10 @@ export const DebuggerControlls = () => {
           }}
         />
       </div>
+      <Separator orientation="vertical" />
       <Button
         className="md:mr-3"
+        variant="ghost"
         onClick={() => {
           debuggerActions.restartProgram(initialState);
           setError(undefined);
@@ -110,23 +113,27 @@ export const DebuggerControlls = () => {
         <RefreshCcw className="w-3.5 md:mr-1.5" />
         <span className="hidden md:block">Reset</span>
       </Button>
+      <Separator orientation="vertical" />
       {!isDebugFinished && isRunMode ? (
-        <Button className="md:mr-3" onClick={handlePauseProgram}>
+        <Button className="md:mr-3" variant="ghost" onClick={handlePauseProgram}>
           <Pause className="w-3.5 md:mr-1.5" />
           <span className="hidden md:block">Stop</span>
         </Button>
       ) : (
         <Button
           className="md:mr-3"
+          variant="ghost"
           onClick={handleRunProgram}
           disabled={isDebugFinished || !pvmInitialized || isProgramEditMode || isLoading || !!error}
         >
           {isLoading ? <LoadingSpinner className="w-3.5 md:mr-1.5" size={20} /> : <Play className="w-3.5 md:mr-1.5" />}
           <span className="hidden md:block">Run</span>
         </Button>
       )}
+      <Separator orientation="vertical" />
       <Button
         className="md:mr-3"
+        variant="ghost"
         onClick={onNext}
         disabled={
           (!isDebugFinished && isRunMode) ||

src/assets/logo.svg

@@ -49,7 +49,7 @@ export const DebuggerSettings = () => {
     <Dialog>
       <DialogTrigger>
         <div className="opacity-60 mt-2">
-          <Settings />
+          <Settings className="text-gray-400" />
         </div>
       </DialogTrigger>
       <DialogContent>

src/components/DebuggerControlls/index.tsx

@@ -1,41 +1,23 @@
-import Logo from "@/assets/logo.png";
-import GithubLogo from "@/assets/github-mark-white.svg";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip.tsx";
+import { Header as FluffyHeader } from "@/packages/ui-kit/Header";
+import { DebuggerSettings } from "../DebuggerSettings";
+import { PvmSelect } from "../PvmSelect";
+import { NumeralSystemSwitch } from "../NumeralSystemSwitch";
 
-export const Header = () => {
+const EndSlot = () => {
   return (
-    <div className="bg-black w-full flex flex-row items-center justify-between p-1 h-16 overflow-hidden">
-      <div className="flex items-center gap-5">
-        <img src={Logo} alt="FluffyLabs logo" className="w-[90px] ml-3" />
-        <pre className="text-brand">PVM debugger</pre>
-        <Environment />
+    <div className="text-white flex">
+      <NumeralSystemSwitch className="hidden md:flex mx-7" />
+
+      <div className="w-full md:w-[350px]">
+        <PvmSelect />
       </div>
-      <div className="mr-3 text-white flex flex-row items-center justify-center gap-5">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger>
-              <a target="_blank" href="https://github.com/fluffylabs/pvm-debugger" rel="noreferrer">
-                <img src={GithubLogo} alt="GitHub logo" width={32} />
-              </a>
-            </TooltipTrigger>
-            <TooltipContent side="left">
-              <p>Report an issue or fork on Github</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+
+      <div className="mx-7">
+        <DebuggerSettings />
       </div>
     </div>
   );
 };
-
-const Environment = () => {
-  const { host } = window.location;
-  let env = "PR preview";
-  if (host === "pvm.fluffylabs.dev") {
-    env = "prod";
-  } else if (host === "pvm-debugger.netlify.app") {
-    env = "beta";
-  }
-
-  return <pre className="text-white text-xs">{env}</pre>;
+export const Header = () => {
+  return <FluffyHeader endSlot={<EndSlot />} />;
 };

src/components/DebuggerSettings/index.tsx

@@ -6,7 +6,7 @@ import { InstructionMode } from "./types";
 import { ForwardedRef, forwardRef, useCallback, useContext, useState } from "react";
 import { NumeralSystemContext } from "@/context/NumeralSystemContext";
 import { TableCell, TableRow } from "../ui/table";
-import { ProgramRow } from ".";
+import { ProgramRow } from "./InstructionsTable";
 import { useAppSelector } from "@/store/hooks.ts";
 import { selectWorkers, WorkerState } from "@/store/workers/workersSlice.ts";
 import { hexToRgb } from "@/lib/utils.ts";