From 1fe24db8ae6bb92486082bea40085f57d09d9df9 Mon Sep 17 00:00:00 2001
From: AbdBarho <ka70911@gmail.com>
Date: Fri, 20 Jan 2023 11:05:56 +0100
Subject: [PATCH 1/2] Restyle account page

---
 website/public/locales/en/common.json        |  2 +-
 website/src/components/Survey/SurveyCard.tsx | 12 +++----
 website/src/pages/account/index.tsx          | 35 ++++++++++++++------
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/website/public/locales/en/common.json b/website/public/locales/en/common.json
index e18eb8ec..99edf6c3 100644
--- a/website/public/locales/en/common.json
+++ b/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",
diff --git a/website/src/components/Survey/SurveyCard.tsx b/website/src/components/Survey/SurveyCard.tsx
index 5a78ce2b..94657fc7 100644
--- a/website/src/components/Survey/SurveyCard.tsx
+++ b/website/src/components/Survey/SurveyCard.tsx
@@ -1,22 +1,18 @@
 import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react";
+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: "p-4 sm:p-6 " + (props.className ?? ""),
   };
 
   return (
-    <Box bg={backgroundColor} {...BoxClasses}>
+    <Box as="section" bg={backgroundColor} {...BoxClasses}>
       {props.children}
     </Box>
   );
diff --git a/website/src/pages/account/index.tsx b/website/src/pages/account/index.tsx
index 813ce8ea..88964b3b 100644
--- a/website/src/pages/account/index.tsx
+++ b/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>
     </>
   );
 }

From a588844ba5d1674f48c9b33abf10c5ab6d1104fe Mon Sep 17 00:00:00 2001
From: AbdBarho <ka70911@gmail.com>
Date: Fri, 20 Jan 2023 12:26:50 +0100
Subject: [PATCH 2/2] use clsx

---
 website/src/components/Survey/SurveyCard.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/components/Survey/SurveyCard.tsx b/website/src/components/Survey/SurveyCard.tsx
index 94657fc7..6101f787 100644
--- a/website/src/components/Survey/SurveyCard.tsx
+++ b/website/src/components/Survey/SurveyCard.tsx
@@ -1,4 +1,5 @@
 import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react";
+import clsx from "clsx";
 import { PropsWithChildren } from "react";
 
 export const SurveyCard = (props: PropsWithChildren<{ className?: string }>) => {
@@ -8,7 +9,7 @@ export const SurveyCard = (props: PropsWithChildren<{ className?: string }>) =>
     gap: "2",
     borderRadius: "xl",
     shadow: "base",
-    className: "p-4 sm:p-6 " + (props.className ?? ""),
+    className: clsx("p-4 sm:p-6", props.className),
   };
 
   return (