From 5e9ac2858771ac9a9ef6b148d173b3b843d8793a Mon Sep 17 00:00:00 2001
From: Taiwo Sulaimon <tsulaimon96@gmail.com>
Date: Sat, 18 Mar 2023 09:33:04 +0100
Subject: [PATCH] fix: fixed all hard coded colors

---
 apps/core/src/pages/login/index.tsx           | 12 +++++----
 apps/core/src/pages/signup/index.tsx          | 11 ++++----
 apps/core/src/pages/workspace/index.tsx       | 26 ++++++++++---------
 packages/ui/src/config/mantine.ts             | 21 ++++++++-------
 .../Login/components/FormHeader.tsx           |  9 ++++---
 .../onboarding/Login/components/FormTitle.tsx | 12 ++++++---
 6 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/apps/core/src/pages/login/index.tsx b/apps/core/src/pages/login/index.tsx
index ea10c99..e7e3318 100644
--- a/apps/core/src/pages/login/index.tsx
+++ b/apps/core/src/pages/login/index.tsx
@@ -41,7 +41,9 @@ const useStyles = createStyles(theme => ({
   },
 
   outlineBtn: {
-    border: "1px solid #14466F",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: theme.colors.border[0],
     color: theme.colors.primary[9]
   },
 
@@ -117,7 +119,7 @@ export const LoginPage: React.FC = () => {
           }}
           {...LoginForm.getInputProps("password")}
         />
-        <Text align="right" mb={20} size={12} color={"#626769"}>
+        <Text align="right" mb={20} size={12} color={theme.colors.text[0]}>
           Forgot Password
         </Text>
         <Button
@@ -136,8 +138,8 @@ export const LoginPage: React.FC = () => {
         my="xs"
         label="OR"
         labelPosition="center"
-        labelProps={{ color: "#373B3D" }}
-        color="#B5BEC1"
+        labelProps={{ color: theme.colors.text[1] }}
+        color={theme.colors.text[2]}
         classNames={{ label: classes.label }}
       />
       <Button
@@ -155,7 +157,7 @@ export const LoginPage: React.FC = () => {
       <Text
         align="center"
         mt="md"
-        color={"#373B3D"}
+        color={theme.colors.text[1]}
         weight={"700"}
         size={20}
         mb={25}
diff --git a/apps/core/src/pages/signup/index.tsx b/apps/core/src/pages/signup/index.tsx
index ff1efff..4dd1314 100644
--- a/apps/core/src/pages/signup/index.tsx
+++ b/apps/core/src/pages/signup/index.tsx
@@ -13,7 +13,7 @@ import { Link } from "react-router-dom";
 const useStyles = createStyles(theme => ({
   loginPage: {
     height: "100vh",
-    background: "#FCF7F1"
+    background: theme.colors.secondary[4]
   },
 
   wrapper: {
@@ -38,7 +38,8 @@ const useStyles = createStyles(theme => ({
     right: "0",
     top: "0",
     height: "75px",
-    borderBottom: "1px solid #F9DBB6",
+    borderBottom: "1px solid",
+    borderColor: theme.colors.secondary[5],
     display: "flex",
     justifyContent: "start",
     alignItems: "center",
@@ -80,7 +81,7 @@ const useStyles = createStyles(theme => ({
     fontSize: "44px",
     lineHeight: "50px",
     fontWeight: 700,
-    color: "#1E2122"
+    color: theme.colors.text[3]
   },
 
   logo: {
@@ -117,11 +118,11 @@ export const SignupPage = () => {
       >
         Continue
       </Button>
-      <Divider my="xs" color="#B5BEC1" />
+      <Divider my="xs" color={theme.colors.text[2]} />
       <Text
         align="center"
         mt="md"
-        color={"#373B3D"}
+        color={theme.colors.text[1]}
         weight={"700"}
         size={20}
         mb={25}
diff --git a/apps/core/src/pages/workspace/index.tsx b/apps/core/src/pages/workspace/index.tsx
index 9c657c8..4e726a1 100644
--- a/apps/core/src/pages/workspace/index.tsx
+++ b/apps/core/src/pages/workspace/index.tsx
@@ -13,7 +13,7 @@ import { FormTitle } from "@zuri/ui";
 const useStyles = createStyles(theme => ({
   loginPage: {
     height: "100vh",
-    background: "#FCF7F1"
+    background: theme.colors.secondary[4]
   },
 
   wrapper: {
@@ -38,7 +38,8 @@ const useStyles = createStyles(theme => ({
     right: "0",
     top: "0",
     height: "75px",
-    borderBottom: "1px solid #F9DBB6",
+    borderBottom: "1px solid ",
+    borderColor: theme.colors.secondary[5],
     display: "flex",
     justifyContent: "start",
     alignItems: "center",
@@ -67,7 +68,7 @@ const useStyles = createStyles(theme => ({
   formImage: {
     width: "40%",
     height: "100%",
-    background: "#14466F",
+    background: theme.colors.primary[9],
     color: "white",
     zIndex: 99,
     [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
@@ -80,7 +81,7 @@ const useStyles = createStyles(theme => ({
     fontSize: "40px",
     lineHeight: "50px",
     fontWeight: 700,
-    color: "#1E2122",
+    color: theme.colors.text[3],
     [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
       fontSize: "28px"
     }
@@ -97,7 +98,7 @@ const useStyles = createStyles(theme => ({
   label: {
     fontSize: "20px",
     fontWeight: 700,
-    color: "#373B3D"
+    color: theme.colors.text[1]
   },
 
   fullwidth: {
@@ -108,16 +109,17 @@ const useStyles = createStyles(theme => ({
     width: "100%",
     maxWidth: "270px",
     backgroundColor: "transparent",
-    color: "#14466F"
+    color: theme.colors.primary[9]
   },
 
   outlineBtn: {
-    border: "1px solid #14466F",
+    border: "1px solid ",
+    borderColor: theme.colors.primary[9],
     color: theme.colors.primary[9]
   },
 
   link: {
-    color: "#14466F"
+    color: theme.colors.primary[9]
   }
 }));
 
@@ -142,7 +144,7 @@ export const WorkspaceLogin = () => {
           autoComplete="false"
           classNames={{ input: classes.urlField }}
         />
-        <Text weight={700} size={20} color="#373B3D">
+        <Text weight={700} size={20} color={theme.colors.text[1]}>
           .zurichat.com
         </Text>
       </Flex>
@@ -152,7 +154,7 @@ export const WorkspaceLogin = () => {
       <Text
         align="center"
         mt="md"
-        color={"#373B3D"}
+        color={theme.colors.text[1]}
         weight={"400"}
         size={16}
         mb={25}
@@ -172,8 +174,8 @@ export const WorkspaceLogin = () => {
         my="xs"
         label="OR"
         labelPosition="center"
-        labelProps={{ color: "#373B3D" }}
-        color="#B5BEC1"
+        labelProps={{ color: theme.colors.text[1] }}
+        color={theme.colors.text[2]}
         classNames={{ label: classes.label }}
       />
       <Button
diff --git a/packages/ui/src/config/mantine.ts b/packages/ui/src/config/mantine.ts
index 29b7a60..559304a 100644
--- a/packages/ui/src/config/mantine.ts
+++ b/packages/ui/src/config/mantine.ts
@@ -4,7 +4,7 @@ import type {
   MantineThemeOverride
 } from "@mantine/core";
 
-type ExtendedCustomColors = 'primary' | 'secondary' | DefaultMantineColor;
+type ExtendedCustomColors = "primary" | "secondary" | DefaultMantineColor;
 
 declare module "@mantine/core" {
   export interface MantineThemeColorsOverride {
@@ -31,16 +31,17 @@ export const mantineConfig: Partial<MantineThemeOverride> = {
       "#0f3555",
       "#14466F"
     ],
-    secondary:[
-      "#FBBB6A",//primary 1
-      "#FDCB8C",//primary 2
-      "#FCDAB0",//primary 3
-      "#FBE9D2",//primary 4
-      "#FCF7F1" //primary 5
+    secondary: [
+      "#FBBB6A", //primary 0
+      "#FDCB8C", //primary 1
+      "#FCDAB0", //primary 2
+      "#FBE9D2", //primary 3
+      "#FCF7F1", //primary 4
+      "#F9DBB6" //primary 5
     ],
-    orange: [
-      "#F24F4F"
-    ]
+    orange: ["#F24F4F"],
+    text: ["#626769", "#373B3D", "#B5BEC1", "#1E2122"],
+    border: ["#14466F"]
   },
   primaryColor: "primary"
 };
diff --git a/packages/ui/src/onboarding/Login/components/FormHeader.tsx b/packages/ui/src/onboarding/Login/components/FormHeader.tsx
index 5c3c8de..62bcfb3 100644
--- a/packages/ui/src/onboarding/Login/components/FormHeader.tsx
+++ b/packages/ui/src/onboarding/Login/components/FormHeader.tsx
@@ -8,12 +8,13 @@ const useStyles = createStyles(theme => ({
     right: "0",
     top: "0",
     height: "75px",
-    borderBottom: "1px solid #F9DBB6",
+    borderBottom: "1px solid",
+    borderColor: theme.colors.secondary[5],
     display: "flex",
     justifyContent: "start",
     alignItems: "center",
     paddingLeft: "110px",
-    background: "#FCF7F1",
+    background: theme.colors.secondary[4],
     [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
       paddingLeft: "17px"
     }
@@ -36,12 +37,12 @@ const useStyles = createStyles(theme => ({
 }));
 
 export const FormHeader: React.FC = () => {
-  const { classes } = useStyles();
+  const { classes, theme } = useStyles();
   return (
     <header className={classes.formHeader}>
       <div className={classes.formLogo}>
         <Image src={Logo} />
-        <Text color={"#1E2122"} size={25} weight={900}>
+        <Text color={theme.colors.text[3]} size={25} weight={900}>
           ZuriChat
         </Text>
       </div>
diff --git a/packages/ui/src/onboarding/Login/components/FormTitle.tsx b/packages/ui/src/onboarding/Login/components/FormTitle.tsx
index 96e202d..b9beae1 100644
--- a/packages/ui/src/onboarding/Login/components/FormTitle.tsx
+++ b/packages/ui/src/onboarding/Login/components/FormTitle.tsx
@@ -12,7 +12,7 @@ const useStyles = createStyles(theme => ({
     fontSize: "40px",
     lineHeight: "50px",
     fontWeight: 700,
-    color: "#1E2122"
+    color: theme.colors.text[3]
   }
 }));
 
@@ -21,13 +21,19 @@ export const FormTitle: React.FC<Props> = ({
   subtitle,
   boldSubtitle
 }) => {
-  const { classes } = useStyles();
+  const { classes, theme } = useStyles();
   return (
     <div>
       <Title order={2} className={classes.title} align="center" mt="md" mb={20}>
         {title}
       </Title>
-      <Text align="center" mb={20} size={20} weight={400} color="#373B3D">
+      <Text
+        align="center"
+        mb={20}
+        size={20}
+        weight={400}
+        color={theme.colors.text[1]}
+      >
         {subtitle}{" "}
         <Text display={"inline"} weight={700}>
           {boldSubtitle}