From cfd7e1d1548e5dfbaad894daaf7c9751cdbd8321 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 21 Apr 2023 15:48:06 +0530
Subject: [PATCH] fix: theming fixes (#914)

---
 apps/app/components/project/sidebar-list.tsx  | 12 +++++-----
 apps/app/components/ui/datepicker.tsx         |  2 +-
 apps/app/components/ui/loader.tsx             |  8 ++-----
 apps/app/constants/issue.ts                   |  4 ++--
 .../projects/[projectId]/issues/[issueId].tsx |  6 ++---
 .../projects/[projectId]/settings/index.tsx   | 22 +++++++++----------
 apps/app/styles/globals.css                   |  4 ++--
 7 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index 3cf1e2a97..c59abb59e 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -198,15 +198,15 @@ export const ProjectSidebarList: FC = () => {
               <Loader className="space-y-5">
                 <div className="space-y-2">
                   <Loader.Item height="30px" />
-                  <Loader.Item height="15px" width="80%" light />
-                  <Loader.Item height="15px" width="80%" light />
-                  <Loader.Item height="15px" width="80%" light />
+                  <Loader.Item height="15px" width="80%" />
+                  <Loader.Item height="15px" width="80%" />
+                  <Loader.Item height="15px" width="80%" />
                 </div>
                 <div className="space-y-2">
                   <Loader.Item height="30px" />
-                  <Loader.Item height="15px" width="80%" light />
-                  <Loader.Item height="15px" width="80%" light />
-                  <Loader.Item height="15px" width="80%" light />
+                  <Loader.Item height="15px" width="80%" />
+                  <Loader.Item height="15px" width="80%" />
+                  <Loader.Item height="15px" width="80%" />
                 </div>
               </Loader>
             </div>
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index ef9b624a1..999b46ce4 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -39,7 +39,7 @@ export const CustomDatePicker: React.FC<Props> = ({
         ? "block px-3 py-2 text-sm focus:outline-none"
         : renderAs === "button"
         ? `px-3 py-1 text-xs shadow-sm ${
-            disabled ? "" : "hover:bg-brand-surface-1"
+            disabled ? "" : "hover:bg-brand-surface-2"
           } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
diff --git a/apps/app/components/ui/loader.tsx b/apps/app/components/ui/loader.tsx
index 1cbb6529c..107f03e8c 100644
--- a/apps/app/components/ui/loader.tsx
+++ b/apps/app/components/ui/loader.tsx
@@ -14,14 +14,10 @@ const Loader = ({ children, className = "" }: Props) => (
 type ItemProps = {
   height?: string;
   width?: string;
-  light?: boolean;
 };
 
-const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto", light }) => (
-  <div
-    className={`rounded-md ${light ? "bg-brand-surface-2" : "bg-gray-300"}`}
-    style={{ height: height, width: width }}
-  />
+const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
+  <div className="rounded-md bg-brand-surface-2" style={{ height: height, width: width }} />
 );
 
 Loader.Item = Item;
diff --git a/apps/app/constants/issue.ts b/apps/app/constants/issue.ts
index f113aea9a..9f5020d04 100644
--- a/apps/app/constants/issue.ts
+++ b/apps/app/constants/issue.ts
@@ -72,7 +72,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
     const updatedIssue = {
       ...prevData[issueIndex],
       ...formData,
-      assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees_list,
+      assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
     };
 
     prevData.splice(issueIndex, 1, updatedIssue);
@@ -89,7 +89,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
     const updatedIssue = {
       ...oldGroup[issueIndex],
       ...formData,
-      assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees_list,
+      assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
     };
 
     if (selectedGroupBy !== Object.keys(formData)[0])
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 5e1214fcc..85ea7551c 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -219,9 +219,9 @@ const IssueDetailsPage: NextPage = () => {
         <Loader className="flex h-full gap-5 p-5">
           <div className="basis-2/3 space-y-2">
             <Loader.Item height="30px" width="40%" />
-            <Loader.Item height="15px" width="60%" light />
-            <Loader.Item height="15px" width="60%" light />
-            <Loader.Item height="15px" width="40%" light />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="40%" />
           </div>
           <div className="basis-1/3 space-y-3">
             <Loader.Item height="30px" />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 2f8ca3d4a..8c75c247c 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -173,7 +173,7 @@ const GeneralSettings: NextPage = () => {
                 />
               ) : (
                 <Loader>
-                  <Loader.Item height="46px" width="46px" light />
+                  <Loader.Item height="46px" width="46px" />
                 </Loader>
               )}
               {projectDetails ? (
@@ -189,7 +189,7 @@ const GeneralSettings: NextPage = () => {
                 />
               ) : (
                 <Loader>
-                  <Loader.Item height="46px" width="225px" light />
+                  <Loader.Item height="46px" width="225px" />
                 </Loader>
               )}
             </div>
@@ -212,7 +212,7 @@ const GeneralSettings: NextPage = () => {
                 />
               ) : (
                 <Loader className="w-full">
-                  <Loader.Item height="46px" width="full" light />
+                  <Loader.Item height="46px" width="full" />
                 </Loader>
               )}
             </div>
@@ -224,8 +224,8 @@ const GeneralSettings: NextPage = () => {
             </div>
             <div className="col-span-12 sm:col-span-6">
               {watch("cover_image") ? (
-                <div className="w-full h-32 rounded border p-1">
-                  <div className="w-full h-full relative rounded">
+                <div className="h-32 w-full rounded border p-1">
+                  <div className="relative h-full w-full rounded">
                     <Image
                       src={watch("cover_image")!}
                       alt={projectDetails?.name ?? "Cover image"}
@@ -233,7 +233,7 @@ const GeneralSettings: NextPage = () => {
                       layout="fill"
                       className="rounded"
                     />
-                    <div className="absolute bottom-0 w-full flex justify-end">
+                    <div className="absolute bottom-0 flex w-full justify-end">
                       <ImagePickerPopover
                         label={"Change cover"}
                         onChange={(imageUrl) => {
@@ -246,7 +246,7 @@ const GeneralSettings: NextPage = () => {
                 </div>
               ) : (
                 <Loader className="w-full">
-                  <Loader.Item height="46px" width="full" light />
+                  <Loader.Item height="46px" width="full" />
                 </Loader>
               )}
             </div>
@@ -282,7 +282,7 @@ const GeneralSettings: NextPage = () => {
                 />
               ) : (
                 <Loader>
-                  <Loader.Item height="46px" width="160px" light />
+                  <Loader.Item height="46px" width="160px" />
                 </Loader>
               )}
             </div>
@@ -318,7 +318,7 @@ const GeneralSettings: NextPage = () => {
                 />
               ) : (
                 <Loader className="w-full">
-                  <Loader.Item height="46px" width="160px" light />
+                  <Loader.Item height="46px" width="160px" />
                 </Loader>
               )}
             </div>
@@ -330,7 +330,7 @@ const GeneralSettings: NextPage = () => {
               </SecondaryButton>
             ) : (
               <Loader className="mt-2 w-full">
-                <Loader.Item height="34px" width="100px" light />
+                <Loader.Item height="34px" width="100px" />
               </Loader>
             )}
           </div>
@@ -355,7 +355,7 @@ const GeneralSettings: NextPage = () => {
                 </div>
               ) : (
                 <Loader className="mt-2 w-full">
-                  <Loader.Item height="46px" width="100px" light />
+                  <Loader.Item height="46px" width="100px" />
                 </Loader>
               )}
             </div>
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index e6eab6ce2..3393842ee 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -44,14 +44,14 @@
 
   [data-theme="dark"] {
     --color-bg-base: 25, 27, 27;
-    --color-bg-surface-1: 31, 32, 35;
+    --color-bg-surface-1: 29, 30, 32;
     --color-bg-surface-2: 39, 42, 45;
 
     --color-border: 46, 50, 52;
     --color-bg-sidebar: 19, 20, 22;
     --color-accent: 60, 133, 217;
 
-    --color-text-base: 255, 255, 255;
+    --color-text-base: 233, 244, 252;
     --color-text-secondary: 142, 148, 146;
   }