[Fix] Update manager dashboard UI (#11667)

* The dropdown caret on the role switcher should be x.85 in width/height * Bullets all over the page should be base(black.lighter) * The overall spacing inside the request accordion is a bit inconsistent - everything should be x1 apart * The dropdown in the role switcher should indicate the active item * Metadata text (the stuff under each request title) should be base(black.light) * The magnifying glass should be indented on both mobile (x1) and desktop (x1.5) * all the gray dividers on the page should be updated to base:all(gray.light); I found the lighter color wasn't contrasty enough * On mobile, the actions below each request title should stack by default, and the bullets should be hidden * The final item in the request accordion shouldn't have bottom padding, as the card already provides it * fix comment * undo last change * reduce accordion bottom padding * Update apps/web/src/pages/ManagerDashboardPage/ManagerDashboardPage.tsx Co-authored-by: Yoni K <[email protected]> --------- Co-authored-by: Yoni K <[email protected]>
GCTC-NTGC · Oct 3, 2024 · 1753c19 · 1753c19
1 parent bbc47f9
commit 1753c19
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/apps/web/src/pages/ManagerDashboardPage/ManagerDashboardPage.tsx b/apps/web/src/pages/ManagerDashboardPage/ManagerDashboardPage.tsx
@@ -125,6 +125,8 @@ const ManagerDashboard = ({ userQuery }: ManagerDashboardProps) => {
                       setAccordionItems(newValue);
                     }}
                     type="multiple"
+                    // we don't need that fat padding in the accordion inside the task card
+                    data-h2-padding-bottom="base:selectors[>.Accordion__Item > .Accordion__Content](x.5)"
                   >
                     <Accordion.Item value="your_talent_searches">
                       <Accordion.Trigger>
@@ -144,11 +146,18 @@ const ManagerDashboard = ({ userQuery }: ManagerDashboardProps) => {
                         // match accordion padding
                         data-h2-padding="base(0 x1 x0.75 x1.3)"
                         data-h2-display="base(flex)"
-                        data-h2-gap="base(x0.5)"
+                        data-h2-flex-direction="base(column) p-tablet(row)"
+                        data-h2-flex-wrap="base(nowrap) p-tablet(wrap)"
+                        data-h2-align-items="base(flex-start) p-tablet(center)"
+                        data-h2-gap="base(x0.5 0)"
+                        data-h2-content='p-tablet:children[:not(:last-child)::after]("•")'
+                        data-h2-color="p-tablet:children[::after](black.lighter)"
+                        data-h2-margin="p-tablet:children[:not(:last-child)::after](0 x.5)"
+                        data-h2-font-size="base(caption)"
                       >
                         {showUnfinishedPieces ? (
-                          // This link is missing an href since the page doesn't exist yet.  Probably #10982
-                          <>
+                          // This link is missing an href since the page doesn't exist yet. Probably #10982
+                          <div>
                             <Link color="primary" href="#">
                               {intl.formatMessage({
                                 defaultMessage: "All requests",
@@ -157,25 +166,24 @@ const ManagerDashboard = ({ userQuery }: ManagerDashboardProps) => {
                                   "Link to a page to view all the requests",
                               })}
                             </Link>
-                            &bull;
-                          </>
-                        ) : (
-                          <></>
-                        )}
-                        <Link color="primary" href={paths.search()}>
-                          {intl.formatMessage({
-                            defaultMessage: "New request",
-                            id: "BGQaDq",
-                            description:
-                              "Link to a page to start a new request",
-                          })}
-                        </Link>
+                          </div>
+                        ) : null}
+                        <div>
+                          <Link color="primary" href={paths.search()}>
+                            {intl.formatMessage({
+                              defaultMessage: "New request",
+                              id: "BGQaDq",
+                              description:
+                                "Link to a page to start a new request",
+                            })}
+                          </Link>
+                        </div>
                       </div>
                       <Accordion.Content>
                         <div
                           data-h2-display="base(flex)"
                           data-h2-flex-direction="base(column)"
