feat: update account ui

src/containers/Modals/AccountModal/index.tsx

@@ -1,49 +1,20 @@
 import React from "react";
-import styled from "styled-components";
-import { Modal, Group, Button, Badge, Avatar, Grid, Divider, ModalProps } from "@mantine/core";
+import {
+  Modal,
+  Group,
+  Button,
+  Avatar,
+  Text,
+  Divider,
+  ModalProps,
+  Paper,
+  Badge,
+} from "@mantine/core";
 import { useUser as useSupaUser } from "@supabase/auth-helpers-react";
-import dayjs from "dayjs";
 import { IoRocketSharp } from "react-icons/io5";
 import useModal from "src/store/useModal";
 import useUser from "src/store/useUser";
 
-const StyledTitle = styled.div`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.TEXT_POSITIVE};
-  flex: 1;
-  font-weight: 700;
-
-  &::after {
-    background: ${({ theme }) => theme.TEXT_POSITIVE};
-    height: 1px;
-
-    content: "";
-    -webkit-box-flex: 1;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-    margin-left: 4px;
-    opacity: 0.6;
-  }
-`;
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 0;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-
-  & > div {
-    font-weight: 400;
-    font-size: 14px;
-    color: ${({ theme }) => theme.INTERACTIVE_ACTIVE};
-  }
-`;
-
 export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   const user = useSupaUser();
   const isPremium = useUser(state => state.premium);
@@ -53,56 +24,40 @@ export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   const logout = useUser(state => state.logout);
 
   return (
-    <Modal title="Account" opened={opened} onClose={onClose} centered>
-      <StyledTitle>Hello, {user?.user_metadata.name}!</StyledTitle>
-      <Group py="sm">
-        <Grid gutter="xs">
-          <Grid.Col span={2}>
-            <Avatar
-              size="lg"
-              radius="lg"
-              src={user?.user_metadata.avatar_url}
-              alt={user?.user_metadata.name}
-            />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <StyledContainer>
-              USERNAME
-              <div>{user?.user_metadata.name}</div>
-            </StyledContainer>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StyledContainer>
-              ACCOUNT STATUS
-              <div>
-                {isPremium ? (
-                  <Badge color={premiumCancelled ? "teal" : "indigo"}>
-                    Premium {premiumCancelled ? "(Cancelled)" : isOrg && "(Organization)"}
-                  </Badge>
-                ) : (
-                  <Badge variant="outline" color="gray">
-                    Free
-                  </Badge>
-                )}
-              </div>
-            </StyledContainer>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StyledContainer>
-              EMAIL
-              <div>{user?.user_metadata.email}</div>
-            </StyledContainer>
-          </Grid.Col>
-          {user?.created_at && (
-            <Grid.Col span={4}>
-              <StyledContainer>
-                REGISTRATION
-                <div>{dayjs(user.created_at).format("DD MMMM YYYY")}</div>
-              </StyledContainer>
-            </Grid.Col>
-          )}
-        </Grid>
-      </Group>
+    <Modal title={`Hello, ${user?.user_metadata.name}!`} opened={opened} onClose={onClose} centered>
+      <Paper p="md">
+        <Group noWrap>
+          <Avatar src={user?.user_metadata.avatar_url} size={94}>
+            JC
+          </Avatar>
+          <div>
+            <Text fz="lg" tt="uppercase" fw={700}>
+              {user?.user_metadata.name}
+            </Text>
+
+            <Group noWrap spacing={10} mt={3}>
+              <Text fz="xs" c="dimmed">
+                {user?.email}
+              </Text>
+            </Group>
+
+            <Group noWrap spacing={10} mt={5}>
+              <Text fz="xs" c="dimmed">
+                <Badge
+                  size="sm"
+                  variant={isPremium ? "gradient" : "dot"}
+                  color={premiumCancelled || !isPremium ? "dark" : "green"}
+                  gradient={{ from: "#8800fe", to: "#ff00cc", deg: 35 }}
+                >
+                  {isPremium ? "Premium" : "Free"}{" "}
+                  {premiumCancelled ? "(Cancelled)" : isOrg && "(Organization)"}
+                </Badge>
+              </Text>
+            </Group>
+          </div>
+        </Group>
+      </Paper>
+
       <Divider py="xs" />
       <Group position="right">
         {isPremium && !premiumCancelled ? (

src/containers/Modals/CloudModal/index.tsx

@@ -57,7 +57,10 @@ const UpdateNameModal: React.FC<{
         error: "Error occurred while updating document!",
         success: `Renamed document to ${name}`,
       })
-      .then(() => refetch());
+      .then(() => {
+        refetch();
+        setName("");
+      });
 
     onClose();
   };

src/pages/sign-in.tsx

@@ -13,7 +13,6 @@ import {
   Divider,
   Anchor,
   Stack,
-  Title,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useToggle, upperFirst } from "@mantine/hooks";
@@ -94,11 +93,14 @@ export function AuthenticationForm(props: PaperProps) {
   if (done) {
     return (
       <Paper mih={100}>
-        <Title align="center" order={2}>
+        <Text align="center" mt="lg">
           Registration successul!
           <br />
           Please check your inbox for email confirmation.
-        </Title>
+        </Text>
+        <Button radius="sm" size="md" mt="lg" onClick={() => window.location.reload()} fullWidth>
+          Back to login
+        </Button>
       </Paper>
     );
   }