From 7a1e85fe979cf242c7587e967c23f99aab44c423 Mon Sep 17 00:00:00 2001
From: Elvin Cheng <elvincheng3@gmail.com>
Date: Thu, 7 Dec 2023 23:16:38 -0500
Subject: [PATCH] Style user info popup (#78)

* first pass

* finish cleanup and restyling
---
 apps/web/src/components/FormList.tsx          |  51 ++++---
 apps/web/src/components/TopBar.tsx            | 133 +++++++++++-------
 .../CreateFormInstanceModal.tsx               |  96 ++++++++-----
 .../createFormInstance/SignatureDropdown.tsx  |   6 +-
 apps/web/src/static/icons.tsx                 |  63 ++++++---
 apps/web/src/styles/globals.css               |   1 -
 6 files changed, 219 insertions(+), 131 deletions(-)

diff --git a/apps/web/src/components/FormList.tsx b/apps/web/src/components/FormList.tsx
index 9bf20a20..b5ce82b5 100644
--- a/apps/web/src/components/FormList.tsx
+++ b/apps/web/src/components/FormList.tsx
@@ -1,5 +1,17 @@
 import { FormRow } from './FormRow';
-import { Box, Button, Flex, Grid, GridItem, Input, InputGroup, InputLeftElement, Select, Text, useDisclosure } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Select,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
 import { RightSearchIcon, SortDownArrow } from 'apps/web/src/static/icons';
 import { FormInstanceEntity } from '@web/client';
 import { useState } from 'react';
@@ -20,12 +32,13 @@ export const FormList = ({
   const { isOpen, onToggle } = useDisclosure();
   const [showButton, setShowButton] = useState(false);
 
-
-
   const sortedFormInstances = formInstances
     .map((formInstance) => ({
       ...formInstance,
-      levenshteinDistance: distance(searchQuery.toLowerCase(), formInstance.name.toLowerCase()),
+      levenshteinDistance: distance(
+        searchQuery.toLowerCase(),
+        formInstance.name.toLowerCase(),
+      ),
     }))
     .sort((a, b) => a.levenshteinDistance - b.levenshteinDistance);
 
@@ -63,7 +76,11 @@ export const FormList = ({
             >
               <InputGroup marginRight="12px">
                 {isOpen ? (
-                  <InputLeftElement as="button" onClick={onToggle} justifyContent="flex-start">
+                  <InputLeftElement
+                    as="button"
+                    onClick={onToggle}
+                    justifyContent="flex-start"
+                  >
                     <RightSearchIcon color="#595959" w="25px" h="25px" />
                   </InputLeftElement>
                 ) : (
@@ -85,10 +102,10 @@ export const FormList = ({
                   borderBottom="1px solid"
                   borderColor="#B0B0B0"
                   boxShadow="none"
-                  _hover={{ borderColor: "#595959" }}
+                  _hover={{ borderColor: '#595959' }}
                   _focus={{
-                    borderColor: "#595959",
-                    boxShadow: "none",
+                    borderColor: '#595959',
+                    boxShadow: 'none',
                   }}
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
@@ -117,7 +134,7 @@ export const FormList = ({
               icon={<SortDownArrow />}
               iconSize="10px"
             >
-              <option value="recent">&nbsp;&nbsp;Recent</option>              
+              <option value="recent">&nbsp;&nbsp;Recent</option>
               <option value="option2">&nbsp;&nbsp;Option 2</option>
               <option value="option3">&nbsp;&nbsp;Option 3</option>
             </Select>
@@ -148,13 +165,15 @@ export const FormList = ({
               </Text>
             </GridItem>
           </Grid>
-          {sortedFormInstances.map((formInstance: FormInstanceEntity, index: number) => (
-            <FormRow
-              formInstance={formInstance}
-              key={index}
-              link={'/form-instances/' + formInstance.id}
-            />
-          ))}
+          {sortedFormInstances.map(
+            (formInstance: FormInstanceEntity, index: number) => (
+              <FormRow
+                formInstance={formInstance}
+                key={index}
+                link={'/form-instances/' + formInstance.id}
+              />
+            ),
+          )}
         </Box>
       </Box>
     </>
diff --git a/apps/web/src/components/TopBar.tsx b/apps/web/src/components/TopBar.tsx
index 35b2e7c3..9f51fd23 100644
--- a/apps/web/src/components/TopBar.tsx
+++ b/apps/web/src/components/TopBar.tsx
@@ -1,4 +1,3 @@
-import { MFALogoIcon, UserProfileAvatar } from 'apps/web/src/static/icons';
 import {
   Box,
   Hide,
@@ -6,12 +5,19 @@ import {
   Text,
   Flex,
   Spacer,
-  Button,
   Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Divider,
 } from '@chakra-ui/react';
+import {
+  DropdownDownArrow,
+  DropdownUpArrow,
+  MFALogoIcon,
+  SignoutIcon,
+  UserProfileAvatar,
+} from 'apps/web/src/static/icons';
 import { useAuth } from '@web/hooks/useAuth';
 
 export const TopBar: React.FC = () => {
@@ -40,59 +46,78 @@ export const TopBar: React.FC = () => {
       </Box>
       <Spacer />
 
-      <Flex align="center" pl="10">
-        <Hide breakpoint="(max-width: 1000px)">
-          <Text minW="200" align="right">
-            Welcome back, {user?.firstName}!
-          </Text>
-        </Hide>
-        <Spacer w="12px" />
-        <Popover placement="bottom-end">
-          <PopoverTrigger>
-            <IconButton
-              aria-label="Visit profile"
-              icon={
-                user?.firstName && user?.lastName ? (
-                  <UserProfileAvatar
-                    firstName={user.firstName}
-                    lastName={user.lastName}
-                    boxSize={7}
-                  />
-                ) : (
-                  <UserProfileAvatar
-                    firstName="Default"
-                    lastName="User"
-                    boxSize={7}
-                  />
-                )
-              }
-              colorScheme="none"
-            />
-          </PopoverTrigger>
-          <PopoverContent maxW="150px">
-            <PopoverBody>
-              <Box>
-                <Text
-                  fontSize="17px"
-                  fontWeight="700"
-                  cursor="default"
-                  pb="10px"
-                >
-                  {user?.firstName + ' ' + user?.lastName}
-                </Text>
-                <Button
-                  borderRadius="8px"
-                  height="25px"
-                  cursor="default"
-                  onClick={logout}
-                >
-                  Logout
-                </Button>
-              </Box>
-            </PopoverBody>
-          </PopoverContent>
+      <Flex align="center" pl="10" mr="24px">
+        <Popover placement="bottom-end" closeOnBlur={true}>
+          {({ isOpen, onClose }) => (
+            <>
+              <PopoverTrigger>
+                <button>
+                  <Flex align="center">
+                    <IconButton
+                      aria-label="Visit profile"
+                      icon={
+                        user?.firstName && user?.lastName ? (
+                          <UserProfileAvatar
+                            firstName={user.firstName}
+                            lastName={user.lastName}
+                            boxSize={7}
+                          />
+                        ) : (
+                          <UserProfileAvatar
+                            firstName="Default"
+                            lastName="User"
+                            boxSize={7}
+                          />
+                        )
+                      }
+                      colorScheme="none"
+                    />
+                    <Hide breakpoint="(max-width: 1000px)">
+                      <Flex>
+                        <Text px="10px" fontSize="18">
+                          {user?.firstName + ' ' + user?.lastName}
+                        </Text>
+                        {isOpen ? (
+                          <DropdownUpArrow maxH="8px" alignSelf="center" />
+                        ) : (
+                          <DropdownDownArrow maxH="8px" alignSelf="center" />
+                        )}
+                      </Flex>
+                    </Hide>
+                  </Flex>
+                </button>
+              </PopoverTrigger>
+              <PopoverContent maxW="288px">
+                <PopoverBody borderRadius="6px" p="0">
+                  <Box pl="24px" pb="14px">
+                    <Text fontSize="18px" cursor="default" pt="18px">
+                      {user?.firstName + ' ' + user?.lastName}
+                    </Text>
+                    <Text color="#888888" fontSize="18px" cursor="default">
+                      Position
+                    </Text>
+                  </Box>
+                  <Divider />
+                  <button onClick={logout}>
+                    <Flex align="center">
+                      <Text
+                        color="#4C658A"
+                        fontSize="18px"
+                        fontWeight="500"
+                        pl="24px"
+                        pr="12px"
+                        py="14px"
+                      >
+                        Sign out
+                      </Text>
+                      <SignoutIcon />
+                    </Flex>
+                  </button>
+                </PopoverBody>
+              </PopoverContent>
+            </>
+          )}
         </Popover>
-        <Spacer w="40px" />
       </Flex>
     </Flex>
   );
diff --git a/apps/web/src/components/createFormInstance/CreateFormInstanceModal.tsx b/apps/web/src/components/createFormInstance/CreateFormInstanceModal.tsx
index a7fc335d..79ab1bf6 100644
--- a/apps/web/src/components/createFormInstance/CreateFormInstanceModal.tsx
+++ b/apps/web/src/components/createFormInstance/CreateFormInstanceModal.tsx
@@ -1,13 +1,29 @@
 import React, { useState, useEffect } from 'react';
 import {
-  Modal, ModalOverlay, ModalContent, ModalBody, ModalCloseButton, Button, Flex, Box, Text, ModalFooter, Skeleton, Grid, List
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  Flex,
+  Box,
+  Text,
+  ModalFooter,
+  Skeleton,
+  Grid,
+  List,
 } from '@chakra-ui/react';
 import { Reorder } from 'framer-motion';
 import { DropdownDownArrow, DropdownUpArrow } from '@web/static/icons';
 import { chakraComponents, Select } from 'chakra-react-select';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import {
-  CreateFormInstanceDto, FormInstancesService, FormTemplateEntity, FormTemplatesService, PositionsService,
+  CreateFormInstanceDto,
+  FormInstancesService,
+  FormTemplateEntity,
+  FormTemplatesService,
+  PositionsService,
 } from '@web/client';
 import { SignatureDropdown } from './SignatureDropdown';
 import { CreateFormInstanceModalProps, Option } from './types';
@@ -94,7 +110,13 @@ const CreateFormInstanceModal: React.FC<CreateFormInstanceModalProps> = ({
         <ModalCloseButton />
         <ModalBody>
           <Box h="75vh" w="75vw">
-          <Text fontFamily="Hanken Grotesk" fontWeight="800" fontSize="27px" pt="30px" pb="5px">
+            <Text
+              fontFamily="Hanken Grotesk"
+              fontWeight="800"
+              fontSize="27px"
+              pt="30px"
+              pb="5px"
+            >
               <input
                 type="text"
                 value={formName}
@@ -134,9 +156,9 @@ const CreateFormInstanceModal: React.FC<CreateFormInstanceModalProps> = ({
                     DropdownIndicator: (props: any) => (
                       <chakraComponents.DropdownIndicator {...props}>
                         {isFormTypeDropdownOpen ? (
-                          <DropdownUpArrow />
+                          <DropdownUpArrow maxH="7px" />
                         ) : (
-                          <DropdownDownArrow />
+                          <DropdownDownArrow maxH="7px" />
                         )}
                       </chakraComponents.DropdownIndicator>
                     ),
@@ -156,38 +178,38 @@ const CreateFormInstanceModal: React.FC<CreateFormInstanceModalProps> = ({
                 />
               </Flex>
               {formTypeSelected ? (
-  <Flex flexDirection="column" w="100%">
-    <Text
-      fontFamily="Hanken Grotesk"
-      fontSize="17px"
-      fontWeight="700"
-      mb="10px"
-    >
-      Assignees
-    </Text>
-    <div
-  className="scrollable-div"
-  style={{
-    maxHeight: '450px',
-    overflowY: 'auto',
-    paddingRight: '5px',
-    scrollbarWidth: 'thin',
-    scrollbarColor: '#4C658A transparent',
-    paddingLeft: '5px',
-  }}
->
-      {selectedFormTemplate?.signatureFields.map((field, i) => (
-        <SignatureDropdown
-          key={field.id}
-          field={field}
-          index={i}
-          positions={positions}
-          signaturePositions={signaturePositions}
-          setSignaturePositions={setSignaturePositions}
-        />
-      ))}
-    </div>
-  </Flex>
+                <Flex flexDirection="column" w="100%">
+                  <Text
+                    fontFamily="Hanken Grotesk"
+                    fontSize="17px"
+                    fontWeight="700"
+                    mb="10px"
+                  >
+                    Assignees
+                  </Text>
+                  <div
+                    className="scrollable-div"
+                    style={{
+                      maxHeight: '450px',
+                      overflowY: 'auto',
+                      paddingRight: '5px',
+                      scrollbarWidth: 'thin',
+                      scrollbarColor: '#4C658A transparent',
+                      paddingLeft: '5px',
+                    }}
+                  >
+                    {selectedFormTemplate?.signatureFields.map((field, i) => (
+                      <SignatureDropdown
+                        key={field.id}
+                        field={field}
+                        index={i}
+                        positions={positions}
+                        signaturePositions={signaturePositions}
+                        setSignaturePositions={setSignaturePositions}
+                      />
+                    ))}
+                  </div>
+                </Flex>
               ) : (
                 <Box width="273px" height="42px">
                   <Text
diff --git a/apps/web/src/components/createFormInstance/SignatureDropdown.tsx b/apps/web/src/components/createFormInstance/SignatureDropdown.tsx
index 70ddc4f8..a2f8b7fe 100644
--- a/apps/web/src/components/createFormInstance/SignatureDropdown.tsx
+++ b/apps/web/src/components/createFormInstance/SignatureDropdown.tsx
@@ -8,9 +8,9 @@ import { SearchIcon } from '@web/static/icons';
 
 const assigneePlaceholderWithIcon = (
   <div style={{ display: 'flex', alignItems: 'center' }}>
-  <SearchIcon /> 
-  <span style={{ marginLeft: '8px' }}>Select assignee</span>
-</div>
+    <SearchIcon />
+    <span style={{ marginLeft: '8px' }}>Select assignee</span>
+  </div>
 );
 
 export const SignatureDropdown = ({
diff --git a/apps/web/src/static/icons.tsx b/apps/web/src/static/icons.tsx
index 2db0c5e9..943045fd 100644
--- a/apps/web/src/static/icons.tsx
+++ b/apps/web/src/static/icons.tsx
@@ -54,11 +54,10 @@ export const SearchIcon = createIcon({
   d: 'M20.3504 18.6627H19.33L18.9683 18.3139C20.2342 16.8414 20.9963 14.9298 20.9963 12.8502C20.9963 8.2131 17.2375 4.45435 12.6004 4.45435C7.96334 4.45435 4.20459 8.2131 4.20459 12.8502C4.20459 17.4873 7.96334 21.246 12.6004 21.246C14.68 21.246 16.5917 20.4839 18.0642 19.2181L18.4129 19.5798V20.6002L24.8713 27.0456L26.7958 25.121L20.3504 18.6627ZM12.6004 18.6627C9.38417 18.6627 6.78792 16.0664 6.78792 12.8502C6.78792 9.63393 9.38417 7.03768 12.6004 7.03768C15.8167 7.03768 18.4129 9.63393 18.4129 12.8502C18.4129 16.0664 15.8167 18.6627 12.6004 18.6627Z',
 });
 
-
 export const RightSearchIcon = createIcon({
   displayName: 'RightSearchIcon',
   viewBox: '0 0 26 26',
-  d: "M8.85026 14.8939H9.67318L9.96484 14.6126C8.94401 13.4251 8.32943 11.8835 8.32943 10.2064C8.32943 6.4668 11.3607 3.43555 15.1003 3.43555C18.8398 3.43555 21.8711 6.4668 21.8711 10.2064C21.8711 13.946 18.8398 16.9772 15.1003 16.9772C13.4232 16.9772 11.8815 16.3626 10.694 15.3418L10.4128 15.6335V16.4564L5.20443 21.6543L3.65234 20.1022L8.85026 14.8939ZM15.1003 14.8939C17.694 14.8939 19.7878 12.8001 19.7878 10.2064C19.7878 7.61263 17.694 5.51888 15.1003 5.51888C12.5065 5.51888 10.4128 7.61263 10.4128 10.2064C10.4128 12.8001 12.5065 14.8939 15.1003 14.8939Z",
+  d: 'M8.85026 14.8939H9.67318L9.96484 14.6126C8.94401 13.4251 8.32943 11.8835 8.32943 10.2064C8.32943 6.4668 11.3607 3.43555 15.1003 3.43555C18.8398 3.43555 21.8711 6.4668 21.8711 10.2064C21.8711 13.946 18.8398 16.9772 15.1003 16.9772C13.4232 16.9772 11.8815 16.3626 10.694 15.3418L10.4128 15.6335V16.4564L5.20443 21.6543L3.65234 20.1022L8.85026 14.8939ZM15.1003 14.8939C17.694 14.8939 19.7878 12.8001 19.7878 10.2064C19.7878 7.61263 17.694 5.51888 15.1003 5.51888C12.5065 5.51888 10.4128 7.61263 10.4128 10.2064C10.4128 12.8001 12.5065 14.8939 15.1003 14.8939Z',
 });
 
 export const ProfileIcon = createIcon({
@@ -148,11 +147,12 @@ export const CheckIcon = createIcon({
 
 export const MFALogoIcon = createIcon({
   displayName: 'CustomLogoIcon',
-  viewBox: '0 0 800 200', 
+  viewBox: '0 0 800 200',
   path: (
     <svg width="800" height="200">
-    <g>
-      <path d="M442.98,168.25c-9.19,0-17.39-2.09-24.66-6.32s-13.01-10.01-17.19-17.39c-4.06-7.51-6.11-16-6.11-25.44
+      <g>
+        <path
+          d="M442.98,168.25c-9.19,0-17.39-2.09-24.66-6.32s-13.01-10.01-17.19-17.39c-4.06-7.51-6.11-16-6.11-25.44
 		s2.05-18.05,6.11-25.44c4.23-7.38,9.89-13.13,17.03-17.19c7.26-4.23,15.55-6.32,24.86-6.32s17.35,2.09,24.49,6.32
 		c7.26,4.06,12.92,9.81,17.03,17.19c4.18,7.38,6.32,15.88,6.32,25.44s-2.09,17.89-6.32,25.44c-4.1,7.38-9.76,13.21-17.03,17.39
 		c-7.14,4.23-15.3,6.32-24.49,6.32H442.98z M442.98,145.32c4.59,0,8.49-1.03,11.65-3.08c3.2-2.05,5.62-5.05,7.26-8.98
@@ -178,21 +178,29 @@ export const MFALogoIcon = createIcon({
 		c-2.3-3.32-5.21-5.87-8.78-7.63c-3.57-1.93-7.34-2.87-11.28-2.87c-3.32,0-6.07,0.66-8.21,1.93c-2.05,1.15-3.08,2.67-3.08,4.59
 		c0,1.39,0.49,2.63,1.52,3.65c1.03,0.9,2.67,1.72,4.96,2.5c2.3,0.78,5.42,1.64,9.35,2.67c3.69,0.9,7.59,1.97,11.65,3.24
 		c4.06,1.27,7.92,3.08,11.49,5.33c3.69,2.17,6.65,5.09,8.78,8.78c2.3,3.57,3.45,8.08,3.45,13.58c0,6.36-1.64,12.06-4.96,17.03
-		c-3.2,4.84-7.79,8.62-13.74,11.28c-5.87,2.67-12.76,4.02-20.64,4.02L757.76,168.29z"/>
-    <polygon points="8.09,165.67 8.09,32.71 47.96,32.71 78.3,119.28 108.6,32.71 148.48,32.71 148.48,165.67 121.19,165.67 
-    121.19,71.93 91.61,153.82 65.11,153.82 35.33,71.89 35.33,165.67 "/>
-  <polygon points="159.22,32.71 266.83,32.67 254.53,57.12 186.51,57.12 186.51,85.18 240.5,85.18 227.22,109.59 186.51,109.59 
-    186.51,165.67 159.22,165.67 "/>
-  <polygon points="279.14,32.67 211.65,166.62 241.27,166.66 257.73,132.85 308.27,132.85 308.27,108.24 269.71,108.24 294.58,57.12 
-    308.27,57.12 308.27,32.67 "/>
-  <polygon points="308.27,166 336,165.96 336,109.75 390.12,109.75 390.12,85.3 336,85.3 336,57.2 398.32,57.2 398.32,32.75 
-    308.27,32.67 "/>
-    </g>
+		c-3.2,4.84-7.79,8.62-13.74,11.28c-5.87,2.67-12.76,4.02-20.64,4.02L757.76,168.29z"
+        />
+        <polygon
+          points="8.09,165.67 8.09,32.71 47.96,32.71 78.3,119.28 108.6,32.71 148.48,32.71 148.48,165.67 121.19,165.67 
+    121.19,71.93 91.61,153.82 65.11,153.82 35.33,71.89 35.33,165.67 "
+        />
+        <polygon
+          points="159.22,32.71 266.83,32.67 254.53,57.12 186.51,57.12 186.51,85.18 240.5,85.18 227.22,109.59 186.51,109.59 
+    186.51,165.67 159.22,165.67 "
+        />
+        <polygon
+          points="279.14,32.67 211.65,166.62 241.27,166.66 257.73,132.85 308.27,132.85 308.27,108.24 269.71,108.24 294.58,57.12 
+    308.27,57.12 308.27,32.67 "
+        />
+        <polygon
+          points="308.27,166 336,165.96 336,109.75 390.12,109.75 390.12,85.3 336,85.3 336,57.2 398.32,57.2 398.32,32.75 
+    308.27,32.67 "
+        />
+      </g>
     </svg>
   ),
 });
 
-
 export const SortDownArrow = createIcon({
   displayName: 'SortDownArrow',
   viewBox: '0 0 10 8',
@@ -201,14 +209,14 @@ export const SortDownArrow = createIcon({
 
 export const DropdownDownArrow = createIcon({
   displayName: 'DropdownDownArrow',
-  viewBox: '0 0 25 8',
-  d: 'M6 9L0.803848 0H11.1962L6 9Z',
+  viewBox: '0 0 10 8',
+  d: 'M5 8L0.669872 0.5L9.33013 0.5L5 8Z',
 });
 
 export const DropdownUpArrow = createIcon({
   displayName: 'DropdownUpArrow',
-  viewBox: '0 0 25 8',
-  d: 'M6 0L11.1962 9H0.803848L6 0Z',
+  viewBox: '0 0 10 8',
+  d: 'M5 0L9.33013 7.5L0.669873 7.5L5 0Z',
 });
 
 export const UploadForm = createIcon({
@@ -268,3 +276,18 @@ export const ErrorIcon = createIcon({
     </>
   ),
 });
+
+export const SignoutIcon = createIcon({
+  displayName: 'SignoutIcon',
+  viewBox: '0 0 15 20',
+  path: (
+    <>
+      <path
+        d="M7.19048 19.125C7.60574 19.125 7.93452 18.7771 7.93452 18.3571C7.93452 17.9372 7.60574 17.5893 7.19048 17.5893H4.09524C3.14459 17.5893 2.3631 16.7846 2.3631 15.7857V4.21429C2.3631 3.21536 3.14459 2.41071 4.09524 2.41071H7.19048C7.60574 2.41071 7.93452 2.06277 7.93452 1.64286C7.93452 1.22294 7.60574 0.875 7.19048 0.875H4.09524C2.31519 0.875 0.875 2.37749 0.875 4.21429V15.7857C0.875 17.6225 2.31519 19.125 4.09524 19.125H7.19048ZM13.9087 9.45877L11.4325 6.88735C11.1415 6.58517 10.668 6.58517 10.377 6.88735C10.0886 7.18687 10.0886 7.67027 10.377 7.9698L11.5926 9.23214H4.71429C4.29902 9.23214 3.97024 9.58008 3.97024 10C3.97024 10.4199 4.29902 10.7679 4.71429 10.7679H11.5926L10.377 12.0302C10.0886 12.3297 10.0886 12.8131 10.377 13.1127C10.5219 13.2631 10.713 13.3393 10.9048 13.3393C11.0965 13.3393 11.2876 13.2631 11.4325 13.1127L13.9087 10.5412C14.1971 10.2417 14.1971 9.7583 13.9087 9.45877Z"
+        fill="#4C658A"
+        stroke="#4C658A"
+        stroke-width="0.25"
+      />
+    </>
+  ),
+});
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 266f82b8..be502cba 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -126,4 +126,3 @@ a {
   background: #4c658a;
   border-radius: 24px;
 }
-