From 324b2be7d9e80c1a79efbe2a3828c0abe896ca36 Mon Sep 17 00:00:00 2001
From: Carl <carl.liu@bundleb2b.net>
Date: Wed, 12 Apr 2023 17:15:09 +0800
Subject: [PATCH] fix: apply address checkbox custom color

---
 .../pages/address/components/AddressForm.tsx  | 21 ++++++++++++++++++
 .../address/components/SetDefaultDialog.tsx   | 22 +++++++++++++++++++
 .../src/pages/quote/components/Message.tsx    | 19 ++++++++++++++++
 .../src/pages/quote/components/QuoteNote.tsx  |  3 +++
 4 files changed, 65 insertions(+)

diff --git a/apps/storefront/src/pages/address/components/AddressForm.tsx b/apps/storefront/src/pages/address/components/AddressForm.tsx
index ce58c390..0390f4be 100644
--- 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
index 383f4891..2370a29b 100644
--- 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
index e5b15d54..823fe1ac 100644
--- 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
index 1b6177f3..a3fa236d 100644
--- 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'}`,
                 },