feat: apply action buttons custom style

bigcommerce · Apr 10, 2023 · c3c2d6a · c3c2d6a
1 parent d27d0d0
commit c3c2d6a
Show file tree

Hide file tree

Showing 28 changed files with 347 additions and 104 deletions.
diff --git a/apps/storefront/src/components/B3Dialog.tsx b/apps/storefront/src/components/B3Dialog.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -27,6 +26,10 @@ import {
   B3Sping,
 } from './spin/B3Sping'
 
+import {
+  CustomButton,
+} from './button/CustomButton'
+
 interface B3DialogProps<T> {
   customActions?: () => ReactElement
   isOpen: boolean,
@@ -153,19 +156,19 @@ export const B3Dialog:<T> ({
           {
             customActions ? customActions() : (
               <>
-                <Button
+                <CustomButton
                   sx={{
                     ...leftStyleBtn,
                   }}
                   onClick={() => handleCloseClick('')}
                 >
                   {leftSizeBtn || 'cancel'}
 
-                </Button>
+                </CustomButton>
 
                 {
                   showRightBtn && (
-                    <Button
+                    <CustomButton
                       sx={{
                         ...rightStyleBtn,
                       }}
@@ -180,7 +183,7 @@ export const B3Dialog:<T> ({
                       >
                         {rightSizeBtn || 'save'}
                       </B3Sping>
-                    </Button>
+                    </CustomButton>
                   )
                 }
               </>

diff --git a/apps/storefront/src/components/button/CustomButton.tsx b/apps/storefront/src/components/button/CustomButton.tsx
@@ -37,26 +37,57 @@ const CustomButton = ({
     },
   } = useContext(CustomStyleContext)
 
+  const {
+    variant,
+  } = rest
+
+  console.log(rest)
+
   const {
     primaryColor = '',
   } = portalStyle
 
   return (
-    <Button
-      {...rest}
-      sx={{
-        ...sx || {},
-        backgroundColor: primaryColor || globalButtonBackgroundColor,
-        color: getContrastColor(primaryColor) || getContrastColor(globalButtonBackgroundColor),
-        '&:hover': {
-          backgroundColor: primaryColor || globalButtonBackgroundColor,
-          color: getContrastColor(primaryColor) || getContrastColor(globalButtonBackgroundColor),
-        },
-      }}
-      onClick={onClick}
-    >
-      {children}
-    </Button>
+    <>
+      {
+        (variant === 'contained') ? (
+          <Button
+            {...rest}
+            sx={{
+              ...sx || {},
+              backgroundColor: primaryColor || globalButtonBackgroundColor,
+              color: getContrastColor(primaryColor) || getContrastColor(globalButtonBackgroundColor),
+              '&:hover': {
+                backgroundColor: primaryColor || globalButtonBackgroundColor,
+                color: getContrastColor(primaryColor) || getContrastColor(globalButtonBackgroundColor),
+              },
+            }}
+            onClick={onClick}
+          >
+            {children}
+          </Button>
+        ) : (
+          <Button
+            {...rest}
+            sx={{
+              ...sx || {},
+              color: primaryColor || globalButtonBackgroundColor,
+              borderColor: primaryColor,
+              '&:hover': {
+                color: primaryColor || globalButtonBackgroundColor,
+                borderColor: primaryColor,
+              },
+            }}
+            onClick={onClick}
+          >
+            {children}
+          </Button>
+        )
+      }
+      {
+
+      }
+    </>
   )
 }
 

diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -3,10 +3,7 @@ import {
   Box,
 } from '@mui/material'
 
-import Button from '@mui/material/Button'
-
 import {
-  // DeepPartial,
   useForm,
 } from 'react-hook-form'
 
@@ -25,6 +22,7 @@ import {
 import {
   B3CustomForm,
   B3Dialog,
+  CustomButton,
 } from '@/components'
 
 import B3FilterPicker from './B3FilterPicker'
@@ -222,7 +220,7 @@ const B3FilterMore:<T, Y> ({
             endPicker={endPicker}
           />
         </Box>
-        <Button
+        <CustomButton
           sx={{
             mt: 1,
           }}
@@ -231,7 +229,7 @@ const B3FilterMore:<T, Y> ({
         >
           clear filters
 
-        </Button>
+        </CustomButton>
       </B3Dialog>
     </Box>
 

diff --git a/apps/storefront/src/components/layout/B3Nav.tsx b/apps/storefront/src/components/layout/B3Nav.tsx
@@ -8,10 +8,12 @@ import {
 import {
   useContext,
 } from 'react'
+
 import {
   useNavigate,
   useLocation,
 } from 'react-router-dom'
+
 import {
   getAllowedRoutes,
 } from '@/shared/routes'
@@ -36,6 +38,14 @@ import {
   B3SStorage,
 } from '@/utils'
 
+import {
+  getContrastColor,
+} from '../outSideComponents/utils/b3CustomStyles'
+
+import {
+  CustomStyleContext,
+} from '../../shared/customStyleButtton/context'
+
 interface B3NavProps {
   closeSidebar?: (x: boolean) => void;
 }
@@ -55,6 +65,16 @@ export const B3Nav = ({
     state: globalState,
   } = useContext(GlobaledContext)
 
+  const {
+    state: {
+      portalStyle,
+    },
+  } = useContext(CustomStyleContext)
+
+  const {
+    primaryColor = '',
+  } = portalStyle
+
   const jumpRegister = () => {
     navigate('/registered')
     dispatch({
@@ -131,10 +151,10 @@ export const B3Nav = ({
         width: '100%',
         maxWidth: 360,
         bgcolor: `${isMobile ? 'background.paper' : 'background.default'}`,
-        color: 'info.main',
+        color: primaryColor || 'info.main',
         '& .MuiButtonBase-root.Mui-selected, & .MuiButtonBase-root.Mui-selected:hover': {
-          color: 'background.paper',
-          bgcolor: 'primary.main',
+          color: getContrastColor(primaryColor) || '#fff',
+          bgcolor: primaryColor || 'primary.main',
         },
       }}
       component="nav"

diff --git a/apps/storefront/src/components/upload/B3Upload.tsx b/apps/storefront/src/components/upload/B3Upload.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   Link,
   Alert,
 } from '@mui/material'
@@ -38,6 +37,7 @@ import {
 
 import {
   B3Sping,
+  CustomButton,
 } from '@/components'
 
 import {
@@ -59,6 +59,10 @@ import {
   ParseEmptyDataProps,
 } from './utils'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface B3UploadProps {
   isOpen: boolean,
   setIsOpen: Dispatch<SetStateAction<boolean>>,
@@ -110,6 +114,17 @@ export const B3Upload = (props: B3UploadProps) => {
       currentChannelId,
     },
   } = useContext(GlobaledContext)
+
+  const {
+    state: {
+      portalStyle,
+    },
+  } = useContext(CustomStyleContext)
+
+  const {
+    primaryColor = '',
+  } = portalStyle
+
   const [step, setStep] = useState<string>('init')
   const [fileDatas, setFileDatas] = useState<CustomFieldItems>({})
   const [fileName, setFileName] = useState('')
@@ -266,7 +281,10 @@ export const B3Upload = (props: B3UploadProps) => {
           justifyContent="center"
           xs={12}
         >
-          <InsertDriveFile color="primary" />
+          <InsertDriveFile sx={{
+            color: primaryColor || '#1976D2',
+          }}
+          />
         </Grid>
 
         <Grid
@@ -314,6 +332,9 @@ export const B3Upload = (props: B3UploadProps) => {
             <Link
               href="https://silk-demo-store45.mybigcommerce.com/content/sample_template.csv"
               underline="none"
+              sx={{
+                color: primaryColor,
+              }}
             >
               Download sample
             </Link>
@@ -325,11 +346,11 @@ export const B3Upload = (props: B3UploadProps) => {
           justifyContent="center"
           xs={12}
         >
-          <Button
+          <CustomButton
             variant="outlined"
           >
             Upload file
-          </Button>
+          </CustomButton>
         </Grid>
 
       </Grid>

diff --git a/apps/storefront/src/pages/address/components/AddressItemCard.tsx b/apps/storefront/src/pages/address/components/AddressItemCard.tsx
@@ -2,7 +2,6 @@ import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
 import IconButton from '@mui/material/IconButton'
 
 import DeleteIcon from '@mui/icons-material/Delete'
@@ -23,6 +22,10 @@ import {
   B3Tag,
 } from '@/components/B3Tag'
 
+import {
+  CustomButton,
+} from '@/components'
+
 export interface OrderItemCardProps {
   item: AddressItemType,
   onEdit: (data: AddressItemType) => void
@@ -127,15 +130,15 @@ export const AddressItemCard = (props: OrderItemCardProps) => {
           <Flex>
             {
               !isBCPermission && (
-                <Button
+                <CustomButton
                   variant="text"
                   sx={{
                     padding: 0,
                   }}
                   onClick={() => { onSetDefault(addressInfo) }}
                 >
                   Set as default
-                </Button>
+                </CustomButton>
               )
             }
             <Box sx={{

diff --git a/apps/storefront/src/pages/dashboard/Dashboard.tsx b/apps/storefront/src/pages/dashboard/Dashboard.tsx
@@ -54,6 +54,10 @@ import {
 
 import DashboardCard from './components/DashboardCard'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface ListItem {
   [key: string]: string
 }
@@ -74,6 +78,16 @@ const Dashboard = () => {
     dispatch,
   } = useContext(GlobaledContext)
 
+  const {
+    state: {
+      portalStyle,
+    },
+  } = useContext(CustomStyleContext)
+
+  const {
+    primaryColor = '',
+  } = portalStyle
+
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
 
   const [currentSalesRepCompanyId, setCurrentSalesRepCompanyId] = useState<number>(+salesRepCompanyId)
@@ -263,7 +277,7 @@ const Dashboard = () => {
             >
               <MenuItem
                 sx={{
-                  color: '#1976D2',
+                  color: primaryColor || '#1976D2',
                 }}
                 onClick={() => startActing()}
               >