Redesign: colors, typography, button backgrounds

components/Editor/Console.tsx

@@ -19,10 +19,10 @@ const Console = () => {
 
   return (
     <div ref={container} className="p-4">
-      <p className="text-gray-500 dark:text-gray-400 font-medium uppercase text-2xs">
+      <p className="text-gray-500 dark:text-[#BDBDBD] font-medium uppercase text-[13px] leading-6">
         Console
       </p>
-      <div className="leading-5 font-mono text-tiny text-gray-400 dark:text-gray-500">
+      <div className="leading-6 text-tiny text-gray-400 dark:text-darkMode-text">
         {consoleLog.map((log, index) => (
           <pre key={toKeyIndex('line', index)}>
             {log.type === LogType.Error && (

components/Editor/EditorControls.tsx

@@ -74,15 +74,15 @@ const EditorControls = ({
   }
 
   return (
-    <div className="flex flex-row items-center justify-between gap-x-4 px-4 py-4 md:py-2 md:border-r border-gray-200 dark:border-black-500">
+    <div className="flex dark:bg-darkMode-primary flex-row items-center justify-between gap-x-4 px-4 py-4 md:py-2 md:border-r border-gray-200 dark:border-black-500">
       <div className="flex flex-row">
         <Button
           onClick={onCopyPermalink}
           transparent
           padded={false}
           tooltip="Share permalink [p]"
           tooltipId="share-permalink"
-          className="p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none"
+          className="p-2 text-[#E85733] dark:text-darkMode-icons hover:text-[#fc9278] focus:outline-none"
         >
           <RiLinksLine size={16} />
         </Button>
@@ -107,10 +107,13 @@ const EditorControls = ({
           readOnly={isCompileDisabled}
           value={programArguments}
           placeholder={`Program arguments`}
-          className={cn('max-w-64 border bg-gray-200 dark:bg-gray-800', {
-            'dark:border-gray-800 border-gray-200': areProgramArgumentsValid,
-            'border-red-500': !areProgramArgumentsValid,
-          })}
+          className={cn(
+            'max-w-64 border bg-gray-200 dark:bg-darkMode-primary',
+            {
+              'dark:border-[#46373A]': areProgramArgumentsValid,
+              'border-red-500': !areProgramArgumentsValid,
+            },
+          )}
           inputClassName={cn('text-xs md:text-sm', {
             'text-red-500': !areProgramArgumentsValid,
           })}

components/Editor/EditorFooter.tsx

@@ -14,7 +14,7 @@ function EditorFooter() {
   return (
     <div
       className={cn(
-        'px-5 bg-gray-100 dark:bg-black-700 border border-gray-200 dark:border-black-500 text-xs h-[42px] items-center text-gray-600 ml-auto flex justify-between',
+        'px-5 bg-gray-100 dark:bg-darkMode-secondary border border-gray-200 dark:border-darkMode-primary text-xs h-[42px] items-center text-gray-600 ml-auto flex justify-between',
         !isFullScreen && 'rounded-b-lg',
       )}
     >

components/Editor/ExampleSelector.tsx

@@ -76,7 +76,7 @@ const DropdownIndicator = (props: DropdownIndicatorProps<SelectOption>) => {
         tooltip="Cairo Examples"
         tooltipId="cairo-examples"
         className={cn(
-          'p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none',
+          'p-2 text-[#E85733] dark:text-darkMode-icons hover:text-[#fc9278] focus:outline-none',
           props.selectProps.menuIsOpen ? 'bg-black-900/5 dark:bg-white/5' : '',
         )}
       >

components/Editor/ExtraColumn.tsx

@@ -40,7 +40,7 @@ const ExtraColumn = ({
 
   return (
     <>
-      <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 md:border-r flex-none">
+      <div className="border-b border-gray-200 dark:border-darkMode-primary flex items-center pl-6 pr-2 h-14 md:border-r flex-none">
         <Header
           codeType={codeType}
           onCodeTypeChange={({ value }) => setCodeType(value)}

components/Editor/InstructionsTable.tsx

@@ -152,7 +152,7 @@ export const InstructionsTable = ({
   )
 
   return (
-    <div className="h-full bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500">
+    <div className="h-full bg-gray-50 dark:bg-darkMode-primary  border-gray-200 dark:border-black-500">
       {/* 
         Some References for react-virtuoso:
         Official Doc: https://virtuoso.dev/

components/Editor/cairoLangConfig.ts

@@ -201,9 +201,10 @@ export function registerCairoLanguageSupport(_monaco: typeof MonacoEditor) {
       },
     ],
     colors: {
+      'editor.background': '#f9fafb',
       'editor.foreground': '#000000',
       'editorCursor.foreground': '#8B0000',
-      'editor.lineHighlightBackground': '#0000FF20',
+      'editor.lineHighlightBackground': '#E8573310',
       'editor.selectionBackground': '#88000030',
       'editor.inactiveSelectionBackground': '#88000015',
     },
@@ -218,7 +219,7 @@ export function registerCairoLanguageSupport(_monaco: typeof MonacoEditor) {
       },
     ],
     colors: {
-      'editor.background': '#141515',
+      'editor.background': '#0F0E0F',
       'editor.lineHighlightBackground': '#1e1e1e',
     },
   })

components/Editor/index.tsx

@@ -406,7 +406,7 @@ const Editor = ({ readOnly = false }: Props) => {
     <>
       <div
         className={cn(
-          'bg-gray-100 dark:bg-black-700 ',
+          'bg-gray-100 dark:bg-darkMode-secondary font-normal',
           !isFullScreen && 'rounded-lg',
         )}
       >
@@ -431,15 +431,15 @@ const Editor = ({ readOnly = false }: Props) => {
                   isThreeColumnLayout && 'md:w-1/2',
                 )}
               >
-                <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-4 pr-2 h-14 flex-none md:border-r justify-between">
+                <div className="border-b border-gray-200 dark:border-darkMode-primary flex items-center pl-4 pr-2 h-14 flex-none md:border-r justify-between">
                   <Header
                     codeType={codeType}
                     onCodeTypeChange={({ value }) => setCodeType(value)}
                     withLogo={isFullScreen}
                   />
                 </div>
 
-                <div className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500">
+                <div className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-darkMode-primary">
                   {codeType === CodeType.CASM ? (
                     <InstructionsTable
                       instructions={casmInstructions}
@@ -469,6 +469,10 @@ const Editor = ({ readOnly = false }: Props) => {
                           wordBreak: 'keepAll',
                           wordWrap: 'on',
                           readOnly: readOnly,
+                          scrollbar: {
+                            verticalSliderSize: 5,
+                            verticalScrollbarSize: 5,
+                          },
                         }}
                         value={codeType === CodeType.Cairo ? cairoCode : ''}
                         onChange={handleCairoCodeChange}
@@ -518,7 +522,7 @@ const Editor = ({ readOnly = false }: Props) => {
             </div>
             <div
               className={cn(
-                'h-[22vh] border-r border-t pane pane-light overflow-auto border-gray-200 dark:border-black-500',
+                'h-[22vh] border-r border-t pane pane-light overflow-auto border-gray-200 dark:border-darkMode-primary',
               )}
             >
               <Console />
@@ -527,7 +531,7 @@ const Editor = ({ readOnly = false }: Props) => {
 
           <div
             className={cn(
-              'w-full md:w-1/2 flex flex-col justify-between h-[50vh] md:h-auto',
+              'w-full md:w-1/2 flex flex-col justify-between rounded-r-[inherit] dark:bg-darkMode-primary h-[50vh] md:h-auto',
               isThreeColumnLayout && 'md:w-1/3',
             )}
           >

components/KBar/ResultItem.tsx

@@ -17,7 +17,7 @@ const ResultItem = forwardRef(
         className={cn(
           'flex items-center justify-between cursor-pointer py-3 px-4 border-l-2',
           {
-            'bg-gray-50 dark:bg-black-500 border-indigo-500': active,
+            'bg-gray-50 dark:bg-black-500 border-icons': active,
             'bg-white dark:bg-black-600 border-transparent': !active,
           },
         )}
@@ -39,7 +39,7 @@ const ResultItem = forwardRef(
             {action.shortcut.map((sc) => (
               <kbd
                 key={sc}
-                className="box-border py px-1 bg-gray-100 dark:bg-black-400 text-indigo-500 rounded"
+                className="box-border py px-1 bg-gray-100 dark:bg-black-400 text-icons rounded"
               >
                 {sc}
               </kbd>

components/Tracer/ExecutionStatus.tsx

@@ -120,7 +120,10 @@ const ExecutionStatus = ({
           tooltipId="step1"
           disabled={executionTraceStepNumber === 0}
         >
-          <RiArrowGoBackLine size={16} className="text-indigo-500" />
+          <RiArrowGoBackLine
+            size={16}
+            className="text-[#E85733] dark:text-darkMode-icons hover:text-[#fc9278]"
+          />
         </Button>
         <Button
           transparent
@@ -130,7 +133,10 @@ const ExecutionStatus = ({
           tooltipId="step2"
           disabled={executionTraceStepNumber + 1 === trace?.length || !trace}
         >
-          <RiArrowGoForwardLine size={16} className="text-indigo-500" />
+          <RiArrowGoForwardLine
+            size={16}
+            className="text-[#E85733] dark:text-darkMode-icons hover:text-[#fc9278]"
+          />
         </Button>
         <Button
           transparent
@@ -140,7 +146,10 @@ const ExecutionStatus = ({
           tooltipId="continue-execution"
           disabled={executionTraceStepNumber + 1 === trace?.length || !trace}
         >
-          <RiPlayCircleLine size={16} className="text-indigo-500" />
+          <RiPlayCircleLine
+            size={16}
+            className="text-[#E85733] dark:text-darkMode-icons hover:text-[#fc9278]"
+          />
         </Button>
       </div>
     </div>

components/Tracer/index.tsx

@@ -138,7 +138,7 @@ export const Tracer = () => {
 
   return (
     <>
-      <div className="border-t md:border-t-0 border-b border-gray-200 dark:border-black-500 flex items-center pl-4 pr-4 h-14 flex-none">
+      <div className="border-t dark:bg-darkMode-secondary rounded-r-[inherit] md:border-t-0 border-b border-gray-200 dark:border-black-500 flex items-center pl-4 pr-4 h-14 flex-none">
         <ExecutionStatus
           onStepIn={stepIn}
           onStepOut={stepOut}
@@ -155,7 +155,7 @@ export const Tracer = () => {
         breakPoints && (
           <div
             className={
-              'h-full w-full bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500'
+              'h-full w-full bg-gray-50 dark:bg-darkMode-primary border-gray-200 dark:border-black-500'
             }
           >
             <InstructionsTable
@@ -183,7 +183,7 @@ export const Tracer = () => {
         />
       )}
 
-      <div className="border-gray-200 border-t dark:border-black-500 flex-none pane pane-light overflow-auto h-[22vh]">
+      <div className="border-gray-200 border-t dark:bg-darkMode-secondary dark:border-black-500 flex-none pane pane-light overflow-auto h-[22vh]">
         <DebugInfoTab
           debugMode={debugMode}
           trace={trace}
@@ -223,17 +223,17 @@ function DebugInfoTab({
           {debugMode === ProgramDebugMode.Execution && (
             <div className="flex flex-col lg:flex-row justify-between">
               <div>
-                <dt className="mb-1 text-gray-500 dark:text-gray-400 font-medium uppercase">
+                <dt className="mb-1 text-gray-500 dark:text-[#BDBDBD] font-medium uppercase text-[13px] leading-6">
                   Registers
                 </dt>
-                <dd className="font-mono mb-2 flex gap-1">
+                <dd className="mb-2 flex gap-1">
                   <button
                     onClick={() => {
                       handleRegisterPointerClick(
                         currentTraceEntry?.pc as number,
                       )
                     }}
-                    className="font-mono inline-block border px-2 py-1 mb-1 cursor-pointer rounded-sm break-all text-tiny border-gray-300 dark:border-gray-700 text-gray-500 hover:text-fuchsia-700 hover:border-fuchsia-700"
+                    className=" inline-block border px-2 py-1 mb-1 cursor-pointer rounded-sm break-all text-tiny border-gray-300 dark:border-[#46373A] text-gray-500 dark:text-[#BDBDBD] hover:!text-fuchsia-700 hover:!border-fuchsia-700"
                   >
                     PC: {currentTraceEntry?.pc}
                   </button>
@@ -243,7 +243,7 @@ function DebugInfoTab({
                         currentTraceEntry?.fp as number,
                       )
                     }}
-                    className="font-mono inline-block border px-2 py-1 mb-1 rounded-sm break-all cursor-pointer text-tiny border-gray-300 dark:border-gray-700 text-gray-500 hover:text-green-700 hover:border-green-700"
+                    className=" inline-block border px-2 py-1 mb-1 rounded-sm break-all cursor-pointer text-tiny border-gray-300 dark:border-[#46373A] text-gray-500 dark:text-[#BDBDBD] hover:!text-green-700 hover:!border-green-700"
                   >
                     FP: {currentTraceEntry?.fp}
                   </button>
@@ -253,18 +253,18 @@ function DebugInfoTab({
                         currentTraceEntry?.ap as number,
                       )
                     }}
-                    className="font-mono inline-block border px-2 py-1 mb-1 rounded-sm break-all cursor-pointer text-tiny border-gray-300 dark:border-gray-700 text-gray-500 hover:text-orange-700 hover:border-orange-700"
+                    className="inline-block border px-2 py-1 mb-1 rounded-sm break-all cursor-pointer text-tiny border-gray-300 dark:border-[#46373A] text-gray-500 dark:text-[#BDBDBD] hover:!text-orange-700 hover:!border-orange-700"
                   >
                     AP: {currentTraceEntry?.ap}
                   </button>
                 </dd>
               </div>
               <div>
-                <dt className="mb-1 text-gray-500 dark:text-gray-400 font-medium uppercase">
+                <dt className="mb-1 text-gray-500 dark:text-[#BDBDBD] font-medium uppercase text-[13px] leading-6">
                   Execution steps
                 </dt>
-                <dd className="font-mono mb-2">
-                  <div className="font-mono inline-block border px-2 py-1 mb-1 rounded-sm break-all text-tiny border-gray-300 dark:border-gray-700 text-gray-500">
+                <dd className="mb-2">
+                  <div className="inline-block border px-2 py-1 mb-1 rounded-sm break-all text-tiny border-gray-300 dark:border-[#46373A] text-gray-500 dark:text-[#BDBDBD]">
                     Current: {executionTraceStepNumber + 1}, Total:{' '}
                     {trace?.length}
                   </div>
@@ -273,13 +273,13 @@ function DebugInfoTab({
             </div>
           )}
           <div>
-            <dt className="mb-1 text-gray-500 dark:text-gray-400 font-medium uppercase">
+            <dt className="mb-1 text-gray-500 dark:text-[#BDBDBD] font-medium uppercase text-[13px] leading-6">
               Callstack
             </dt>
             <dd className="font-mono mb-2">
-              <table className="w-full font-mono text-tiny border border-gray-300 dark:border-black-500">
+              <table className="w-full font-mono text-tiny border border-gray-300 dark:border-[#46373A]">
                 <thead>
-                  <tr className="text-left sticky z-[1] top-0 bg-gray-50 dark:bg-black-600 text-gray-400 dark:text-gray-600 border-b border-gray-300 dark:border-black-500">
+                  <tr className="text-left sticky z-[1] top-0 bg-gray-50 dark:bg-darkMode-secondary text-gray-400 dark:text-gray-600 border-b border-gray-300 dark:border-[#46373A]">
                     {debugMode === ProgramDebugMode.Execution && (
                       <>
                         <th className="py-1 px-2 font-thin min-w-16">FP</th>
@@ -308,7 +308,7 @@ function DebugInfoTab({
                       return (
                         <tr
                           key={index}
-                          className="relative border-b border-gray-300 dark:border-black-500 text-gray-400 dark:text-gray-600"
+                          className="relative border-b border-gray-300 dark:border-[#46373A] text-gray-400 dark:text-gray-600"
                         >
                           {debugMode === ProgramDebugMode.Execution && (
                             <>
@@ -554,7 +554,7 @@ const FixedHeader = () => {
     // added fixed width in each column
     // set table-layout = 'fixed' css property in our table element check 'Table' component above
     //
-    <tr className="text-left bg-gray-50 dark:bg-black-600 text-gray-400 dark:text-gray-600 border-b border-gray-200 dark:border-black-500">
+    <tr className="text-left bg-gray-50 dark:bg-darkMode-primary text-gray-400 dark:text-gray-600 border-b border-gray-200 dark:border-black-500">
       <th className="py-1 w-12"></th>
       <th className="py-1 w-10"></th>
       <th className="py-1 w-14"></th>

components/ui/Button.tsx

@@ -41,7 +41,7 @@ export const Button: React.FC<Props> = ({
       className={cn(
         'rounded outline-none inline-block',
         {
-          'bg-indigo-500 hover:bg-indigo-600 text-white active:opacity-50':
+          'bg-[#E85733] hover:bg-[#fa5d36] text-black-900 active:opacity-50':
             !transparent && !outline,
           'cursor-not-allowed opacity-50': disabled,
           'px-4': padded,

pages/_document.tsx

@@ -6,7 +6,7 @@ class MyDocument extends Document {
       <Html lang="en">
         <Head>
           <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
             rel="stylesheet"
           ></link>
         </Head>

styles/globals.css

@@ -46,7 +46,7 @@ html {
  */
 .pane::-webkit-scrollbar,
 .select__menu-list::-webkit-scrollbar {
-  @apply w-2 h-2;
+  @apply w-1 h-1 dark:bg-[#2E3035];
 }
 
 .pane::-webkit-scrollbar-thumb,
@@ -56,11 +56,15 @@ html {
 
 .pane.pane-light::-webkit-scrollbar-thumb,
 .select__menu-list::-webkit-scrollbar-thumb {
-  @apply bg-gray-200/50 hover:bg-gray-300/75 dark:bg-black-500/50 dark:hover:bg-black-400/75;
+  @apply bg-gray-200/50 hover:!bg-gray-300/75 dark:bg-[#6A6C72];
 }
 
 .pane.pane-dark::-webkit-scrollbar-thumb {
-  @apply bg-gray-700/50 hover:bg-gray-600/75 dark:bg-black-600/50 dark:hover:bg-black-500/75;
+  @apply bg-gray-700/50 hover:!bg-gray-600/75 dark:bg-[#6A6C72];
+}
+
+*::-webkit-scrollbar-corner {
+  @apply dark:bg-darkMode-primary;
 }
 
 .pane::-webkit-scrollbar-track,
@@ -107,11 +111,11 @@ html {
 }
 
 .select__single-value {
-  @apply p-0 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white !important;
+  @apply p-0 text-gray-600 hover:text-gray-900 dark:text-darkMode-text dark:hover:text-gray-400 !important;
 }
 
 .select__dropdown-indicator {
-  @apply text-gray-200 dark:text-gray-700 p-0 pr-1 !important;
+  @apply text-gray-200 dark:text-darkMode-text p-0 pr-1 !important;
 }
 
 .select__control--is-focused .select__dropdown-indicator {