From fc64fd6e60c37d46379532779e1b8ca85f08d6b5 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 01:29:12 +0200 Subject: [PATCH] implementing scaling of theme --- website/src/components/AuthLayout.tsx | 7 ++- website/src/components/Header/Header.tsx | 14 ++---- website/src/components/Hero.tsx | 2 +- website/src/pages/_app.tsx | 2 +- website/src/pages/index.tsx | 10 ++-- website/src/styles/Chakra.tsx | 23 +++++++++ website/src/styles/Theme.tsx | 48 ------------------- website/src/styles/Theme/colors.ts | 8 ++++ .../src/styles/Theme/components/Container.ts | 12 +++++ website/src/styles/Theme/index.ts | 29 +++++++++++ 10 files changed, 87 insertions(+), 68 deletions(-) create mode 100644 website/src/styles/Chakra.tsx delete mode 100644 website/src/styles/Theme.tsx create mode 100644 website/src/styles/Theme/colors.ts create mode 100644 website/src/styles/Theme/components/Container.ts create mode 100644 website/src/styles/Theme/index.ts diff --git a/website/src/components/AuthLayout.tsx b/website/src/components/AuthLayout.tsx index 08b5378a..3d6ed134 100644 --- a/website/src/components/AuthLayout.tsx +++ b/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 ( - +
{children}
- + ); } diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx index b882fdaf..81f2ebb5 100644 --- a/website/src/components/Header/Header.tsx +++ b/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 ( - + - + ); } diff --git a/website/src/components/Hero.tsx b/website/src/components/Hero.tsx index 4f6bf4cb..c63f2769 100644 --- a/website/src/components/Hero.tsx +++ b/website/src/components/Hero.tsx @@ -56,7 +56,7 @@ export function Hero() {
-

Open Assistant

+

Open Assistant

Conversational AI for everyone.

diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx index c820f27c..806aaa38 100644 --- a/website/src/pages/_app.tsx +++ b/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; diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 61dea8e9..2860aec9 100644 --- a/website/src/pages/index.tsx +++ b/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 = () => { /> {session ? ( -
+ -
+ ) : ( -
+ - -
+ )} ); diff --git a/website/src/styles/Chakra.tsx b/website/src/styles/Chakra.tsx new file mode 100644 index 00000000..e87e73ed --- /dev/null +++ b/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 ( + + {children} + + ); +} + +// 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 ?? "", + }, + }; +} diff --git a/website/src/styles/Theme.tsx b/website/src/styles/Theme.tsx deleted file mode 100644 index 02728b59..00000000 --- a/website/src/styles/Theme.tsx +++ /dev/null @@ -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 {children}; -} - -// 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; diff --git a/website/src/styles/Theme/colors.ts b/website/src/styles/Theme/colors.ts new file mode 100644 index 00000000..d1c0913a --- /dev/null +++ b/website/src/styles/Theme/colors.ts @@ -0,0 +1,8 @@ +export const colors = { + light: { + bg: "gray.100" + }, + dark: { + bg: "gray.900" + }, +}; diff --git a/website/src/styles/Theme/components/Container.ts b/website/src/styles/Theme/components/Container.ts new file mode 100644 index 00000000..5071334f --- /dev/null +++ b/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, +}) \ No newline at end of file diff --git a/website/src/styles/Theme/index.ts b/website/src/styles/Theme/index.ts new file mode 100644 index 00000000..3219cdc4 --- /dev/null +++ b/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 });