Polish entire app and introduce dark/light themes

- Fine-tune app colors, font weights, paddings, etc. - Polish command center - Add dark/light theme detection and storing in localstorage - Optimize app for dark theme - Add dark theme code highlighting to code editor - Polish logo - Improve text readability - Add tooltips Misc: - New UI components: Hamburger, Label Closes #24 #26
duneanalytics · Nov 7, 2021 · 35080dd · 35080dd
1 parent 2073c2c
commit 35080dd
Show file tree

Hide file tree

Showing 45 changed files with 602 additions and 403 deletions.
diff --git a/components/ChainSelector.tsx b/components/ChainSelector.tsx
@@ -9,7 +9,6 @@ import { SettingsContext, Setting } from 'context/settingsContext'
 import { toKeyIndex } from 'util/string'
 
 import { Icon } from 'components/ui'
-import { baseSelectStyles } from 'components/ui/reactSelectStyles'
 
 const ChainSelector = () => {
   const { settingsLoaded, getSetting, setSetting } = useContext(SettingsContext)
@@ -84,18 +83,15 @@ const ChainSelector = () => {
   return (
     <div className="flex justify-end items-center rounded">
       {forks.length > 0 && (
-        <div className="flex items-center">
-          <Icon name="git-branch-line" className="text-gray-400 mr-2" />
+        <div className="flex items-center mr-4">
+          <Icon name="git-branch-line" className="text-indigo-500 mr-2" />
 
           <Select
             onChange={handleForkChange}
             options={forkOptions}
             value={forkValue}
-            className="capitalize text-sm font-medium"
-            // @ts-ignore: React-select does not have types for all styles
-            styles={baseSelectStyles}
-            menuWidth={160}
             isSearchable={false}
+            classNamePrefix="select"
           />
         </div>
       )}

diff --git a/components/Editor/Console.tsx b/components/Editor/Console.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 const Console = ({ output }: Props) => {
   return (
-    <div className="px-4 font-mono text-tiny">
+    <div className="px-4 pt-2 leading-5 font-mono text-tiny text-gray-400 dark:text-gray-500">
       {output.map((log, index) => (
         <pre key={toKeyIndex('line', index)}>
           {log.type === 'error' && (

diff --git a/components/Editor/ExecutionState.tsx b/components/Editor/ExecutionState.tsx
@@ -23,15 +23,19 @@ const ExecutionStateRow = ({ label, value }: RowProps) => {
 
   return (
     <>
-      <dt className="mb-1 text-gray-400 font-medium uppercase">{label}</dt>
+      <dt className="mb-1 text-gray-500 dark:text-gray-700 font-medium uppercase">
+        {label}
+      </dt>
       <dd className="font-mono mb-2">
         {values.map((value: string, index: number) => (
           <StackBox
             key={toKeyIndex(label, index)}
             isFullWidth
             showEmpty
             value={value ? value.toString() : ''}
-            className={cn('break-all border-gray-600')}
+            className={cn(
+              'break-all text-tiny border-gray-600 dark:border-gray-700 text-gray-300 dark:text-gray-400',
+            )}
           />
         ))}
       </dd>
@@ -49,10 +53,12 @@ const ExecutionState = () => {
         <ExecutionStateRow label="Memory" value={memory} />
         <ExecutionStateRow label="Stack" value={stack} />
 
-        <dt className="mb-1 text-gray-400 font-medium uppercase">Storage</dt>
+        <dt className="mb-1 text-gray-500 dark:text-gray-700 font-medium uppercase">
+          Storage
+        </dt>
         <dd>
           <div
-            className="inline-block border border-gray-600 px-2 py-1 mb-1 w-full"
+            className="inline-block border border-gray-600 dark:border-gray-700 px-2 py-1 mb-1 w-full"
             style={{ minHeight: 26 }}
           >
             <dl>

diff --git a/components/Editor/ExecutionStatus.tsx b/components/Editor/ExecutionStatus.tsx
@@ -37,14 +37,14 @@ const ExecutionStatus = () => {
   useRegisterActions(actions)
 
   return (
-    <div className="flex flex-grow justify-between items-center">
+    <div className="flex flex-grow justify-between items-center text-sm">
       <dl>
-        <dd className="inline-block mr-2 text-gray-400">
-          <Icon name="gas-station-fill" />
+        <dd className="inline-block ml-1 mr-2 text-gray-400">
+          <Icon name="gas-station-fill" className="text-indigo-500" />
         </dd>
-        <dd className="inline-block mr-1 text-gray-400 text-sm">Current:</dd>
+        <dd className="inline-block mr-1 text-gray-500 text-sm">Current:</dd>
         <dt className="inline-block mr-4">{executionState.currentGas}</dt>
-        <dd className="inline-block mr-1 text-gray-400 text-sm">Total:</dd>
+        <dd className="inline-block mr-1 text-gray-500 text-sm">Total:</dd>
         <dt className="inline-block mr-4">{executionState.totalGas}</dt>
       </dl>
 
@@ -55,17 +55,21 @@ const ExecutionStatus = () => {
           onClick={nextExecution}
           padded={false}
           className="mr-4"
+          tooltip="Step into"
+          tooltipId="step"
         >
-          <Icon name="arrow-go-forward-line" />
+          <Icon name="arrow-go-forward-line" className="text-indigo-500" />
         </Button>
 
         <Button
           transparent
           disabled={!isExecuting}
           onClick={continueExecution}
           padded={false}
+          tooltip="Continue execution"
+          tooltipId="continue"
         >
-          <Icon name="play-circle-line" />
+          <Icon name="play-circle-line" className="text-indigo-500" />
         </Button>
       </div>
     </div>

diff --git a/components/Editor/Header.tsx b/components/Editor/Header.tsx
@@ -4,7 +4,7 @@ import { useRegisterActions } from 'kbar'
 
 import { EthereumContext } from 'context/ethereumContext'
 
-import { Button, Radio } from 'components/ui'
+import { Button, Radio, Label } from 'components/ui'
 
 import { CodeType } from './types'
 
@@ -21,7 +21,7 @@ const EditorHeader = ({
   onRun,
   isRunDisabled,
 }: Props) => {
-  const { selectedChain, selectedFork } = useContext(EthereumContext)
+  const { selectedFork } = useContext(EthereumContext)
 
   const actions = useMemo(
     () => [
@@ -41,12 +41,10 @@ const EditorHeader = ({
   useRegisterActions(actions)
 
   return (
-    <div className="flex justify-between items-center">
+    <div className="flex justify-between items-center w-full">
       <h3 className="font-semibold text-md hidden xl:block">
-        Running on {selectedChain?.name}{' '}
-        <span className="capitalize text-sm text-gray-700 font-medium px-1">
-          {selectedFork}
-        </span>
+        EVM Playground
+        <Label>{selectedFork}</Label>
       </h3>
 
       <div className="flex items-center justify-between w-full xl:w-auto">

diff --git a/components/Editor/InstructionRow.tsx b/components/Editor/InstructionRow.tsx
@@ -40,10 +40,13 @@ const EditorInstructionRow = forwardRef(
       <tr
         onMouseEnter={() => setIsBreakpointVisible(true)}
         onMouseLeave={() => !hasBreakpoint && setIsBreakpointVisible(false)}
-        className={cn('relative border-b border-gray-200', {
-          'text-gray-900': isActive,
-          'text-gray-400': !isActive,
-        })}
+        className={cn(
+          'relative border-b border-gray-200 dark:border-black-500',
+          {
+            'text-gray-900 dark:text-gray-200': isActive,
+            'text-gray-400 dark:text-gray-700': !isActive,
+          },
+        )}
         ref={ref}
       >
         <td className="py-1 pl-6 pr-6">

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
@@ -187,10 +187,10 @@ const Editor = ({ readOnly = false }: Props) => {
   const isBytecode = useMemo(() => codeType === CodeType.Bytecode, [codeType])
 
   return (
-    <div className="bg-gray-200 rounded-lg">
+    <div className="bg-gray-100 dark:bg-black-700 rounded-lg">
       <div className="flex flex-col md:flex-row">
         <div className="w-full md:w-1/2">
-          <div className="border-gray-300 px-6 h-8 my-3 md:border-r">
+          <div className="border-b border-gray-200 dark:border-black-500 flex items-center px-6 h-14 md:border-r">
             <Header
               isBytecode={isBytecode}
               isRunDisabled={isRunDisabled}
@@ -200,7 +200,7 @@ const Editor = ({ readOnly = false }: Props) => {
           </div>
 
           <div
-            className="relative pane pane-light overflow-auto md:border-r bg-gray-100 border-gray-200"
+            className="relative pane pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500"
             style={{ height: editorHeight }}
           >
             <SCEditor
@@ -219,12 +219,12 @@ const Editor = ({ readOnly = false }: Props) => {
         </div>
 
         <div className="w-full md:w-1/2">
-          <div className="flex items-center pl-4 pr-6 my-3 h-8">
+          <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">
             <ExecutionStatus />
           </div>
 
           <div
-            className="pane pane-light overflow-auto bg-gray-100"
+            className="pane pane-light overflow-auto bg-gray-50 dark:bg-black-600"
             style={{ height: editorHeight }}
             ref={instructionsRef}
           >
@@ -236,27 +236,24 @@ const Editor = ({ readOnly = false }: Props) => {
       <div className="flex flex-col md:flex-row-reverse">
         <div className="w-full md:w-1/2">
           <div
-            className="pane pane-dark overflow-auto bg-gray-700 text-white px-4 py-3"
+            className="pane pane-dark overflow-auto border-t border-black-900 border-opacity-25 bg-gray-800 dark:bg-black-700 text-white px-4 py-3"
             style={{ height: consoleHeight }}
           >
             <ExecutionState />
           </div>
         </div>
         <div className="w-full md:w-1/2">
           <div
-            className="pane pane-dark overflow-auto bg-gray-700 text-white border-t border-gray-800 border-opacity-25 md:border-r"
+            className="pane pane-dark overflow-auto bg-gray-800 dark:bg-black-700 text-white border-t border-black-900 border-opacity-25 md:border-r"
             style={{ height: consoleHeight }}
           >
             <Console output={output} />
           </div>
         </div>
       </div>
 
-      <div className="rounded-b-lg py-2 px-4 border-t bg-gray-700 border-gray-800 border-opacity-25 text-gray-400 text-xs text-right">
-        {
-          // TODO: Add editor prefs
-        }
-        Here will be editor prefs: Tab size, LOC, theme, etc.
+      <div className="rounded-b-lg py-2 px-4 border-t bg-gray-800 dark:bg-black-700 border-black-900 border-opacity-25 text-gray-400 dark:text-gray-600 text-xs">
+        Solidity Compiler {compilerVersion}
       </div>
     </div>
   )

diff --git a/components/KBar/Button.tsx b/components/KBar/Button.tsx
@@ -0,0 +1,25 @@
+import { useKBar } from 'kbar'
+
+import { isMac } from 'util/browser'
+
+import { Button, Icon } from 'components/ui'
+
+const KBarButton = () => {
+  const { query } = useKBar()
+
+  return (
+    <Button
+      size="xs"
+      onClick={query.toggle}
+      className="mx-4 py-1 px-2 font-medium"
+      transparent
+      outline
+      padded={false}
+    >
+      {isMac && <Icon name="command-line" className="mr-1" />}
+      {isMac ? <span>K</span> : <span>Ctrl + K</span>}
+    </Button>
+  )
+}
+
+export default KBarButton
diff --git a/components/KBar/ResultItem.tsx b/components/KBar/ResultItem.tsx
@@ -16,25 +16,30 @@ const ResultItem = forwardRef(
         className={cn(
           'flex items-center justify-between cursor-pointer py-3 px-4 border-l-2',
           {
-            'bg-gray-100 border-black': active,
-            'bg-white border-transparent': !active,
+            'bg-gray-50 dark:bg-black-500 border-indigo-500': active,
+            'bg-white dark:bg-black-600 border-transparent': !active,
           },
         )}
       >
         <div className="flex items-center">
           {action.icon && <span className="mr-4">{action.icon}</span>}
           <div className="flex flex-col">
-            <span className="capitalize">{action.name}</span>
+            <span className="capitalize text-gray-900 dark:text-gray-200">
+              {action.name}
+            </span>
             {action.subtitle && (
-              <span className="text-xs">{action.subtitle}</span>
+              <span className="text-xs text-gray-600">{action.subtitle}</span>
             )}
           </div>
         </div>
 
         {action.shortcut?.length ? (
           <div className="grid gap-1 grid-flow-col">
             {action.shortcut.map((sc) => (
-              <kbd key={sc} className="box-border py px-1 bg-gray-200 rounded">
+              <kbd
+                key={sc}
+                className="box-border py px-1 bg-gray-100 dark:bg-black-400 text-indigo-500 rounded"
+              >
                 {sc}
               </kbd>
             ))}

diff --git a/components/KBar/Results.tsx b/components/KBar/Results.tsx
@@ -23,7 +23,7 @@ const Results = () => {
       items={flattened.filter((i: string) => i !== NO_GROUP)}
       onRender={({ item, active }) =>
         typeof item === 'string' ? (
-          <div className="px-4 py-2 text-2xs uppercase opacity-50 bg-white">
+          <div className="px-4 py-2 text-2xs uppercase text-gray-400 dark:text-gray-600 bg-white dark:bg-black-600">
             {item}
           </div>
         ) : (

diff --git a/components/KBar/index.tsx b/components/KBar/index.tsx
@@ -6,9 +6,9 @@ const KBar = () => {
   return (
     <KBarPortal>
       <KBarPositioner className="inset-0">
-        <KBarAnimator className="shadow-lg overflow-hidden rounded-md text-black bg-white w-full max-w-xl border border-gray-200">
+        <KBarAnimator className="shadow-lg overflow-hidden rounded-md text-gray-800 dark:text-gray-400 bg-white dark:bg-black-600 w-full max-w-xl border border-gray-200 dark:border-black-700 text-sm">
           <KBarSearch
-            className="w-full border-0 outline-none bg-white text-black font-sm px-4 py-3 border-box"
+            className="w-full border-0 outline-none bg-white dark:bg-black-600 text-gray-800 dark:text-gray-100 font-sm px-4 py-4 border-box"
             placeholder="Type a command or search…"
           />
           <Results />

diff --git a/components/NavLink.tsx b/components/NavLink.tsx
@@ -19,7 +19,7 @@ const NavLink: React.FC<Props> = ({
   return (
     <li
       className={cn(
-        'inline-block mx-4 uppercase font-semibold text-tiny my-2 md:my-0',
+        'inline-block mx-4 text-sm my-2 md:my-0 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',
         className,
       )}
     >

diff --git a/components/Reference/DocRow.tsx b/components/Reference/DocRow.tsx
@@ -24,16 +24,16 @@ const docComponents = {
   a: Doc.A,
 }
 
-const colClassName = 'py-1 px-2 border border-gray-400'
+const colClassName = 'py-1 px-2 border border-indigo-200 dark:border-black-400'
 
 const DocRow = ({ opcode }: Props) => {
   return (
-    <div className="text-sm px-4 py-4 bg-yellow-100">
+    <div className="text-sm px-8 py-8 bg-indigo-50 dark:bg-black-600">
       {opcode && (
         <>
           <table className="table-auto mb-4">
             <thead>
-              <tr>
+              <tr className="text-xs">
                 <td className={cn('font-medium', colClassName)}>
                   Appeared in fork
                 </td>

diff --git a/components/Reference/Header.tsx b/components/Reference/Header.tsx
@@ -2,22 +2,16 @@ import { useContext } from 'react'
 
 import { EthereumContext } from 'context/ethereumContext'
 
-import { H2 } from 'components/ui'
+import { H2, Label } from 'components/ui'
 
 const ReferenceHeader = () => {
-  const { selectedChain, selectedFork } = useContext(EthereumContext)
+  const { selectedFork } = useContext(EthereumContext)
 
   return (
-    <div className="pb-6 md:pb-0">
-      <H2>Instructions reference</H2>
-
-      <h3 className="font-medium text-md">
-        {selectedChain?.name}{' '}
-        <span className="capitalize text-sm text-gray-700 font-medium px-1">
-          {selectedFork}
-        </span>
-      </h3>
-    </div>
+    <H2 className="pb-6 md:pb-4">
+      Instructions Reference
+      <Label>{selectedFork}</Label>
+    </H2>
   )
 }