UI enhancement test

Components/CategoryPage.js

@@ -41,7 +41,7 @@ export default function CategoryPage({ ideas: inIdeas }) {
   }
 
   return (
-    <Container maxW="container.md">
+    <Container px={6} maxW="container">
       <Navbar />
       <Box py={4}>
         <Button size="sm" onClick={() => router.push("/")}>

Components/Contribution.js

@@ -4,36 +4,42 @@ import { useRouter } from "next/router"
 import { useColorModeValue, useColorMode } from "@chakra-ui/color-mode"
 
 export default function Contribution() {
-  const { toggleColorMode } = useColorMode()
-  const color = useColorModeValue("black", "black")
+  const boxBg = useColorModeValue('#FFFFFF', '#0D1B2A');
   const router = useRouter()
   return (
     <>
       <Box my={4}>
         <Flex
-          direction="column"
-          bgColor="papayawhip"
+          direction="row"
+          justify="space-between"
+          align="center"
+          bgColor={boxBg}
           borderRadius="lg"
-          px={6}
-          py={4}
+          p={8}
+          mt={6}
+          boxShadow="0px 0px 15px rgba(255, 99, 71, 0.05)"
         >
-          <Text
-            fontSize={{ base: "20px", md: "28px" }}
-            fontWeight="medium"
-            color={color}
-          >
-            Want to Contribute?
-          </Text>
-          <Text color={color}>
-            Share your Ideas to the whole community by writing your ideas in the
-            Markdown
-          </Text>
-          <Box my={4}>
+          <Box>
+            <Text
+              fontSize={{ base: "16px", md: "18px" }}
+              fontWeight="bold"
+              mb={3}
+            >
+              Want to Contribute?
+            </Text>
+            <Text fontSize={{ base: "14px", md: "16px" }} >
+              Share your Ideas to the whole community by writing your ideas in the
+              Markdown
+            </Text>
+          </Box>
+          <Box>
             <Button
               size="md"
               colorScheme="blackAlpha"
               color="white"
-              bgColor="black"
+              bgColor="#FF6347"
+              borderRadius="lg"
+              fontWeight="normal"
               onClick={() => router.push("/contribution")}
             >
               Contribute Now

Components/Footer.js

@@ -11,9 +11,8 @@ import { FaGithub } from "react-icons/fa"
 
 export const Footer = () => {
   return (
-    <Box as="footer" role="contentinfo" py={{ base: "12", md: "16" }}>
-      <Divider />
-      <Stack mt={4} justify="space-between" direction="row" align="center">
+    <Box as="footer" role="contentinfo" pt={{ base: "12", md: "16" }} pb={{base: "6", md: "8"}}>
+      <Stack justify="space-between" direction="row" align="center">
         <Text fontSize="sm" color="subtle">
           Copyright &copy; {new Date().getFullYear()} Conception
         </Text>

Components/HomePage.js

@@ -6,40 +6,54 @@ import {
   GridItem,
   Link as ChakraLink,
   Text,
+  useColorModeValue
 } from "@chakra-ui/react"
 import React from "react"
 import Navbar from "./Navbar"
 import Link from "next/link"
 import Contribution from "./Contribution"
 import { Footer } from "./Footer"
+import { FaGraduationCap, FaLightbulb } from "react-icons/fa";
 
 export default function HomePage({ categories }) {
+  const boxBg = useColorModeValue('#FFFFFF', '#0D1B2A')
   return (
-    <Container maxW="container.md">
+    <Container maxW="container.lg">
       <Navbar />
-      <Grid py={6} templateColumns="repeat(2, 1fr)" gap={4}>
+      <Grid templateColumns="repeat(2, 1fr)" gap={7}>
         {categories.map((category) => {
           return (
             <GridItem
-              h="100px"
+              minH="186px"
               key={category.title}
-              bg="tomato"
-              px={2}
-              py={2}
-              color="white"
-              borderRadius={8}
             >
-              <Box>
-                <Center>
-                  <Link href={`/${category.href}`} passHref>
-                    <ChakraLink>
-                      <Text fontSize={{ base: "20px", md: "24px" }}>
-                        {category.title}
-                      </Text>
-                    </ChakraLink>
-                  </Link>
-                </Center>
-              </Box>
+              <Link
+                minH="inherit"
+                href={`/${category.href}`} flex passHref>
+                <Box
+                  bg={boxBg}
+                  px={3}
+                  py={3}
+                  borderRadius="lg"
+                  _hover={{ border: `2px solid ${category.title === "App Ideas" ? "#2A9D8F" : "#E76F51"}` }}
+                  fontSize={{ base: "14px", md: "18px" }}
+                  boxShadow="0px 0px 15px rgba(255, 99, 71, 0.05)"
+                  cursor="pointer"
+                  display="flex"
+                  flexDir="column"
+                  justifyContent="center"
+                  alignItems="center"
+                  minH="inherit">
+                  {
+                    category.title === "App Ideas" ?
+                      <FaLightbulb fontSize={41} color="#2A9D8F" /> :
+                      <FaGraduationCap fontSize={41} color="#E76F51" />
+                  }
+                  <Text textTransform="uppercase" fontWeight="bold" mt={3}>
+                    {category.title}
+                  </Text>
+                </Box>
+              </Link>
             </GridItem>
           )
         })}

Components/IdeaPage.js

@@ -12,7 +12,7 @@ export default function IdeaPage({ children }) {
   const formattedTags = formatStringToArray(tagsString)
 
   return (
-    <Container maxW="container.md">
+    <Container maxW="container.lg">
       <Navbar />
       <Box mt={4}>
         <Button

Components/Navbar.js

@@ -4,24 +4,32 @@ import {
   Flex,
   Heading,
   Link as ChakraLink,
-  Button,
+  Switch,
+  Text
 } from "@chakra-ui/react"
 import { useColorMode } from "@chakra-ui/color-mode"
 import Link from "next/link"
 
 export default function Navbar() {
-  const { toggleColorMode } = useColorMode()
+  const { colorMode, toggleColorMode } = useColorMode();
   return (
-    <Box>
-      <Flex justify="space-between" align="center" py={4}>
-        <Heading fontSize="3xl" fontWeight={500}>
+    <Box pb={8}>
+      <Flex justify="space-between" align="center" pt={1} pb={8}>
+        <Heading>
           <Link href={`/`} passHref>
-            <ChakraLink>Conception</ChakraLink>
+            <ChakraLink fontSize={18} textTransform="uppercase" fontWeight={700}>Conception</ChakraLink>
           </Link>
         </Heading>
-        <Button size="sm" color="gray.500" onClick={toggleColorMode}>
-          Switch Theme
-        </Button>
+        <Flex fontSize={14} direction='row' align="center">
+          <Text>Light</Text>
+          <Box mx={2}>
+            <Switch colorScheme='brand' size='lg'
+              isChecked ={colorMode === 'light' ? false : true}
+              onChange={toggleColorMode}
+              />
+          </Box>
+          <Text>Dark</Text>
+        </Flex>
       </Flex>
     </Box>
   )

pages/_app.js

@@ -1,7 +1,7 @@
-import "@fontsource/league-spartan"
-import { ChakraProvider } from "@chakra-ui/react"
-import "../styles/globals.css"
-import theme from "../theme"
+import { ChakraProvider } from "@chakra-ui/react";
+import "@fontsource/plus-jakarta-sans";
+import "../styles/globals.css";
+import theme from "../theme";
 
 function MyApp({ Component, pageProps }) {
   return (

pages/contribution.js

@@ -5,7 +5,7 @@ import Navbar from "../Components/Navbar"
 
 export default function contribution() {
   return (
-    <Container maxW="container.md">
+    <Container maxW="container.lg">
       <Navbar />
       <Box my={4}>
         <Heading fontWeight="medium" fontSize={{ base: "24px", md: "32px" }}>

styles/Home.module.css

@@ -16,7 +16,6 @@
   display: flex;
   flex: 1;
   padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
   justify-content: center;
   align-items: center;
 }

theme.js

@@ -1,28 +1,36 @@
 import { extendTheme } from "@chakra-ui/react"
-
+import { mode } from '@chakra-ui/theme-tools';
 const overrides = {
   fonts: {
-    heading: `'League Spartan', sans-serif`,
-    body: `sans-serif`,
-  },
-  fontWeights: {
-    hairline: 100,
-    thin: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900,
-  },
+    heading: `'Plus Jakarta Sans', sans-serif`,
+    body: `'Plus Jakarta Sans', sans-serif`,
+  }
+}
+
+const light ={
+  textColor: '#1A202C',
+  bodyBg: '#FFF9F7',
+}
+
+const dark ={
+  textColor: '#FFFFFF',
+  bodyBg: '#1A202C',
+}
+
+const customStyles = {
+  global:
+  (props)=>({
+    body: {
+      bg: mode(light.bodyBg, dark.bodyBg)(props)
+    }
+  })
 }
 
 const config = {
   initialColorMode: "light",
   useSystemColorMode: false,
 }
 
-const theme = extendTheme({ overrides, config })
+const theme = extendTheme({ fonts: overrides.fonts, config, styles: customStyles })
 
 export default theme