Style user info popup (#78)

* first pass * finish cleanup and restyling
sandboxnu · Dec 8, 2023 · 7a1e85f · 7a1e85f · vercel · Dec 8, 2023
1 parent 4dc2436
commit 7a1e85f
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 131 deletions.
diff --git 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
@@ -1,17 +1,23 @@
-import { MFALogoIcon, UserProfileAvatar } from 'apps/web/src/static/icons';
 import {
   Box,
   Hide,
   IconButton,
   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
@@ -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
@@ -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 = ({