fix: apply address checkbox custom color

bigcommerce · Apr 12, 2023 · 324b2be · 324b2be
1 parent 74966e0
commit 324b2be
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 0 deletions.
diff --git a/apps/storefront/src/pages/address/components/AddressForm.tsx b/apps/storefront/src/pages/address/components/AddressForm.tsx
@@ -4,6 +4,7 @@ import {
   forwardRef,
   useImperativeHandle,
   Ref,
+  useContext,
 } from 'react'
 
 import {
@@ -54,6 +55,10 @@ import {
   StateProps,
 } from '../shared/getAddressFields'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface AddressFormProps {
   addressFields: CustomFieldItems[],
   updateAddressList: (isFirst?: boolean) => void,
@@ -105,6 +110,14 @@ const AddressForm = ({
     isDefaultBilling: false,
   })
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const isB2BUser = !isBCPermission
 
   const {
@@ -556,6 +569,11 @@ const AddressForm = ({
                             />
                           )}
                           label={label}
+                          sx={{
+                            '& .MuiCheckbox-root.Mui-checked': {
+                              color: primaryColor,
+                            },
+                          }}
                         />
                         {
                           child && (
@@ -574,6 +592,9 @@ const AddressForm = ({
                               label={child.label}
                               sx={{
                                 display: shippingBilling[name] ? '' : 'none',
+                                '& .MuiCheckbox-root.Mui-checked': {
+                                  color: primaryColor,
+                                },
                               }}
                             />
                           )

diff --git a/apps/storefront/src/pages/address/components/SetDefaultDialog.tsx b/apps/storefront/src/pages/address/components/SetDefaultDialog.tsx
@@ -2,6 +2,7 @@ import {
   ChangeEvent,
   Dispatch,
   SetStateAction,
+  useContext,
   useEffect,
   useState,
 } from 'react'
@@ -33,6 +34,10 @@ import {
   AddressItemType,
 } from '../../../types/address'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface SetDefaultDialogProps {
   isOpen: boolean
   setIsOpen: Dispatch<SetStateAction<boolean>>
@@ -51,6 +56,13 @@ export const SetDefaultDialog = (props: SetDefaultDialogProps) => {
     updateAddressList,
     companyId,
   } = props
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
 
   const [isMobile] = useMobile()
 
@@ -133,6 +145,11 @@ export const SetDefaultDialog = (props: SetDefaultDialogProps) => {
                   />
             )}
                 label="Set as default shipping address "
+                sx={{
+                  '& .MuiCheckbox-root.Mui-checked': {
+                    color: primaryColor,
+                  },
+                }}
               />
               <FormControlLabel
                 control={(
@@ -142,6 +159,11 @@ export const SetDefaultDialog = (props: SetDefaultDialogProps) => {
                   />
             )}
                 label="Set as default billing address "
+                sx={{
+                  '& .MuiCheckbox-root.Mui-checked': {
+                    color: primaryColor,
+                  },
+                }}
               />
             </FormGroup>
           </Box>

diff --git a/apps/storefront/src/pages/quote/components/Message.tsx b/apps/storefront/src/pages/quote/components/Message.tsx
@@ -5,6 +5,7 @@ import {
   useState,
   useEffect,
   KeyboardEvent,
+  useContext,
 } from 'react'
 
 import {
@@ -37,6 +38,10 @@ import {
   storeHash,
 } from '@/utils'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface MessageProps {
   date?: number,
   message?: string,
@@ -164,6 +169,14 @@ const Message = ({
   email,
   status,
 }: MsgsProps) => {
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const changeReadRef = useRef(0)
 
@@ -409,6 +422,12 @@ const Message = ({
                         '& .MuiFormLabel-root': {
                           color: 'rgba(0, 0, 0, 0.38)',
                         },
+                        '& .MuiInputLabel-root.Mui-focused': {
+                          color: primaryColor,
+                        },
+                        '& .MuiFilledInput-root:after': {
+                          borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+                        },
                       }}
                       value={message}
                       onChange={(event) => { setMessage(event.target.value) }}

diff --git a/apps/storefront/src/pages/quote/components/QuoteNote.tsx b/apps/storefront/src/pages/quote/components/QuoteNote.tsx
@@ -86,6 +86,9 @@ export const QuoteNote = () => {
                 '& .MuiFormLabel-root': {
                   color: 'rgba(0, 0, 0, 0.38)',
                 },
+                '& .MuiInputLabel-root.Mui-focused': {
+                  color: primaryColor,
+                },
                 '& .MuiFilledInput-root:after': {
                   borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
                 },