From 57c64fbf9d44d16b11cb90f7912c379da101e6a9 Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Tue, 1 Dec 2020 00:11:14 +0800
Subject: [PATCH 1/2] fix text colors

---
 www/components/AdminAccess/tabs.tsx |  6 +++---
 www/components/Footer/index.tsx     | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/www/components/AdminAccess/tabs.tsx b/www/components/AdminAccess/tabs.tsx
index 9f17a634c4d..00ce7fe8871 100644
--- a/www/components/AdminAccess/tabs.tsx
+++ b/www/components/AdminAccess/tabs.tsx
@@ -24,7 +24,7 @@ function Tabs(props: Props) {
             <a
               href="#"
               id="tabTableEditor"
-              className={"transition w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabTableEditor" ? " border-brand-500 dark:border-white text-brand-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200")}
+              className={"transition w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabTableEditor" ? " border-gray-500 dark:border-white text-gray-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200")}
               onClick={(event: any) => handleTabChange(event)}
             >
               Table Editor
@@ -32,7 +32,7 @@ function Tabs(props: Props) {
             <a
               href="#"
               id="tabSqlEditor"
-              className={"transition w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabSqlEditor" ? " border-brand-500 dark:border-white text-brand-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200")}
+              className={"transition w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabSqlEditor" ? " border-gray-500 dark:border-white text-gray-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200")}
               onClick={(event: any) => handleTabChange(event)}
             >
               SQL Editor
@@ -40,7 +40,7 @@ function Tabs(props: Props) {
             <a
               href="#"
               id="tabAuthRules"
-              className={"transition w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabAuthRules" ? " border-brand-500 dark:border-white text-brand-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200")}
+              className={"transition w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabAuthRules" ? " border-gray-500 dark:border-white text-gray-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200")}
               onClick={(event: any) => handleTabChange(event)}
               aria-current="page"
             >
