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}