158 feature navbar design update 1

apps/web/src/components/FormImageCard.tsx

@@ -4,7 +4,6 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { useStorage } from '@web/hooks/useStorage';
 import { Document, Page, pdfjs } from 'react-pdf';
-import { isFullySigned } from '@web/utils/formInstanceUtils';
 
 /**
  * @param formName - the name of the form
@@ -29,7 +28,7 @@ export const FormImageCard = ({
     const d2 = new Date(date2);
     const diffInTime = d2.getTime() - d1.getTime();
     const diffInDays = Math.ceil(diffInTime / (1000 * 60 * 60 * 24));
-    return diffInDays == 0 ? 'today' : `${diffInDays}d ago`;
+    return diffInDays == 0 ? 'today' : `${diffInDays} days ago`;
   };
 
   return (
@@ -56,12 +55,6 @@ export const FormImageCard = ({
           overflow="hidden"
           height="full"
           filter="blur(2px)"
-          transition="filter 0.05s ease-in-out"
-          _hover={
-            {
-              filter: 'none',
-            } as any
-          }
         >
           <Document file={formURL}>
             <Page
@@ -97,7 +90,7 @@ export const FormImageCard = ({
             borderRadius="20px"
             padding="3px 12px"
           >
-            {isFullySigned(formInstance) ? 'NEEDS APPROVAL' : 'TO DO'}
+            TO DO
           </Text>
           <Text
             textAlign="center"

apps/web/src/components/Layout.tsx

@@ -37,7 +37,7 @@ export const Layout = ({ children }: { children: any }) => {
       <Box>
         <TopBar />
 
-        <Box as="main" ml="320" pt="96px">
+        <Box as="main" ml="60" pt="60px">
           {children}
         </Box>
       </Box>

apps/web/src/components/NavBar.tsx

@@ -2,8 +2,6 @@ import {
   Box,
   Button,
   Flex,
-  Divider,
-  Spacer,
   MenuButton,
   Menu,
   Text,
@@ -25,14 +23,18 @@ import Link from 'next/link';
 
 const icons = {
   overview: <OverViewIcon marginRight="2" />,
+  overviewActive: <OverViewIcon marginRight="2" />,
   todo: <ToDoIcon marginRight="2" />,
+  todoActive: <ToDoIcon marginRight="2" />,
   pending: <PendingIcon marginRight="2" />,
+  pendingActive: <PendingIcon marginRight="2" />,
   completed: <CompletedIcon marginRight="2" />,
+  completedActive: <CompletedIcon marginRight="2" />,
   history: <HistoryIcon marginRight="2" />,
   settings: <SettingsIcon marginRight="2" />,
   formInstance: <FormInstanceIcon marginRight="2" />,
 };
-
+type IconKeys = keyof typeof icons;
 /**
  * @param children - the children of the nav item
  * @param icon - the icon of the nav item
@@ -50,33 +52,35 @@ const NavItem = ({
 }) => {
   const router = useRouter();
   const isActive = router.pathname === link;
+  const iconKey = isActive ? `${icon}Active` : icon;
 
   return (
     <Link href={link}>
-      <Box px="12">
+      <Box
+        px="12"
+        _hover={{
+          bg: '#EFEFEF !important',
+          color: '#0C0C0C',
+        }}
+        bg={isActive ? '#EFEFEF' : 'white'}
+        transition=".15s ease"
+      >
         <Flex
           align="center"
           px="4"
           pl="4"
           py="2"
-          rounded="8px"
           cursor="pointer"
           _dark={{
             color: 'gray.400',
           }}
-          _hover={{
-            bg: '#EFEFEF !important',
-            color: 'gray.900',
-          }}
           style={{
             fontWeight: isActive ? '800' : 'normal',
             color: isActive ? '#263345' : 'inherit',
           }}
-          bg={isActive ? '#EFEFEF' : 'white'}
           role="group"
-          transition=".15s ease"
         >
-          {icons[icon as keyof typeof icons]}
+          {icons[iconKey as IconKeys]}
           <Text
             textColor={isActive ? '#263345 !important' : ''}
             fontWeight={isActive ? 'bold !important' : 'inherit'}
@@ -108,25 +112,27 @@ export const NavBar = ({
     <Box
       as="nav"
       pos="fixed"
-      top="96px"
+      top="64px"
       left="0"
       zIndex="sticky"
       h="full"
       pb="10"
       overflowX="hidden"
       overflowY="auto"
-      bg="white"
+      boxShadow="1px 0px 4px #E5E5E5"
+      bg="#FEFEFE"
       _dark={{
         bg: 'gray.800',
       }}
       border="true"
       color="inherit"
       borderRightWidth="1px"
-      width="80"
+      width="224"
       {...props}
     >
       <Flex
-        align="center"
+        alignItems={'center'}
+        justifyContent={'center'}
         px="4"
         pt="40px"
         pb="32px"
@@ -146,14 +152,14 @@ export const NavBar = ({
             as={Button}
             h="40px"
             w="124px"
-            backgroundColor="#4C658A"
+            backgroundColor="#1367EA"
             textColor="white"
             leftIcon={<PlusIcon />}
           >
             Create
           </MenuButton>
+          <MenuButton padding="8px 22px 8px 16px"></MenuButton>
           <MenuList minW="0px" w={'124px'} p="5px">
-            {/* add form instance prop in the menu item below when ready */}
             <MenuItem rounded="8px" onClick={onOpenCreateFormInstance}>
               Form
             </MenuItem>
