From 721012ab2708a674413cb2b9cafc7a3cf90dc016 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Thu, 29 Dec 2022 18:40:09 +0200 Subject: [PATCH 01/50] Add Color Mode --- website/src/pages/_document.tsx | 3 +++ website/src/styles/Theme.tsx | 10 ++++++++++ 2 files changed, 13 insertions(+) create mode 100644 website/src/styles/Theme.tsx diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx index 452ce769..308a9161 100644 --- a/website/src/pages/_document.tsx +++ b/website/src/pages/_document.tsx @@ -1,4 +1,6 @@ +import { ColorModeScript } from "@chakra-ui/react"; import { Head, Html, Main, NextScript } from "next/document"; +import theme from "../styles/Theme"; export default function Document() { return ( @@ -7,6 +9,7 @@ export default function Document() { +
diff --git a/website/src/styles/Theme.tsx b/website/src/styles/Theme.tsx new file mode 100644 index 00000000..75b49f10 --- /dev/null +++ b/website/src/styles/Theme.tsx @@ -0,0 +1,10 @@ +import { extendTheme, type ThemeConfig } from "@chakra-ui/react"; + +const config: ThemeConfig = { + initialColorMode: "light", + useSystemColorMode: true, +}; + +const theme = extendTheme({ config }); + +export default theme; From ded14c737f3cc08588cb875d99469c50588b50ab Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Thu, 29 Dec 2022 18:43:55 +0200 Subject: [PATCH 02/50] Basic Color switch - WIP --- website/src/components/Header/Header.tsx | 9 ++++++--- website/src/components/UI/ColorModeSwitch.tsx | 11 +++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 website/src/components/UI/ColorModeSwitch.tsx diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx index 5d703096..b882fdaf 100644 --- a/website/src/components/Header/Header.tsx +++ b/website/src/components/Header/Header.tsx @@ -1,4 +1,4 @@ -import { Button } from "@chakra-ui/react"; +import { Box, Button, Text, useColorModeValue } from "@chakra-ui/react"; import { Popover } from "@headlessui/react"; import { AnimatePresence, motion } from "framer-motion"; import Image from "next/image"; @@ -10,6 +10,7 @@ import clsx from "clsx"; import { Container } from "src/components/Container"; import { NavLinks } from "./NavLinks"; import { UserMenu } from "./UserMenu"; +import ColorModeSwitch from "../UI/ColorModeSwitch"; function MenuIcon(props) { return ( @@ -56,8 +57,9 @@ function AccountButton() { export function Header(props) { const transparent = props.transparent ?? false; + const backgroundColor = useColorModeValue('#FFFFFF', '#000000') return ( -
+ -
+ ); } diff --git a/website/src/components/UI/ColorModeSwitch.tsx b/website/src/components/UI/ColorModeSwitch.tsx new file mode 100644 index 00000000..ed309328 --- /dev/null +++ b/website/src/components/UI/ColorModeSwitch.tsx @@ -0,0 +1,11 @@ +import { Button, useColorMode } from "@chakra-ui/react"; +import React from "react"; + +type Props = {}; + +const ColorModeSwitch = (props: Props) => { + const { colorMode, toggleColorMode } = useColorMode(); + return ; +}; + +export default ColorModeSwitch; From 8a4855c65173a553194831704fc59380c166d2f2 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Thu, 29 Dec 2022 19:18:21 +0200 Subject: [PATCH 03/50] UserMenu darkMode refactor --- website/src/components/Header/UserMenu.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx index e3b0d819..6e7ca96f 100644 --- a/website/src/components/Header/UserMenu.tsx +++ b/website/src/components/Header/UserMenu.tsx @@ -4,9 +4,11 @@ import Image from "next/image"; import { Popover } from "@headlessui/react"; import { AnimatePresence, motion } from "framer-motion"; import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa"; +import { Box, useColorModeValue } from "@chakra-ui/react"; export function UserMenu() { const { data: session } = useSession(); + const backgroundColor = useColorModeValue("#FFFFFF", "#000000"); if (!session) { return <>; @@ -27,7 +29,7 @@ export function UserMenu() { {({ open }) => ( <> -
+
Profile Picture {open && ( - <> + -
+ {accountOptions.map((item) => ( Sign Out

-
+ - + )} From 186eeb759189c946de593a091a14ff96f19a4418 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Thu, 29 Dec 2022 19:27:00 +0200 Subject: [PATCH 04/50] Footer darkMode refactor --- website/package-lock.json | 252 ++++++++++++++++++++++++++++++ website/src/components/Footer.tsx | 141 +++++++++-------- 2 files changed, 330 insertions(+), 63 deletions(-) diff --git a/website/package-lock.json b/website/package-lock.json index 0fdaf529..bc1a4e7c 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -3767,6 +3767,51 @@ "version": "13.1.0", "license": "MIT" }, + "node_modules/@next/swc-android-arm-eabi": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.6.tgz", + "integrity": "sha512-FGFSj3v2Bluw8fD/X+1eXIEB0PhoJE0zfutsAauRhmNpjjZshLDgoXMWm1jTRL/04K/o9gwwO2+A8+sPVCH1uw==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-android-arm64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.0.6.tgz", + "integrity": "sha512-7MgbtU7kimxuovVsd7jSJWMkIHBDBUsNLmmlkrBRHTvgzx5nDBXogP0hzZm7EImdOPwVMPpUHRQMBP9mbsiJYQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-darwin-arm64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.6.tgz", + "integrity": "sha512-AUVEpVTxbP/fxdFsjVI9d5a0CFn6NVV7A/RXOb0Y+pXKIIZ1V5rFjPwpYfIfyOo2lrqgehMNQcyMRoTrhq04xg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-darwin-x64": { "version": "13.0.6", "cpu": [ @@ -3781,6 +3826,141 @@ "node": ">= 10" } }, + "node_modules/@next/swc-freebsd-x64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.6.tgz", + "integrity": "sha512-6Lbxd9gAdXneTkwHyYW/qtX1Tdw7ND9UbiGsGz/SP43ZInNWnW6q0au4hEVPZ9bOWWRKzcVoeTBdoMpQk9Hx9w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm-gnueabihf": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.6.tgz", + "integrity": "sha512-wNdi5A519e1P+ozEuYOhWPzzE6m1y7mkO6NFwn6watUwO0X9nZs7fT9THmnekvmFQpaZ6U+xf2MQ9poQoCh6jQ==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.6.tgz", + "integrity": "sha512-e8KTRnleQY1KLk5PwGV5hrmvKksCc74QRpHl5ffWnEEAtL2FE0ave5aIkXqErsPdXkiKuA/owp3LjQrP+/AH7Q==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.6.tgz", + "integrity": "sha512-/7RF03C3mhjYpHN+pqOolgME3guiHU5T3TsejuyteqyEyzdEyLHod+jcYH6ft7UZ71a6TdOewvmbLOtzHW2O8A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.6.tgz", + "integrity": "sha512-kxyEXnYHpOEkFnmrlwB1QlzJtjC6sAJytKcceIyFUHbCaD3W/Qb5tnclcnHKTaFccizZRePXvV25Ok/eUSpKTw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.6.tgz", + "integrity": "sha512-N0c6gubS3WW1oYYgo02xzZnNatfVQP/CiJq2ax+DJ55ePV62IACbRCU99TZNXXg+Kos6vNW4k+/qgvkvpGDeyA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.6.tgz", + "integrity": "sha512-QjeMB2EBqBFPb/ac0CYr7GytbhUkrG4EwFWbcE0vsRp4H8grt25kYpFQckL4Jak3SUrp7vKfDwZ/SwO7QdO8vw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.6.tgz", + "integrity": "sha512-EQzXtdqRTcmhT/tCq81rIwE36Y3fNHPInaCuJzM/kftdXfa0F+64y7FAoMO13npX8EG1+SamXgp/emSusKrCXg==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.6.tgz", + "integrity": "sha512-pSkqZ//UP/f2sS9T7IvHLfEWDPTX0vRyXJnAUNisKvO3eF3e1xdhDX7dix/X3Z3lnN4UjSwOzclAI87JFbOwmQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "license": "MIT", @@ -24716,10 +24896,82 @@ "@next/font": { "version": "13.1.0" }, + "@next/swc-android-arm-eabi": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.6.tgz", + "integrity": "sha512-FGFSj3v2Bluw8fD/X+1eXIEB0PhoJE0zfutsAauRhmNpjjZshLDgoXMWm1jTRL/04K/o9gwwO2+A8+sPVCH1uw==", + "optional": true + }, + "@next/swc-android-arm64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.0.6.tgz", + "integrity": "sha512-7MgbtU7kimxuovVsd7jSJWMkIHBDBUsNLmmlkrBRHTvgzx5nDBXogP0hzZm7EImdOPwVMPpUHRQMBP9mbsiJYQ==", + "optional": true + }, + "@next/swc-darwin-arm64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.6.tgz", + "integrity": "sha512-AUVEpVTxbP/fxdFsjVI9d5a0CFn6NVV7A/RXOb0Y+pXKIIZ1V5rFjPwpYfIfyOo2lrqgehMNQcyMRoTrhq04xg==", + "optional": true + }, "@next/swc-darwin-x64": { "version": "13.0.6", "optional": true }, + "@next/swc-freebsd-x64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.6.tgz", + "integrity": "sha512-6Lbxd9gAdXneTkwHyYW/qtX1Tdw7ND9UbiGsGz/SP43ZInNWnW6q0au4hEVPZ9bOWWRKzcVoeTBdoMpQk9Hx9w==", + "optional": true + }, + "@next/swc-linux-arm-gnueabihf": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.6.tgz", + "integrity": "sha512-wNdi5A519e1P+ozEuYOhWPzzE6m1y7mkO6NFwn6watUwO0X9nZs7fT9THmnekvmFQpaZ6U+xf2MQ9poQoCh6jQ==", + "optional": true + }, + "@next/swc-linux-arm64-gnu": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.6.tgz", + "integrity": "sha512-e8KTRnleQY1KLk5PwGV5hrmvKksCc74QRpHl5ffWnEEAtL2FE0ave5aIkXqErsPdXkiKuA/owp3LjQrP+/AH7Q==", + "optional": true + }, + "@next/swc-linux-arm64-musl": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.6.tgz", + "integrity": "sha512-/7RF03C3mhjYpHN+pqOolgME3guiHU5T3TsejuyteqyEyzdEyLHod+jcYH6ft7UZ71a6TdOewvmbLOtzHW2O8A==", + "optional": true + }, + "@next/swc-linux-x64-gnu": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.6.tgz", + "integrity": "sha512-kxyEXnYHpOEkFnmrlwB1QlzJtjC6sAJytKcceIyFUHbCaD3W/Qb5tnclcnHKTaFccizZRePXvV25Ok/eUSpKTw==", + "optional": true + }, + "@next/swc-linux-x64-musl": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.6.tgz", + "integrity": "sha512-N0c6gubS3WW1oYYgo02xzZnNatfVQP/CiJq2ax+DJ55ePV62IACbRCU99TZNXXg+Kos6vNW4k+/qgvkvpGDeyA==", + "optional": true + }, + "@next/swc-win32-arm64-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.6.tgz", + "integrity": "sha512-QjeMB2EBqBFPb/ac0CYr7GytbhUkrG4EwFWbcE0vsRp4H8grt25kYpFQckL4Jak3SUrp7vKfDwZ/SwO7QdO8vw==", + "optional": true + }, + "@next/swc-win32-ia32-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.6.tgz", + "integrity": "sha512-EQzXtdqRTcmhT/tCq81rIwE36Y3fNHPInaCuJzM/kftdXfa0F+64y7FAoMO13npX8EG1+SamXgp/emSusKrCXg==", + "optional": true + }, + "@next/swc-win32-x64-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.6.tgz", + "integrity": "sha512-pSkqZ//UP/f2sS9T7IvHLfEWDPTX0vRyXJnAUNisKvO3eF3e1xdhDX7dix/X3Z3lnN4UjSwOzclAI87JFbOwmQ==", + "optional": true + }, "@nodelib/fs.scandir": { "version": "2.1.5", "requires": { diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx index 90fca02f..873cadad 100644 --- a/website/src/components/Footer.tsx +++ b/website/src/components/Footer.tsx @@ -1,75 +1,90 @@ import Image from "next/image"; import Link from "next/link"; -import { FaGithub, FaDiscord } from "react-icons/fa"; import { Container } from "./Container"; +import { Box, Text, useColorModeValue } from "@chakra-ui/react"; export function Footer() { - return ( -
-
- -
-
- - logo - + const backgroundColor = useColorModeValue("#FFFFFF", "#000000"); + const foregroundColor = useColorModeValue("#000000", "#FFFFFF"); -
-

Open Assistant

-

Conversational AI for everyone.

+ return ( +
+ +
+ +
+
+ + logo + + +
+ + Open Assistant + + + Conversational AI for everyone. + +
+
- -
- -
+ +
+ ); } From 2431a5207ed424c7c7577f7ddd0ca7555b79057d Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Thu, 29 Dec 2022 19:33:32 +0200 Subject: [PATCH 05/50] Auth darkMode Refactor --- website/src/components/AuthLayout.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/website/src/components/AuthLayout.tsx b/website/src/components/AuthLayout.tsx index 3e45dd65..08b5378a 100644 --- a/website/src/components/AuthLayout.tsx +++ b/website/src/components/AuthLayout.tsx @@ -1,11 +1,14 @@ +import { Box, useColorModeValue } from "@chakra-ui/react"; + export function AuthLayout({ children }) { + const backgroundColor = useColorModeValue("#FFFFFF", "#000000"); return ( -
+
{children}
-
+ ); } From c204fbdef159e1a2b639b06990651bcb139e5630 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Thu, 29 Dec 2022 22:46:22 +0200 Subject: [PATCH 06/50] reorganizing the theme configuration --- website/src/pages/_app.tsx | 33 ++++---------------------- website/src/pages/_document.tsx | 3 +-- website/src/styles/Theme.tsx | 42 +++++++++++++++++++++++++++++++-- 3 files changed, 46 insertions(+), 32 deletions(-) diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx index f602457f..c820f27c 100644 --- a/website/src/pages/_app.tsx +++ b/website/src/pages/_app.tsx @@ -1,48 +1,25 @@ -import { ChakraProvider } from "@chakra-ui/react"; import { SessionProvider } from "next-auth/react"; -import { Inter } from "@next/font/google"; -import { extendTheme } from "@chakra-ui/react"; import type { AppProps } from "next/app"; import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout"; import "../styles/globals.css"; import "focus-visible"; - -const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", -}); - -const theme = extendTheme({ - styles: { - global: { - body: { - bg: "white", - }, - main: { - fontFamily: "Inter", - }, - header: { - fontFamily: "Inter", - }, - }, - }, -}); +import { Chakra, getServerSideProps } from "../styles/Theme"; type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; }; -function MyApp({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) { +function MyApp({ Component, pageProps: { session, cookies, ...pageProps } }: AppPropsWithLayout) { const getLayout = Component.getLayout ?? getDefaultLayout; const page = getLayout(); return ( - + {page} - + ); } - +export { getServerSideProps }; export default MyApp; diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx index 308a9161..a95896d9 100644 --- a/website/src/pages/_document.tsx +++ b/website/src/pages/_document.tsx @@ -1,6 +1,5 @@ import { ColorModeScript } from "@chakra-ui/react"; import { Head, Html, Main, NextScript } from "next/document"; -import theme from "../styles/Theme"; export default function Document() { return ( @@ -9,7 +8,7 @@ export default function Document() { - +
diff --git a/website/src/styles/Theme.tsx b/website/src/styles/Theme.tsx index 75b49f10..02728b59 100644 --- a/website/src/styles/Theme.tsx +++ b/website/src/styles/Theme.tsx @@ -1,10 +1,48 @@ -import { extendTheme, type ThemeConfig } from "@chakra-ui/react"; +import { + extendTheme, + type ThemeConfig, + ChakraProvider, + cookieStorageManagerSSR, + localStorageManager, +} from "@chakra-ui/react"; const config: ThemeConfig = { initialColorMode: "light", useSystemColorMode: true, + disableTransitionOnChange: false, }; -const theme = extendTheme({ config }); +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; From fc64fd6e60c37d46379532779e1b8ca85f08d6b5 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 01:29:12 +0200 Subject: [PATCH 07/50] 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 }); From b8f3fe9636b117d0b7ff1025a50dff2994bfe91b Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 01:55:09 +0200 Subject: [PATCH 08/50] discarding ColorModeScript --- website/src/pages/_document.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx index a95896d9..2edc8721 100644 --- a/website/src/pages/_document.tsx +++ b/website/src/pages/_document.tsx @@ -8,7 +8,6 @@ export default function Document() { -
From a537a0ffa06e7ae7713523d4e9d55f3cade38309 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 01:55:27 +0200 Subject: [PATCH 09/50] adding default text Color to Container --- website/src/styles/Theme/components/Container.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/website/src/styles/Theme/components/Container.ts b/website/src/styles/Theme/components/Container.ts index 5071334f..be733490 100644 --- a/website/src/styles/Theme/components/Container.ts +++ b/website/src/styles/Theme/components/Container.ts @@ -4,7 +4,8 @@ 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" + transition: "background-color 250ms ease-in", + color: colorMode === "light" ? colors.light.text : colors.dark.text, })) export const containerTheme = defineStyleConfig({ From dcdcadecc40a5c8a4c66be254485fdf2555cf90d Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 01:55:36 +0200 Subject: [PATCH 10/50] text Color --- website/src/styles/Theme/colors.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/website/src/styles/Theme/colors.ts b/website/src/styles/Theme/colors.ts index d1c0913a..bf031c81 100644 --- a/website/src/styles/Theme/colors.ts +++ b/website/src/styles/Theme/colors.ts @@ -1,8 +1,10 @@ export const colors = { light: { - bg: "gray.100" + bg: "gray.100", + text: "black" }, dark: { - bg: "gray.900" + bg: "gray.900", + text: "white" }, }; From ae58be511611070c6e34802e2ef2af3f3c83622c Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 01:56:00 +0200 Subject: [PATCH 11/50] refactor Header --- website/src/components/Header/Header.tsx | 130 +++++++++++------------ 1 file changed, 64 insertions(+), 66 deletions(-) diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx index 81f2ebb5..aff76433 100644 --- a/website/src/components/Header/Header.tsx +++ b/website/src/components/Header/Header.tsx @@ -1,10 +1,10 @@ -import { Box, Button, Container, useColorModeValue } from "@chakra-ui/react"; +import { Button, Container } 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 { useSession } from "next-auth/react"; -import { FaUser} from "react-icons/fa"; +import { useSession } from "next-auth/react"; +import { FaUser } from "react-icons/fa"; import { NavLinks } from "./NavLinks"; import { UserMenu } from "./UserMenu"; @@ -55,69 +55,67 @@ function AccountButton() { export function Header(props) { return ( - - ); } From 5f4d8ac896346af2d256074e07e396a23caeaef2 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 01:56:07 +0200 Subject: [PATCH 12/50] Refactor Footer --- website/src/components/Footer.tsx | 139 +++++++++++++----------------- 1 file changed, 62 insertions(+), 77 deletions(-) diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx index 873cadad..417e6988 100644 --- a/website/src/components/Footer.tsx +++ b/website/src/components/Footer.tsx @@ -1,90 +1,75 @@ import Image from "next/image"; import Link from "next/link"; -import { Container } from "./Container"; -import { Box, Text, useColorModeValue } from "@chakra-ui/react"; +import { Container, Text, useColorModeValue } from "@chakra-ui/react"; export function Footer() { - const backgroundColor = useColorModeValue("#FFFFFF", "#000000"); - const foregroundColor = useColorModeValue("#000000", "#FFFFFF"); return (
- -
- -
-
- - logo - + +
+ + logo + -
- - Open Assistant - - - Conversational AI for everyone. - -
-
- +
+

+ Open Assistant +

+

+ Conversational AI for everyone. +

- -
- +
+ + ); } From 851e73f9d419d58daed6e19e525d86f170dfc10f Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 01:56:25 +0200 Subject: [PATCH 13/50] remove unused import --- website/src/pages/_document.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx index 2edc8721..452ce769 100644 --- a/website/src/pages/_document.tsx +++ b/website/src/pages/_document.tsx @@ -1,4 +1,3 @@ -import { ColorModeScript } from "@chakra-ui/react"; import { Head, Html, Main, NextScript } from "next/document"; export default function Document() { From 8bb2a3c90214408083704d02f27613937a760943 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 01:56:42 +0200 Subject: [PATCH 14/50] prettier colorSwitch WIP --- website/src/components/UI/ColorModeSwitch.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/website/src/components/UI/ColorModeSwitch.tsx b/website/src/components/UI/ColorModeSwitch.tsx index ed309328..ccb2af5b 100644 --- a/website/src/components/UI/ColorModeSwitch.tsx +++ b/website/src/components/UI/ColorModeSwitch.tsx @@ -1,11 +1,18 @@ -import { Button, useColorMode } from "@chakra-ui/react"; +import { Switch, useColorMode } from "@chakra-ui/react"; import React from "react"; type Props = {}; const ColorModeSwitch = (props: Props) => { const { colorMode, toggleColorMode } = useColorMode(); - return ; + return ( + + ); }; export default ColorModeSwitch; From 80d2e02e90dc0ec9b7e6c5edab749744f012a6fb Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 02:18:48 +0200 Subject: [PATCH 15/50] adding a cubic bezier for transition --- website/src/styles/Theme/components/Container.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/styles/Theme/components/Container.ts b/website/src/styles/Theme/components/Container.ts index be733490..9168e099 100644 --- a/website/src/styles/Theme/components/Container.ts +++ b/website/src/styles/Theme/components/Container.ts @@ -4,7 +4,7 @@ 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", + transition: "background-color 200ms cubic-bezier(0.4, 0, 1, 1)", color: colorMode === "light" ? colors.light.text : colors.dark.text, })) From e5a1cad7b37be4082c32c5885c85b30c18d0b478 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Fri, 30 Dec 2022 02:30:49 +0200 Subject: [PATCH 16/50] adding darkmode to pages --- website/src/components/Loading/LoadingScreen.jsx | 10 +++++----- website/src/components/TwoColumns.tsx | 13 ++++++++----- website/src/pages/create/assistant_reply.tsx | 8 ++++---- website/src/pages/create/user_reply.tsx | 13 +++++++------ website/src/pages/evaluate/rank_initial_prompts.tsx | 12 +++++++----- 5 files changed, 31 insertions(+), 25 deletions(-) diff --git a/website/src/components/Loading/LoadingScreen.jsx b/website/src/components/Loading/LoadingScreen.jsx index 57323f8c..56e9edcb 100644 --- a/website/src/components/Loading/LoadingScreen.jsx +++ b/website/src/components/Loading/LoadingScreen.jsx @@ -1,12 +1,12 @@ -import { Progress } from "@chakra-ui/react"; +import { Container, Progress } from "@chakra-ui/react"; export const LoadingScreen = ({ text }) => ( -
+ {text && ( -
+
{text}
-
+ )} -
+ ); diff --git a/website/src/components/TwoColumns.tsx b/website/src/components/TwoColumns.tsx index 5792f7d0..e3f59433 100644 --- a/website/src/components/TwoColumns.tsx +++ b/website/src/components/TwoColumns.tsx @@ -1,14 +1,17 @@ +import { Container, useColorModeValue } from "@chakra-ui/react"; + + export const TwoColumns = ({ children }: { children: React.ReactNode[] }) => { if (!Array.isArray(children) || children.length !== 2) { throw new Error("TwoColumns expects 2 children"); } - + const bg = useColorModeValue("white", "gray.700") const [first, second] = children; return ( -
-
{first}
-
{second}
-
+ + {first} + {second} + ); }; diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx index a7f058f8..e60fde66 100644 --- a/website/src/pages/create/assistant_reply.tsx +++ b/website/src/pages/create/assistant_reply.tsx @@ -1,4 +1,4 @@ -import { Textarea } from "@chakra-ui/react"; +import { Container, Textarea } from "@chakra-ui/react"; import { useRef, useState } from "react"; import useSWRMutation from "swr/mutation"; import useSWRImmutable from "swr/immutable"; @@ -45,12 +45,12 @@ const AssistantReply = () => { } if (tasks.length == 0) { - return
No tasks found...
; + return No tasks found...; } const task = tasks[0].task; return ( -
+ <>
Reply as the assistant
@@ -78,7 +78,7 @@ const AssistantReply = () => {
-
+ ); }; diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx index 18427c71..3b8adedd 100644 --- a/website/src/pages/create/user_reply.tsx +++ b/website/src/pages/create/user_reply.tsx @@ -1,4 +1,4 @@ -import { Textarea } from "@chakra-ui/react"; +import { Container, Textarea, useColorModeValue } from "@chakra-ui/react"; import { useRef, useState } from "react"; import useSWRMutation from "swr/mutation"; import useSWRImmutable from "swr/immutable"; @@ -12,6 +12,7 @@ import { LoadingScreen } from "@/components/Loading/LoadingScreen"; const UserReply = () => { const [tasks, setTasks] = useState([]); + const bg = useColorModeValue("white", "gray.400"); const inputRef = useRef(null); @@ -45,12 +46,12 @@ const UserReply = () => { } if (tasks.length == 0) { - return
No tasks found...
; + return No tasks found...; } const task = tasks[0].task; return ( -
+ <>
Reply as a user
@@ -61,7 +62,7 @@ const UserReply = () => {