diff --git a/www/components/Footer/index.tsx b/www/components/Footer/index.tsx
index 077f7285afb..951dba9b83c 100644
--- a/www/components/Footer/index.tsx
+++ b/www/components/Footer/index.tsx
@@ -95,7 +95,7 @@ const Footer = (props: Props) => {
               {FooterLinks.map((segment: any) => {
                 return (
                   <div key={`footer_${segment.title}`}>
-                    <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
+                    <h3 className="text-sm font-semibold text-gray-400 dark:text-dark-200 tracking-wider uppercase">
                       {segment.title}
                     </h3>
                     <ul className="mt-4 space-y-4">
@@ -103,10 +103,10 @@ const Footer = (props: Props) => {
                         <li key={`${segment.title}_link_${idx}`}>
                           <a
                             href={link.url}
-                            className={`text-base ${link.url ? 'text-gray-500' : 'text-gray-400'} hover:text-gray-900 dark:hover:text-gray-300`}
+                            className={`text-base ${link.url ? 'text-gray-500 dark:text-dark-100' : 'text-gray-400 dark:text-dark-200'} hover:text-gray-900 dark:hover:text-gray-300`}
                           >
                             {link.text}
-                            {!link.url && <span className="block text-sm text-gray-300">Coming soon</span>}
+                            {!link.url && <span className="block text-sm text-gray-300 dark:text-dark-300">Coming soon</span>}
                           </a>
                         </li>
                       ))}
@@ -117,8 +117,8 @@ const Footer = (props: Props) => {
             </div>
           </div>
         </div>
-        <div className="mt-12 border-t border-gray-200 pt-8 flex justify-between">
-          <p className="text-base text-gray-400">
+        <div className="mt-12 border-t border-gray-200 dark:border-dark-300 pt-8 flex justify-between">
+          <p className="text-base text-gray-400 dark:text-dark-200">
             &copy; Supabase Inc
           </p>
           <div className="flex items-center">

From c3bb6aca313e93d072213ccb87fd0fe4611d14c2 Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Tue, 1 Dec 2020 01:26:16 +0800
Subject: [PATCH 2/2] fixed responsiveness on mobile for code examples

---
 www/components/CTABanner/index.tsx              |  2 +-
 .../MadeForDevelopers/CodeExamples.tsx          |  2 +-
 www/components/MadeForDevelopers/index.tsx      | 17 +++++++++--------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/www/components/CTABanner/index.tsx b/www/components/CTABanner/index.tsx
index 934b8a48773..cd181ea8665 100644
--- a/www/components/CTABanner/index.tsx
+++ b/www/components/CTABanner/index.tsx
@@ -7,7 +7,7 @@ const CTABanner = () => {
 				<h4 className="font-normal text-white lg:text-3xl">
 					<span className="block">Create your next project backend </span>
 				</h4>
-				<p className="font-normal mt-1 text-gray-500 lg:text-3xl">
+				<p className="font-normal mt-1 text-gray-500 dark:text-dark-100 lg:text-3xl">
 					Create your next project backend in less than 2 minutes
 				</p>
 			</div>
diff --git a/www/components/MadeForDevelopers/CodeExamples.tsx b/www/components/MadeForDevelopers/CodeExamples.tsx
index e3ccae2e544..82e56e75953 100644
--- a/www/components/MadeForDevelopers/CodeExamples.tsx
+++ b/www/components/MadeForDevelopers/CodeExamples.tsx
@@ -46,7 +46,7 @@ const CodeExamples = () => {
       <div className="col-span-12 text-center">
         {buttons}
       </div>
-      <div className="sm:col-span-12 xl:col-span-8 xl:col-start-3">
+      <div className="col-span-12 xl:col-span-8 xl:col-start-3">
         <div className="rounded" style={{ background: '#474949' }}>
           <div className="p-2 pl-5 flex justify-between items-center">
           <p className="text-base text-gray-400 text-white">
diff --git a/www/components/MadeForDevelopers/index.tsx b/www/components/MadeForDevelopers/index.tsx
index 8ddd673f67a..a09b03db8e6 100644
--- a/www/components/MadeForDevelopers/index.tsx
+++ b/www/components/MadeForDevelopers/index.tsx
@@ -5,19 +5,20 @@ import CodeExamples from 'components/MadeForDevelopers/CodeExamples'
 const MadeForDevelopers = () => {
   return (
     <div className="py-16 bg-gray-50 dark:bg-dark-400 overflow-hidden lg:py-16">
-      <div className="container mx-auto sm:px-16  xl:px-20">
+      <div className="container mx-auto sm:px-16 xl:px-20">
 
-      <SectionHeader className="text-center sm:w-3/4 xl:w-2/3 mx-auto" 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.'} />
+      <SectionHeader className="text-center mx-auto" 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.'} />
 
-        <div className="relative lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
+        <div className="relative grid grid-cols-12 gap-8 lg:items-center">
 
           <div className="mt-2 col-span-10 col-start-2">
+
             <CodeExamples />
 
             <div className="grid grid-cols-12 gap-2">
-              <dl className="mt-12 space-y-10 md:grid md:grid-cols-2 md:col-span-12 lg:space-y-0 lg:col-start-2 lg:col-span-10 lg:gap-12 xl:col-start-3 xl:col-span-8">
-                <div className="md:border-r-2 md:border-gray-200 pr-6 dark:border-dark-200">
-                  <div className="mt-5">
+              <dl className="mt-12 grid-cols-12 grid lg:space-y-0 gap-12 col-start-1 col-span-12 md:col-span-12 md:col-start-1 lg:col-start-3 lg:col-span-8">
+                <div className="col-span-12 lg:col-span-6 lg:border-r-2 lg:border-gray-200 pr-6 dark:border-dark-200">
+                  <div className="lg:mt-5">
                     <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                       TypeScript support
                     </dt>
@@ -32,8 +33,8 @@ const MadeForDevelopers = () => {
                     </button>
                   </div>
                 </div>
-                <div>
-                  <div className="mt-5">
+                <div className="col-span-12 lg:col-span-6">
+                  <div className="lg:mt-5">
                     <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white flex">
                       Local emulator
                       <Badge>Coming Q1 2021</Badge>