From 521332fc19bf951f37e9905d1a76f14dfaca01ca Mon Sep 17 00:00:00 2001 From: rsandb Date: Fri, 13 Jan 2023 21:44:48 -0600 Subject: [PATCH 1/4] Style Empty State and 404 --- website/src/components/EmptyState.tsx | 27 +++++++---------- .../src/components/Loading/LoadingScreen.jsx | 8 ++--- website/src/pages/404.tsx | 29 ++++++++++++++++--- website/src/pages/messages/index.tsx | 2 +- 4 files changed, 39 insertions(+), 27 deletions(-) diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx index aa50bd9f..3338fa21 100644 --- a/website/src/components/EmptyState.tsx +++ b/website/src/components/EmptyState.tsx @@ -1,5 +1,5 @@ -import { Center, Text, useColorMode, useColorModeValue } from "@chakra-ui/react"; -import { FiFileText } from "react-icons/fi"; +import { Box, Text, useColorModeValue } from "@chakra-ui/react"; +import { FiAlertTriangle } from "react-icons/fi"; import { IconType } from "react-icons/lib"; type EmptyStateProps = { @@ -8,25 +8,18 @@ type EmptyStateProps = { }; export const EmptyState = (props: EmptyStateProps) => { - const { colorMode } = useColorMode(); - const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-900" : "bg-slate-900 text-white"; - - const widgetClasses = useColorModeValue("border-gray-700 text-gray-700", "border-gray-300 text-gray-300"); + const backgroundColor = useColorModeValue("white", "gray.800"); return ( -
-
-
- - - {props.text} - -
-
-
+ + + + {props.text} + + ); }; export const TaskEmptyState = () => { - return ; + return ; }; diff --git a/website/src/components/Loading/LoadingScreen.jsx b/website/src/components/Loading/LoadingScreen.jsx index 3aad717f..645544e6 100644 --- a/website/src/components/Loading/LoadingScreen.jsx +++ b/website/src/components/Loading/LoadingScreen.jsx @@ -1,14 +1,12 @@ import { Box, Center, Progress, Text, useColorModeValue } from "@chakra-ui/react"; export const LoadingScreen = ({ text = "Loading..." } = {}) => { - const mainBgClasses = useColorModeValue("bg-slate-300 text-gray-900", "bg-slate-900 text-white"); - return ( - + {text && ( -
- {text} +
+ {text}
)} diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx index 1eb600d7..a14c54d8 100644 --- a/website/src/pages/404.tsx +++ b/website/src/pages/404.tsx @@ -1,15 +1,36 @@ +import { Box, Center, Link, Text, useColorModeValue } from "@chakra-ui/react"; import Head from "next/head"; +import { useRouter } from "next/router"; +import { FiAlertTriangle } from "react-icons/fi"; +import { getTransparentHeaderLayout } from "src/components/Layout"; + +function Error() { + const router = useRouter(); + const backgroundColor = useColorModeValue("white", "gray.800"); -export default function Error() { return ( <> 404 - Open Assistant -
-

Sorry, the page you are looking for does not exist.

-
+
+ + + + + Sorry, the page you are looking for does not exist. + router.back()} color="blue.500" textUnderlineOffset="3px"> + Click here to go back + + + + +
); } + +Error.getLayout = getTransparentHeaderLayout; + +export default Error; diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx index 1da42db4..9634b9df 100644 --- a/website/src/pages/messages/index.tsx +++ b/website/src/pages/messages/index.tsx @@ -40,7 +40,7 @@ const MessagesDashboard = () => { Messages - Open Assistant - + Recent messages From 3448e9925603c15aebc5206fd970be2ca27acd99 Mon Sep 17 00:00:00 2001 From: rsandb Date: Fri, 13 Jan 2023 21:54:40 -0600 Subject: [PATCH 2/4] fixed dark mode background --- website/src/pages/404.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx index a14c54d8..a9401f6d 100644 --- a/website/src/pages/404.tsx +++ b/website/src/pages/404.tsx @@ -6,7 +6,8 @@ import { getTransparentHeaderLayout } from "src/components/Layout"; function Error() { const router = useRouter(); - const backgroundColor = useColorModeValue("white", "gray.800"); + const backgroundColor = useColorModeValue("white", "gray.700"); + const backgroundColor2 = useColorModeValue("gray.50", "gray.900"); return ( <> @@ -14,7 +15,7 @@ function Error() { 404 - Open Assistant -
+
From 69a0d66e535b08aaa1f19cd3359d5b2f49c491bb Mon Sep 17 00:00:00 2001 From: rsandb Date: Fri, 13 Jan 2023 21:56:07 -0600 Subject: [PATCH 3/4] fix dark mode background color --- website/src/pages/404.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx index a14c54d8..f17102e3 100644 --- a/website/src/pages/404.tsx +++ b/website/src/pages/404.tsx @@ -7,6 +7,7 @@ import { getTransparentHeaderLayout } from "src/components/Layout"; function Error() { const router = useRouter(); const backgroundColor = useColorModeValue("white", "gray.800"); + const backgroundColor2 = useColorModeValue("gray.50", "gray.900"); return ( <> @@ -14,7 +15,7 @@ function Error() { 404 - Open Assistant -
+
From e8a1a16b450ac816b4a7efc3d94870d3ddf9466d Mon Sep 17 00:00:00 2001 From: rsandb Date: Sat, 14 Jan 2023 01:01:30 -0600 Subject: [PATCH 4/4] move component into EmptyState --- website/src/components/EmptyState.tsx | 15 ++++++++++++--- website/src/pages/404.tsx | 20 +++----------------- 2 files changed, 15 insertions(+), 20 deletions(-) diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx index 3338fa21..8d82163c 100644 --- a/website/src/components/EmptyState.tsx +++ b/website/src/components/EmptyState.tsx @@ -1,4 +1,5 @@ -import { Box, Text, useColorModeValue } from "@chakra-ui/react"; +import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react"; +import { useRouter } from "next/router"; import { FiAlertTriangle } from "react-icons/fi"; import { IconType } from "react-icons/lib"; @@ -9,12 +10,16 @@ type EmptyStateProps = { export const EmptyState = (props: EmptyStateProps) => { const backgroundColor = useColorModeValue("white", "gray.800"); + const router = useRouter(); return ( - + - {props.text} + {props.text} + router.back()} color="blue.500" textUnderlineOffset="3px"> + Click here to go back + ); @@ -23,3 +28,7 @@ export const EmptyState = (props: EmptyStateProps) => { export const TaskEmptyState = () => { return ; }; + +export const PageEmptyState = () => { + return ; +}; diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx index f17102e3..30ab2ced 100644 --- a/website/src/pages/404.tsx +++ b/website/src/pages/404.tsx @@ -1,12 +1,9 @@ -import { Box, Center, Link, Text, useColorModeValue } from "@chakra-ui/react"; +import { Center, useColorModeValue } from "@chakra-ui/react"; import Head from "next/head"; -import { useRouter } from "next/router"; -import { FiAlertTriangle } from "react-icons/fi"; +import { PageEmptyState } from "src/components/EmptyState"; import { getTransparentHeaderLayout } from "src/components/Layout"; function Error() { - const router = useRouter(); - const backgroundColor = useColorModeValue("white", "gray.800"); const backgroundColor2 = useColorModeValue("gray.50", "gray.900"); return ( @@ -16,22 +13,11 @@ function Error() {
- - - - - Sorry, the page you are looking for does not exist. - router.back()} color="blue.500" textUnderlineOffset="3px"> - Click here to go back - - - - +
); } Error.getLayout = getTransparentHeaderLayout; - export default Error;