From eecb7b9d19da4e9024d0595c27cc1844cd8ae499 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 19 Apr 2023 00:33:52 +0800
Subject: [PATCH] fix issues with light mode

---
 packages/ui/styles/themes/light.css            | 18 +++++++++---------
 .../layouts/AccountLayout/WithSidebar.tsx      | 10 +++++-----
 .../LayoutHeader/LayoutHeader.tsx              |  2 +-
 .../NavigationBar/NavigationBar.tsx            |  2 +-
 studio/styles/main.scss                        |  4 ++--
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/ui/styles/themes/light.css b/packages/ui/styles/themes/light.css
index 779e52048f2..9808719f16e 100644
--- a/packages/ui/styles/themes/light.css
+++ b/packages/ui/styles/themes/light.css
@@ -1,6 +1,6 @@
 :root {
-  --theme-variables-background: #fff;
-  --theme-variables-background-body: #fbfcfd;
+  --theme-variables-background: #fbfcfd;
+  --theme-variables-background-body: #f8f9fa;
   --theme-variables-background-body-alt: #fff;
   --theme-variables-text-body: #1a1d1e;
   --lighten-default: 0.1;
@@ -17,12 +17,12 @@
   --text-body-light: #858787;
   --text-body-lighter: #bfc0c0;
   --text-body-lightest: #dfe0e0;
-  --background-color-default: #fff;
-  --background-color-body: #fbfcfd;
+  --background-color-default: #fbfcfd;
+  --background-color-body: #f8f9fa;
   --background-color-body-alt: #fff;
-  --background-color-selection: #ebebeb;
-  --background-color-control: #fff;
-  --border-color-default: #ebebeb;
-  --border-color-body: #fbfcfd;
-  --border-color-control: #e2e2e2;
+  --background-color-selection: #e7e8e9;
+  --background-color-control: #fdfefe;
+  --border-color-default: #e7e8e9;
+  --border-color-body: #f8f9fa;
+  --border-color-control: #dedfe0;
 }
\ No newline at end of file
diff --git a/studio/components/layouts/AccountLayout/WithSidebar.tsx b/studio/components/layouts/AccountLayout/WithSidebar.tsx
index 8c7e29e91ac..434296aa36d 100644
--- a/studio/components/layouts/AccountLayout/WithSidebar.tsx
+++ b/studio/components/layouts/AccountLayout/WithSidebar.tsx
@@ -49,13 +49,13 @@ const WithSidebar: FC<Props> = ({
           id="with-sidebar"
           style={{ height: maxHeight, maxHeight }}
           className={[
-            'h-full bg-scale-200',
-            'hide-scrollbar w-64 overflow-auto border-r dark:border-dark',
+            'h-full bg-body',
+            'hide-scrollbar w-64 overflow-auto border-r border-scale-500',
           ].join(' ')}
         >
           {title && (
             <div className="mb-2">
-              <div className="flex h-12 max-h-12 items-center border-b px-6 dark:border-dark">
+              <div className="flex h-12 max-h-12 items-center border-b px-6 border-scale-500">
                 <h4 className="mb-0 text-lg truncate" title={title}>
                   {title}
                 </h4>
@@ -75,7 +75,7 @@ const WithSidebar: FC<Props> = ({
                     subitemsParentKey={subitemsParentKey}
                   />
                 ) : (
-                  <div className="border-b py-5 px-6 dark:border-dark" key={section.key}>
+                  <div className="border-b py-5 px-6 border-scale-400" key={section.key}>
                     <SidebarItem
                       links={section.links}
                       subitems={subitems}
@@ -108,7 +108,7 @@ const SectionWithHeaders: FC<SectionWithHeadersProps> = ({
   subitems,
   subitemsParentKey,
 }) => (
-  <div key={section.heading} className="border-b py-5 px-6 dark:border-dark">
+  <div key={section.heading} className="border-b py-5 px-6 border-scale-500">
     {section.heading && <Menu.Group title={section.heading} />}
     {section.versionLabel && (
       <div className="mb-1 px-3">
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index f6eaad649a7..35c176f19df 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -50,7 +50,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
   return (
     <div
       className={`flex h-12 max-h-12 items-center justify-between py-2 px-5 ${
-        headerBorder ? 'border-b dark:border-dark' : ''
+        headerBorder ? 'border-b border-scale-500' : ''
       }`}
     >
       <div className="-ml-2 flex items-center text-sm">
diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
index 473d7da3884..dc60bbca856 100644
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -37,7 +37,7 @@ const NavigationBar: FC<Props> = ({}) => {
       style={{ height: ongoingIncident ? 'calc(100vh - 44px)' : '100vh' }}
       className={[
         'flex w-14 flex-col justify-between overflow-y-hidden p-2',
-        'border-r bg-scale-200 dark:border-dark dark:bg-sidebar-dark',
+        'border-r bg-body border-scale-500',
       ].join(' ')}
     >
       <ul className="flex flex-col space-y-2">
diff --git a/studio/styles/main.scss b/studio/styles/main.scss
index 8bbb230fb74..3941f3e0d82 100644
--- a/studio/styles/main.scss
+++ b/studio/styles/main.scss
@@ -21,13 +21,13 @@ html,
 body,
 #__next,
 .main {
+  @apply bg-body;
+  @apply text-scale-1200;
   height: 100%;
   padding: 0;
   margin: 0;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  @apply bg-body;
-  @apply text-scale-1200;
 }
 
 * {