-                          data-h2-gap="base(x0.5)"
+                          data-h2-gap="base(x1)"
                         >
                           <div>
                             {intl.formatMessage(

diff --git a/packages/ui/src/components/PreviewList/PreviewList.tsx b/packages/ui/src/components/PreviewList/PreviewList.tsx
@@ -17,7 +17,7 @@ export interface MetaDataProps {
 const MetaData = ({ children, type, color }: MetaDataProps) => {
   switch (type) {
     case "text":
-      return <span data-h2-color="base(gray.darker)">{children}</span>;
+      return <span data-h2-color="base(black.light)">{children}</span>;
     case "chip":
       return (
         <span>
@@ -40,6 +40,7 @@ const actionProps = {
   "data-h2-content": "base:selectors[::after](' ')",
   "data-h2-inset": "base:selectors[::after](0)",
   "data-h2-justify-self": "base(end)",
+  "data-h2-margin-right": "base(x1) p-tablet(x1.5)",
 } satisfies ButtonLinkProps;
 
 interface ButtonProps {
@@ -83,7 +84,7 @@ const Item = ({
       data-h2-align-items="base(flex-start) p-tablet(center)"
       data-h2-gap="base(x.5)"
       data-h2-border-bottom="base:all:selectors[:not(:last-child)](1px solid)"
-      data-h2-border-bottom-color="base:all:selectors[:not(:last-child)](gray.lighter)"
+      data-h2-border-bottom-color="base:all:selectors[:not(:last-child)](gray.light)"
       data-h2-transition="base:children[.PreviewList__Heading](transform 200ms ease)"
       data-h2-color="base:selectors[:has(:is(button, a):hover) .PreviewList__Heading](secondary.darker) base:all:selectors[:has(:is(button, a):focus-visible) .PreviewList__Heading](black)"
       data-h2-background-color="base:selectors[:has(:is(button, a):focus-visible) .PreviewList__Heading](focus)"
@@ -112,7 +113,7 @@ const Item = ({
           data-h2-align-items="base(flex-start) p-tablet(center)"
           data-h2-gap="base(x.5 0)"
           data-h2-content='p-tablet:children[:not(:last-child)::after]("•")'
-          data-h2-color="p-tablet:children[::after](gray.darker)"
+          data-h2-color="p-tablet:children[::after](black.lighter)"
           data-h2-margin="p-tablet:children[:not(:last-child)::after](0 x.5)"
           data-h2-font-size="base(caption)"
         >

diff --git a/packages/ui/src/components/ResourceBlock/BaseItem.tsx b/packages/ui/src/components/ResourceBlock/BaseItem.tsx
@@ -77,7 +77,7 @@ const BaseItem = ({
       data-h2-display="base(flex)"
       data-h2-flex-direction="base(column)"
       data-h2-gap="base(x0.15)"
-      data-h2-border-bottom="base:all:selectors[:not(:last-child)](1px solid gray.lighter)"
+      data-h2-border-bottom="base:all:selectors[:not(:last-child)](1px solid gray.light)"
       data-h2-border-radius="base:all:selectors[:last-child](0 0 rounded rounded)"
       // make the containing block for state icon
       data-h2-position="base(relative)"

diff --git a/packages/ui/src/components/ResourceBlock/LinkMenuItem.tsx b/packages/ui/src/components/ResourceBlock/LinkMenuItem.tsx
@@ -31,14 +31,19 @@ const LinkMenuItem = ({
           utilityIcon={ChevronDownIcon}
           mode="inline"
           color="black"
+          data-h2-height="base(x0.85)"
           data-h2-transform="base:children[svg](rotate(0deg)) base:selectors[[data-state='open']]:children[svg](rotate(180deg))"
         >
           {selectedLink?.title}
         </Button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content align="end" collisionPadding={2}>
         {links.map((link) => (
-          <DropdownMenu.Item key={link.title + link.href} asChild color="black">
+          <DropdownMenu.Item
+            key={link.title + link.href}
+            asChild
+            color={link.isSelected ? "secondary" : "black"}
+          >
             <Link href={link.href}>{link.title}</Link>
           </DropdownMenu.Item>
         ))}