refactor(theme): adjust colors, dark mode, and fonts

sozonome · Oct 10, 2023 · 2dc79e7 · 2dc79e7
1 parent 5bc0844
commit 2dc79e7
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 64 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/outfit": "^5.0.8",
+    "@fontsource/gabarito": "^5.0.1",
+    "@fontsource/gantari": "^5.0.8",
     "@hookform/resolvers": "^3.3.1",
     "@sentry/nextjs": "^7.73.0",
     "firebase": "^10.4.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/hall/components/JoinRoom.tsx b/src/lib/components/hall/components/JoinRoom.tsx
@@ -1,4 +1,4 @@
-import { Button, Grid, Heading, useColorModeValue } from '@chakra-ui/react';
+import { Button, Grid, Heading } from '@chakra-ui/react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import type { ChangeEventHandler } from 'react';
@@ -10,8 +10,6 @@ import SpokerWrapperGrid from '~/lib/components/shared/SpokerWrapperGrid';
 const JoinRoom = () => {
   const router = useRouter();
   const [roomId, setRoomId] = React.useState<string>('');
-  const backgroundColor = useColorModeValue('orange.500', 'orange.700');
-  const placeholderColor = useColorModeValue('orange.200', 'orange.400');
   const isDisabled = React.useMemo(() => roomId.length === 0, [roomId.length]);
 
   const handleChangeInput: ChangeEventHandler<HTMLInputElement> = (e) =>
@@ -26,7 +24,7 @@ const JoinRoom = () => {
   };
 
   return (
-    <SpokerWrapperGrid gap={8} backgroundColor={backgroundColor} color="white">
+    <SpokerWrapperGrid gap={8} backgroundColor="cyan.600" color="white">
       <Heading size="lg">or Join the Party!</Heading>
 
       <Grid gap={4}>
@@ -35,7 +33,7 @@ const JoinRoom = () => {
           value={roomId}
           onChange={handleChangeInput}
           placeholder="quick-brown-fox"
-          _placeholder={{ color: placeholderColor }}
+          _placeholder={{ color: 'cyan.400' }}
           onKeyDown={handleKeyDown}
         />
       </Grid>

diff --git a/src/lib/components/room/CurrentVotesWrapper.tsx b/src/lib/components/room/CurrentVotesWrapper.tsx
@@ -8,7 +8,6 @@ import {
   Heading,
   Select,
   Text,
-  useColorModeValue,
   useToast,
 } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
@@ -32,7 +31,6 @@ import PointWrapper from './PointWrapper';
 import { pointTextColor, pointTextSize } from './utils';
 
 const CurrentVotesWrapper = () => {
-  const wrapperBackgroundColor = useColorModeValue('green.50', 'gray.600');
   const router = useRouter();
   const {
     query: { id },
@@ -138,7 +136,6 @@ const CurrentVotesWrapper = () => {
     <SpokerWrapperGrid
       display="inline-block"
       gap={4}
-      backgroundColor={wrapperBackgroundColor}
       id={CURRENT_VOTE_WRAPPER_ID}
     >
       <Heading size="lg">Current Votes</Heading>
@@ -184,15 +181,15 @@ const CurrentVotesWrapper = () => {
           marginTop={6}
           gap={4}
           padding={2}
-          borderColor="orange.400"
+          borderColor="orange"
           borderWidth={2}
           borderRadius={16}
         >
           <Grid gap={2}>
             <Heading fontSize="md" fontStyle="italic">
               Final Estimate
             </Heading>
-            <Text textColor="gray.500" fontSize="xs">
+            <Text fontSize="xs">
               Select final estimate point and click finish vote to proceed to
               next story in queue.
             </Text>
@@ -202,7 +199,6 @@ const CurrentVotesWrapper = () => {
             <Select
               borderRadius={12}
               borderWidth={2}
-              borderColor="gray.500"
               value={estimate}
               onChange={handleSetEstimate}
               fontWeight="bold"

diff --git a/src/lib/components/room/TaskList/TaskItem.tsx b/src/lib/components/room/TaskList/TaskItem.tsx
@@ -7,6 +7,7 @@ import {
   useBreakpointValue,
 } from '@chakra-ui/react';
 import { HiPencil, HiSwitchVertical, HiTrash } from 'react-icons/hi';
+import { RiDraggable } from 'react-icons/ri';
 
 import type { Task } from '~/lib/types/RawDB';
 
@@ -51,11 +52,12 @@ const TaskItem = ({ task, queueProps }: TaskItemProps) => {
       borderColor="gray.400"
       padding={4}
       marginBottom={2}
-      justifyContent="space-between"
       alignItems="center"
+      gap={4}
       _hover={{ cursor: queueProps?.isQueue ? 'move' : undefined }}
       _active={{ cursor: queueProps?.isQueue ? 'grab' : undefined }}
     >
+      {queueProps?.isQueue ? <RiDraggable /> : null}
       <Box>
         <Heading fontSize="xl">{task.name}</Heading>
         {task.description && <Text>{task.description}</Text>}
@@ -93,7 +95,7 @@ const TaskItem = ({ task, queueProps }: TaskItemProps) => {
       </Box>
 
       {task.estimation && task.estimation >= 0 && (
-        <Text fontSize="lg" fontWeight="bold">
+        <Text fontSize="lg" fontWeight="bold" marginLeft="auto">
           {task.estimation}
         </Text>
       )}

diff --git a/src/lib/components/room/TaskList/index.tsx b/src/lib/components/room/TaskList/index.tsx
@@ -65,7 +65,6 @@ const TaskList = () => {
     showVote: state.showVote,
   }));
   const { isOwner } = useUserRole();
-  const wrapperBackgroundColor = useColorModeValue('gray.50', 'gray.700');
   const tabTextColor = useColorModeValue('', 'gray.300');
   const {
     isOpen: isOpenAddStory,
@@ -249,11 +248,12 @@ const TaskList = () => {
 
   return (
     <>
-      <SpokerWrapperGrid backgroundColor={wrapperBackgroundColor}>
+      <SpokerWrapperGrid>
         <Tabs
           index={selectedTabIndex}
           onChange={handleChangeTab}
           variant="soft-rounded"
+          colorScheme="gray"
         >
           <TabList alignItems="center">
             {isOwner && (

diff --git a/src/lib/components/room/VoteWrapper.tsx b/src/lib/components/room/VoteWrapper.tsx
@@ -1,10 +1,4 @@
-import {
-  Flex,
-  Heading,
-  Spacer,
-  useColorModeValue,
-  useRadioGroup,
-} from '@chakra-ui/react';
+import { Flex, Heading, Spacer, useRadioGroup } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 
 import SpokerRadioBox from '~/lib/components/shared/SpokerRadioBox';
@@ -22,7 +16,6 @@ const VoteWrapper = () => {
     showVote: state.showVote,
   }));
   const { isOwner, isParticipant } = useUserRole();
-  const wrapperBackgroundColor = useColorModeValue('orange.50', 'gray.600');
   const router = useRouter();
   const {
     query: { id },
@@ -50,7 +43,7 @@ const VoteWrapper = () => {
   }
 
   return (
-    <SpokerWrapperGrid gap={4} backgroundColor={wrapperBackgroundColor}>
+    <SpokerWrapperGrid gap={4}>
       <Heading size="lg">Vote!</Heading>
 
       <Flex wrap="wrap" gridGap={2} {...voteOptionGroup}>

diff --git a/src/lib/components/room/header/index.tsx b/src/lib/components/room/header/index.tsx
@@ -1,12 +1,4 @@
-import {
-  Box,
-  Divider,
-  Flex,
-  Grid,
-  Heading,
-  Text,
-  useColorModeValue,
-} from '@chakra-ui/react';
+import { Box, Divider, Flex, Grid, Heading, Text } from '@chakra-ui/react';
 import * as React from 'react';
 
 import SpokerWrapperGrid from '~/lib/components/shared/SpokerWrapperGrid';
@@ -19,7 +11,6 @@ import { useRoomHeader } from './hooks';
 const RoomHeader = () => {
   const roomData = useRoomStore((state) => state.roomData);
   const { isOwner } = useUserRole();
-  const wrapperBackgroundColor = useColorModeValue('teal.50', 'teal.600');
   const { name, description, handleUpdateTask } = useRoomHeader({
     roomData,
     isOwner,
@@ -49,7 +40,7 @@ const RoomHeader = () => {
   }, [description, handleUpdateTask, isOwner, name, roomData?.task]);
 
   return (
-    <SpokerWrapperGrid gap={4} backgroundColor={wrapperBackgroundColor}>
+    <SpokerWrapperGrid gap={4}>
       <Box>
         <Heading size="lg">{roomData?.room.name}</Heading>
         <Divider borderColor="black" marginTop={2} />

diff --git a/src/lib/components/shared/SpokerWrapperGrid.tsx b/src/lib/components/shared/SpokerWrapperGrid.tsx
@@ -6,7 +6,7 @@ import { contraGridStyle } from './style';
 type SpokerWrapperGridProps = GridProps;
 
 const SpokerWrapperGrid = ({ children, ...props }: SpokerWrapperGridProps) => {
-  const backgroundColor = useColorModeValue(undefined, 'gray.600');
+  const backgroundColor = useColorModeValue(undefined, 'gray.500');
 
   return (
     <Grid {...contraGridStyle} backgroundColor={backgroundColor} {...props}>

diff --git a/src/lib/pages/404/index.tsx b/src/lib/pages/404/index.tsx
@@ -5,16 +5,13 @@ import {
   Image,
   Link as ChakraLink,
   Text,
-  useColorMode,
 } from '@chakra-ui/react';
 import Link from 'next/link';
 
 const Page404 = () => {
-  const { colorMode } = useColorMode();
-
   return (
     <>
-      <Box width={['100%', '70%', '60%', '60%']} margin="0 auto">
+      <Box width={{ base: '100%', sm: '70%', md: '50%' }} margin="0 auto">
         <Image src="/404 Error-pana.svg" alt="error-404" />
       </Box>
       <Text textAlign="center" fontSize="xs">
@@ -29,11 +26,7 @@ const Page404 = () => {
         <Box textAlign="center" marginTop={4}>
           <Text>It&apos;s Okay!</Text>
 
-          <Button
-            as={Link}
-            href="/"
-            backgroundColor={colorMode === 'light' ? 'gray.300' : 'teal.500'}
-          >
+          <Button as={Link} href="/">
             Let&apos;s Head Back
           </Button>
         </Box>

diff --git a/src/lib/styles/theme/colors.ts b/src/lib/styles/theme/colors.ts
@@ -2,15 +2,63 @@ import type { DeepPartial, Theme } from '@chakra-ui/react';
 
 export const colors: DeepPartial<Theme['colors']> = {
   gray: {
-    50: '#e8e9e9',
-    100: '#d1d2d2',
-    200: '#a3a5a5',
-    300: '#747978',
-    400: '#464c4b',
-    500: '#181f1e',
-    600: '#131918',
-    700: '#0e1312',
-    800: '#0a0c0c',
-    900: '#050606',
+    '50': '#e9e9ea',
+    '100': '#d3d3d4',
+    '200': '#a6a8a9',
+    '300': '#7a7c7f',
+    '400': '#4d5154',
+    '500': '#212529',
+    '600': '#1a1e21',
+    '700': '#141619',
+    '800': '#0d0f10',
+    '900': '#070708',
+  },
+  blue: {
+    '50': '#f4f8fa',
+    '100': '#e5eef4',
+    '200': '#d1e2ec',
+    '300': '#b1cfdf',
+    '400': '#8cb6ce',
+    '500': '#6a99be',
+    '600': '#5d87b3',
+    '700': '#5276a3',
+    '800': '#476186',
+    '900': '#3d516b',
+  },
+  cyan: {
+    '50': '#f1faf9',
+    '100': '#dbf2f2',
+    '200': '#bbe6e6',
+    '300': '#8cd2d4',
+    '400': '#56b5ba',
+    '500': '#40a9b0',
+    '600': '#337e87',
+    '700': '#2f666f',
+    '800': '#2d555d',
+    '900': '#294850',
+  },
+  teal: {
+    '50': '#f2fbf8',
+    '100': '#d3f4e9',
+    '200': '#a7e8d4',
+    '300': '#73d5ba',
+    '400': '#40b094',
+    '500': '#2ca085',
+    '600': '#21806c',
+    '700': '#1e6758',
+    '800': '#1c5348',
+    '900': '#1c453e',
+  },
+  green: {
+    '50': '#eefbf2',
+    '100': '#d7f4de',
+    '200': '#b1e9c1',
+    '300': '#7fd69e',
+    '400': '#40b06b',
+    '500': '#27a25a',
+    '600': '#198247',
+    '700': '#14683b',
+    '800': '#125331',
+    '900': '#104429',
   },
 };
diff --git a/src/lib/styles/theme/fonts.ts b/src/lib/styles/theme/fonts.ts
@@ -1,6 +1,6 @@
 import type { DeepPartial, Theme } from '@chakra-ui/react';
 
 export const fonts: DeepPartial<Theme['fonts']> = {
-  heading: 'Outfit, sans-serif',
-  body: 'Outfit, sans-serif',
+  heading: 'Gabarito, sans-serif',
+  body: 'Gantari, sans-serif',
 };
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,7 +2,8 @@ import { ChakraProvider, createStandaloneToast } from '@chakra-ui/react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { DefaultSeo } from 'next-seo';
-import '@fontsource/outfit/latin.css';
+import '@fontsource/gabarito/latin.css';
+import '@fontsource/gantari/latin.css';
 
 import defaultSEOConfig from '../../next-seo.config';
 import Layout from '~/lib/layout';