feat: update NavigationMenu styles

gympass · Mar 12, 2024 · 4f67d03 · 4f67d03
1 parent 4b11e8b
commit 4f67d03
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 63 deletions.
diff --git a/packages/yoga/src/NavigationMenu/web/BottomItems/BottomItem.tsx b/packages/yoga/src/NavigationMenu/web/BottomItems/BottomItem.tsx
@@ -28,19 +28,22 @@ const Active = css`
     theme: {
       yoga: {
         components: {
-          navigationmenu: { icon, font },
+          navigationmenu: { backgroundColor, icon, font },
         },
       },
     },
   }) =>
     css`
+      background-color: ${backgroundColor.active};
+
       :not(:last-child) {
         pointer-events: none;
       }
 
       div {
         ${StyledText} {
           color: ${font.color.active};
+          font-weight: ${font.weight.bold};
         }
 
         svg {
@@ -56,7 +59,7 @@ const StyledItem = styled.li<{ isActive: boolean; children: React.ReactNode }>`
     theme: {
       yoga: {
         components: {
-          navigationmenu: { border, icon, font },
+          navigationmenu: { backgroundColor, border, icon, font },
         },
       },
     },
@@ -78,6 +81,8 @@ const StyledItem = styled.li<{ isActive: boolean; children: React.ReactNode }>`
       &:focus {
         ${!isActive &&
         css`
+          background-color: ${backgroundColor.hover};
+
           ${StyledText} {
             color: ${font.color.hover};
           }

diff --git a/packages/yoga/src/NavigationMenu/web/BottomItems/BottomItems.tsx b/packages/yoga/src/NavigationMenu/web/BottomItems/BottomItems.tsx
@@ -2,21 +2,23 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { media } from '@gympass/yoga-helpers';
 
+type BottomItemsStyledProps = React.HTMLAttributes<HTMLUListElement> & {
+  $zIndex?: number;
+};
+
 const StyledItemsContainer = styled.nav`
   position: relative;
   ${media.lg`display: none`}
-`;
 
-type BottomItemsStyledProps = React.HTMLAttributes<HTMLUListElement> & {
-  $zIndex?: number;
-}
+  z-index: ${({ $zIndex }: BottomItemsStyledProps) => $zIndex ?? 2};
+`;
 
 const StyledItems = styled.ul`
   ${({
     theme: {
       yoga: {
         components: {
-          navigationmenu: { backgroundColor, border, gap },
+          navigationmenu: { backgroundColor, border, gap, height },
         },
       },
     },
@@ -28,13 +30,12 @@ const StyledItems = styled.ul`
     grid-auto-flow: column;
     align-items: center;
     width: 100%;
-    height: 56px;
-    background-color: ${backgroundColor.white};
+    height: ${height.bottomMenu}px;
+    background-color: ${backgroundColor.bottomMenu};
     margin: 0;
     padding: 0;
     border: 1px solid ${border.color.default};
     gap: ${gap.xxxsmall}px;
-    z-index: ${({ $zIndex }: BottomItemsStyledProps) => $zIndex ?? 2};
   `}
 `;
 

diff --git a/packages/yoga/src/NavigationMenu/web/Item/styles.ts b/packages/yoga/src/NavigationMenu/web/Item/styles.ts
@@ -1,10 +1,8 @@
 import styled, { css } from 'styled-components';
-import { media } from '@gympass/yoga-helpers';
-import Box from '../../../Box';
 import Tag from '../../../Tag';
 import Text from '../../../Text';
 
-export const StyledTextContainer = styled(Box)<{
+export const StyledTextContainer = styled.div<{
   isSubItem?: boolean;
   children: React.ReactNode;
 }>`
@@ -39,9 +37,9 @@ export const StyledTag = styled(Tag)`
     },
   }) => css`
     text-transform: uppercase;
-    background-color: ${backgroundColor.stamina};
+    background-color: ${backgroundColor.tag};
     color: ${tag.color.default};
-    border-radius: ${border.radius.circle}px;
+    border-radius: ${border.radius.tag}px;
   `}
 `;
 
@@ -63,9 +61,8 @@ export const StyledText = styled(Text)`
   `}
 `;
 
-const Active = css<{ isResponsive?: boolean }>`
+const Active = css`
   ${({
-    isResponsive,
     theme: {
       yoga: {
         components: {
@@ -77,30 +74,19 @@ const Active = css<{ isResponsive?: boolean }>`
     cursor: auto;
 
     > ${StyledTextContainer} {
-      background-color: ${backgroundColor.default};
-
-      ${isResponsive
-        ? media.lg`background-color: ${backgroundColor.yoga}`
-        : css`
-            background-color: ${backgroundColor.yoga};
-          `}
+      background-color: ${backgroundColor.active};
 
       ${StyledText} {
         color: ${font.color.active};
-
-        ${isResponsive
-          ? media.lg`font-weight: ${font.weight.medium}`
-          : css`
-              font-weight: ${font.weight.medium};
-            `}
+        font-weight: ${font.weight.bold};
       }
 
       svg {
         fill: ${icon.fill.active};
       }
 
       > ${StyledTag} {
-        background-color: ${backgroundColor.stamina};
+        background-color: ${backgroundColor.tag};
       }
     }
   `}

diff --git a/packages/yoga/src/NavigationMenu/web/Menu/Menu.tsx b/packages/yoga/src/NavigationMenu/web/Menu/Menu.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { ArrowRight } from '@gympass/yoga-icons';
+import { ChevronDown } from '@gympass/yoga-icons';
 import { Text } from '@gympass/yoga';
-import Box from '../../../Box';
 import Icon from '../../../Icon';
 
-const StyledMenu = styled(Box)<{
+const StyledMenu = styled.div<{
   hasAction: boolean;
   children: React.ReactNode;
   onClick?: (() => void) | undefined;
@@ -15,46 +14,61 @@ const StyledMenu = styled(Box)<{
     theme: {
       yoga: {
         components: {
-          navigationmenu: { avatar, backgroundColor, border, gap, padding },
+          navigationmenu: {
+            backgroundColor,
+            border,
+            gap,
+            padding,
+            height,
+            hover,
+          },
         },
       },
     },
   }) =>
     css`
       transition: background-color 300ms ease-in-out;
 
-      display: flex;
+      display: grid;
       align-items: center;
-      justify-content: space-between;
       width: 100%;
+      grid-template-columns: max-content 1fr max-content;
       gap: ${gap.xxsmall}px;
       padding: ${padding.xsmall}px;
-      background-color: ${backgroundColor.white};
-      border-radius: ${border.radius.circle}px;
-      border: 1px solid ${border.color.white};
-
-      > div:first-child {
-        height: ${avatar.height}px;
-        width: ${avatar.width}px;
-      }
+      background-color: ${backgroundColor.contextMenu};
+      border-radius: ${border.radius.contextMenu}px;
+      min-height: ${height.contextMenu}px;
 
       ${hasAction &&
       css`
-        :hover,
+        cursor: pointer;
+        &:hover,
         &:focus {
-          cursor: pointer;
-          border: 1px solid ${border.color.default};
+          ${hover.contextMenu}
         }
       `}
     `}
 `;
 
-const StyledTextContainer = styled(Box)`
-  flex: 1;
-  overflow: hidden;
+const StyledTextContainer = styled.div`
+  ${({
+    theme: {
+      yoga: {
+        components: {
+          navigationmenu: { gap },
+        },
+      },
+    },
+  }) =>
+    css`
+      display: flex;
+      flex-direction: column;
+      gap: ${gap.xxxsmall}px;
+      overflow: hidden;
+    `}
 `;
 
-const StyledText = styled(Text.Small)`
+const StyledTitle = styled(Text.H4)`
   ${({
     theme: {
       yoga: {
@@ -65,14 +79,64 @@ const StyledText = styled(Text.Small)`
     },
   }) =>
     css`
-      font-weight: ${font.weight.medium};
+      font-size: ${font.size.contextMenu.title}px;
+      line-height: ${font.size.contextMenu.title}px;
+      font-weight: ${font.weight.bold};
       flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
     `}
 `;
 
+const StyledSubtitle = styled(Text.Small)`
+  ${({
+    theme: {
+      yoga: {
+        components: {
+          navigationmenu: { font },
+        },
+      },
+    },
+  }) =>
+    css`
+      color: ${font.color.default};
+    `}
+`;
+
+const StyledActionIconContainer = styled.div`
+  ${({
+    theme: {
+      yoga: {
+        components: {
+          navigationmenu: { icon },
+        },
+      },
+    },
+  }) => css`
+    svg {
+      fill: ${icon.fill.actions};
+    }
+  `}
+`;
+
+const StyledAvatarContainer = styled.div`
+  ${({
+    theme: {
+      yoga: {
+        components: {
+          navigationmenu: { avatar },
+        },
+      },
+    },
+  }) => css`
+    > div:first-child {
+      height: ${avatar.height}px;
+      width: ${avatar.width}px;
+    }
+  `}
+`;
+
 type MenuProps = {
   avatar: React.ReactElement;
   subtitle?: string;
@@ -85,15 +149,19 @@ const Menu = ({ avatar: Avatar, subtitle, title, onClick }: MenuProps) => {
 
   return (
     <StyledMenu hasAction={hasAction} onClick={onClick}>
-      {Avatar}
+      {!!Avatar && <StyledAvatarContainer>{Avatar}</StyledAvatarContainer>}
 
       <StyledTextContainer>
-        {title && <StyledText>{title}</StyledText>}
+        {title && <StyledTitle>{title}</StyledTitle>}
 
-        {subtitle && <Text.Small color="deep">{subtitle}</Text.Small>}
+        {subtitle && <StyledSubtitle>{subtitle}</StyledSubtitle>}
       </StyledTextContainer>
 
-      {hasAction && <Icon as={ArrowRight} size="large" fill="vibin" />}
+      {hasAction && (
+        <StyledActionIconContainer>
+          <Icon as={ChevronDown} size="large" />
+        </StyledActionIconContainer>
+      )}
     </StyledMenu>
   );
 };

diff --git a/packages/yoga/src/NavigationMenu/web/Switcher/Actions.tsx b/packages/yoga/src/NavigationMenu/web/Switcher/Actions.tsx
@@ -10,7 +10,7 @@ const StyledAction = styled.div<React.PropsWithChildren>`
     theme: {
       yoga: {
         components: {
-          navigationmenu: { backgroundColor, border, height, width },
+          navigationmenu: { backgroundColor, border, height, width, icon },
         },
       },
     },
@@ -23,7 +23,11 @@ const StyledAction = styled.div<React.PropsWithChildren>`
       justify-content: center;
       width: ${width.xxlarge}px;
       height: ${height.xxlarge}px;
-      border-radius: ${border.radius.circle}px;
+      border-radius: ${border.radius.action}px;
+
+      svg {
+        fill: ${icon.fill.actions};
+      }
 
       :hover,
       &:focus {
@@ -54,7 +58,7 @@ function Actions({ actions, sideOffset, $zIndex }: ActionsProps) {
     <YogaMenu onMouseHover={false}>
       <YogaMenu.Action>
         <StyledAction>
-          <Icon as={MenuMore} size="medium" fill="vibin" />
+          <Icon as={MenuMore} size="medium" />
         </StyledAction>
       </YogaMenu.Action>
 

diff --git a/packages/yoga/src/NavigationMenu/web/Switcher/Switcher.tsx b/packages/yoga/src/NavigationMenu/web/Switcher/Switcher.tsx
@@ -33,7 +33,7 @@ const StyledSwitcher = styled(Box)<{ fill: string; children: React.ReactNode }>`
     `}
 `;
 
-const StyledTextContainer = styled(Box)`
+const StyledTextContainer = styled.div`
   flex: 1;
   overflow: hidden;
 `;
@@ -49,7 +49,7 @@ const StyledTitle = styled(Text.Small)`
     },
   }) =>
     css`
-      font-weight: ${font.weight.medium};
+      font-weight: ${font.weight.bold};
       flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -74,7 +74,7 @@ const Switcher = ({
   title,
   ...actionsProps
 }: SwitcherProps) => {
-  const hasActions = actions?.length;
+  const hasActions = !!actions?.length;
 
   return (
     <StyledSwitcher fill={fill}>