From 0b2c8a7cf26d75243dcf43ae4e430053e8a088dc Mon Sep 17 00:00:00 2001
From: Harsh Karande <harshskarande@gmail.com>
Date: Sat, 11 Dec 2021 11:55:37 +0530
Subject: [PATCH] feat: add light themed variants for background and text

---
 studio/pages/project/[ref]/api/index.tsx | 18 +++++++++++-------
 studio/styles/code.scss                  |  1 -
 studio/styles/main.scss                  |  2 +-
 studio/styles/ui.scss                    | 12 ++++++++----
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx
index 38c3914be07..fd73c2c0999 100644
--- a/studio/pages/project/[ref]/api/index.tsx
+++ b/studio/pages/project/[ref]/api/index.tsx
@@ -124,7 +124,7 @@ const DocView: FC<any> = observer(({}) => {
       <div className="Docs--inner-wrapper">
         <div className="sticky top-0 w-full flex flex-row-reverse z-40 ">
           <div
-            className="border-b border-gray-500 dark:border-gray-500 bg-gray-700"
+            className="border-b border-gray-200 dark:border-gray-500 bg-white dark:bg-gray-700"
             style={{ width: '50%' }}
           >
             <div className="z-0 flex ">
@@ -132,8 +132,10 @@ const DocView: FC<any> = observer(({}) => {
                 type="button"
                 onClick={() => setSelectedLang('js')}
                 className={`${
-                  selectedLang == 'js' ? 'text-gray-300' : 'text-gray-400'
-                } relative inline-flex items-center p-1 px-2 bg-gray-600 border-r border-gray-500 dark:border-gray-500 text-sm font-medium hover:text-gray-300 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150`}
+                  selectedLang == 'js'
+                    ? 'text-gray-600 dark:text-gray-300'
+                    : 'text-gray-400 dark:text-gray-400'
+                } relative inline-flex items-center p-1 px-2 bg-gray-100 dark:bg-gray-600 border-r border-gray-200 dark:border-gray-500 text-sm font-medium hover:text-gray-600 dark:hover:text-gray-300 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150`}
               >
                 JavaScript
               </button>
@@ -141,8 +143,10 @@ const DocView: FC<any> = observer(({}) => {
                 type="button"
                 onClick={() => setSelectedLang('bash')}
                 className={`${
-                  selectedLang == 'bash' ? 'text-gray-300' : 'text-gray-400'
-                } relative inline-flex items-center p-1 px-2 bg-gray-600 border-r border-gray-500 dark:border-gray-500 text-sm font-medium hover:text-gray-300 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150`}
+                  selectedLang == 'bash'
+                    ? 'text-gray-600 dark:text-gray-300'
+                    : 'text-gray-400 dark:text-gray-400'
+                } relative inline-flex items-center p-1 px-2 bg-gray-100 dark:bg-gray-600 border-r border-gray-200 dark:border-gray-500 text-sm font-medium hover:text-gray-600 dark:hover:text-gray-300 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150`}
               >
                 Bash
               </button>
@@ -533,8 +537,8 @@ const ResourceContent = ({
         <div className="doc-section">
           <article className="text ">
             <p>
-              Supabase provides realtime functionality and broadcasts database changes to authorized users depending on Row Level
-              Security (RLS) policies.
+              Supabase provides realtime functionality and broadcasts database changes to authorized
+              users depending on Row Level Security (RLS) policies.
             </p>
             <p>
               <a href="https://supabase.com/docs/client/subscribe" target="_blank">
diff --git a/studio/styles/code.scss b/studio/styles/code.scss
index 7942c67f67f..991d786f761 100644
--- a/studio/styles/code.scss
+++ b/studio/styles/code.scss
@@ -69,7 +69,6 @@
   }
 
   .codeBlock {
-    @apply bg-gray-600;
     margin-bottom: 0;
     overflow: hidden;
     overflow-wrap: break-word;
diff --git a/studio/styles/main.scss b/studio/styles/main.scss
index 3e455a5941d..fad52b2d803 100644
--- a/studio/styles/main.scss
+++ b/studio/styles/main.scss
@@ -144,7 +144,7 @@ input[type='radio'] {
 }
 
 code {
-  @apply p-1 m-0 font-mono text-sm bg-gray-600 rounded;
+  @apply p-1 m-0 font-mono text-sm bg-gray-100 dark:bg-gray-600 rounded;
 }
 
 div[data-radix-portal]:not(.portal--toast) {
diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss
index bafa4cbbc05..f924e6971ae 100644
--- a/studio/styles/ui.scss
+++ b/studio/styles/ui.scss
@@ -195,10 +195,14 @@ label:not(.sbui-formlayout__label):not(.sbui-checkbox__label-container__label):n
 /* Docs */
 .Docs {
   &--inner-wrapper {
-    background: linear-gradient(90deg, #1f1f1f 50%, #2a2a2a 50%);
+    background: linear-gradient(90deg, #ffffff 50%, #eeeeee 50%);
     width: 100%;
   }
 
+  .dark &--inner-wrapper {
+    background: linear-gradient(90deg, #1f1f1f 50%, #2a2a2a 50%);
+  }
+
   h1,
   h2,
   h3 {
@@ -206,13 +210,13 @@ label:not(.sbui-formlayout__label):not(.sbui-checkbox__label-container__label):n
   }
 
   .doc-heading {
-    @apply text-white capitalize mt-4 w-1/2;
+    @apply text-black dark:text-white capitalize mt-4 w-1/2;
     hyphens: auto;
     max-width: 50%;
   }
 
   .doc-section {
-    @apply border-b dark:border-dark text-gray-300 flex;
+    @apply border-b dark:border-dark text-gray-600 dark:text-gray-300 flex;
   }
 
   .text {
@@ -233,7 +237,7 @@ label:not(.sbui-formlayout__label):not(.sbui-checkbox__label-container__label):n
   }
 
   .code {
-    @apply flex-1 p-2 w-1/2 bg-gray-600 pb-4;
+    @apply flex-1 p-2 w-1/2 pb-4;
     max-width: 50%;
 
     h4 {