From f32bb6a3106bcbfb2b7083355dbe736b17a1ce78 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 30 Nov 2020 15:55:01 +0800
Subject: [PATCH] Add new shade of black and update articlethumb cards

---
 www/components/AdminAccess/index.tsx          | 20 +++---
 www/components/ArticleThumb.tsx               | 69 +++++++++----------
 www/components/Benchmark/index.tsx            |  4 +-
 www/components/BuiltWithSupabase/index.tsx    |  4 +-
 www/components/CaseStudies/index.tsx          |  4 +-
 www/components/Features/index.tsx             |  4 +-
 www/components/Footer/index.tsx               |  2 +-
 .../MadeForDevelopers/CodeExamples.tsx        | 10 +--
 www/components/MadeForDevelopers/index.tsx    | 14 ++--
 www/components/Nav/index.tsx                  |  2 +-
 www/components/hero.tsx                       | 11 +--
 www/tailwind.config.js                        | 10 +--
 12 files changed, 72 insertions(+), 82 deletions(-)

diff --git a/www/components/AdminAccess/index.tsx b/www/components/AdminAccess/index.tsx
index b4b8039a7e1..01c314e8b5b 100644
--- a/www/components/AdminAccess/index.tsx
+++ b/www/components/AdminAccess/index.tsx
@@ -6,7 +6,7 @@ const AdminAccess = () => {
   const [tabId, setTabId] = useState('tabTableEditor')
 
   return (
-    <div className="py-16 bg-gray-50 dark:bg-dark-100 overflow-hidden lg:py-24">
+    <div className="py-16 bg-gray-50 dark:bg-dark-200 overflow-hidden lg:py-24">
       <div className="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
         <div className="relative items-center">
           <div className="relative">
@@ -15,22 +15,20 @@ const AdminAccess = () => {
               title_alt={' without leaving the dashboard'} 
               subtitle={'Admin Access'} 
             />
-            <div className="grid grid-cols-2 gap-52 items-center">
+            <div className="grid grid-cols-2 gap-40 items-center">
               <Tabs
                 tabId={tabId}
                 setTabId={setTabId}
               />
               <div className="shadow-lg">
-                <div className="w-full rounded-t-md h-5 bg-dark-200 flex items-center justify-start px-2">
-                  <div className="h-2 w-2 mr-2 rounded-full bg-dark-300"/>
-                  <div className="h-2 w-2 mr-2 rounded-full bg-dark-300"/>
-                  <div className="h-2 w-2 mr-2 rounded-full bg-dark-300"/>
+                <div className="w-full rounded-t-md h-5 bg-dark-300 flex items-center justify-start px-2">
+                  <div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
+                  <div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
+                  <div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
                 </div>
-                <div className="bg-dark-100" style={{height: 305}}>
-                  <video className="rounded-b-md" src={`videos/${tabId}.mp4`} autoPlay loop muted>
-                    Your browser does not support the video tag
-                  </video>
-                </div>                
+                <video className="rounded-b-md" src={`videos/${tabId}.mp4`} autoPlay loop muted>
+                  Your browser does not support the video tag
+                </video>           
               </div>
             </div>
           </div>
diff --git a/www/components/ArticleThumb.tsx b/www/components/ArticleThumb.tsx
index fd85d693d4d..159daa32424 100644
--- a/www/components/ArticleThumb.tsx
+++ b/www/components/ArticleThumb.tsx
@@ -21,13 +21,9 @@ const ArticleThumb = (props: any) => {
   //   avatar_url :string;
   // }
 
-  // console.log(props.article)
-
   // @ts-ignore
   const AuthorProfile: User = Authors[author]
 
-  // console.log(AuthorProfile)
-
   const iconMarkup = icons && icons.map((icon :any) => {
     return (
       <img
@@ -39,11 +35,8 @@ const ArticleThumb = (props: any) => {
     )
   })
 
-  // console.log(icons)
-  // console.log(iconMarkup)
-
   return (
-    <div className="flex flex-col rounded-sm shadow-lg overflow-hidden">
+    <div className="flex flex-col rounded-md shadow-lg overflow-hidden">
       <div className="flex-shrink-0">
         <img
           className="h-48 w-full object-cover"
@@ -51,56 +44,56 @@ const ArticleThumb = (props: any) => {
           alt={title}
         />
       </div>
-      <div className="flex-1 bg-white p-6 flex flex-col justify-between">
+      <div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-600">
         <div className="flex-1">
           {icons && (
             <div className="-mt-12 mb-6 flex -space-x-3">
               {iconMarkup}
             </div>
           )}
-          <p className="text-sm font-medium text-gray-600">
+          <p className="text-sm font-medium text-gray-600 dark:text-dark-100">
             <a href="#" className="hover:underline capitalize">
               {type}
             </a>
           </p>
           <a href="#" className="block mt-2">
-            <p className="text-xl text-gray-900">{title}</p>
-            <p className="mt-3 text-base text-gray-500">
+            <p className="text-xl text-gray-900 dark:text-white">{title}</p>
+            <p className="mt-3 text-base text-gray-500 dark:text-dark-100">
               {description}
             </p>
           </a>
         </div>
         { AuthorProfile && (
-        <div className="mt-6 flex items-center">
-          <div className="flex-shrink-0">
-            <a href="#">
-              <span className="sr-only">{AuthorProfile.name}</span>
-              <img
-                className="h-10 w-10 rounded-full"
-                src={AuthorProfile.avatar_url}
-                alt=""
-              />
-            </a>
-          </div>
-          <div className="ml-3">
-            <p className="text-sm font-medium text-gray-900">
-              <a href="#" className="hover:underline">
-                {AuthorProfile.name}
+          <div className="mt-6 flex items-center">
+            <div className="flex-shrink-0">
+              <a href="#">
+                <span className="sr-only">{AuthorProfile.name}</span>
+                <img
+                  className="h-10 w-10 rounded-full"
+                  src={AuthorProfile.avatar_url}
+                  alt=""
+                />
               </a>
-            </p>
-            <div className="flex space-x-1 text-sm text-gray-500">
-              <time dateTime="2020-03-16">Mar 16, 2020</time>
-              <span aria-hidden="true">&middot;</span>
-              <span>6 min read</span>
+            </div>
+            <div className="ml-3">
+              <p className="text-sm font-medium text-gray-900 dark:text-white">
+                <a href="#" className="hover:underline">
+                  {AuthorProfile.name}
+                </a>
+              </p>
+              <div className="flex space-x-1 text-sm text-gray-500 dark:text-dark-100">
+                <time dateTime="2020-03-16">Mar 16, 2020</time>
+                <span aria-hidden="true">&middot;</span>
+                <span>6 min read</span>
+              </div>
             </div>
           </div>
-        </div>
-          )}
-          { cta && (
-            <div className="mt-6 flex items-center">
-            <a href={url}>Learn more</a>
+        )}
+        { cta && (
+          <div className="mt-6 flex items-center text-sm text-brand-600">
+            <a href={url}>{AuthorProfile ? 'Learn more' : 'View Project'}</a>
           </div>
-          )}
+        )}
       </div>
     </div>
   )
diff --git a/www/components/Benchmark/index.tsx b/www/components/Benchmark/index.tsx
index c86d82dfeed..5f554950b1d 100644
--- a/www/components/Benchmark/index.tsx
+++ b/www/components/Benchmark/index.tsx
@@ -4,7 +4,7 @@ const Benchmark = () => {
   return (
     <>
       {/* Figma ref */}
-      <div className="bg-white dark:bg-dark-100 pt-16 pb-4 px-4 sm:px-6 lg:px-8">
+      <div className="bg-white dark:bg-dark-200 pt-16 pb-4 px-4 sm:px-6 lg:px-8">
         <div className="bg-white grid grid-cols-12 gap-4 items-center shadow-lg rounded-md">
           <div className="w-full h-full col-span-2 bg-gray-700 rounded-l-md flex items-center justify-center">
             <img className="w-3/4" src="images/benchmark.svg" />
@@ -24,7 +24,7 @@ const Benchmark = () => {
       </div>
 
       {/* Other */}
-      <div className="bg-white dark:bg-dark-100">
+      <div className="bg-white dark:bg-dark-200">
         <div className="mx-auto py-16 px-4 sm:px-6 lg:px-8">
           <div className="bg-gray-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-12 lg:gap-4">
             <div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20 col-span-8">
diff --git a/www/components/BuiltWithSupabase/index.tsx b/www/components/BuiltWithSupabase/index.tsx
index db08a17037c..80122aa15b8 100644
--- a/www/components/BuiltWithSupabase/index.tsx
+++ b/www/components/BuiltWithSupabase/index.tsx
@@ -5,9 +5,9 @@ import ProjectExamples from "data/ProjectExamples.json"
 const BuiltExamples = () => {
   return (
     <>
-      <div className="relative bg-gray-50 dark:bg-dark-100 py-16 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-16">
+      <div className="relative bg-gray-50 dark:bg-dark-200 py-16 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-16">
         <div className="absolute inset-0">
-          <div className="bg-white dark:bg-dark-100 h-1/3 sm:h-2/3"></div>
+          <div className="bg-white dark:bg-dark-200 h-1/3 sm:h-2/3"></div>
         </div>
         <div className="mx-auto max-w-7xl">
           <SectionHeader
diff --git a/www/components/CaseStudies/index.tsx b/www/components/CaseStudies/index.tsx
index 0bfd59a87d9..505986626f6 100644
--- a/www/components/CaseStudies/index.tsx
+++ b/www/components/CaseStudies/index.tsx
@@ -6,9 +6,9 @@ const CaseStudies = () => {
 
   return (
     <>
-      <div className="relative bg-gray-50 dark:bg-dark-200 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
+      <div className="relative bg-gray-50 dark:bg-dark-300 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
         <div className="absolute inset-0">
-          <div className="bg-white dark:bg-dark-200 h-1/3 sm:h-2/3"></div>
+          <div className="bg-white dark:bg-dark-300 h-1/3 sm:h-2/3"></div>
         </div>
         <div className="relative max-w-7xl mx-auto">
           <div>
diff --git a/www/components/Features/index.tsx b/www/components/Features/index.tsx
index 7fb2a279599..388e5e408ed 100644
--- a/www/components/Features/index.tsx
+++ b/www/components/Features/index.tsx
@@ -31,7 +31,7 @@ const Features = () => {
         </div>
         {url && (
           <div className="mt-5">
-            <dd className="mt-2 text-sm text-brand-600 underline">Learn more link</dd>
+            <dd className="mt-2 text-sm text-brand-600">Learn more link</dd>
           </div>
         )}
       </div>
@@ -39,7 +39,7 @@ const Features = () => {
   })
 
   return (
-    <div className="bg-gray-50 dark:bg-dark-200 overflow-hidden py-12 sm:px-6 lg:px-16">
+    <div className="bg-gray-50 dark:bg-dark-300 overflow-hidden py-12 sm:px-6 lg:px-16">
       <div className="mx-auto max-w-7xl">
         <SectionHeader
           title={'Build Faster'}
diff --git a/www/components/Footer/index.tsx b/www/components/Footer/index.tsx
index da0f7bf9caf..d330afc1047 100644
--- a/www/components/Footer/index.tsx
+++ b/www/components/Footer/index.tsx
@@ -2,7 +2,7 @@ import FooterLinks from "data/Footer.json"
 
 const Footer = () => {
   return (
-    <footer className="bg-white dark:bg-dark-300" aria-labelledby="footerHeading">
+    <footer className="bg-white dark:bg-dark-400" aria-labelledby="footerHeading">
       <h2 id="footerHeading" className="sr-only">Footer</h2>
       <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
diff --git a/www/components/MadeForDevelopers/CodeExamples.tsx b/www/components/MadeForDevelopers/CodeExamples.tsx
index 8f180fa4ced..24781bacaf4 100644
--- a/www/components/MadeForDevelopers/CodeExamples.tsx
+++ b/www/components/MadeForDevelopers/CodeExamples.tsx
@@ -26,10 +26,12 @@ const CodeExamples = () => {
         type="button"
         key={id + "-button"}
         onClick={() => handleClick(id)}
-        className={
-          'm-1 mb-4 rounded-md border border-gray-200 px-4 py-2 text-base font-medium text-gray focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-transparent sm:w-auto sm:text-sm' +
-          (example === id ? ' border-gray-900 bg-gray-900 text-white' : ' hover:bg-gray-200')
-        }
+        className={`
+          m-1 mb-4 rounded-md border border-gray-200 px-4 py-2 text-base font-medium text-gray transition
+          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-transparent sm:w-auto sm:text-sm
+          ${example === id ? ' border-gray-900 bg-gray-900 text-white' : ' hover:bg-gray-200 dark:hover:text-black'}
+          dark:text-white
+      `}
       >
         {
           // @ts-ignore
diff --git a/www/components/MadeForDevelopers/index.tsx b/www/components/MadeForDevelopers/index.tsx
index 5240e2b1d84..36c66975c5d 100644
--- a/www/components/MadeForDevelopers/index.tsx
+++ b/www/components/MadeForDevelopers/index.tsx
@@ -4,7 +4,7 @@ import CodeExamples from 'components/MadeForDevelopers/CodeExamples'
 
 const MadeForDevelopers = () => {
   return (
-    <div className="py-16 bg-gray-50 dark:bg-dark-200 overflow-hidden lg:py-16">
+    <div className="py-16 bg-gray-50 dark:bg-dark-300 overflow-hidden lg:py-16">
       <div className="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
 
       <SectionHeader className="text-center" title={'Supafast easy-to-use APIs'} title_alt={' that do the hard work for you'} subtitle={'MADE FOR DEVELOPERS'} paragraph={'We inspect your database and provide APIs instantly so you can stop building repetitive CRUD endpoints and focus on your product.'} />
@@ -19,15 +19,15 @@ const MadeForDevelopers = () => {
             <dl className="mt-12 space-y-10 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-12 col-span-8 col-start-3">
               <div className="lg:border-r-2 lg:border-gray-200 pr-6">
                 <div className="mt-5">
-                  <dt className="text-lg leading-6 font-medium text-gray-900">
+                  <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                     TypeScript support
                   </dt>
-                  <dd className="mt-2 text-base text-gray-500 mb-6">
+                  <dd className="mt-2 text-base text-gray-500 mb-6 dark:text-dark-100">
                     Type definitions for both server side and client side
                   </dd>
                   <button
                     type="button"
-                    className="inline-flex items-center text-xs font-medium rounded text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
+                    className="inline-flex items-center text-xs font-medium rounded transition text-brand-600 hover:text-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
                   >
                     Explore more
                   </button>
@@ -36,16 +36,16 @@ const MadeForDevelopers = () => {
 
               <div>
                 <div className="mt-5">
-                  <dt className="text-lg leading-6 font-medium text-gray-900 flex">
+                  <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white flex">
                     Local emulator
                     <Badge>Coming Q1 2021</Badge>
                   </dt>
-                  <dd className="mt-2 text-base text-gray-500 mb-6">
+                  <dd className="mt-2 text-base text-gray-500 mb-6 dark:text-dark-100">
                     Develop locally and push to production when you're ready
                   </dd>
                   <button
                     type="button"
-                    className="inline-flex items-center text-xs font-medium rounded text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
+                    className="inline-flex items-center text-xs font-medium rounded transition text-brand-600 hover:text-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
                   >
                     Get notified
                   </button>
diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx
index 209c7e1111e..833c47e2577 100644
--- a/www/components/Nav/index.tsx
+++ b/www/components/Nav/index.tsx
@@ -122,7 +122,7 @@ const Nav = () => {
   )
 
   return (
-    <nav className="bg-white dark:bg-dark-300 z-50 shadow-lg sticky">
+    <nav className="bg-white dark:bg-dark-400 z-50 shadow-lg sticky">
       <div className="container mx-auto relative flex justify-between h-16">
         
         <HamburgerButton toggleFlyOut={() => setOpen(true)} />
diff --git a/www/components/hero.tsx b/www/components/hero.tsx
index 4cb6ce40c77..4efe7be97cb 100644
--- a/www/components/hero.tsx
+++ b/www/components/hero.tsx
@@ -1,8 +1,9 @@
 import Link from 'next/link'
+import Button from 'components/button'
 
 const Hero = () => {
   return (
-    <div className="relative bg-dark-300 overflow-hidden px-16">
+    <div className="relative bg-dark-400 overflow-hidden px-16">
       <div className="hidden sm:block sm:absolute sm:inset-0" aria-hidden="true">
         <svg
           className="absolute bottom-0 right-0 transform translate-x-1/2 mb-48 text-gray-700 lg:top-0 lg:mt-28 lg:mb-0 xl:transform-none xl:translate-x-0"
@@ -45,13 +46,7 @@ const Hero = () => {
                     Storage and serverless functions coming soon
                   </p>
 
-                  <div className="mt-10 sm:flex sm:justify-center lg:justify-start">
-                    <div className="rounded-md shadow">
-                      <a href="#" className="inline-flex items-center px-4 py-2 border border-transparent text-med font-medium rounded-md shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">                        
-                        Start your project
-                      </a>
-                    </div>
-                  </div>
+                  <Button className="mt-10 py-3" text="Start your project" url="#"/>
 
                   <p className="mt-8 text-sm text-gray-400 tracking-wide sm:mt-10">
                     backed by
diff --git a/www/tailwind.config.js b/www/tailwind.config.js
index 6116e160c47..ee593f9e680 100644
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -37,10 +37,12 @@ module.exports = {
           '900': '#1C583D',
         },
         dark: {
-          100: '#3A3A3A',
-          200: '#292929',
-          300: '#202020',
-          400: '#1E1E1E',
+          100: '#828282',
+          200: '#3A3A3A',
+          300: '#292929',
+          400: '#202020',
+          500: '#1E1E1E',
+          600: '#424242',
         },
         // Joshen: Adding our Figma palette here
         neutral: {