fix: custom primary color code optimization

bigcommerce · Apr 14, 2023 · 389f6cf · 389f6cf
1 parent a42e3d1
commit 389f6cf
Show file tree

Hide file tree

Showing 32 changed files with 57 additions and 493 deletions.
diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx
@@ -141,7 +141,6 @@ interface ProductProps <T> {
   totalText?: string,
   canToProduct?: boolean,
   textAlign?: string,
-  customColor?: string,
 }
 
 export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props) => {
@@ -159,7 +158,6 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
     totalText = 'Total',
     canToProduct = false,
     textAlign = 'left',
-    customColor = '',
   } = props
 
   const [list, setList] = useState<ProductItem[]>([])
@@ -381,9 +379,6 @@ 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
@@ -5,18 +5,9 @@ import {
 } from '@mui/material'
 
 import {
-  useContext,
   MouseEvent,
 } from 'react'
 
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
-
-import {
-  getContrastColor,
-} from '@/components/outSideComponents/utils/b3CustomStyles'
-
 interface CustomButtonProps extends ButtonProps {
   onClick?: (e?: MouseEvent<HTMLButtonElement> | any) => void,
   sx?: SxProps,
@@ -30,15 +21,6 @@ const CustomButton = ({
   children,
   ...rest
 }: CustomButtonProps) => {
-  const {
-    state: {
-      globalButtonBackgroundColor,
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
-
   const {
     variant,
   } = rest
@@ -51,8 +33,6 @@ const CustomButton = ({
             {...rest}
             sx={{
               ...sx || {},
-              backgroundColor: primaryColor || globalButtonBackgroundColor,
-              color: getContrastColor(primaryColor) || getContrastColor(globalButtonBackgroundColor),
             }}
             onClick={onClick}
           >
@@ -63,8 +43,6 @@ const CustomButton = ({
             {...rest}
             sx={{
               ...sx || {},
-              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
@@ -13,16 +13,8 @@ import {
   useB3Lang,
 } from '@b3/lang'
 
-import {
-  useContext,
-} from 'react'
-
 import Form from './ui'
 
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
-
 interface CheckboxListProps {
   value: string,
   label: string,
@@ -45,14 +37,6 @@ export const B3ControlCheckbox = ({
     options,
   } = rest
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
-
   const b3Lang = useB3Lang()
 
   const fieldsProps = {
@@ -84,13 +68,7 @@ export const B3ControlCheckbox = ({
     <>
       {
         ['checkbox'].includes(fieldType) && (
-          <FormControl
-            sx={{
-              '& .MuiFormLabel-root.Mui-focused': {
-                color: primaryColor,
-              },
-            }}
-          >
+          <FormControl>
             {
               label && (
               <FormLabel
@@ -118,11 +96,6 @@ 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,16 +13,8 @@ import {
   useB3Lang,
 } from '@b3/lang'
 
-import {
-  useContext,
-} from 'react'
-
 import Form from './ui'
 
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
-
 export const B3ControlRadioGroup = ({
   control,
   errors,
@@ -38,14 +30,6 @@ export const B3ControlRadioGroup = ({
     options,
   } = rest
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
-
   const b3Lang = useB3Lang()
 
   const fieldsProps = {
@@ -66,13 +50,7 @@ export const B3ControlRadioGroup = ({
     <>
       {
         ['radio'].includes(fieldType) && (
-          <FormControl
-            sx={{
-              '& .MuiFormLabel-root.Mui-focused': {
-                color: primaryColor,
-              },
-            }}
-          >
+          <FormControl>
             {
               label && (
               <FormLabel
@@ -101,11 +79,6 @@ 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,20 +14,12 @@ 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,
@@ -44,14 +36,6 @@ export const B3ControlRectangle = ({
     labelStyle = {},
   } = rest
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor: customColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
-
   const b3Lang = useB3Lang()
   const theme = useTheme()
 
@@ -75,13 +59,7 @@ export const B3ControlRectangle = ({
     <>
       {
         ['rectangle'].includes(fieldType) && (
-          <FormControl
-            sx={{
-              '& .MuiFormLabel-root.Mui-focused': {
-                color: customColor,
-              },
-            }}
-          >
+          <FormControl>
             {
               label && (
               <FormLabel
@@ -115,12 +93,9 @@ export const B3ControlRectangle = ({
                             label={option.label}
                             key={option.value}
                             sx={{
-                              border: isActive ? `1px solid ${customColor || primaryColor}` : '1px solid #767676',
-                              boxShadow: isActive ? `0 0 0 1px ${customColor || primaryColor}` : 'none',
+                              border: isActive ? `1px solid ${primaryColor}` : '1px solid #767676',
+                              boxShadow: isActive ? `0 0 0 1px ${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, useContext,
+  ChangeEvent,
 } from 'react'
 
 import {
@@ -18,10 +18,6 @@ import {
 
 import Form from './ui'
 
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
-
 export const B3ControlSelect = ({
   control,
   errors,
@@ -42,14 +38,6 @@ export const B3ControlSelect = ({
     size = 'small',
   } = rest
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
-
   const b3Lang = useB3Lang()
 
   const muiAttributeProps = muiSelectProps || {}
@@ -87,14 +75,6 @@ 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,15 +11,11 @@ import {
 import {
   KeyboardEvent,
   WheelEvent,
-  useContext,
 } from 'react'
 import Form from './ui'
 import {
   StyleNumberTextField,
 } from './styled'
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
 
 export const B3ControlTextField = ({
   control,
@@ -48,14 +44,6 @@ export const B3ControlTextField = ({
     allowArrow = false,
   } = rest
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
-
   const b3Lang = useB3Lang()
 
   let requiredText = ''
@@ -154,12 +142,6 @@ 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}
@@ -175,12 +157,6 @@ 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
@@ -152,7 +152,7 @@ export const B3Nav = ({
         color: primaryColor || 'info.main',
         '& .MuiButtonBase-root.Mui-selected, & .MuiButtonBase-root.Mui-selected:hover': {
           color: getContrastColor(primaryColor) || '#fff',
-          bgcolor: primaryColor || 'primary.main',
+          bgcolor: 'primary.main',
         },
       }}
       component="nav"