implementing scaling of theme

website/src/components/AuthLayout.tsx

@@ -1,14 +1,13 @@
-import { Box, useColorModeValue } from "@chakra-ui/react";
+import { Container } from "@chakra-ui/react";
 
 export function AuthLayout({ children }) {
-  const backgroundColor = useColorModeValue("#FFFFFF", "#000000");
   return (
-    <Box backgroundColor={backgroundColor} className="flex items-center justify-center sm:py-4 subpixel-antialiased">
+    <Container className="flex items-center justify-center sm:py-4 subpixel-antialiased">
       <div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
         <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-4">
           {children}
         </div>
       </div>
-    </Box>
+    </Container>
   );
 }

website/src/components/Header/Header.tsx

@@ -1,13 +1,11 @@
-import { Box, Button, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, Button, Container, useColorModeValue } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
-import { signOut, useSession } from "next-auth/react";
-import { FaUser, FaSignOutAlt } from "react-icons/fa";
-import clsx from "clsx";
+import {  useSession } from "next-auth/react";
+import { FaUser} from "react-icons/fa";
 
-import { Container } from "src/components/Container";
 import { NavLinks } from "./NavLinks";
 import { UserMenu } from "./UserMenu";
 import ColorModeSwitch from "../UI/ColorModeSwitch";
@@ -56,10 +54,8 @@ function AccountButton() {
 }
 
 export function Header(props) {
-  const transparent = props.transparent ?? false;
-  const backgroundColor = useColorModeValue('#FFFFFF', '#000000')
   return (
-    <Box backgroundColor={backgroundColor}>
+    <Container>
       <nav>
         <Container className="relative z-10 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
@@ -122,6 +118,6 @@ export function Header(props) {
           </div>
         </Container>
       </nav>
-    </Box>
+    </Container>
   );
 }

website/src/components/Hero.tsx

@@ -56,7 +56,7 @@ export function Hero() {
       <Container className="">
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-5xl mb-6 font-bold tracking-tight text-gray-900">Open Assistant</h1>
+            <h1 className="text-5xl mb-6 font-bold tracking-tight">Open Assistant</h1>
             <p className="mt-8 text-3xl inline bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text font-display tracking-tight text-transparent">
               <b>Conversational AI for everyone.</b>
             </p>

website/src/pages/_app.tsx

@@ -5,7 +5,7 @@ import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
 
 import "../styles/globals.css";
 import "focus-visible";
-import { Chakra, getServerSideProps } from "../styles/Theme";
+import { Chakra, getServerSideProps } from "../styles/Chakra";
 
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;

website/src/pages/index.tsx

@@ -7,6 +7,7 @@ import { Hero } from "src/components/Hero";
 import { TaskSelection } from "src/components/TaskSelection";
 import { Header } from "src/components/Header";
 import { Footer } from "src/components/Footer";
+import { Box, Container } from "@chakra-ui/react";
 
 const Home = () => {
   const { data: session } = useSession();
@@ -21,16 +22,15 @@ const Home = () => {
         />
       </Head>
       {session ? (
-        <main className="my-4">
+        <Container>
           <TaskSelection />
-        </main>
+        </Container>
       ) : (
-        <main>
+        <Container className="min-w-full">
           <Hero />
           <CallToAction />
-
           <Faq />
-        </main>
+        </Container>
       )}
     </>
   );

website/src/styles/Chakra.tsx

@@ -0,0 +1,23 @@
+import { ChakraProvider, cookieStorageManagerSSR, localStorageManager } from "@chakra-ui/react";
+import { theme } from "./Theme";
+
+export function Chakra({ cookies, children }) {
+  const colorModeManager = typeof cookies === "string" ? cookieStorageManagerSSR(cookies) : localStorageManager;
+
+  return (
+    <ChakraProvider theme={theme} colorModeManager={colorModeManager}>
+      {children}
+    </ChakraProvider>
+  );
+}
+
+// also export a reusable function getServerSideProps
+export function getServerSideProps({ req }) {
+  return {
+    props: {
+      // first time users will not have any cookies and you may not return
+      // undefined here, hence ?? is necessary
+      cookies: req.headers.cookie ?? "",
+    },
+  };
+}

website/src/styles/Theme.tsx

@@ -1,48 +0,0 @@
-import {
-  extendTheme,
-  type ThemeConfig,
-  ChakraProvider,
-  cookieStorageManagerSSR,
-  localStorageManager,
-} from "@chakra-ui/react";
-
-const config: ThemeConfig = {
-  initialColorMode: "light",
-  useSystemColorMode: true,
-  disableTransitionOnChange: false,
-};
-
-const styles = {
-  global: {
-    body: {
-      bg: "white",
-    },
-    main: {
-      fontFamily: "Inter",
-    },
-    header: {
-      fontFamily: "Inter",
-    },
-  },
-};
-const theme = extendTheme({ config, styles });
-
-
-export function Chakra({ cookies, children }) {
-  const colorModeManager = typeof cookies === "string" ? cookieStorageManagerSSR(cookies) : localStorageManager;
-
-  return <ChakraProvider theme={theme} colorModeManager={colorModeManager}>{children}</ChakraProvider>;
-}
-
-// also export a reusable function getServerSideProps
-export function getServerSideProps({ req }) {
-  return {
-    props: {
-      // first time users will not have any cookies and you may not return
-      // undefined here, hence ?? is necessary
-      cookies: req.headers.cookie ?? "",
-    },
-  };
-}
-
-export default theme;

website/src/styles/Theme/colors.ts

@@ -0,0 +1,8 @@
+export const colors = {
+  light: {
+    bg: "gray.100"
+  },
+  dark: {
+    bg: "gray.900"
+  },
+};

website/src/styles/Theme/components/Container.ts

@@ -0,0 +1,12 @@
+import { color, defineStyle, defineStyleConfig, transition } from "@chakra-ui/styled-system"
+import { colors } from "../colors"
+
+const baseStyle = defineStyle(({colorMode}) => ({
+  minWidth: "100%",
+  bg: colorMode === "light" ? colors.light.bg : colors.dark.bg,
+  transition: "background-color 250ms ease-in"
+}))
+
+export const containerTheme = defineStyleConfig({
+  baseStyle,
+})

website/src/styles/Theme/index.ts

@@ -0,0 +1,29 @@
+import { extendTheme, type ThemeConfig } from "@chakra-ui/react";
+import { containerTheme } from "./components/Container";
+import { Styles, mode } from "@chakra-ui/theme-tools";
+
+const config: ThemeConfig = {
+  initialColorMode: "light",
+  useSystemColorMode: true,
+  disableTransitionOnChange: false,
+};
+
+const components = {
+  Container: containerTheme,
+};
+
+const styles: Styles = {
+  global: {
+    body: {
+      bg: "white",
+    },
+    main: {
+      fontFamily: "Inter",
+    },
+    header: {
+      fontFamily: "Inter",
+    },
+  },
+};
+
+export const theme = extendTheme({ config, styles, components });