fix: dark color theme

Job-Unicorn · Oct 2, 2021 · 6fa8d9a · 6fa8d9a
1 parent e73a449
commit 6fa8d9a
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 83 deletions.
diff --git a/components/chat/ChatBody.tsx b/components/chat/ChatBody.tsx
@@ -1,5 +1,5 @@
-import { Flex, Button, Spacer, Textarea, InputGroup, InputRightElement, } from '@chakra-ui/react'
 import React from 'react'
+import { useColorModeValue, Flex, Button, Spacer, Textarea, InputGroup, InputRightElement, } from '@chakra-ui/react'
 import { useContext } from 'react'
 import { ChatContext } from '@/store/contexts/ChatContext'
 import ChatProvider from '@/store/providers/ChatProvider'
@@ -18,12 +18,12 @@ const ChatBody = () => {
     formState: { errors },
   } = useForm()
   // eslint-disable-next-line no-unused-vars
-  const { chatState, chatDispatch } = useContext(ChatContext)
+  const { chatState } = useContext(ChatContext)
 
   return (
     <ChatProvider>
 
-      <Flex borderColor="gray.300" shadow="sm" h="85vh" borderWidth="thin" p="4" my="10" overflow="hidden" rounded="md" flexDir="column">
+      <Flex borderColor={useColorModeValue('gray.300', 'whiteAlpha.300')} shadow="sm" h="85vh" borderWidth="thin" p="4" my="10" overflow="hidden" rounded="md" flexDir="column">
 
         <ChatHeader />
 

diff --git a/components/chat/ChatHeader.tsx b/components/chat/ChatHeader.tsx
@@ -1,9 +1,10 @@
-import { Flex, Box, Heading, Divider, Spacer, Text, Image } from '@chakra-ui/react'
 import React from 'react'
+import { useColorModeValue, Flex, Box, Heading, Divider, Spacer, Text, Image } from '@chakra-ui/react'
+
 
 const ChatHeader = () => {
   return (
-    <Flex w="100%" mt="2" flexDir="column" h="fit-content" p="6" borderWidth="thin" borderColor="gray.300" rounded="md" >
+    <Flex w="100%" mt="2" flexDir="column" h="fit-content" p="6" borderWidth="thin" borderColor={useColorModeValue('gray.300', 'whiteAlpha.300')} rounded="md" >
 
       <Flex mb="4">
 
@@ -12,12 +13,12 @@ const ChatHeader = () => {
         <Box ml="4">
           <Heading fontSize="2xl" >Facebook</Heading>
 
-          <Text color="gray.600" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, porro!</Text>
+          <Text color={useColorModeValue('gray.600', 'whiteAlpha.600')} >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, porro!</Text>
         </Box>
       </Flex>
       <Divider />
       <Flex align="center" mt="4">
-        <Heading fontSize="lg" color="gray.700">Lorem ipsum dolor sit amet consectetur adipisicing.</Heading> <Spacer />
+        <Heading fontSize="lg" color={useColorModeValue('gray.700', 'whiteAlpha.800')}>Lorem ipsum dolor sit amet consectetur adipisicing.</Heading> <Spacer />
         <Text color="green.500" >$ 113K - 120k</Text>
       </Flex>
 

diff --git a/components/chat/OtherPersonChat.tsx b/components/chat/OtherPersonChat.tsx
@@ -1,10 +1,10 @@
-import { Flex, Box, Text, Spacer } from '@chakra-ui/react'
 import React from 'react'
+import { useColorModeValue, Flex, Box, Text, Spacer } from '@chakra-ui/react'
 
 const OtherPersonChat = ({ chat }) => {
   return (
     <Flex>
-      <Box p="4" mb="4" w="96" borderColor="gray.300" shadow="sm" borderWidth="thin" rounded="lg" >
+      <Box p="4" mb="4" w="96" borderColor={useColorModeValue('gray.300', 'whiteAlpha.300')} shadow="sm" borderWidth="thin" rounded="lg" >
         <Flex flexDir="column">
           <Text>{chat.message}</Text>
           <Flex>

diff --git a/components/chat/PersonalChat.tsx b/components/chat/PersonalChat.tsx
@@ -1,11 +1,12 @@
-import { Box, Flex, Spacer, Text } from '@chakra-ui/react'
 import React from 'react'
+import { useColorModeValue, Box, Flex, Spacer, Text } from '@chakra-ui/react'
+
 
 const PersonalChat = ({ chat }) => {
   return (
     <Flex>
       <Spacer w="full" />
-      <Box bg="blue.50" p="4" mb="4" w="96" borderColor="gray.300" shadow="sm" borderWidth="thin" rounded="lg" >
+      <Box bg={useColorModeValue('blue.50', 'whiteAlpha.100')} p="4" mb="4" w="96" borderColor={useColorModeValue('gray.300', 'whiteAlpha.300')} shadow="sm" borderWidth="thin" rounded="lg" >
         <Flex flexDir="column">
           <Text>{chat.message}</Text>
           <Flex>

diff --git a/components/general/Logo.tsx b/components/general/Logo.tsx
@@ -1,3 +1,4 @@
+import { useColorModeValue } from '@chakra-ui/color-mode'
 import { Image } from '@chakra-ui/image'
 import { Box, Flex, Link, Text } from '@chakra-ui/layout'
 import React from 'react'
@@ -19,7 +20,7 @@ export const Logo = (props) => {
       <Flex align="center">
         <Image alt="logo" src="/logo.svg" w="10" />
         <Link href="/" >
-          <Text fontSize="2xl" ml="4" cursor="pointer" fontWeight="bold" color="#000F30" >
+          <Text fontSize="2xl" ml="4" cursor="pointer" fontWeight="bold" color={useColorModeValue('#000F30', 'white')} >
                       Job Unicorn
           </Text>
         </Link>

diff --git a/components/general/getLayout.tsx b/components/general/getLayout.tsx
@@ -32,7 +32,7 @@ export function getLayout<P>(Inner : ComponentType<P>, needsAuthentication : INe
           })
         })
       }
-    }, [authDispatch])
+    }, [])
 
     if (needsAuthentication === 'LANDING_PAGE'){
       return (

diff --git a/components/general/navbar/Main.tsx b/components/general/navbar/Main.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import {
+  useColorModeValue,
   Box,
   Flex,
   Grid,
@@ -60,7 +61,7 @@ const NavBarContainer = ({ children, ...props }) => {
       position={['absolute', 'unset']}
       w="100%"
       zIndex="100"
-      shadow="md"
+      shadow={useColorModeValue('md', 'none')}
       templateColumns={['repeat(3, 1fr)', 'repeat(5, 1fr)']}
     >
       <GridItem colSpan={[0, 1]} />

diff --git a/components/jobs/Job.tsx b/components/jobs/Job.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Divider, Flex, Heading, Image, Modal, ModalBody, ModalContent, ModalOverlay, Spacer, Tag, TagLabel, Text, useDisclosure } from '@chakra-ui/react'
+import { useColorModeValue, Box, Button, Divider, Flex, Heading, Image, Modal, ModalBody, ModalContent, ModalOverlay, Spacer, Tag, TagLabel, Text, useDisclosure } from '@chakra-ui/react'
 import React from 'react'
 import { FaUserTie } from 'react-icons/fa'
 import { IoIosDoneAll } from 'react-icons/io'
@@ -12,15 +12,15 @@ const Job = ({job} : {job : IJob}) => {
   const finalRef = React.useRef()
 
   return (
-    <Box borderColor="gray.300" shadow="sm" borderWidth="thin" p="4" my="10" overflow="hidden" rounded="md">
+    <Box borderColor={useColorModeValue('gray.300', 'whiteAlpha.300')} shadow="sm" borderWidth="thin" p="4" my="10" overflow="hidden" rounded="md">
 
       <Flex>
 
         <Image src={job.logo} alt="" objectFit="contain" w="10" />
         <Box ml="4">
           <Heading fontSize="2xl" >{job.company}</Heading>
           {/* company description */}
-          <Text color="gray.600" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, porro!</Text>
+          <Text color={useColorModeValue('gray.600', 'whiteAlpha.600')} >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, porro!</Text>
         </Box>
         <Spacer />
         {/* Modal Opener Button */}
@@ -29,11 +29,11 @@ const Job = ({job} : {job : IJob}) => {
         </Button>
       </Flex>
       {/* Company Employee Strength */}
-      <Flex ml="14" mt="2" color="gray.500" align="center">
+      <Flex ml="14" mt="2" color={useColorModeValue('gray.500','whiteAlpha.500')} align="center">
         <FaUserTie /> <Text ml="2">Employee 1k-10k</Text>
       </Flex>
       {/* Labels of company */}
-      <Flex ml="14" mt="2" color="gray.500" align="center">
+      <Flex ml="14" mt="2" color={useColorModeValue('gray.500','whiteAlpha.500')} align="center">
         <Tag size="sm" colorScheme="blue" borderRadius="full">
           <AiOutlineRise size="18px" />
           <TagLabel ml="1">High Growth</TagLabel>
@@ -44,11 +44,11 @@ const Job = ({job} : {job : IJob}) => {
         </Tag>
       </Flex>
       {/* Job Overview */}
-      <Flex w="100%" mt="6" flexDir="column" p="6" borderWidth="thin" borderColor="gray.300" rounded="md" >
+      <Flex w="100%" mt="6" flexDir="column" p="6" borderWidth="thin" borderColor={useColorModeValue('gray.300','whiteAlpha.300')} rounded="md" >
         <Flex align="center">
-          <Heading fontSize="lg" color="gray.700">{job.title}</Heading> <Spacer />
+          <Heading fontSize="lg" color={useColorModeValue('gray.700','whiteAlpha.800')}>{job.title}</Heading> <Spacer />
           <Text color="green.500" >{job.salary} NEAR</Text>
-          <Button size="sm" ml="4" rounded="md" variant="outline" bg="blue.400" color="white" borderRadius="none" >
+          <Button size="sm" ml="4" rounded="md" variant="outline" colorScheme="blue" borderRadius="none" >
             Apply
           </Button>
 
@@ -61,24 +61,24 @@ const Job = ({job} : {job : IJob}) => {
         <ModalContent maxH="3xl" overflow="hidden" >
           {/* <ModalHeader></ModalHeader>
                     <ModalCloseButton /> */}
-          <ModalBody p="6" >
+          <ModalBody p="6" bg={useColorModeValue('white', 'gray.800')} >
             <Flex>
               {/* Company logo in Modal */}
-              <Image src={job.logo} alt="" objectFit="contain" w="10" />
+              <Image src={job.logo} alt="logo" objectFit="contain" w="10" />
               <Box ml="4">
 
                 {/* Company Name in Modal */}
                 <Heading fontSize="2xl" >{job.company}</Heading>
                 {/* Company description in Modal */}
-                <Text color="gray.600" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, porro!</Text>
+                <Text color={useColorModeValue('gray.600', 'whiteAlpha.600')} >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, porro!</Text>
               </Box>
             </Flex>
-            <Flex ml="14" mt="2" color="gray.500" align="center">
+            <Flex ml="14" mt="2" color={useColorModeValue('gray.500','whiteAlpha.500')} align="center">
               {/* Company employee strength in Modal */}
               <FaUserTie /> <Text ml="2">Employee 1k-10k</Text>
             </Flex>
             {/* Company Labels in Modal */}
-            <Flex ml="14" mt="2" color="gray.500" align="center">
+            <Flex ml="14" mt="2" color={useColorModeValue('gray.500','whiteAlpha.500')} align="center">
               <Tag size="sm" colorScheme="blue" borderRadius="full">
                 <AiOutlineRise size="18px" />
                 <TagLabel ml="1">High Growth</TagLabel>
@@ -88,36 +88,36 @@ const Job = ({job} : {job : IJob}) => {
                 <TagLabel>Verified</TagLabel>
               </Tag>
             </Flex>
-            <Flex w="100%" mt="6" flexDir="row" p="6" borderWidth="thin" borderColor="gray.300" rounded="md" >
+            <Flex w="100%" mt="6" flexDir="row" p="6" borderWidth="thin" borderColor={useColorModeValue('gray.300','whiteAlpha.300')} rounded="md" >
 
               {/* ------------------------------------------------------------------------------------------ */}
 
               <Flex w="60%" pr="6" flexDir="column">
                 {/* Job Title in Modal */}
-                <Heading fontSize="2xl" color="gray.700" mb="2" >{job.title}</Heading>
+                <Heading fontSize="2xl" color={useColorModeValue('gray.700','whiteAlpha.800')} mb="2" >{job.title}</Heading>
                 <Divider />
                 {/* Job Description in Modal */}
-                <Text mt="2" color="gray.500" fontSize="sm">{job.description}</Text>
+                <Text mt="2" color={useColorModeValue('gray.500','whiteAlpha.600')} fontSize="sm">{job.description}</Text>
 
                 <Spacer />
 
-                <Button size="md" w="fit-content" rounded="md" variant="outline" bg="blue.400" color="white" borderRadius="none" >
+                <Button size="md" w="fit-content" rounded="md" variant="outline" colorScheme="blue" borderRadius="none" >
                   Apply
                 </Button>
               </Flex>
 
 
               {/* ------------------------------------------------------------------------------------------ */}
 
-              <Box w="40%" borderColor="gray.300" borderWidth="thin" p="3" rounded="md" >
+              <Box w="40%" borderColor={useColorModeValue('gray.300','whiteAlpha.300')} borderWidth="thin" p="3" rounded="md" >
 
                 <Box mb="3">
                   {/* Job type in Modal */}
-                  <Text fontWeight="black" >Job Type</Text>
+                  <Text fontWeight="black" color={useColorModeValue('gray.700','whiteAlpha.800')} >Job Type</Text>
                   <Text>{job.type}</Text>
                 </Box>
                 <Box mb="3">
-                  <Text fontWeight="black" mb="2" >Skills Required</Text>
+                  <Text fontWeight="black" color={useColorModeValue('gray.700','whiteAlpha.800')} mb="2" >Skills Required</Text>
                   {/* Job skills required / labels */}
                   < >