acorn1010 · Fernando-J-Garcia · May 9, 2023
diff --git a/client/index.html b/client/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" style="background-color: #09090b" data-theme="dark">
+<html lang="en" style="background-color: #0f172a" data-theme="dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- zinc-950 -->
+    <!-- slate-900 -->
     <meta name="theme-color" content="#09090b" />
     <meta name="color-scheme" content="dark" />
     <title>RenderMy.Site - Dynamic Rendering for JavaScript Websites</title>

diff --git a/client/src/components/base/blocks/CodeBlock.tsx b/client/src/components/base/blocks/CodeBlock.tsx
@@ -17,9 +17,9 @@ export function CodeBlock({classes, code, language}: CodeBlockProps) {
 
   return (
       <div className={classes?.root}>
-        <div className='flex items-center justify-between bg-gray-700 py-2 px-4 rounded-t-md'>
+        <div className='flex items-center justify-between bg-slate-700 py-2 px-4 rounded-t-md'>
           <p>{language}</p>
-          <CopyButton className='text-gray-100 hover:bg-gray-600 active:bg-gray-800' value={code} />
+          <CopyButton className='text-slate-100 hover:bg-slate-600 active:bg-slate-800' value={code} />
         </div>
         <pre className={cn('!rounded-t-none !mt-0', classes?.pre)}>
           <code className={cn(`language-${language}`, classes?.code)} ref={codeRef}>{code}</code>

diff --git a/client/src/components/base/buttons/IconButton.tsx b/client/src/components/base/buttons/IconButton.tsx
@@ -20,7 +20,7 @@ const iconStyle = cn`
   text-zinc-500
 
   cursor-pointer
-  hover:bg-zinc-800
+  hover:bg-slate-800
   hover:text-white
-  active:bg-zinc-900
+  active:bg-slate-900
 `;
diff --git a/client/src/components/base/loading/Skeleton.tsx b/client/src/components/base/loading/Skeleton.tsx
@@ -2,5 +2,5 @@ import {cn} from "@/lib/utils";
 
 /** Provides a simple rectangular skeleton for use when a component is loading. */
 export function Skeleton({className}: { className?: string }) {
-  return <div className={cn('h-8 w-full animate-pulse rounded-md bg-zinc-700', className)} />;
+  return <div className={cn('h-8 w-full animate-pulse rounded-md bg-slate-700', className)} />;
 }
diff --git a/client/src/components/base/nav/Navbar.tsx b/client/src/components/base/nav/Navbar.tsx
@@ -12,7 +12,7 @@ import {cn} from "@/lib/utils";
 
 export function Navbar({className}: {className?: string}) {
   return (
-      <nav className={cn('flex px-4 py-2 bg-gray-900', className)}>
+      <nav className={cn('flex px-4 py-2 bg-slate-900', className)}>
         <span className='grow' />
         <ProfileAvatar />
       </nav>

diff --git a/client/src/components/base/nav/Sidebar.tsx b/client/src/components/base/nav/Sidebar.tsx
@@ -14,13 +14,13 @@ const docs = [
 
 export function Sidebar() {
   return (
-      <div className="flex grow flex-col items-center overflow-y-auto bg-gray-800 min-w-[64px] w-16 lg:w-56 lg:min-w-[224px]">
-        <div className="flex-center h-14 shrink-0 bg-gray-950 w-full z-10">
+      <div className="flex grow flex-col items-center overflow-y-auto bg-slate-900/50 min-w-[64px] w-16 lg:w-56 lg:min-w-[224px] from-slate-950/30 bg-gradient-to-t border-r border-slate-800/50 shadow">
+        <div className="flex-center h-14 shrink-0 w-full z-10">
           <img
               className="h-8 w-auto"
               src="https://tailwindui.com/img/logos/mark.svg?color=blue&shade=500"
               alt="Created by Acorn1010"
-          />
+              />
         </div>
         <nav className="flex flex-1 flex-col w-full z-10 relative overflow-hidden pt-5">
           <Background />
@@ -52,9 +52,9 @@ function NavLink({name, to, icon: Icon}: NavLinkProps) {
             to={to}
             className={cn(
                 isCurrent
-                    ? 'bg-gray-600 text-white active:bg-gray-900'
-                    : 'text-gray-300 hover:text-white hover:bg-lighten active:bg-darken',
-                'group flex justify-center lg:justify-start gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold whitespace-nowrap'
+                    ? 'bg-slate-700/70 active:bg-slate-800 text-white'
+                    : 'text-gray-300 hover:text-white hover:bg-slate-700/30 active:bg-slate-700/20',
+                'group flex justify-center lg:justify-start gap-x-3 rounded-md p-2 text-sm leading-6 font-normal whitespace-nowrap'
             )}
         >
           <Icon className="h-6 w-6 shrink-0" aria-hidden="true" />
@@ -73,9 +73,9 @@ function BottomNavLink({name, to, icon: Icon}: NavLinkProps) {
             to={to}
             className={cn(
                 isCurrent
-                    ? 'bg-gray-600 text-white active:bg-gray-900'
-                    : 'text-white hover:bg-gray-700 active:bg-gray-900',
-                'group flex-center py-3 gap-x-4 text-base leading-6 font-semibold whitespace-nowrap'
+                    ? 'bg-slate-700/70 text-white active:bg-slate-800'
+                    : 'text-white hover:bg-slate-700/30 active:bg-slate-700',
+                'group flex-center py-3 gap-x-4 text-base leading-6 font-normal whitespace-nowrap'
             )}
         >
           <Icon className={cn("h-6 w-6 shrink-0", !isCurrent && 'group-hover:animate-spin')} aria-hidden="true" />
@@ -88,7 +88,7 @@ function BottomNavLink({name, to, icon: Icon}: NavLinkProps) {
 function Background() {
   return (
       <>
-        <div className='bg-transparent absolute pointer-events-none rotate-[11.25deg] origin-top-left left-full top-0 w-[300%] h-[150%] opacity-50 from-gray-700 bg-gradient-to-b' />
+        <div className='bg-transparent absolute pointer-events-none origin-top-left left-full top-0 w-[300%] h-[150%] opacity-50 from-slate-700 bg-gradient-to-b' />
       </>
   );
 }
diff --git a/client/src/components/cards/DashboardCard.tsx b/client/src/components/cards/DashboardCard.tsx
@@ -3,7 +3,7 @@ import {cn} from "@/lib/utils";
 
 export function DashboardCard({children, className}: PropsWithChildren<{className?: string}>) {
   return (
-      <div className={cn('lg:m-4 bg-zinc-900 p-4 rounded min-w-0', className)}>
+      <div className={cn('lg:m-4 bg-slate-800/50 border border-slate-800 shadow p-4 rounded min-w-0', className)}>
         {children}
       </div>
   );

diff --git a/client/src/components/tables/SortedTable.tsx b/client/src/components/tables/SortedTable.tsx
@@ -40,50 +40,52 @@ export function SortableTable<T extends {[key: string]: number | string}>(props:
       <div className="mt-8 flow-root">
         <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-            <table className="min-w-full divide-y divide-gray-300 rounded overflow-hidden">
-              <thead className='bg-gray-800'>
-                <tr>
-                  {keys.map(key => (
-                      <th key={key as string} scope="col" className="p-2 text-left text-sm font-semibold text-gray-300">
-                        <button onClick={() => setSort(prevState => {
-                          const prev = prevState ?? {column: keys[0], dir: 'asc'};
-                          if (prev?.column === key) {
-                            return {column: key, dir: prev.dir === 'asc' ? 'desc' : 'asc'};
-                          }
-                          return {column: key, dir: 'asc'};
-                        })} className={cn(
-                            "group inline-flex hover:bg-gray-700 active:bg-gray-700 py-2 px-4 rounded",
-                            sort?.column === key && 'text-gray-50'
-                        )}>
-                          {key as string}
-                          <span className={cn(
-                              "flex-none rounded",
-                              sort?.column === key
-                                  ? 'text-gray-100 bg-gray-700 p-1 -m-1 ml-1'
-                                  : 'ml-2 text-gray-400 invisible group-hover:visible group-focus:visible',
+            <div className="rounded overflow-hidden border border-slate-800">
+              <table className="min-w-full divide-y divide-gray-700">
+                <thead className='bg-slate-800'>
+                  <tr>
+                    {keys.map(key => (
+                        <th key={key as string} scope="col" className="p-2 text-left text-sm font-semibold text-gray-300">
+                          <button onClick={() => setSort(prevState => {
+                            const prev = prevState ?? {column: keys[0], dir: 'asc'};
+                            if (prev?.column === key) {
+                              return {column: key, dir: prev.dir === 'asc' ? 'desc' : 'asc'};
+                            }
+                            return {column: key, dir: 'asc'};
+                          })} className={cn(
+                              "group inline-flex hover:bg-slate-700 active:bg-slate-700 py-2 px-4 rounded",
+                              sort?.column === key && 'text-gray-50'
                           )}>
-                              {sort?.column === key && sort.dir === 'asc'
-                                  ? <FaChevronDown className="h-5 w-5" aria-hidden="true" />
-                                  : <FaChevronUp className="h-5 w-5" aria-hidden="true" />}
-                            </span>
-                        </button>
-                      </th>
+                            {key as string}
+                            <span className={cn(
+                                "flex-none rounded",
+                                sort?.column === key
+                                    ? 'text-gray-100 bg-slate-700 p-1 -m-1 ml-1'
+                                    : 'ml-2 text-gray-400 invisible group-hover:visible group-focus:visible',
+                            )}>
+                                {sort?.column === key && sort.dir === 'asc'
+                                    ? <FaChevronDown className="h-4 w-4" aria-hidden="true" />
+                                    : <FaChevronUp className="h-4 w-4" aria-hidden="true" />}
+                              </span>
+                          </button>
+                        </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-800 bg-slate-900">
+                  {rows.map((row, idx) => (
+                      <tr
+                          className={cn(idx % 2 === 0 && 'bg-slate-800/30', 'hover:bg-slate-800')}
+                          key={idx + '_' + page * RESULTS_PER_PAGE + '_' + JSON.stringify(row)}>
+                        {Object.entries(row).map(([column, value]) =>
+                            <td className='p-2 pl-6 text-gray-100' key={column}>
+                              {typeof value === 'number' ? localizeNumber(value) : value}
+                            </td>)}
+                      </tr>
                   ))}
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-800 bg-gray-900">
-                {rows.map((row, idx) => (
-                    <tr
-                        className={cn(idx % 2 === 0 && 'bg-gray-800/30', 'hover:bg-gray-800')}
-                        key={idx + '_' + page * RESULTS_PER_PAGE + '_' + JSON.stringify(row)}>
-                      {Object.entries(row).map(([column, value]) =>
-                          <td className='p-2 pl-6 text-gray-100' key={column}>
-                            {typeof value === 'number' ? localizeNumber(value) : value}
-                          </td>)}
-                    </tr>
-                ))}
-              </tbody>
-            </table>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>

diff --git a/client/src/pages/dashboard/GettingStartedPage.tsx b/client/src/pages/dashboard/GettingStartedPage.tsx
@@ -24,11 +24,11 @@ export default function GettingStartedPage() {
         <h2 className='text-2xl mt-6 text-center'>Steps</h2>
         <ol className='flex flex-col gap-2 list-decimal m-4 [&_*::marker]:text-zinc-500'>
           <li>Open your <a className='text-blue-400 hover:text-blue-300' href='https://dash.cloudflare.com' target='_blank'>CloudFlare dashboard</a>.</li>
-          <li>Go to <span className='bg-zinc-800 p-1 rounded'>{'Workers > Overview'}</span>.</li>
+          <li>Go to <span className='bg-slate-700 p-1 px-2 rounded'>{'Workers > Overview'}</span>.</li>
           <li>Click on <FakeCloudflareButton text='Create a Service' />.</li>
           <li>Give your service a name you'll remember (e.g. <StringText text='"spa-seo"' />), then click <FakeCloudflareButton text='Create service' />.</li>
           <li>Click on Triggers then <FakeCloudflareButton text='Add route' />.</li>
-          <li>Add your route (e.g. <span className='bg-zinc-800 p-1 rounded'>example.com/*</span>)</li>
+          <li>Add your route (e.g. <span className='bg-slate-700 p-1 px-2 rounded-md'>example.com/*</span>)</li>
           <li>Now click on <FakeCloudflareButton text='Quick edit' /> in the top-right.</li>
           <li>
             <span>Paste the following worker script{tokenText}:</span>
@@ -55,7 +55,7 @@ export default function GettingStartedPage() {
 }
 
 function FakeCloudflareButton({text}: {text: string}) {
-  return <span className='bg-blue-900 p-1 rounded'>{text}</span>;
+  return <span className='bg-blue-600 p-1 px-2 rounded-md'>{text}</span>;
 }
 
 function StringText({text}: {text: string}) {