Dupdate

tunduk/components/Cards/InviteCard.tsx

@@ -19,10 +19,15 @@ export const InviteCard: React.FC<Props> = ({
   const { id, groups, sender } = invite;
   const { avatar_url, group_name } = groups;
   return (
-    <Box boxSizing="border-box" boxShadow="2xl" borderRadius={20} py="4">
+    <Box
+      boxSizing="border-box"
+      style={{ boxShadow: '1px 1px 8px 2px #DDCDBF' }}
+      borderRadius={20}
+      py="4"
+    >
       <Flex flexDirection="column" alignItems="center">
         <AvatarInvite src={avatar_url} />
-        <Box textAlign="center">
+        <Box my="4" textAlign="center">
           <Text fontSize={20}>
             <strong>{sender}</strong> invites you
           </Text>
@@ -32,7 +37,7 @@ export const InviteCard: React.FC<Props> = ({
           </Text>
         </Box>
 
-        <HStack mt="4" spacing="7">
+        <HStack spacing="7">
           <IconButton
             aria-label="decline"
             borderRadius="100"

tunduk/components/Cards/MemberCard.tsx

@@ -1,9 +1,8 @@
 import { Flex, Text } from '@chakra-ui/react';
-import { faUser } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { ProfileType } from '../../types';
 import { AvatarCard } from '../Avatar';
+import { BlackProfileIcon } from '../Icons/Profile/BlackProfileIcon';
 
 interface Props {
   member: ProfileType;
@@ -19,7 +18,7 @@ export const MemberCard: React.FC<Props> = ({ member }) => {
     >
       <AvatarCard
         src={avatar_url}
-        icon={<FontAwesomeIcon icon={faUser} size="2x" />}
+        icon={<BlackProfileIcon w="4.5rem" h="4.5rem" />}
       />
       <Text fontSize={28}>{username}</Text>
     </Flex>

tunduk/components/Containers/GroupsContainer.tsx

@@ -1,13 +1,19 @@
-import { Box, Center, SimpleGrid, Text, VStack } from '@chakra-ui/react';
+import {
+  Box,
+  Center,
+  IconButton,
+  SimpleGrid,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { GroupType, StringOrUndefined } from '../../types';
-import { GradientButton } from '../Buttons';
 import { GroupCard } from '../Cards';
 import { Heading } from '../Headers';
+import { AddGroupIcon } from '../Icons/Doggo';
 import { DogPawn } from '../Icons/LightMode';
 import MainContainerLayout from '../Layouts/Containers';
-import { GradientButtonText } from '../Text';
 
 interface Props {
   userGroups: GroupType[] | undefined;
@@ -51,13 +57,18 @@ export const GroupsContainer: React.FC<Props> = ({
     <MainContainerLayout
       button={
         <Link to="/group/create-group">
-          <GradientButton
+          <IconButton
+            aria-label="Add new doggo group"
+            size="sm"
+            w="100%"
+            h="100%"
+            p={2}
+            borderRadius="100"
             isDisabled={isAddDoggoGroupDisabled || username === null}
-          >
-            <GradientButtonText fontSize={25}>
-              New Doggo Group
-            </GradientButtonText>
-          </GradientButton>
+            bgColor="transparent"
+            _hover={{ bgColor: 'transparent' }}
+            icon={<AddGroupIcon width="28" height="28" />}
+          />
         </Link>
       }
       isLoading={isLoading}

tunduk/components/Containers/LogsContainer.tsx

@@ -53,12 +53,13 @@ export const LogsContainer: React.FC<Props> = ({}) => {
   return (
     <VStack id="VStack">
       <Flex
+        position="relative"
+        style={{ boxShadow: '1px 1px 8px 2px #DDCDBF' }}
         h="md"
         w="3xl"
         justifyContent="center"
         alignItems="center"
         borderRadius={20}
-        boxShadow="xl"
         mb="1em"
         // py="4"
         flexDirection="column"
@@ -93,9 +94,9 @@ export const LogsContainer: React.FC<Props> = ({}) => {
           </SimpleGrid>
           // </Flex>
         )}
-      </Flex>
-      <Flex w="3xl" justifyContent="flex-end">
-        <AddDutyLink />
+        <Box position="absolute" right="-10" bottom="-10">
+          <AddDutyLink />
+        </Box>
       </Flex>
     </VStack>
   );

tunduk/components/Invites/Invites.tsx

@@ -10,14 +10,13 @@ import {
   useDisclosure,
   VStack,
 } from '@chakra-ui/react';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useEffect } from 'react';
 import { useAuth } from '../../context/authContext/AuthContext';
 import { InviteDataType, StringOrUndefined } from '../../types';
 import { supabase } from '../../utils/supabaseClient';
 import { GradientButton } from '../Buttons';
 import { InviteCard } from '../Cards';
+import { InvitesIcon } from '../Icons/Navbar';
 import { GradientButtonText, LinkLabel } from '../Text';
 
 interface Props {
@@ -131,14 +130,9 @@ const Invites: React.FC<Props> = ({
   }, [userInvites]);
 
   return (
-    <Box>
+    <>
       <VStack cursor="pointer" onClick={onOpen}>
-        <FontAwesomeIcon
-          id="Invites"
-          icon={faEnvelope}
-          color="#DDCDBF"
-          size="3x"
-        />
+        <InvitesIcon id="Invites" width="5.5rem" height="4rem" />
         <LinkLabel htmlFor="Invites" label="Invites" />
       </VStack>
 
@@ -176,7 +170,7 @@ const Invites: React.FC<Props> = ({
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </Box>
+    </>
   );
 };
 export default Invites;

tunduk/components/Text/LinkLabel.tsx

@@ -11,9 +11,8 @@ export const LinkLabel: React.FC<Props> = ({ htmlFor, label }) => {
       htmlFor={htmlFor}
       textAlign="center"
       fontSize="md"
-      m={0}
       cursor="pointer"
-      casing="uppercase"
+      textTransform="uppercase"
     >
       {label}
     </FormLabel>