Merge pull request #858 from LAION-AI/account

Restyle account page

website/public/locales/en/common.json

@@ -1,6 +1,6 @@
 {
   "about": "About",
-  "account_settings": "Account Settings",
+  "account_settings": "Account",
   "connect": "Connect",
   "conversational": "Conversational AI for everyone.",
   "dashboard": "Dashboard",

website/src/components/Survey/SurveyCard.tsx

@@ -1,22 +1,19 @@
 import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react";
+import clsx from "clsx";
+import { PropsWithChildren } from "react";
 
-interface SurveyCardProps {
-  className?: string;
-  children: React.ReactNode;
-}
-
-export const SurveyCard = (props: SurveyCardProps) => {
+export const SurveyCard = (props: PropsWithChildren<{ className?: string }>) => {
   const backgroundColor = useColorModeValue("white", "gray.700");
 
   const BoxClasses: BoxProps = {
     gap: "2",
     borderRadius: "xl",
     shadow: "base",
-    className: "p-4 sm:p-6",
+    className: clsx("p-4 sm:p-6", props.className),
   };
 
   return (
-    <Box bg={backgroundColor} {...BoxClasses}>
+    <Box as="section" bg={backgroundColor} {...BoxClasses}>
       {props.children}
     </Box>
   );

website/src/pages/account/index.tsx

@@ -1,9 +1,11 @@
-import { Button } from "@chakra-ui/react";
+import { Button, Divider, Flex, Grid, Icon, Text } from "@chakra-ui/react";
 import Head from "next/head";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import React from "react";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
+import { MdOutlineEdit } from "react-icons/md";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
 
 export default function Account() {
   const { data: session } = useSession();
@@ -20,15 +22,28 @@ export default function Account() {
           content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
         />
       </Head>
-      <div className="oa-basic-theme">
-        <main className="h-3/4 z-0 flex flex-col items-center justify-center">
-          <p>{session.user.name || "No username"}</p>
-          <Button>
-            <Link href="/account/edit">Edit Username</Link>
-          </Button>
-          <p>{session.user.email}</p>
-        </main>
-      </div>
+      <main className="oa-basic-theme p-6">
+        <Flex m="auto" className="max-w-7xl" alignContent="center">
+          <SurveyCard className="w-full">
+            <Text as="b" display="block" fontSize="2xl" py={2}>
+              Your Account
+            </Text>
+            <Divider />
+            <Grid gridTemplateColumns="repeat(2, max-content)" alignItems="center" gap={6} py={4}>
+              <Text as="b">Username</Text>
+              <Flex gap={2}>
+                {session.user.name ?? "(No username)"}
+                <Link href="/account/edit">
+                  <Icon boxSize={5} as={MdOutlineEdit} />
+                </Link>
+              </Flex>
+              <Text as="b">Email</Text>
+              <Text>{session.user.email ?? "(No Email)"}</Text>
+            </Grid>
+            <p></p>
+          </SurveyCard>
+        </Flex>
+      </main>
     </>
   );
 }