@@ -165,7 +171,7 @@ export const NavBar = ({
       </Flex>
 
       <NavItem icon="overview" link="/">
-        Overview
+        Dashboard
       </NavItem>
       <NavItem icon="todo" link="/todo">
         To do
@@ -176,24 +182,6 @@ export const NavBar = ({
       <NavItem icon="completed" link="/completed">
         Completed
       </NavItem>
-      <Box px={12}>
-        <Divider mt={'5'} mb={5} borderColor={'gray'} />
-      </Box>
-      <NavItem icon="history" link="/history">
-        History
-      </NavItem>
-      <NavItem icon="settings" link="/settings">
-        Settings
-      </NavItem>
-      <Box
-        paddingLeft="40px"
-        fontSize="14px"
-        position="absolute"
-        bottom="130px"
-      >
-        Museum of Fine Arts, Boston
-      </Box>
-      <Spacer minH="30vh" />
     </Box>
   );
 };

apps/web/src/components/TopBar.tsx

@@ -38,18 +38,28 @@ export const TopBar: React.FC = () => {
       pos="fixed"
       w="full"
       px="4"
-      bg="white"
+      bg="#FEFEFE"
       _dark={{
         bg: 'gray.800',
       }}
       borderBottomWidth="1px"
       color="inherit"
-      h="96px"
+      h="64px"
       zIndex="sticky"
     >
       <Box minWidth={302}>
-        <Flex px="7" py="5" align="left">
-          <MFALogoIcon height="51px" width="220px" />
+        <Flex px="8" py="5" align="left">
+          {/* Triangle */}
+          <Box
+            width="0"
+            height="0"
+            borderLeft="10px solid transparent"
+            borderRight="10px solid transparent"
+            borderBottom="20px solid #ED2324"
+            transform="rotate(90deg)"
+            alignSelf="center"
+          />
+          <MFALogoIcon height="24px" width="140px" ml="-3" />
         </Flex>
       </Box>
       <Spacer />

apps/web/src/static/icons.tsx

@@ -2,45 +2,51 @@ import { Avatar, createIcon } from '@chakra-ui/react';
 
 export const OverViewIcon = createIcon({
   displayName: 'OverviewIcon',
-  viewBox: '0 0 17 17',
+  viewBox: '0 -960 960 960',
   path: (
-    <path
-      fill="currentColor"
-      d="M9.44444 5.66667V0H17V5.66667H9.44444ZM0 9.44444V0H7.55556V9.44444H0ZM9.44444 17V7.55556H17V17H9.44444ZM0 17V11.3333H7.55556V17H0Z"
-    />
+    <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
+  ),
+});
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="#e8eaed"
+>
+  <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
+</svg>;
+
+export const OverViewIconActive = createIcon({
+  displayName: 'OverviewIcon',
+  viewBox: '0 -960 960 960',
+  path: (
+    <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
   ),
 });
 
 export const ToDoIcon = createIcon({
   displayName: 'ToDoIcon',
-  viewBox: '0 0 25 25',
+  viewBox: '0 -960 960 960',
   path: (
-    <path
-      fill="currentColor"
-      d="M23.9583 12.4945L21.4167 9.59863L21.7708 5.7653L18.0104 4.91113L16.0417 1.59863L12.5 3.11947L8.95832 1.59863L6.98957 4.91113L3.22916 5.75488L3.58332 9.58822L1.04166 12.4945L3.58332 15.3903L3.22916 19.234L6.98957 20.0882L8.95832 23.4007L12.5 21.8695L16.0417 23.3903L18.0104 20.0778L21.7708 19.2236L21.4167 15.3903L23.9583 12.4945ZM19.2604 14.6924L19.5312 17.5986L16.6771 18.2445L15.1875 20.7549L12.5 19.5986L9.81249 20.7549L8.32291 18.2445L5.46874 17.5986L5.73957 14.682L3.81249 12.4945L5.73957 10.2861L5.46874 7.3903L8.32291 6.75488L9.81249 4.24447L12.5 5.3903L15.1875 4.23405L16.6771 6.74447L19.5312 7.3903L19.2604 10.2965L21.1875 12.4945L19.2604 14.6924ZM11.4583 15.6195H13.5417V17.7028H11.4583V15.6195ZM11.4583 7.28613H13.5417V13.5361H11.4583V7.28613Z"
-    />
+    <path d="M560-80v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T903-300L683-80H560Zm300-263-37-37 37 37ZM620-140h38l121-122-18-19-19-18-122 121v38ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v120h-80v-80H520v-200H240v640h240v80H240Zm280-400Zm241 199-19-18 37 37-18-19Z" />
   ),
 });
 
 export const PendingIcon = createIcon({
   displayName: 'PendingIcon',
-  viewBox: '0 0 14 21',
+  viewBox: '0 -960 960 960',
   path: (
-    <path
-      fill="currentColor"
-      d="M0 2.25C0 1.65317 0.211191 1.08099 0.587045 0.658928C0.963049 0.237051 1.47283 0 2.00455 0H11.3591C12.0753 0 12.7371 0.428914 13.095 1.125C13.4531 1.82109 13.4531 2.67891 13.095 3.375C12.7371 4.07108 12.0753 4.5 11.3591 4.5H2.00455C1.47283 4.5 0.96306 4.26295 0.587045 3.84107C0.211191 3.41903 0 2.84683 0 2.25ZM13.3636 18.75C13.3636 19.3468 13.1524 19.919 12.7766 20.3411C12.4006 20.7629 11.8908 21 11.3591 21H2.00455C1.36962 21.0013 0.771998 20.6643 0.394037 20.0918C0.0159488 19.5193 -0.0974015 18.7793 0.0885821 18.098C0.274421 17.4166 0.73752 16.8747 1.33636 16.638V14.7285C1.33577 13.9941 1.52727 13.2757 1.88733 12.6623C2.24722 12.0491 2.75955 11.568 3.36092 11.2785L4.98601 10.5L3.36092 9.71858C2.76001 9.42947 2.24784 8.94866 1.88794 8.33593C1.52819 7.7232 1.3364 7.00551 1.3364 6.27158V5.14658C1.55431 5.21305 1.77878 5.24787 2.00458 5.25005H11.3591C11.5849 5.24686 11.8096 5.21104 12.0273 5.14357V6.26857C12.0285 7.00319 11.837 7.72203 11.477 8.33544C11.1168 8.94881 10.6039 9.4298 10.002 9.71857L8.37766 10.5L10.002 11.2815C10.6035 11.5699 11.1162 12.0506 11.4762 12.6635C11.8362 13.2762 12.0279 13.9944 12.0273 14.7285V16.638C12.4167 16.7927 12.7543 17.0784 12.9935 17.4565C13.2327 17.8346 13.362 18.2862 13.3636 18.75ZM2.67273 14.7285V16.5H10.6909V14.7285C10.6911 14.2882 10.5759 13.8574 10.3599 13.4896C10.1441 13.122 9.83674 12.8335 9.47612 12.66L6.68182 11.316L3.88752 12.66C3.52688 12.8336 3.21949 13.122 3.00369 13.4896C2.78772 13.8574 2.67258 14.2882 2.67273 14.7285Z"
-    />
+    <path d="M200-640h560v-80H200v80Zm0 0v-80 80Zm0 560q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v227q-19-9-39-15t-41-9v-43H200v400h252q7 22 16.5 42T491-80H200Zm520 40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40Zm67-105 28-28-75-75v-112h-40v128l87 87Z" />
   ),
 });
 
 export const CompletedIcon = createIcon({
   displayName: 'CompletedIcon',
-  viewBox: '0 0 28 28',
+  viewBox: '0 -960 960 960',
   path: (
-    <path
-      fill="currentColor"
-      d="M10.2667 18.5503L5.36667 13.6503L3.73334 15.2836L10.2667 21.8169L24.2667 7.81693L22.6333 6.18359L10.2667 18.5503Z"
-    />
+    <path d="m414-280 226-226-58-58-169 169-84-84-57 57 142 142ZM260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z" />
   ),
 });
 
@@ -116,10 +122,12 @@ export const UserProfileAvatar: React.FC<UserProfileAvatarProps> = ({
 }) => {
   return (
     <Avatar
-      bg="#E5E5E5"
-      color="black"
-      h="30px"
-      w="30px"
+      bg="#1367EA"
+      color="white"
+      h="32px"
+      w="32px"
+      fontSize="16px"
+      fontFamily="Hanken Grotesk"
       name={`${firstName} ${lastName}`}
       size="sm"
     ></Avatar>
@@ -370,3 +378,15 @@ export const SignoutIcon = createIcon({
     </>
   ),
 });
+
+export const CalendarClockIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 -960 960 960"
+    width="24px"
+    fill="#e8eaed"
+  >
+    <path d="M200-640h560v-80H200v80Zm0 0v-80 80Zm0 560q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v227q-19-9-39-15t-41-9v-43H200v400h252q7 22 16.5 42T491-80H200Zm520 40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40Zm67-105 28-28-75-75v-112h-40v128l87 87Z" />
+  </svg>
+);