add green icon to invites button when there are invites

tomimarkus991 · Aug 8, 2021 · ee2b27f · ee2b27f · vercel · Aug 8, 2021
1 parent 80f6a60
commit ee2b27f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/tunduk/components/Invites/Invites.tsx b/tunduk/components/Invites/Invites.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Icon,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -21,10 +22,8 @@ import { InvitesIcon } from '../Icons/Navbar';
 import { GradientButtonText, LinkLabel } from '../Text';
 
 interface Props {
-  userInvites: InviteDataType[] | undefined;
-  setUserInvites: React.Dispatch<
-    React.SetStateAction<InviteDataType[] | undefined>
-  >;
+  userInvites: InviteDataType[];
+  setUserInvites: React.Dispatch<React.SetStateAction<InviteDataType[]>>;
   currentUsername: StringOrUndefined;
 }
 
@@ -132,7 +131,24 @@ const Invites: React.FC<Props> = ({
   return (
     <>
       <VStack cursor="pointer" onClick={onOpen}>
-        <InvitesIcon id="Invites" fontSize="4rem" />
+        <Box position="relative">
+          <InvitesIcon id="Invites" fontSize="4rem" />
+          {userInvites.length >= 1 && (
+            <Icon
+              position="absolute"
+              bottom={-2}
+              right={-2}
+              viewBox="0 0 200 200"
+              fontSize="1.5rem"
+              color="green.500"
+            >
+              <path
+                fill="currentColor"
+                d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
+              />
+            </Icon>
+          )}
+        </Box>
         <LinkLabel htmlFor="Invites" label="Invites" />
       </VStack>
 

diff --git a/tunduk/components/LoggedIn/LoggedIn.tsx b/tunduk/components/LoggedIn/LoggedIn.tsx
@@ -25,9 +25,7 @@ import { ProfileLink } from '../Links';
 import Skeleton from '../Skeleton';
 
 const LoggedIn: React.FC = () => {
-  const [userInvites, setUserInvites] = useState<
-    InviteDataType[] | undefined
-  >();
+  const [userInvites, setUserInvites] = useState<InviteDataType[]>([]);
   const [username, setUsername] = useState<StringOrUndefined>();
   const [avatar_url, setAvatarUrl] = useState<StringOrUndefined>();
   const [groups, setGroups] = useState<GroupType[]>();

diff --git a/tunduk/pages/Profile/Profile.tsx b/tunduk/pages/Profile/Profile.tsx
@@ -39,7 +39,7 @@ const Profile: React.FC = () => {
   const [old_username, setOldUsername] = useState<StringOrUndefined>();
   const [password, setPassword] = useState<StringOrUndefined>();
   const [avatar_url, setAvatarUrl] = useState<StringOrUndefined>();
-  const [userInvites, setUserInvites] = useState<InviteDataType[]>();
+  const [userInvites, setUserInvites] = useState<InviteDataType[]>([]);
   const [show, setShow] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isUserdataLoading, setIsUserdataLoading] =
@@ -260,14 +260,6 @@ const Profile: React.FC = () => {
                       maxLength={20}
                       placeholder="Username"
                     />
-                    <Input
-                      variant={'removeDefault'}
-                      value={user?.email}
-                      disabled
-                      size="lg"
-                      fontSize="2xl"
-                      borderRadius="25"
-                    />
                     {user?.app_metadata.provider === 'email' ? (
                       <InputGroup
                         justifyContent="center"