fix: floating button hover issues

bigcommerce · Apr 28, 2023 · f4229d8 · f4229d8
1 parent bdf9deb
commit f4229d8
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 16 deletions.
diff --git a/apps/storefront/src/components/outSideComponents/B3HoverButton.tsx b/apps/storefront/src/components/outSideComponents/B3HoverButton.tsx
@@ -11,11 +11,7 @@ import { Box, Button, Snackbar, SnackbarOrigin, SxProps } from '@mui/material'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { B3LStorage } from '@/utils'
 
-import {
-  getContrastColor,
-  getLocation,
-  getStyles,
-} from './utils/b3CustomStyles'
+import { getHoverColor, getLocation, getStyles } from './utils/b3CustomStyles'
 
 interface B3HoverButtonProps {
   isOpen: boolean
@@ -44,7 +40,7 @@ export default function B3HoverButton(props: B3HoverButtonProps) {
 
   const {
     text = '',
-    color = '',
+    color = '#3385d6',
     customCss = '',
     location = 'bottomRight',
     horizontalPadding = '',
@@ -58,9 +54,11 @@ export default function B3HoverButton(props: B3HoverButtonProps) {
   }
 
   const defaultSx: SxProps = {
-    backgroundColor: `${color}`,
-    color: getContrastColor(color),
-    padding: `${verticalPadding}px ${horizontalPadding}px`,
+    backgroundColor: color,
+    padding:
+      verticalPadding && horizontalPadding
+        ? `${verticalPadding}px ${horizontalPadding}px`
+        : '',
     ...getStyles(customCss),
   }
 
@@ -88,8 +86,10 @@ export default function B3HoverButton(props: B3HoverButtonProps) {
           !href.includes('/cart') && (
             <Button
               sx={{
-                backgroundColor: '#ED6C02',
                 height: '42px',
+                ':hover': {
+                  backgroundColor: getHoverColor(color, 0.2),
+                },
                 ...defaultSx,
               }}
               onClick={() => {

diff --git a/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx b/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx
@@ -132,7 +132,10 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
   const customStyles: SxProps = {
     backgroundColor: `${color || '#FFFFFF'}`,
     color: getContrastColor(color || '#FFFFFF'),
-    padding: `${verticalPadding}px ${horizontalPadding}px`,
+    padding:
+      verticalPadding && horizontalPadding
+        ? `${verticalPadding}px ${horizontalPadding}px`
+        : '',
     ...getStyles(customCss),
   }
 

diff --git a/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts b/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts
@@ -101,3 +101,23 @@ export const b3HexToRgb = (color: string, transparency?: number) => {
     ? `rgb(${r}, ${g}, ${b}, ${transparency})`
     : `rgb(${r}, ${g}, ${b})`
 }
+
+export const getHoverColor = (color: string, factor: number): string => {
+  const hexToRGB = (hex: string): number[] =>
+    hex.match(/\w\w/g)?.map((x) => parseInt(x, 16)) || []
+
+  const [r, g, b] = hexToRGB(color)
+
+  const newR = Math.round(r * (1 - factor))
+  const newG = Math.round(g * (1 - factor))
+  const newB = Math.round(b * (1 - factor))
+
+  const componentToHex = (c: number): string => {
+    const hex = c.toString(16)
+    return hex.length === 1 ? `0${hex}` : hex
+  }
+
+  return `#${componentToHex(newR)}${componentToHex(newG)}${componentToHex(
+    newB
+  )}`
+}
diff --git a/apps/storefront/src/hooks/dom/useDomHooks.ts b/apps/storefront/src/hooks/dom/useDomHooks.ts
@@ -25,12 +25,12 @@ const useDomHooks = ({ setOpenPage }: MutationObserverProps) => {
     },
   } = useContext(GlobaledContext)
 
+  useJuniorCart({ role })
+
   useOpenPDP({
     setOpenPage,
   })
 
-  useJuniorCart({ role })
-
   useRegisteredbctob2b(setOpenPage)
 
   useMyQuote({

diff --git a/apps/storefront/src/shared/customStyleButtton/context/config.ts b/apps/storefront/src/shared/customStyleButtton/context/config.ts
@@ -71,7 +71,7 @@ export const initState = {
   masqueradeButton: {
     color: '#FFFFFF',
     text: 'END MASQUERADE',
-    location: '',
+    location: 'bottomLeft',
     customCss: '',
     horizontalPadding: '',
     verticalPadding: '',
@@ -85,10 +85,10 @@ export const initState = {
     enabled: true,
   },
   floatingAction: {
-    color: '#ed6c02',
+    color: '#3385d6',
     text: 'Finish quote',
     buttonText: 'Finish quote',
-    location: '',
+    location: 'bottomRight',
     customCss: '',
     horizontalPadding: '',
     verticalPadding: '',