From 389f6cf64aae415f9c4eefdcbbc9fc2cacd84819 Mon Sep 17 00:00:00 2001 From: Carl Date: Fri, 14 Apr 2023 12:12:21 +0800 Subject: [PATCH] fix: custom primary color code optimization --- .../src/components/B3ProductList.tsx | 5 --- .../src/components/button/CustomButton.tsx | 22 --------- .../src/components/form/B3ControlCheckbox.tsx | 29 +----------- .../components/form/B3ControlRadioGroup.tsx | 29 +----------- .../components/form/B3ControlRectangle.tsx | 31 ++----------- .../src/components/form/B3ControlSelect.tsx | 22 +-------- .../components/form/B3ControlTextField.tsx | 24 ---------- .../src/components/layout/B3Nav.tsx | 2 +- .../src/components/spin/B3Sping.tsx | 22 ++++++++- .../src/components/table/B3Table.tsx | 34 -------------- .../pages/address/components/AddressForm.tsx | 21 --------- .../address/components/SetDefaultDialog.tsx | 22 --------- .../src/pages/dashboard/Dashboard.tsx | 14 +----- .../src/pages/orderDetail/OrderDetail.tsx | 14 +----- .../quickorder/components/QuickOrderCard.tsx | 17 +------ .../quickorder/components/QuickOrderPad.tsx | 14 ------ .../quickorder/components/QuickorderTable.tsx | 17 ------- .../storefront/src/pages/quote/QuoteDraft.tsx | 15 +------ .../src/pages/quote/components/FileUpload.tsx | 10 ++--- .../src/pages/quote/components/Message.tsx | 24 ---------- .../pages/quote/components/QuoteAddress.tsx | 15 +------ .../src/pages/quote/components/QuoteNote.tsx | 19 -------- .../src/pages/quote/components/QuoteTable.tsx | 7 --- .../pages/registered/RegisteredAccount.tsx | 13 ------ .../src/pages/registered/RegisteredStep.tsx | 17 ------- .../ShoppingListDetails.tsx | 1 - .../components/ChooseOptionsDialog.tsx | 45 ++++++------------- .../components/ProductListDialog.tsx | 18 +------- .../components/SearchProduct.tsx | 16 ------- .../components/ShoppingDetailFooter.tsx | 2 +- .../components/ShoppingDetailTable.tsx | 5 --- apps/storefront/src/theme.tsx | 4 ++ 32 files changed, 57 insertions(+), 493 deletions(-) diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx index 14a1861c..537d6b4e 100644 --- a/apps/storefront/src/components/B3ProductList.tsx +++ b/apps/storefront/src/components/B3ProductList.tsx @@ -141,7 +141,6 @@ interface ProductProps { totalText?: string, canToProduct?: boolean, textAlign?: string, - customColor?: string, } export const B3ProductList: (props: ProductProps) => ReactElement = (props) => { @@ -159,7 +158,6 @@ export const B3ProductList: (props: ProductProps) => ReactElement = (props totalText = 'Total', canToProduct = false, textAlign = 'left', - customColor = '', } = props const [list, setList] = useState([]) @@ -381,9 +379,6 @@ export const B3ProductList: (props: ProductProps) => 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 index 49859f5e..93e53fc2 100644 --- 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 | 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 index 1cda12f4..b47e7475 100644 --- 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) && ( - + { label && ( ))} /> diff --git a/apps/storefront/src/components/form/B3ControlRadioGroup.tsx b/apps/storefront/src/components/form/B3ControlRadioGroup.tsx index 7c562227..d3e7d420 100644 --- 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) && ( - + { label && ( )} - 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 index f24c09f4..934c8110 100644 --- 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) && ( - + { label && ( diff --git a/apps/storefront/src/components/form/B3ControlSelect.tsx b/apps/storefront/src/components/form/B3ControlSelect.tsx index 8582bec5..eab0e692 100644 --- 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 index 6b25e880..1bfec927 100644 --- 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 index f390625b..f6ab2413 100644 --- 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" diff --git a/apps/storefront/src/components/spin/B3Sping.tsx b/apps/storefront/src/components/spin/B3Sping.tsx index d9618172..1241c16f 100644 --- a/apps/storefront/src/components/spin/B3Sping.tsx +++ b/apps/storefront/src/components/spin/B3Sping.tsx @@ -1,5 +1,6 @@ import { ReactNode, + useContext, } from 'react' import { CircularProgress, @@ -15,6 +16,10 @@ import { SpinContext, } from './styled' +import { + CustomStyleContext, +} from '@/shared/customStyleButtton' + interface B3SpingProps { isSpinning: Boolean | undefined, children: ReactNode, @@ -40,6 +45,14 @@ export const B3Sping = (props: B3SpingProps) => { isFlex, } = props + const { + state: { + portalStyle: { + primaryColor = '', + }, + }, + } = useContext(CustomStyleContext) + const [isMobile] = useMobile() return ( @@ -62,7 +75,14 @@ export const B3Sping = (props: B3SpingProps) => { ) } { - tip && { tip } + tip && ( + + { tip } + + ) } ) diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx index 59f9ee42..4bcda1d7 100644 --- a/apps/storefront/src/components/table/B3Table.tsx +++ b/apps/storefront/src/components/table/B3Table.tsx @@ -16,17 +16,12 @@ import { ChangeEvent, MouseEvent, ReactElement, - useContext, } from 'react' import { B3NoData, } from './B3NoData' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - export interface Pagination { offset: number, first: number, @@ -123,14 +118,6 @@ export const B3Table:(props: TableProps) => ReactElement = ({ } = pagination const clickableRowStyles = typeof onClickRow === 'function' ? MOUSE_POINTER_STYLE : undefined - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const handlePaginationChange = (pagination: Pagination) => { if (!isLoading) { onPaginationChange(pagination) @@ -165,9 +152,6 @@ export const B3Table:(props: TableProps) => ReactElement = ({ sx={{ display: 'flex', alignItems: 'center', - '& .MuiCheckbox-root.Mui-checked': { - color: primaryColor, - }, }} > (props: TableProps) => ReactElement = ({ { listItems.map((row, index) => { @@ -198,11 +177,6 @@ export const B3Table:(props: TableProps) => ReactElement = ({ if (handleSelectOneItem) handleSelectOneItem(node[selectedSymbol]) }} disabled={disableCheckbox} - sx={{ - '& .MuiCheckbox-root.Mui-checked': { - color: primaryColor, - }, - }} /> ) return ( @@ -311,11 +285,6 @@ export const B3Table:(props: TableProps) => ReactElement = ({ showCheckbox && ( (props: TableProps) => ReactElement = ({ key={`showItemCheckbox-${node.id}`} sx={{ borderBottom: showBorder ? '1px solid rgba(224, 224, 224, 1)' : lastItemBorderBottom, - '& .MuiCheckbox-root.Mui-checked': { - color: primaryColor, - }, }} > void, @@ -110,14 +105,6 @@ const AddressForm = ({ isDefaultBilling: false, }) - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const isB2BUser = !isBCPermission const { @@ -569,11 +556,6 @@ const AddressForm = ({ /> )} label={label} - sx={{ - '& .MuiCheckbox-root.Mui-checked': { - color: primaryColor, - }, - }} /> { child && ( @@ -592,9 +574,6 @@ 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 2370a29b..383f4891 100644 --- a/apps/storefront/src/pages/address/components/SetDefaultDialog.tsx +++ b/apps/storefront/src/pages/address/components/SetDefaultDialog.tsx @@ -2,7 +2,6 @@ import { ChangeEvent, Dispatch, SetStateAction, - useContext, useEffect, useState, } from 'react' @@ -34,10 +33,6 @@ import { AddressItemType, } from '../../../types/address' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - interface SetDefaultDialogProps { isOpen: boolean setIsOpen: Dispatch> @@ -56,13 +51,6 @@ export const SetDefaultDialog = (props: SetDefaultDialogProps) => { updateAddressList, companyId, } = props - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) const [isMobile] = useMobile() @@ -145,11 +133,6 @@ export const SetDefaultDialog = (props: SetDefaultDialogProps) => { /> )} label="Set as default shipping address " - sx={{ - '& .MuiCheckbox-root.Mui-checked': { - color: primaryColor, - }, - }} /> { /> )} label="Set as default billing address " - sx={{ - '& .MuiCheckbox-root.Mui-checked': { - color: primaryColor, - }, - }} /> diff --git a/apps/storefront/src/pages/dashboard/Dashboard.tsx b/apps/storefront/src/pages/dashboard/Dashboard.tsx index 6c8d0395..f0e8e659 100644 --- a/apps/storefront/src/pages/dashboard/Dashboard.tsx +++ b/apps/storefront/src/pages/dashboard/Dashboard.tsx @@ -54,10 +54,6 @@ import { import DashboardCard from './components/DashboardCard' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - interface ListItem { [key: string]: string } @@ -78,14 +74,6 @@ const Dashboard = () => { dispatch, } = useContext(GlobaledContext) - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const [anchorEl, setAnchorEl] = useState(null) const [currentSalesRepCompanyId, setCurrentSalesRepCompanyId] = useState(+salesRepCompanyId) @@ -275,7 +263,7 @@ const Dashboard = () => { > startActing()} > diff --git a/apps/storefront/src/pages/orderDetail/OrderDetail.tsx b/apps/storefront/src/pages/orderDetail/OrderDetail.tsx index cb29b61e..67e9f2de 100644 --- a/apps/storefront/src/pages/orderDetail/OrderDetail.tsx +++ b/apps/storefront/src/pages/orderDetail/OrderDetail.tsx @@ -71,10 +71,6 @@ import { AddressConfigItem, } from '../../types' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - interface LocationState { isCompanyOrder: boolean, } @@ -103,14 +99,6 @@ const OrderDetail = () => { dispatch, } = useContext(OrderDetailsContext) - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const localtion = useLocation() const [isMobile] = useMobile() @@ -234,7 +222,7 @@ const OrderDetail = () => { > { currencyToken = '$', } = props - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const { quantity, imageUrl, @@ -155,9 +143,6 @@ const QuickOrderCard = (props: QuickOrderCardProps) => { margin: '1rem 0', width: '60%', maxWidth: '100px', - '& .MuiFilledInput-input:after': { - borderBottom: `2px solid ${primaryColor || '#1976d2'} !important`, - }, }} onChange={(e) => { handleUpdateProductQty(shoppingDetail.id, e.target.value) diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx index b7d4005f..f8719bf0 100644 --- a/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx +++ b/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx @@ -1,5 +1,4 @@ import { - useContext, useEffect, useState, } from 'react' @@ -39,10 +38,6 @@ import { CustomButton, } from '@/components' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - interface successTipOptions{ message: string, link?: string, @@ -60,14 +55,6 @@ const successTip = (options: successTipOptions) => () => ( ) export const QuickOrderPad = () => { - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const [isMobile] = useMobile() const [isOpenBulkLoadCSV, setIsOpenBulkLoadCSV] = useState(false) @@ -373,7 +360,6 @@ export const QuickOrderPad = () => { > Bulk upload CSV diff --git a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx index cbc49ba4..9b5f384c 100644 --- a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx +++ b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx @@ -59,10 +59,6 @@ import { B3Sping, } from '@/components' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - interface ListItem { [key: string]: string } @@ -138,14 +134,6 @@ const QuickorderTable = ({ }, } = useContext(GlobaledContext) - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const [search, setSearch] = useState({ q: '', beginDateAt: distanceDay(30), @@ -358,11 +346,6 @@ const QuickorderTable = ({ inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', }} - sx={{ - '& .MuiFilledInput-root:after': { - borderBottom: `2px solid ${primaryColor || '#1976d2'}`, - }, - }} onChange={(e) => { handleUpdateProductQty(row.id, e.target.value) }} diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx index 9afe7286..67a46791 100644 --- a/apps/storefront/src/pages/quote/QuoteDraft.tsx +++ b/apps/storefront/src/pages/quote/QuoteDraft.tsx @@ -103,10 +103,6 @@ import { Container, } from './style' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - type BCAddress = { node: BCAddressItemType } @@ -175,14 +171,6 @@ const QuoteDraft = ({ }, } = useContext(GlobaledContext) - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const navigate = useNavigate() // const nextPath = B3SStorage.get('nextPath') @@ -673,7 +661,7 @@ const QuoteDraft = ({ > diff --git a/apps/storefront/src/pages/quote/components/FileUpload.tsx b/apps/storefront/src/pages/quote/components/FileUpload.tsx index b95fcf27..3ff592b9 100644 --- a/apps/storefront/src/pages/quote/components/FileUpload.tsx +++ b/apps/storefront/src/pages/quote/components/FileUpload.tsx @@ -259,10 +259,6 @@ const FileUpload = (props: FileUploadProps, ref: Ref) => { } } - const customStyles = { - color: primaryColor, - } - return ( ) => { marginTop: '10px', }} > - + { - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const messagesEndRef = useRef(null) const changeReadRef = useRef(0) @@ -374,13 +361,8 @@ const Message = ({ maxHeight: '280px', overflowY: 'auto', '&::-webkit-scrollbar': { - // width: '2px', - // height: '2px', display: 'none', }, - // '&::-webkit-scrollbar-thumb': { - // backgroundColor: '#908b8b', - // }, }} > { @@ -422,12 +404,6 @@ 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/QuoteAddress.tsx b/apps/storefront/src/pages/quote/components/QuoteAddress.tsx index bde99aa8..a14f91e1 100644 --- a/apps/storefront/src/pages/quote/components/QuoteAddress.tsx +++ b/apps/storefront/src/pages/quote/components/QuoteAddress.tsx @@ -6,7 +6,6 @@ import { forwardRef, useImperativeHandle, useEffect, - useContext, } from 'react' import { Box, Typography, @@ -31,10 +30,6 @@ import { ChooseAddress, } from './ChooseAddress' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - type AddressItemProps = { node: AddressItemType } @@ -100,14 +95,6 @@ const QuoteAddress = ({ role, accountFormFields = [], }: AddressProps, ref: any) => { - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const { control, getValues, @@ -207,7 +194,7 @@ const QuoteAddress = ({ sx={{ fontWeight: 500, fontSize: '14px', - color: primaryColor || '#1976D2', + color: 'primary.main', display: 'flex', alignItems: 'flex-end', cursor: 'pointer', diff --git a/apps/storefront/src/pages/quote/components/QuoteNote.tsx b/apps/storefront/src/pages/quote/components/QuoteNote.tsx index ce16de8b..518c5163 100644 --- a/apps/storefront/src/pages/quote/components/QuoteNote.tsx +++ b/apps/storefront/src/pages/quote/components/QuoteNote.tsx @@ -10,7 +10,6 @@ import { useState, ChangeEvent, useEffect, - useContext, } from 'react' import { @@ -21,10 +20,6 @@ import { B3LStorage, } from '@/utils' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - interface QuoteNoteProps{ quoteStatus?: string | number, quoteNotes?: string, @@ -36,14 +31,6 @@ export const QuoteNote = (props: QuoteNoteProps) => { quoteNotes = '', } = props - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const [noteText, setNoteText] = useState('') const [defaultOpen, setDefaultOpen] = useState(false) @@ -121,12 +108,6 @@ export const QuoteNote = (props: QuoteNoteProps) => { '& .MuiFormLabel-root': { color: 'rgba(0, 0, 0, 0.38)', }, - '& .MuiInputLabel-root.Mui-focused': { - color: primaryColor, - }, - '& .MuiFilledInput-root:after': { - borderBottom: `2px solid ${primaryColor || '#1976d2'}`, - }, }} /> ) diff --git a/apps/storefront/src/pages/quote/components/QuoteTable.tsx b/apps/storefront/src/pages/quote/components/QuoteTable.tsx index 2656b51e..4197e005 100644 --- a/apps/storefront/src/pages/quote/components/QuoteTable.tsx +++ b/apps/storefront/src/pages/quote/components/QuoteTable.tsx @@ -83,7 +83,6 @@ interface ShoppingDetailTableProps { idEdit?: boolean, isB2BUser: boolean, updateSummary: () => void, - customColor: string, } interface SearchProps { @@ -140,7 +139,6 @@ const QuoteTable = (props: ShoppingDetailTableProps, ref: Ref) => { idEdit = true, isB2BUser, updateSummary, - customColor, } = props const paginationTableRef = useRef(null) @@ -418,11 +416,6 @@ const QuoteTable = (props: ShoppingDetailTableProps, ref: Ref) => { inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', }} - sx={{ - '& .MuiFilledInput-root:after': { - borderBottom: `2px solid ${customColor || '#1976d2'}`, - }, - }} onChange={(e) => { handleUpdateProductQty(row.id, e.target.value) }} diff --git a/apps/storefront/src/pages/registered/RegisteredAccount.tsx b/apps/storefront/src/pages/registered/RegisteredAccount.tsx index 723e59fa..f1f593b9 100644 --- a/apps/storefront/src/pages/registered/RegisteredAccount.tsx +++ b/apps/storefront/src/pages/registered/RegisteredAccount.tsx @@ -79,9 +79,6 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { const { state: { accountLoginRegistration, - portalStyle: { - primaryColor = '', - }, }, } = useContext(CustomStyleContext) @@ -231,11 +228,6 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { value="1" control={} label={b3Lang('intl.user.register.registeredAccount.businessAccount')} - sx={{ - '& .MuiRadio-root.Mui-checked': { - color: primaryColor, - }, - }} /> ) } @@ -245,11 +237,6 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { value="2" control={} label={b3Lang('intl.user.register.registeredAccount.personalAccount')} - sx={{ - '& .MuiRadio-root.Mui-checked': { - color: primaryColor, - }, - }} /> ) } diff --git a/apps/storefront/src/pages/registered/RegisteredStep.tsx b/apps/storefront/src/pages/registered/RegisteredStep.tsx index e70089d5..36c93c6b 100644 --- a/apps/storefront/src/pages/registered/RegisteredStep.tsx +++ b/apps/storefront/src/pages/registered/RegisteredStep.tsx @@ -23,10 +23,6 @@ import { steps, } from './config' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - interface RegisteredStepProps { children: ReactNode, isStepOptional: (index: number) => Boolean, @@ -51,14 +47,6 @@ export default function RegisteredStep(props: RegisteredStepProps) { } = state const newPageTitle = accountType === '1' ? b3Lang('intl.user.register.title.registerComplete') : b3Lang('intl.user.register.title.accountCreated') - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - return ( {b3Lang(label)} diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx index 89e6dd97..f127d4fb 100644 --- a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx @@ -435,7 +435,6 @@ const ShoppingListDetails = ({ setDeleteOpen={setDeleteOpen} setDeleteItemId={setDeleteItemId} isB2BUser={isB2BUser} - customColor={primaryColor} /> diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx index 469d5794..e853886a 100644 --- a/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx @@ -7,7 +7,6 @@ import { useEffect, Dispatch, SetStateAction, - useContext, } from 'react' import { @@ -52,10 +51,6 @@ import { snackbar, } from '@/utils' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - const Flex = styled('div')(() => ({ display: 'flex', wordBreak: 'break-word', @@ -123,14 +118,6 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => { isB2BUser, } = props - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const [quantity, setQuantity] = useState(1) const [formFields, setFormFields] = useState([]) const [variantInfo, setVariantInfo] = useState(null) @@ -405,30 +392,24 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => { sx={{ width: '60%', maxWidth: '100px', - '& .MuiInputLabel-root.Mui-focused': { - color: primaryColor, - }, - '& .MuiFilledInput-root:after': { - borderBottom: `2px solid ${primaryColor || '#1976d2'}`, - }, }} /> - - - - + + + + )} diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx index b3f4fb6c..d843efdf 100644 --- a/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx @@ -36,10 +36,6 @@ import { ShoppingListProductItem, } from '../../../types' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - interface ProductTableActionProps { product: ShoppingListProductItem, onAddToListClick: (id: number) => void, @@ -135,14 +131,6 @@ export const ProductListDialog = (props: ProductListDialogProps) => { addButtonText = 'Add to list', } = props - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const [isMobile] = useMobile() const handleCancelClicked = () => { @@ -225,9 +213,6 @@ export const ProductListDialog = (props: ProductListDialogProps) => { '& input': { padding: '12px 12px 12px 0', }, - '& .MuiFilledInput-root:after': { - borderBottom: `2px solid ${primaryColor || '#1976d2'}`, - }, }} /> @@ -246,8 +231,7 @@ export const ProductListDialog = (props: ProductListDialogProps) => { addButtonText={addButtonText} /> )} - actionWidth="158px" - customColor={primaryColor} + actionWidth="180px" /> ) : ( diff --git a/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx b/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx index 483a6107..a446c248 100644 --- a/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx @@ -1,7 +1,6 @@ import { ChangeEvent, KeyboardEvent, - useContext, useState, } from 'react' @@ -40,10 +39,6 @@ import { conversionProductsList, } from '../shared/config' -import { - CustomStyleContext, -} from '@/shared/customStyleButtton' - interface SearchProductProps { updateList: () => void, addToList: (products: CustomFieldItems[]) => CustomFieldItems, @@ -59,14 +54,6 @@ export const SearchProduct = ({ addButtonText, isB2BUser, }: SearchProductProps) => { - const { - state: { - portalStyle: { - primaryColor = '', - }, - }, - } = useContext(CustomStyleContext) - const [isLoading, setIsLoading] = useState(false) const [productListOpen, setProductListOpen] = useState(false) @@ -202,9 +189,6 @@ export const SearchProduct = ({ '& input': { padding: '12px 12px 12px 0', }, - '& .MuiFilledInput-root:after': { - borderBottom: `2px solid ${primaryColor || '#1976d2'}`, - }, }} /> { void, setDeleteOpen: (open: boolean) => void, isB2BUser: boolean, - customColor: string, } interface SearchProps { @@ -175,7 +174,6 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref) isJuniorApprove, isB2BUser, allowJuniorPlaceOrder, - customColor, } = props const paginationTableRef = useRef(null) @@ -481,9 +479,6 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref) variant="filled" sx={{ width: '72px', - '& .MuiFilledInput-root:after': { - borderBottom: `2px solid ${customColor || '#1976d2'}`, - }, }} disabled={isReadForApprove || isJuniorApprove} value={row.quantity} diff --git a/apps/storefront/src/theme.tsx b/apps/storefront/src/theme.tsx index 5203e0d7..f1b9ab4d 100644 --- a/apps/storefront/src/theme.tsx +++ b/apps/storefront/src/theme.tsx @@ -50,6 +50,7 @@ function B3ThemeProvider({ state: { portalStyle: { backgroundColor = '', + primaryColor = '', }, }, } = useContext(CustomStyleContext) @@ -59,6 +60,9 @@ function B3ThemeProvider({ background: { default: backgroundColor, }, + primary: { + main: primaryColor || '#1976d2', + }, }, }, (materialMultiLanguages as MaterialMultiLanguagesType)[MUI_LANG_MAP[lang] || 'enUS'])