Merge pull request #102 from savindi7/chore-fix-styles

chore(react): fix spacing in `Header` and `UserDropdownMenu`
wso2 · Apr 10, 2023 · 997c949 · 997c949
2 parents ce25003 + 6ff3abc
commit 997c949
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/packages/react/src/components/Header/Header.stories.mdx b/packages/react/src/components/Header/Header.stories.mdx
@@ -30,8 +30,8 @@ export const basicHeaderVariationOptions = {
   isLeftNavigationActive: true,
   brand: {
     logo: {
-      desktop: <img src="/assets/images/oxygen-ui-logo-mini.svg" alt="logo" />,
-      mobile: <img src="/assets/images/oxygen-ui-logo-mini.svg" alt="logo" />,
+      desktop: <img src="/assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
+      mobile: <img src="/assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
     },
     onClick: () => null,
     title: 'OxygenUI',

diff --git a/packages/react/src/components/Header/header.scss b/packages/react/src/components/Header/header.scss
@@ -22,16 +22,11 @@
   border-top: none;
   background-color: var(--oxygen-palette-background-paper);
 
-  .oxygen-header-collapsible-hamburger {
+  &-collapsible-hamburger {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 0 12px;
-
-    .oxygen-icon-button {
-      height: 48px;
-      width: 48px;
-    }
   }
 
   .oxygen-brand {
@@ -49,6 +44,10 @@
     }
   }
 
+  &-toolbar {
+    min-height: 56px;
+  }
+
   &.with-hamburger {
     .oxygen-header-toolbar {
       padding-left: 0;
@@ -59,11 +58,11 @@
     }
   }
 
-  .oxygen-header-mid-section {
+  &-mid-section {
     flex: 1;
   }
 
-  .oxygen-header-links {
+  &-links {
     display: flex;
     justify-content: end;
     margin-right: 1rem;
@@ -73,7 +72,7 @@
     }
   }
 
-  .oxygen-header-user-dropdown-menu {
+  &-user-dropdown-menu {
     .image {
       width: 2.2rem;
       height: 2.2rem;

diff --git a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx
@@ -171,12 +171,13 @@ const UserDropdownMenu: FC<UserDropdownMenuProps> & WithWrapperProps = (
         className={classes}
         id="oxygen-button-menu"
         onClose={onCloseMenu}
+        PaperProps={{className: 'oxygen-user-dropdown-menu-paper'}}
         {...rest}
       >
         {children}
         {user && (
           <ListItem
-            className={clsx('dropdown-list-item', {
+            className={clsx('oxygen-user-dropdown-menu-list-item', {
               clickable: onUserProfileNavigation,
             })}
             onClick={(): void => handleUserProfileNavigation()}
@@ -194,11 +195,15 @@ const UserDropdownMenu: FC<UserDropdownMenuProps> & WithWrapperProps = (
             {modes?.map((theme: ModeList) => {
               const {name, icon} = theme;
               return (
-                <MenuItem className="dropdown-menu-item" key={name} onClick={(): void => handleModeChange(name)}>
+                <MenuItem
+                  className="oxygen-user-dropdown-menu-item"
+                  key={name}
+                  onClick={(): void => handleModeChange(name)}
+                >
                   <ListItemIcon>{icon}</ListItemIcon>
                   <ListItemText primary={capitalize(name)} />
                   <Radio
-                    edge="end"
+                    className="oxygen-user-dropdown-menu-item-radio"
                     checked={mode === name}
                     onChange={(): void => handleModeChange(name)}
                     value={name}

diff --git a/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss b/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss
@@ -17,13 +17,19 @@
  */
 
 .oxygen-user-dropdown-menu {
-  .dropdown-list-item {
+  &-paper {
+    min-width: 230px;
+  }
+
+  &-list-item {
     &.clickable {
       cursor: pointer;
     }
   }
 
-  .dropdown-menu-item {
-    min-height: 50px;
+  &-item {
+    &-radio {
+      padding: 5px;
+    }
   }
 }
diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts
@@ -169,28 +169,28 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
       lineHeight: '1.5',
     },
     body2: {
-      color: '#5A5A72', // --joy-palette-neutral-600
+      color: '#5A5A72',
       fontSize: '0.875rem',
       fontWeight: 400,
       letterSpacing: 'normal',
       lineHeight: '1.5',
     },
     body3: {
-      color: '#73738C', // --joy-palette-neutral-500
+      color: '#73738C',
       fontSize: '0.75rem',
       fontWeight: 400,
       letterSpacing: 'normal',
       lineHeight: '1.5',
     },
     body4: {
-      color: '#73738C', // --joy-palette-neutral-500
+      color: '#73738C',
       fontSize: '0.625rem',
       fontWeight: 400,
       letterSpacing: 'normal',
       lineHeight: '1.5',
     },
     body5: {
-      color: '#73738C', // --joy-palette-neutral-500
+      color: '#73738C',
       fontSize: '0.5rem',
       fontWeight: 400,
       letterSpacing: 'normal',