small changes of borders , text and padding

walnuthq · Apr 24, 2024 · ff4a418 · ff4a418
1 parent 085875c
commit ff4a418
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 43 deletions.
diff --git a/components/Editor/Console.tsx b/components/Editor/Console.tsx
@@ -18,22 +18,25 @@ const Console = () => {
   }, [consoleLog])
 
   return (
-    <div
-      ref={container}
-      className="px-4 pb-2 leading-5 font-mono text-tiny text-gray-400 dark:text-gray-500"
-    >
-      {consoleLog.map((log, index) => (
-        <pre key={toKeyIndex('line', index)}>
-          {log.type === LogType.Error && (
-            <span className="text-red-500">[Error] </span>
-          )}
-          {log.type === LogType.Warn && (
-            <span className="text-yellow-500">[Warn] </span>
-          )}
-          {log.message}
-        </pre>
-      ))}
-      <div ref={endDiv}></div>
+    <div className='p-4'>
+      <p className='text-gray-500 dark:text-gray-400 font-medium uppercase text-2xs'>Console</p>
+      <div
+        ref={container}
+        className="leading-5 font-mono text-tiny text-gray-400 dark:text-gray-500"
+      >
+        {consoleLog.map((log, index) => (
+          <pre key={toKeyIndex('line', index)}>
+            {log.type === LogType.Error && (
+              <span className="text-red-500">[Error] </span>
+            )}
+            {log.type === LogType.Warn && (
+              <span className="text-yellow-500">[Warn] </span>
+            )}
+            {log.message}
+          </pre>
+        ))}
+        <div ref={endDiv}></div>
+      </div>
     </div>
   )
 }

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
@@ -393,7 +393,7 @@ 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-6 pr-2 h-14 flex-none md:border-r justify-between">
+                <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">
                   <Header
                     codeType={codeType}
                     onCodeTypeChange={({ value }) => setCodeType(value)}
@@ -482,20 +482,9 @@ const Editor = ({ readOnly = false }: Props) => {
             </div>
             <div
               className={cn(
-                'h-[22vh] border-r border-t pane pane-light overflow-auto pb-4',
+                'h-[22vh] border-r border-t pane pane-light overflow-auto border-gray-200 dark:border-black-500',
               )}
             >
-              <div className="px-4">
-                <nav className="-mb-px flex space-x-8" aria-label="Tabs">
-                  <div
-                    className={cn(
-                      'text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
-                    )}
-                  >
-                    Console
-                  </div>
-                </nav>
-              </div>
               <Console />
             </div>
           </div>

diff --git a/components/Tracer/index.tsx b/components/Tracer/index.tsx
@@ -140,7 +140,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-6 h-14 flex-none">
+      <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">
         <ExecutionStatus
           onStepIn={stepIn}
           onStepOut={stepOut}
@@ -173,18 +173,7 @@ export const Tracer = () => {
         </div>
       )}
 
-      <div className="border-gray-200 border-t dark:border-black-500 flex-none pane pane-light overflow-auto pb-4 h-[22vh]">
-        <div className="px-4">
-          <nav className="-mb-px flex space-x-8" aria-label="Tabs">
-            <div
-              className={cn(
-                'text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
-              )}
-            >
-              Debug Info
-            </div>
-          </nav>
-        </div>
+      <div className="border-gray-200 border-t dark:border-black-500 flex-none pane pane-light overflow-auto h-[22vh]">
         <DebugInfoTab
           trace={trace}
           currentTraceEntry={currentTraceEntry}
@@ -211,7 +200,7 @@ function DebugInfoTab({
   handleRegisterPointerClick: (num: number) => void
 }) {
   return (
-    <div className="px-4 pb-4">
+    <div className="p-4">
       {trace === undefined ? (
         <p className="text-mono text-tiny text-gray-400 dark:text-gray-500">
           Run the app to get debug info