make some ui changes (#129)

src/global.css

@@ -31,6 +31,7 @@
     --chart-5: 27 87% 67%;
     --graph: #3f3f46;
     --graph-group: #a1a1aa;
+    --graph-bg: #fafafa;
   }
 
   .dark {
@@ -60,6 +61,7 @@
     --chart-5: 340 75% 55%;
     --graph: #d4d4d8;
     --graph-group: #52525b;
+    --graph-bg: #111111;
   }
 }
 

src/modules/editor/legend-tab.tsx

@@ -4,7 +4,7 @@ import legends from './legends'
 function Legend() {
   const { t } = useTranslation()
   return (
-    <div className="divide-y-2 *:py-4 first:*:pt-0 last:*:pb-0">
+    <div className="divide-y *:py-4 first:*:pt-0 last:*:pb-0">
       {/* TODO move the tip to the graph */}
       {/* <div className="tip">
           <ArrowLeftCircle size={14} />

src/modules/home/index.tsx

@@ -123,7 +123,7 @@ function Home() {
     <div
       className="flex-1 flex min-h-0"
     >
-      <div className={clsx('flex-1 relative flex flex-col min-w-0', { 'justify-center': !graphShow })}>
+      <div className={clsx('flex-1 relative flex flex-col min-w-0 bg-graph-bg', { 'justify-center': !graphShow })}>
         {graphShow && (
           <ScrollArea className="flex-1 min-h-0 h-full">
             <div className="flex items-center justify-center p-8 h-full">

src/modules/samples/index.tsx

@@ -37,8 +37,8 @@ function Samples() {
   const { t } = useTranslation()
   return (
     <ScrollArea className="flex-1">
-      <div>
-        <div className="max-w-7xl my-0 mx-auto p-6 flex flex-col space-y-12">
+      <div className="bg-graph-bg">
+        <div className="max-w-7xl my-0 mx-auto p-6 flex flex-col space-y-14">
           {samples.map(({ desc, label, regex }) => {
             const linkTo = `/?r=${encodeURIComponent(`/${regex}/`)}`
             return (

tailwind.config.ts

@@ -55,6 +55,7 @@ export default {
         },
         'graph': 'var(--graph)',
         'graph-group': 'var(--graph-group)',
+        'graph-bg': 'var(--graph-bg)',
       },
       borderRadius: {
         lg: 'var(--radius)',