wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-06-28 16:20:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Style Empty State and 404

Browse Source
This commit is contained in:
rsandb
2023-01-13 21:44:48 -06:00
parent af8f17a55c
commit 521332fc19
4 changed files with 39 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/EmptyState.tsx
+10 -17
View File
@@ -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 (
<div className={`p-12 ${mainBgClasses}`}>
<Center>
<div className={`block border-2 border-dotted rounded-lg p-24 text-center ${widgetClasses}`}>
<props.icon className="mx-auto h-16 w-16" />
<Text fontFamily="inter" fontSize="2xl">
{props.text}
</Text>
</div>
</Center>
</div>
<Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
<Box display="flex" flexDirection="column" alignItems="center" gap="8">
<props.icon size="30" color="DarkOrange" />
<Text fontSize="lg">{props.text}</Text>
</Box>
</Box>
);
};
export const TaskEmptyState = () => {
return <EmptyState text="No tasks found!" icon={FiFileText} />;
return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
};
website/src/components/Loading/LoadingScreen.jsx
+3 -5
View File
@@ -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 (
<Box width="full" className={mainBgClasses}>
<Box width="full">
<Progress size="sm" isIndeterminate />
{text && (
<Center width="full" className="p-12">
<Text fontFamily="Inter">{text}</Text>
<Center width="full" p="12">
<Text>{text}</Text>
</Center>
)}
</Box>
website/src/pages/404.tsx
+25 -4
View File
@@ -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 (
<>
<Head>
<title>404 - Open Assistant</title>
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<main className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
<p>Sorry, the page you are looking for does not exist.</p>
</main>
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
<Box display="flex" flexDirection="column" alignItems="center" gap="8">
<FiAlertTriangle size="30" color="DarkOrange" />
<Box display="flex" flexDirection="column" alignItems="center" gap="3">
<Text>Sorry, the page you are looking for does not exist.</Text>
<Link onClick={() => router.back()} color="blue.500" textUnderlineOffset="3px">
<Text>Click here to go back</Text>
</Link>
</Box>
</Box>
</Box>
</Center>
</>
);
}
Error.getLayout = getTransparentHeaderLayout;
export default Error;
website/src/pages/messages/index.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ const MessagesDashboard = () => {
<title>Messages - Open Assistant</title>
<meta name="description" content="Chat with Open Assistant and provide feedback." />
</Head>
<SimpleGrid fontFamily="Inter" columns={[1, 1, 1, 2]} gap={4}>
<SimpleGrid columns={[1, 1, 1, 2]} gap={4}>
<Box>
<Text className="text-2xl font-bold" pb="4">
Recent messages