Colors finetuning

src/components/DebuggerSettings/index.tsx

@@ -60,9 +60,13 @@ export const DebuggerSettings = ({ withLabel }: { withLabel?: boolean }) => {
           setIsOpen(!isOpen);
         }}
       >
-        <div className="mt-2">
-          {withLabel ? <span className="mr-2 text-white">Settings</span> : <Settings className="text-[#858585]" />}
-        </div>
+        {withLabel ? (
+          <div className="mt-2">
+            <span className="mr-2 text-white">Settings</span>
+          </div>
+        ) : (
+          <Settings height="34px" width="20px" className="text-[#858585]" />
+        )}
       </DialogTrigger>
       <DialogContent className="p-0 pb-4 max-sm:h-full flex flex-col">
         <DialogHeader className="py-3 px-4 bg-title text-title-foreground rounded-t-lg border-b">

src/components/Instructions/index.tsx

@@ -17,7 +17,7 @@ export const Instructions = (props: InstructionsProps) => {
   return (
     <div className="border-2 rounded-md bg-card h-full">
       <div className="border-b-2">
-        <ProgramEdit startSlot={<></>} />
+        <ProgramEdit classNames="rounded-ss rounded-se" startSlot={<></>} />
       </div>
       <InstructionsTable {...props} />
     </div>

src/components/KnowledgeBase/index.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import { BlockMath } from "react-katex";
 import { ExternalLink } from "lucide-react";
-import { Input } from "@/components/ui/input.tsx";
 import { InstructionKnowledgeBaseEntry, instructionsKnowledgeBase } from "@/utils/instructionsKnowledgeBase.ts";
 import { CurrentInstruction } from "@/types/pvm";
 import { debounce } from "lodash";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Search } from "../SearchInput";
 
 export const KnowledgeBase = ({ currentInstruction }: { currentInstruction: CurrentInstruction | undefined }) => {
   const [filteredInstructions, setFilteredInstructions] = useState<InstructionKnowledgeBaseEntry[]>([]);
@@ -42,10 +42,11 @@ export const KnowledgeBase = ({ currentInstruction }: { currentInstruction: Curr
           <AccordionTrigger className="mb-2">
             <div className="flex w-full items-center justify-between">
               <span className="ml-4 text-title-foreground">I found {filteredInstructions.length} results</span>
-              <Input
-                className="w-[300px] border-none"
+              <Search
+                className="w-[300px] border-none text-foreground"
+                inputClassName="text-title-foreground"
                 type="text"
-                placeholder="Search for instructions"
+                placeholder="Search for instructions..."
                 value={searchText}
                 onChange={(e) => {
                   setSearchText(e.target.value);

src/components/MemoryPreview/MemoryInfinite.tsx

@@ -11,13 +11,13 @@ import { ChangeEvent, useCallback, useContext, useEffect, useRef, useState } fro
 import { NumeralSystemContext } from "@/context/NumeralSystemContext";
 import { useAppDispatch, useAppSelector } from "@/store/hooks";
 import classNames from "classnames";
-import { INPUT_STYLES } from "../ui/input";
 import { isSerializedError, LOAD_MEMORY_CHUNK_SIZE, MEMORY_SPLIT_STEP } from "@/store/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useInView } from "react-intersection-observer";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TooltipPortal } from "@/components/ui/tooltip.tsx";
 import React from "react";
 import { addressFormatter, findMemoryForWorker, FindMemoryForWorkerType } from "./utils";
+import { Search } from "../SearchInput";
 
 const MAX_ADDRESS = Math.pow(2, 32);
 const ITEM_SIZE = 24;
@@ -260,7 +260,7 @@ export const MemoryTable = ({
   }
 
   return (
-    <div className={classNames("overflow-auto relative", { "opacity-20": hasError })} ref={parentRef}>
+    <div className={classNames("overflow-auto relative h-[70vh]", { "opacity-20": hasError })} ref={parentRef}>
       {hasPrevPage && (
         <div className="text-center w-full" ref={beforeInView.ref}>
           ...
@@ -412,7 +412,7 @@ export const MemoryInfinite = () => {
             setSelectedAddress(address);
           }}
           placeholder="Jump to address"
-          classes="max-w-[200px] bg-muted text-muted-foreground mx-auto text-center rounded-[20px]"
+          classes="bg-muted text-muted-foreground mx-auto text-center rounded-[5px]"
         />
       </div>
     </div>
@@ -449,23 +449,20 @@ export function AddressInput({ value, onChange, placeholder, id, classes }: Addr
   );
 
   return (
-    <>
-      <input
-        id={id}
-        className={classNames(
-          INPUT_STYLES.replace("focus-visible:ring-ring", ""),
-          "w-full",
-          {
-            "ring-2 ring-red-500": !isValid,
-            "focus-visible:ring-ring": isValid,
-            "focus-visible:ring-red-500": !isValid,
-          },
-          classes,
-        )}
-        placeholder={placeholder}
-        value={input}
-        onChange={changeValue}
-      />
-    </>
+    <Search
+      id={id}
+      className={classNames(
+        "w-full",
+        {
+          "ring-2 ring-red-500": !isValid,
+          "focus-visible:ring-ring": isValid,
+          "focus-visible:ring-red-500": !isValid,
+        },
+        classes,
+      )}
+      placeholder={placeholder}
+      value={input}
+      onChange={changeValue}
+    />
   );
 }

src/components/MemoryPreview/index.tsx

@@ -8,13 +8,13 @@ export const MemoryPreview = () => {
       <Tabs defaultValue="pages" className="h-full flex flex-col">
         <TabsList className="bg-transparent m-2 mb-0 max-sm:hidden border dark:border-brand p-0">
           <TabsTrigger
-            className="w-1/2 h-full bg-title text-secondary-foreground data-[state=active]:bg-black data-[state=active]:text-white dark:data-[state=active]:bg-brand dark:data-[state=active]:text-background"
+            className="text-xs w-1/2 h-full bg-title text-secondary-foreground data-[state=active]:bg-black data-[state=active]:text-white dark:data-[state=active]:bg-brand dark:data-[state=active]:text-background rounded-se-none rounded-ee-none"
             value="pages"
           >
             Infinite
           </TabsTrigger>
           <TabsTrigger
-            className="w-1/2 h-full bg-title dark:bg-transparent dark:text-brand text-secondary-foreground data-[state=active]:bg-black data-[state=active]:text-white dark:data-[state=active]:bg-brand dark:data-[state=active]:text-background"
+            className="text-xs w-1/2 h-full bg-title dark:bg-transparent dark:text-brand text-secondary-foreground data-[state=active]:bg-black data-[state=active]:text-white dark:data-[state=active]:bg-brand dark:data-[state=active]:text-background rounded-ss-none rounded-es-none"
             value="ranges"
           >
             Ranges

src/components/NumeralSystemSwitch/index.tsx

@@ -3,13 +3,17 @@ import { Switch } from "@/components/ui/switch.tsx";
 import { useContext } from "react";
 import { NumeralSystemContext } from "@/context/NumeralSystemContext";
 import { NumeralSystem } from "@/context/NumeralSystem";
+import { cn } from "@/lib/utils";
 
 export const NumeralSystemSwitch = ({ className }: { className: string }) => {
   const { setNumeralSystem, numeralSystem } = useContext(NumeralSystemContext);
 
   return (
     <div className={`flex items-center space-x-2 ${className}`}>
-      <Label htmlFor="numerical-system-mode" className={!numeralSystem ? "text-white" : "text-[#858585]"}>
+      <Label
+        htmlFor="numerical-system-mode"
+        className={cn("text-xs", !numeralSystem ? "text-white" : "text-[#858585]")}
+      >
         Dec
       </Label>
       <Switch
@@ -18,7 +22,7 @@ export const NumeralSystemSwitch = ({ className }: { className: string }) => {
         checked={numeralSystem === NumeralSystem.HEXADECIMAL}
         onCheckedChange={(checked) => setNumeralSystem(checked ? NumeralSystem.HEXADECIMAL : NumeralSystem.DECIMAL)}
       />
-      <Label htmlFor="numerical-system-mode" className={numeralSystem ? "text-white" : "text-[#858585]"}>
+      <Label htmlFor="numerical-system-mode" className={cn("text-xs", numeralSystem ? "text-white" : "text-[#858585]")}>
         Hex
       </Label>
     </div>