feat: updated chakra UI theme (#858)

kula-app · Mar 11, 2024 · 2a35e53 · 2a35e53
1 parent 670f7a8
commit 2a35e53
Show file tree

Hide file tree

Showing 24 changed files with 330 additions and 235 deletions.
diff --git a/components/AuthForm.tsx b/components/AuthForm.tsx
@@ -1,17 +1,17 @@
-import { useState, FormEvent } from "react";
-import styles from "../styles/Home.module.css";
-import { signIn } from "next-auth/react";
-import { useRouter } from "next/router";
-import Routes from "../routes/routes";
-import signupUser from "../api/users/signupUser";
 import {
   Button,
+  FormControl,
+  FormLabel,
+  Heading,
   Input,
   useToast,
-  Heading,
-  FormLabel,
-  FormControl,
 } from "@chakra-ui/react";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/router";
+import { FormEvent, useState } from "react";
+import signupUser from "../api/users/signupUser";
+import Routes from "../routes/routes";
+import styles from "../styles/Home.module.css";
 
 export default function AuthForm() {
   const router = useRouter();
@@ -130,12 +130,12 @@ export default function AuthForm() {
               </FormControl>
             )}
             <div className="flex flex-col mt-8">
-              <Button colorScheme="blue" type="submit">
+              <Button colorScheme="highlightPurple" type="submit">
                 {isLoginMode ? "login" : "create account"}
               </Button>
               <Button
                 variant="ghost"
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 type="button"
                 onClick={switchLoginMode}
               >
@@ -146,7 +146,7 @@ export default function AuthForm() {
               {isLoginMode && (
                 <Button
                   variant="ghost"
-                  colorScheme="blue"
+                  colorScheme="highlightPurple"
                   type="button"
                   onClick={navigateToPasswordResetPage}
                 >

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,31 +1,30 @@
-import React from "react";
 import {
+  Avatar,
   Box,
-  Flex,
-  Text,
-  IconButton,
   Button,
-  Stack,
+  Center,
   Collapse,
+  Flex,
+  IconButton,
   Link,
-  useColorModeValue,
-  useBreakpointValue,
-  useDisclosure,
-  Avatar,
-  Center,
   Menu,
   MenuButton,
   MenuDivider,
   MenuItem,
   MenuList,
+  Stack,
+  Text,
+  useBreakpointValue,
+  useColorModeValue,
+  useDisclosure,
 } from "@chakra-ui/react";
-import { MdMenu, MdClose } from "react-icons/md";
-import Routes from "../routes/routes";
-import { useRouter } from "next/router";
-import { signOut } from "next-auth/react";
 import { Session } from "next-auth";
-import MobileNav from "./NavbarMobile";
+import { signOut } from "next-auth/react";
+import { useRouter } from "next/router";
+import { MdClose, MdMenu } from "react-icons/md";
+import Routes from "../routes/routes";
 import DesktopNav from "./NavbarDesktop";
+import MobileNav from "./NavbarMobile";
 
 interface Props {
   session: Session;
@@ -42,14 +41,14 @@ export default function Header(props: Props) {
   return (
     <Box>
       <Flex
-        bg={useColorModeValue("white", "gray.800")}
-        color={useColorModeValue("gray.600", "white")}
+        bg={useColorModeValue("black", "black")}
+        color={useColorModeValue("white", "white")}
         minH={"60px"}
         py={{ base: 2 }}
         px={{ base: 4 }}
         borderBottom={1}
         borderStyle={"solid"}
-        borderColor={useColorModeValue("gray.200", "gray.900")}
+        borderColor={useColorModeValue("gray.200", "gray.200")}
         align={"center"}
       >
         <Flex
@@ -71,9 +70,9 @@ export default function Header(props: Props) {
             <Text
               textAlign={useBreakpointValue({ base: "center", md: "left" })}
               fontFamily={"heading"}
-              color={useColorModeValue("gray.800", "white")}
-              as='b'
-              textDecoration='none'
+              color={useColorModeValue("white", "white")}
+              as="b"
+              textDecoration="none"
             >
               OnLaunch &#128640;
             </Text>
@@ -85,6 +84,7 @@ export default function Header(props: Props) {
         </Flex>
 
         <Stack
+          color={useColorModeValue("white", "white")}
           flex={{ base: 1, md: 0 }}
           justify={"flex-end"}
           direction={"row"}
@@ -111,29 +111,23 @@ export default function Header(props: Props) {
                 cursor={"pointer"}
                 minW={0}
               >
-                <Avatar
-                  size={"sm"}
-                  name={props.session.user.name}
-                />
+                <Avatar size={"sm"} name={props.session.user.name} />
               </MenuButton>
-              <MenuList alignItems={"center"}>
+              <MenuList alignItems={"center"} bg={"black"}>
                 <br />
                 <Center>
-                  <Avatar
-                    size={"2xl"}
-                    name={props.session.user.name}
-                  />
+                  <Avatar size={"2xl"} name={props.session.user.name} />
                 </Center>
                 <br />
                 <Center>
                   <p>{props?.session?.user?.name}</p>
                 </Center>
                 <br />
                 <MenuDivider />
-                <MenuItem as="a" href={Routes.DASHBOARD}>
+                <MenuItem as="a" href={Routes.DASHBOARD} bg={"black"}>
                   Your Organisations
                 </MenuItem>
-                <MenuItem as="a" href="/profile">
+                <MenuItem as="a" href="/profile" bg={"black"}>
                   Your Profile
                 </MenuItem>
                 <MenuDivider />
@@ -142,6 +136,7 @@ export default function Header(props: Props) {
                     signOut();
                     navigateToAuthPage();
                   }}
+                  bg={"black"}
                 >
                   Logout
                 </MenuItem>

diff --git a/components/NavbarDesktop.tsx b/components/NavbarDesktop.tsx
@@ -1,15 +1,14 @@
-import React from "react";
 import {
   Box,
+  Flex,
+  Icon,
   Link,
-  Stack,
   Popover,
-  PopoverTrigger,
   PopoverContent,
-  useColorModeValue,
+  PopoverTrigger,
+  Stack,
   Text,
-  Flex,
-  Icon,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import { MdChevronRight } from "react-icons/md";
 import Routes from "../routes/routes";
@@ -29,9 +28,9 @@ const NAV_ITEMS: Array<NavItem> = [
 ];
 
 export default function DesktopNav() {
-  const linkColor = useColorModeValue("gray.600", "gray.200");
-  const linkHoverColor = useColorModeValue("gray.800", "white");
-  const popoverContentBgColor = useColorModeValue("white", "gray.800");
+  const linkColor = useColorModeValue("white", "white");
+  const linkHoverColor = useColorModeValue("gray.200", "gray.200");
+  const popoverContentBgColor = useColorModeValue("gray.200", "gray.200");
 
   return (
     <Stack direction={"row"} spacing={4}>
@@ -85,7 +84,7 @@ function DesktopSubNav({ label, href, subLabel }: NavItem) {
       display={"block"}
       p={2}
       rounded={"md"}
-      _hover={{ bg: useColorModeValue("pink.50", "gray.900") }}
+      _hover={{ bg: useColorModeValue("pink.50", "pink.50") }}
     >
       <Stack direction={"row"} align={"center"}>
         <Box>

diff --git a/components/NavbarMobile.tsx b/components/NavbarMobile.tsx
@@ -1,13 +1,12 @@
-import React from "react";
 import {
-  Stack,
-  Link,
   Collapse,
+  Flex,
   Icon,
-  useColorModeValue,
+  Link,
+  Stack,
   Text,
-  Flex,
-  useDisclosure
+  useColorModeValue,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { MdExpandMore } from "react-icons/md";
 import Routes from "../routes/routes";
@@ -78,7 +77,7 @@ function MobileNavItem({ label, children, href }: NavItem) {
           pl={4}
           borderLeft={1}
           borderStyle={"solid"}
-          borderColor={useColorModeValue("gray.200", "gray.700")}
+          borderColor={useColorModeValue("gray.400", "gray.700")}
           align={"start"}
         >
           {children &&

diff --git a/components/ProductCard.tsx b/components/ProductCard.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
-import { Product } from "../models/product";
-import { ProductType } from "../models/productType";
 import { Button, Checkbox, Divider, Heading, Text } from "@chakra-ui/react";
-import Routes from "../routes/routes";
 import { useRouter } from "next/router";
+import { useState } from "react";
 import createCheckoutSession from "../api/stripe/createCheckoutSession";
+import { Product } from "../models/product";
+import { ProductType } from "../models/productType";
+import Routes from "../routes/routes";
 
 interface Props {
   product: Product;
@@ -97,14 +97,16 @@ const ProductCard = (props: Props) => {
             }}
           >
             unlimited exceeding requests at{" "}
-            {formatCurrency((props.product.unlimitedOption.priceAmount as number))}{" "}
+            {formatCurrency(
+              props.product.unlimitedOption.priceAmount as number
+            )}{" "}
             per extra request
           </Checkbox>
         </div>
       )}
       <div className="flex-grow"></div>
       <Button
-        colorScheme="blue"
+        colorScheme="highlightPurple"
         onClick={() => handleSubscription()}
         className="mt-4 flex w-full"
         role="link"

diff --git a/components/RequestsChart.tsx b/components/RequestsChart.tsx
@@ -1,14 +1,13 @@
-import React from "react";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LineElement,
   LinearScale,
   PointElement,
-  LineElement,
   Title,
   Tooltip,
-  Filler,
-  Legend,
 } from "chart.js";
 import { Line } from "react-chartjs-2";
 
@@ -40,10 +39,18 @@ export const options = {
   },
   scales: {
     y: {
+      grid: {
+        color: "#8D8D92", // Set grid line color to grey
+      },
       ticks: {
         precision: 0, // Ensure that only whole numbers are shown
       },
     },
+    x: {
+      grid: {
+        color: "#8D8D92", // Set grid line color to grey
+      },
+    },
   },
 };
 
@@ -82,8 +89,8 @@ export default function RequestChart({ requestData }: RequestChartProps) {
         fill: true,
         label: "Requests per day",
         data: dataSet,
-        borderColor: "rgb(53, 162, 235)",
-        backgroundColor: "rgba(53, 162, 235, 0.5)",
+        borderColor: "#7823C9",
+        backgroundColor: "#7823C9",
       },
     ],
   };

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,18 +1,17 @@
-import "../styles/globals.css";
-import type { AppProps } from "next/app";
+import { ChakraProvider } from "@chakra-ui/react";
+import "cal-sans";
 import { SessionProvider } from "next-auth/react";
+import type { AppProps } from "next/app";
 import Navbar from "../components/Navbar";
-import "cal-sans";
-import { ChakraProvider, extendTheme } from "@chakra-ui/react";
-
-const chakraTheme = extendTheme();
+import customTheme from "../styles/customChakraTheme";
+import "../styles/globals.css";
 
 export default function App({
   Component,
   pageProps: { session, ...pageProps },
 }: AppProps) {
   return (
-    <ChakraProvider theme={chakraTheme} resetCSS>
+    <ChakraProvider theme={customTheme} resetCSS>
       <SessionProvider session={session}>
         <Navbar session={session} />
         <Component {...pageProps} />

diff --git a/pages/changeEmail.tsx b/pages/changeEmail.tsx
@@ -1,10 +1,10 @@
+import { Button, Center, Heading, Spinner, useToast } from "@chakra-ui/react";
+import { signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import styles from "../styles/Home.module.css";
-import { signOut, useSession } from "next-auth/react";
 import validateEmailChange from "../api/tokens/validateEmailChange";
 import Routes from "../routes/routes";
-import { Button, Center, Heading, Spinner, useToast } from "@chakra-ui/react";
+import styles from "../styles/Home.module.css";
 
 export default function ResetPasswordPage() {
   const router = useRouter();
@@ -71,7 +71,7 @@ export default function ResetPasswordPage() {
             </Center>
             <Center>
               <Button
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 sx={{ marginTop: 5 }}
                 onClick={navigateToAuthPage}
               >

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
@@ -124,7 +124,7 @@ export default function DashboardPage() {
         <div>
           <Button
             className="mt-8"
-            colorScheme="blue"
+            colorScheme="highlightPurple"
             onClick={navigateToNewOrgPage}
           >
             New Organisation
@@ -205,7 +205,7 @@ export default function DashboardPage() {
                 Cancel
               </Button>
               <Button
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 ml={3}
                 onClick={() => {
                   joinOrg(Number(orgInvite?.id));