-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Restyle account page #858
Restyle account page #858
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We are trying to use one type of icon. Can you switch to Feather icon here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I am not sure we talked about that. is Feather icon installed ? I will leave it to a different PR anyway There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've been using Font Awesome ( |
||
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> | ||
</> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use
clsx
here to simplify the codeThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Of cousre!