Redesign: colors, typography, button backgrounds

walnuthq · Jun 28, 2024 · 90f42ff · 90f42ff
1 parent 8eddfa9
commit 90f42ff
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 42 deletions.
diff --git a/components/Editor/Console.tsx b/components/Editor/Console.tsx
@@ -19,12 +19,12 @@ 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-[16px] text-gray-400 dark:text-darkMode-text">
         {consoleLog.map((log, index) => (
-          <pre key={toKeyIndex('line', index)}>
+          <pre key={toKeyIndex('line', index)} className=" font-ibm-plex-sans">
             {log.type === LogType.Error && (
               <span className="text-red-500">[Error] </span>
             )}

diff --git a/components/Editor/EditorControls.tsx b/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,
           })}

diff --git a/components/Editor/ExampleSelector.tsx b/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' : '',
         )}
       >

diff --git a/components/Editor/ExtraColumn.tsx b/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)}

diff --git a/components/Editor/InstructionsTable.tsx b/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/

diff --git a/components/Editor/cairoLangConfig.ts b/components/Editor/cairoLangConfig.ts
@@ -203,7 +203,7 @@ export function registerCairoLanguageSupport(_monaco: typeof MonacoEditor) {
     colors: {
       'editor.foreground': '#000000',
       'editorCursor.foreground': '#8B0000',
-      'editor.lineHighlightBackground': '#0000FF20',
+      'editor.lineHighlightBackground': '#E8573310',
       'editor.selectionBackground': '#88000030',
       'editor.inactiveSelectionBackground': '#88000015',
     },
@@ -218,7 +218,7 @@ export function registerCairoLanguageSupport(_monaco: typeof MonacoEditor) {
       },
     ],
     colors: {
-      'editor.background': '#141515',
+      'editor.background': '#0F0E0F',
       'editor.lineHighlightBackground': '#1e1e1e',
     },
   })

diff --git a/components/Editor/index.tsx b/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-ibm-plex-sans 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',
             )}
           >

diff --git a/components/Tracer/ExecutionStatus.tsx b/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>

diff --git a/components/Tracer/index.tsx b/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,7 +273,7 @@ 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">
@@ -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>

diff --git a/components/ui/Button.tsx b/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,

diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
@@ -59,7 +59,7 @@ export const Input: React.FC<Props> = forwardRef(
           onFocus={handleFocus}
           onBlur={handleBlur}
           onInput={handleInput}
-          className={`${inputClassName} w-full outline-none bg-transparent dark:placeholder-black-100`}
+          className={`${inputClassName} w-full outline-none bg-transparent placeholder-[#E85733] dark:placeholder-[#FFCDD2] placeholder:text-center`}
           {...rest}
         />
         {searchable && (

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -9,6 +9,10 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
             rel="stylesheet"
           ></link>
+          <link
+            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>
         <body className="dark:bg-black-800 dark:text-gray-200">
           <Main />

diff --git a/styles/globals.css b/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 {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
       serif: ['Inter', 'sans-serif'],
       sans: ['Inter', 'sans-serif'],
       mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;',
+      'ibm-plex-sans': ['IBM Plex Sans', 'sans-serif'],
     },
     extend: {
       fontSize: {
@@ -25,6 +26,12 @@ module.exports = {
           500: '#1B1B1B',
           400: '#2F2F2F',
         },
+        darkMode: {
+          primary: '#0F0E0F',
+          secondary: '#1C1E22',
+          icons: '#CACBD4',
+          text: '#EEEEEE',
+        },
       },
     },
   },