feat: apply custom primaryColor

bigcommerce · Apr 12, 2023 · c96f0e2 · c96f0e2
1 parent cde113a
commit c96f0e2
Show file tree

Hide file tree

Showing 29 changed files with 358 additions and 89 deletions.
diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx
@@ -141,6 +141,7 @@ interface ProductProps <T> {
   totalText?: string,
   canToProduct?: boolean,
   textAlign?: string,
+  customColor?: string,
 }
 
 export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props) => {
@@ -158,6 +159,7 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
     totalText = 'Total',
     canToProduct = false,
     textAlign = 'left',
+    customColor = '',
   } = props
 
   const [list, setList] = useState<ProductItem[]>([])
@@ -379,6 +381,9 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
                           marginLeft: '0',
                           marginRight: '0',
                         },
+                        '& .MuiFilledInput-root:after': {
+                          borderBottom: `2px solid ${customColor || '#1976d2'}`,
+                        },
                       }}
                       error={!!product.helperText}
                       helperText={product.helperText}

diff --git a/apps/storefront/src/components/button/CustomButton.tsx b/apps/storefront/src/components/button/CustomButton.tsx
@@ -33,18 +33,16 @@ const CustomButton = ({
   const {
     state: {
       globalButtonBackgroundColor,
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
   const {
     variant,
   } = rest
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   return (
     <>
       {
@@ -55,10 +53,6 @@ const CustomButton = ({
               ...sx || {},
               backgroundColor: primaryColor || globalButtonBackgroundColor,
               color: getContrastColor(primaryColor) || getContrastColor(globalButtonBackgroundColor),
-              '&:hover': {
-                backgroundColor: primaryColor || globalButtonBackgroundColor,
-                color: getContrastColor(primaryColor) || getContrastColor(globalButtonBackgroundColor),
-              },
             }}
             onClick={onClick}
           >
@@ -71,10 +65,6 @@ const CustomButton = ({
               ...sx || {},
               color: primaryColor || globalButtonBackgroundColor,
               borderColor: primaryColor,
-              '&:hover': {
-                color: primaryColor || globalButtonBackgroundColor,
-                borderColor: primaryColor,
-              },
             }}
             onClick={onClick}
           >

diff --git a/apps/storefront/src/components/form/B3ControlCheckbox.tsx b/apps/storefront/src/components/form/B3ControlCheckbox.tsx
@@ -12,8 +12,17 @@ import {
 import {
   useB3Lang,
 } from '@b3/lang'
+
+import {
+  useContext,
+} from 'react'
+
 import Form from './ui'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface CheckboxListProps {
   value: string,
   label: string,
@@ -36,6 +45,14 @@ export const B3ControlCheckbox = ({
     options,
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
 
   const fieldsProps = {
@@ -67,7 +84,13 @@ export const B3ControlCheckbox = ({
     <>
       {
         ['checkbox'].includes(fieldType) && (
-          <FormControl>
+          <FormControl
+            sx={{
+              '& .MuiFormLabel-root.Mui-focused': {
+                color: primaryColor,
+              },
+            }}
+          >
             {
               label && (
               <FormLabel
@@ -95,6 +118,11 @@ export const B3ControlCheckbox = ({
                     )}
                   key={list.value}
                   label={list.label}
+                  sx={{
+                    '& .MuiCheckbox-root.Mui-checked': {
+                      color: primaryColor,
+                    },
+                  }}
                 />
               ))}
             />

diff --git a/apps/storefront/src/components/form/B3ControlRadioGroup.tsx b/apps/storefront/src/components/form/B3ControlRadioGroup.tsx
@@ -13,8 +13,16 @@ import {
   useB3Lang,
 } from '@b3/lang'
 
+import {
+  useContext,
+} from 'react'
+
 import Form from './ui'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 export const B3ControlRadioGroup = ({
   control,
   errors,
@@ -30,6 +38,14 @@ export const B3ControlRadioGroup = ({
     options,
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
 
   const fieldsProps = {
@@ -50,7 +66,13 @@ export const B3ControlRadioGroup = ({
     <>
       {
         ['radio'].includes(fieldType) && (
-          <FormControl>
+          <FormControl
+            sx={{
+              '& .MuiFormLabel-root.Mui-focused': {
+                color: primaryColor,
+              },
+            }}
+          >
             {
               label && (
               <FormLabel
@@ -79,6 +101,11 @@ export const B3ControlRadioGroup = ({
                           control={(
                             <Radio />
                           )}
+                          sx={{
+                            '& .MuiRadio-root.Mui-checked': {
+                              color: primaryColor,
+                            },
+                          }}
                         />
                       ))
                     )

diff --git a/apps/storefront/src/components/form/B3ControlRectangle.tsx b/apps/storefront/src/components/form/B3ControlRectangle.tsx
@@ -14,12 +14,20 @@ import {
   useB3Lang,
 } from '@b3/lang'
 
+import {
+  useContext,
+} from 'react'
+
 import Form from './ui'
 
 import {
   StyleRectangleFormControlLabel,
 } from './styled'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 export const B3ControlRectangle = ({
   control,
   errors,
@@ -36,6 +44,14 @@ export const B3ControlRectangle = ({
     labelStyle = {},
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor: customColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
   const theme = useTheme()
 
@@ -59,7 +75,13 @@ export const B3ControlRectangle = ({
     <>
       {
         ['rectangle'].includes(fieldType) && (
-          <FormControl>
+          <FormControl
+            sx={{
+              '& .MuiFormLabel-root.Mui-focused': {
+                color: customColor,
+              },
+            }}
+          >
             {
               label && (
               <FormLabel
@@ -93,9 +115,12 @@ export const B3ControlRectangle = ({
                             label={option.label}
                             key={option.value}
                             sx={{
-                              border: isActive ? `1px solid ${primaryColor}` : '1px solid #767676',
-                              boxShadow: isActive ? `0 0 0 1px ${primaryColor}` : 'none',
+                              border: isActive ? `1px solid ${customColor || primaryColor}` : '1px solid #767676',
+                              boxShadow: isActive ? `0 0 0 1px ${customColor || primaryColor}` : 'none',
                               ...labelStyle,
+                              '& .MuiRadio-root.Mui-checked': {
+                                color: customColor || primaryColor,
+                              },
                             }}
                             control={(
                               <Radio />

diff --git a/apps/storefront/src/components/form/B3ControlSelect.tsx b/apps/storefront/src/components/form/B3ControlSelect.tsx
@@ -1,5 +1,5 @@
 import {
-  ChangeEvent,
+  ChangeEvent, useContext,
 } from 'react'
 
 import {
@@ -18,6 +18,10 @@ import {
 
 import Form from './ui'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 export const B3ControlSelect = ({
   control,
   errors,
@@ -38,6 +42,14 @@ export const B3ControlSelect = ({
     size = 'small',
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
 
   const muiAttributeProps = muiSelectProps || {}
@@ -75,6 +87,14 @@ export const B3ControlSelect = ({
             width: '100%',
             color: muiSelectProps?.disabled ? 'rgba(0, 0, 0, 0.38)' : 'rgba(0, 0, 0, 0.6)',
           }}
+          sx={{
+            '& .MuiInputLabel-root.Mui-focused': {
+              color: primaryColor,
+            },
+            '& .MuiFilledInput-root:after': {
+              borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+            },
+          }}
         >
           {
             label && (

diff --git a/apps/storefront/src/components/form/B3ControlTextField.tsx b/apps/storefront/src/components/form/B3ControlTextField.tsx
@@ -11,11 +11,15 @@ import {
 import {
   KeyboardEvent,
   WheelEvent,
+  useContext,
 } from 'react'
 import Form from './ui'
 import {
   StyleNumberTextField,
 } from './styled'
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
 
 export const B3ControlTextField = ({
   control,
@@ -44,6 +48,14 @@ export const B3ControlTextField = ({
     allowArrow = false,
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
 
   let requiredText = ''
@@ -142,6 +154,12 @@ export const B3ControlTextField = ({
                       {...rest}
                       sx={{
                         color: disabled ? 'rgba(0, 0, 0, 0.38)' : 'rgba(0, 0, 0, 0.6)',
+                        '& label.Mui-focused': {
+                          color: primaryColor,
+                        },
+                        '& .MuiFilledInput-root:after': {
+                          borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+                        },
                       }}
                       allowarrow={allowArrow ? 1 : 0}
                       inputProps={muiAttributeProps}
@@ -157,6 +175,12 @@ export const B3ControlTextField = ({
                       {...rest}
                       sx={{
                         color: disabled ? 'rgba(0, 0, 0, 0.38)' : 'rgba(0, 0, 0, 0.6)',
+                        '& label.Mui-focused': {
+                          color: primaryColor,
+                        },
+                        '& .MuiFilledInput-root:after': {
+                          borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+                        },
                       }}
                       inputProps={muiAttributeProps}
                       error={!!errors[name]}

diff --git a/apps/storefront/src/components/layout/B3Nav.tsx b/apps/storefront/src/components/layout/B3Nav.tsx
@@ -67,14 +67,12 @@ export const B3Nav = ({
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const jumpRegister = () => {
     navigate('/registered')
     dispatch({