fix: button styles issues

bigcommerce · Apr 14, 2023 · 57c64f7 · 57c64f7
1 parent c687d11
commit 57c64f7
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 13 deletions.
diff --git a/apps/storefront/src/components/layout/B3AccountInfo.tsx b/apps/storefront/src/components/layout/B3AccountInfo.tsx
@@ -25,11 +25,6 @@ interface ListProps {
 }
 
 const list: Array<ListProps> = [
-  // {
-  //   name: 'Account Settings',
-  //   key: '/account-settings',
-  //   type: 'path',
-  // },
   {
     name: 'Log out',
     key: 'logout',

diff --git a/apps/storefront/src/components/layout/B3Nav.tsx b/apps/storefront/src/components/layout/B3Nav.tsx
@@ -40,6 +40,7 @@ import {
 
 import {
   getContrastColor,
+  b3HexToRgb,
 } from '../outSideComponents/utils/b3CustomStyles'
 
 import {
@@ -143,16 +144,24 @@ export const B3Nav = ({
 
     return false
   }
+
   return (
     <List
       sx={{
         width: '100%',
         maxWidth: 360,
         bgcolor: `${isMobile ? 'background.paper' : 'background.default'}`,
         color: primaryColor || 'info.main',
-        '& .MuiButtonBase-root.Mui-selected, & .MuiButtonBase-root.Mui-selected:hover': {
-          color: getContrastColor(primaryColor) || '#fff',
-          bgcolor: 'primary.main',
+        '& .MuiListItem-root': {
+          '& .MuiButtonBase-root.Mui-selected': {
+            color: getContrastColor(primaryColor) || '#fff',
+            bgcolor: 'primary.main',
+            borderRadius: '4px',
+          },
+          '& .MuiButtonBase-root:hover:not(.Mui-selected)': {
+            bgcolor: b3HexToRgb(primaryColor, 0.12),
+            borderRadius: '4px',
+          },
         },
       }}
       component="nav"

diff --git a/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts b/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts
@@ -36,8 +36,18 @@ const getContrastColor = (color: string) => {
   return brightness >= 128 ? '#000' : '#fff'
 }
 
+const b3HexToRgb = (color: string, transparency?: number) => {
+  const hex = color.replace('#', '')
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+
+  return transparency ? `rgb(${r}, ${g}, ${b}, ${transparency})` : `rgb(${r}, ${g}, ${b})`
+}
+
 export {
   getLocation,
   getStyles,
   getContrastColor,
+  b3HexToRgb,
 }
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx
@@ -341,7 +341,10 @@ const ShoppingDetailFooter = (props: ShoppingDetailFooterProps) => {
                     }}
                     sx={{
                       marginLeft: '0.5rem',
-                      width: isMobile ? '80%' : 'auto',
+                      marginRight: '0.25rem',
+                      width: isMobile ? '80%' : '210px',
+                      height: isMobile ? '80%' : '40px',
+                      padding: '8px 22px',
                     }}
                   >
                     {allowJuniorPlaceOrder ? 'Proceed to checkout' : 'Add selected to cart'}

diff --git a/apps/storefront/src/pages/shoppingLists/ShoppingLists.tsx b/apps/storefront/src/pages/shoppingLists/ShoppingLists.tsx
@@ -101,7 +101,8 @@ const shoppingLists = () => {
     customButtomStyle: {
       fontSize: '15px',
       fontWeight: '500',
-      color: '#FFFFFF',
+      width: '140px',
+      padding: '0',
     },
   }
   const statusPermissions = +role !== 2 ? [0, 40] : ''

diff --git a/apps/storefront/src/pages/shoppingLists/ShoppingListsCard.tsx b/apps/storefront/src/pages/shoppingLists/ShoppingListsCard.tsx
@@ -180,9 +180,6 @@ const ShoppingListsCard = (props: OrderItemCardProps) => {
             sx={{
               m: '0 0 0 -8px',
               minWidth: 0,
-              '&:hover': {
-                backgroundColor: '#fff',
-              },
             }}
             variant="text"
             onClick={() => goToDetail(shoppingList)}