fix: styling issues (#958)

* fix issues * chore: upgrade react-kit
bosonprotocol · Dec 7, 2023 · 72a9ff2 · 72a9ff2
1 parent 573ec41
commit 72a9ff2
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/react-kit": "^0.22.1-alpha.0",
+    "@bosonprotocol/react-kit": "^0.23.0-alpha.0",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.6.1",

diff --git a/src/components/detail/DetailWidget/DetailWidget.tsx b/src/components/detail/DetailWidget/DetailWidget.tsx
@@ -151,7 +151,7 @@ const RedeemButton = styled(BosonButton)`
 const BlackLogo = styled(Logo)`
   width: 6.25rem;
   height: fit-content;
-  padding: 1.2rem 0 0 0;
+  padding: 1.2rem 0;
   :first-child {
     path:first-child {
       fill: ${colors.black};
@@ -1148,7 +1148,10 @@ const DetailWidget: React.FC<IDetailWidget> = ({
             )}
 
             {isToRedeem && !isRedeemDisabled && (
-              <Typography $fontSize="0.8rem" style={{ display: "block" }}>
+              <Typography
+                $fontSize="0.8rem"
+                style={{ color: "initial", display: "block" }}
+              >
                 By proceeding to Redeem, I agree to the{" "}
                 <span
                   style={{
@@ -1171,7 +1174,11 @@ const DetailWidget: React.FC<IDetailWidget> = ({
           {isOffer && (
             <Typography
               $fontSize="0.8rem"
-              style={{ display: "block", paddingBottom: "0.5rem" }}
+              style={{
+                color: "initial",
+                display: "block",
+                paddingBottom: "0.5rem"
+              }}
             >
               By proceeding to Commit, I agree to the{" "}
               <span
@@ -1317,9 +1324,12 @@ const DetailWidget: React.FC<IDetailWidget> = ({
           </>
         )}
         {isCustomStoreFront && (
-          <Grid justifyContent="center" alignItems="center">
-            <BlackLogo />
-          </Grid>
+          <>
+            <Break />
+            <Grid justifyContent="center" alignItems="center">
+              <BlackLogo />
+            </Grid>
+          </>
         )}
       </Widget>
     </>

diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
@@ -1,6 +1,8 @@
 /* eslint @typescript-eslint/no-explicit-any: "off" */
 import { useField } from "formik";
+import { getColor1OverColor2WithContrast } from "lib/styles/contrast";
 import { zIndex } from "lib/styles/zIndex";
+import { useCSSVariable } from "lib/utils/hooks/useCSSVariable";
 import ReactSelect, {
   ActionMeta,
   MultiValue,
@@ -23,11 +25,15 @@ const StyledSelect = styled(ReactSelect)`
   }
 ` as ReactSelect;
 
-const customStyles = (error: any): StylesConfig<any, boolean> => ({
+const customStyles = (
+  error: any,
+  { backgroundColor, textColor }: { backgroundColor: string; textColor: string }
+): StylesConfig<any, boolean> => ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   singleValue: (provided: any, state: any) => {
     return {
       ...provided,
+      color: textColor,
       fontSize: "13.33px"
     };
   },
@@ -37,7 +43,8 @@ const customStyles = (error: any): StylesConfig<any, boolean> => ({
           ":before": {
             content: `"${state.selectProps.label}"`,
             fontWeight: "600",
-            paddingLeft: "1rem"
+            paddingLeft: "1rem",
+            color: textColor
           }
         }
       : null;
@@ -50,7 +57,7 @@ const customStyles = (error: any): StylesConfig<any, boolean> => ({
         borderColor: colors.secondary,
         borderWidth: "1px"
       },
-      background: colors.lightGrey,
+      background: backgroundColor,
       border: state.isFocused
         ? `1px solid ${colors.secondary}`
         : !checkIfValueIsEmpty(error)
@@ -85,7 +92,7 @@ const customStyles = (error: any): StylesConfig<any, boolean> => ({
   }),
   multiValue: (base, state) => {
     return (state.data as Record<string, any>).isFixed
-      ? { ...base, backgroundColor: colors.darkGrey }
+      ? { ...base, backgroundColor: backgroundColor }
       : base;
   },
   multiValueLabel: (base, state) => {
@@ -95,9 +102,27 @@ const customStyles = (error: any): StylesConfig<any, boolean> => ({
   },
   multiValueRemove: (base, state) => {
     return state.data.isFixed ? { ...base, display: "none" } : base;
+  },
+  input(base) {
+    return {
+      ...base,
+      color: textColor
+    };
   }
 });
 
+const useSelectColors = () => {
+  const backgroundColor = colors.lightGrey;
+  const textColor = getColor1OverColor2WithContrast({
+    color2: backgroundColor,
+    color1: useCSSVariable("--buttonTextColor") || colors.darkGrey
+  });
+  return {
+    backgroundColor,
+    textColor
+  };
+};
+
 export default function SelectForm({
   name,
   options,
@@ -174,7 +199,7 @@ export default function SelectForm({
   return (
     <>
       <StyledSelect
-        styles={customStyles(displayErrorMessage)}
+        styles={customStyles(displayErrorMessage, useSelectColors())}
         {...field}
         {...props}
         placeholder={placeholder}
@@ -213,7 +238,7 @@ export function Select({
   return (
     <>
       <StyledSelect<typeof options[number], boolean>
-        styles={customStyles(displayErrorMessage)}
+        styles={customStyles(displayErrorMessage, useSelectColors())}
         {...props}
         placeholder={placeholder}
         options={options}

diff --git a/src/components/header/BurgerButton.tsx b/src/components/header/BurgerButton.tsx
@@ -1,6 +1,9 @@
+import { colors } from "lib/styles/colors";
+import { getColor1OverColor2WithContrast } from "lib/styles/contrast";
+import { useCSSVariable } from "lib/utils/hooks/useCSSVariable";
 import styled from "styled-components";
 
-const Button = styled.button`
+const Button = styled.button<{ $backgroundColor: string }>`
   all: unset;
   cursor: pointer;
 
@@ -15,7 +18,7 @@ const Button = styled.button`
     width: 1.25rem;
     height: 2px;
     border-radius: 5px;
-    background: var(--accent);
+    background: ${({ $backgroundColor }) => $backgroundColor};
   }
 `;
 
@@ -24,8 +27,13 @@ type BurgerButtonProps = {
 };
 
 export const BurgerButton: React.FC<BurgerButtonProps> = ({ onClick }) => {
+  const backgroundColor = getColor1OverColor2WithContrast({
+    color2: useCSSVariable("--headerBgColor") || colors.white,
+    color1: useCSSVariable("--accent") || colors.darkGrey,
+    contrastThreshold: 4
+  });
   return (
-    <Button theme="blank" onClick={onClick}>
+    <Button theme="blank" onClick={onClick} $backgroundColor={backgroundColor}>
       <div />
       <div />
       <div />

diff --git a/src/components/header/walletModal/index.tsx b/src/components/header/walletModal/index.tsx
@@ -6,7 +6,9 @@ import { DrCenterRoutes } from "lib/routing/drCenterRoutes";
 import { BosonRoutes } from "lib/routing/routes";
 import { breakpoint } from "lib/styles/breakpoint";
 import { colors } from "lib/styles/colors";
+import { getColor1OverColor2WithContrast } from "lib/styles/contrast";
 import { useChainId } from "lib/utils/hooks/connection/connection";
+import { useCSSVariable } from "lib/utils/hooks/useCSSVariable";
 import { getCurrentViewMode, ViewMode } from "lib/viewMode";
 import { useEffect } from "react";
 import styled from "styled-components";
@@ -69,6 +71,14 @@ export default function WalletModal() {
     }
   }, [chainId, connector]);
   const viewMode = getCurrentViewMode();
+  const magicLoginTextColor = getColor1OverColor2WithContrast({
+    color2: useCSSVariable("--accentNoDefault") || colors.white,
+    color1: useCSSVariable("--textColor") || colors.darkGrey
+  });
+  const privacyTextColor = getColor1OverColor2WithContrast({
+    color2: useCSSVariable("--primaryBgColor") || colors.white,
+    color1: useCSSVariable("--textColor") || colors.darkGrey
+  });
   return (
     <Wrapper data-testid="wallet-modal">
       <Grid justifyContent="space-between" marginBottom="16px">
@@ -85,8 +95,12 @@ export default function WalletModal() {
                 <Option key={connection.getName()} connection={connection} />
               ))}
           </OptionGrid>
-          <MagicLoginButton />
-          <PrivacyPolicyWrapper>
+          <MagicLoginButton
+            style={{
+              color: magicLoginTextColor
+            }}
+          />
+          <PrivacyPolicyWrapper style={{ color: privacyTextColor }}>
             By connecting a wallet, you agree to{" "}
             {viewMode === ViewMode.DAPP ? "Boson App" : "Boson Dispute Center"}
             's{" "}

diff --git a/src/components/productCard/ProductCard.tsx b/src/components/productCard/ProductCard.tsx
@@ -4,6 +4,8 @@ import {
   ProductCard as BosonProductCard
 } from "@bosonprotocol/react-kit";
 import { useConfigContext } from "components/config/ConfigContext";
+import { getColor1OverColor2WithContrast } from "lib/styles/contrast";
+import { useCSSVariable } from "lib/utils/hooks/useCSSVariable";
 import { CameraSlash, Lock } from "phosphor-react";
 import { useMemo, useState } from "react";
 import { generatePath, useLocation } from "react-router-dom";
@@ -44,20 +46,22 @@ interface Props {
 const ProductCardWrapper = styled.div<{
   $isCustomStoreFront: boolean;
   $isLowerCardBgColorDefined: boolean;
+  $bottomCardTextColor: string;
+  $avatarTextColor: string;
 }>`
   [data-card="product-card"] {
     height: 500px;
     background: var(--upperCardBgColor);
-    ${({ $isLowerCardBgColorDefined }) => {
+    ${({ $isLowerCardBgColorDefined, $bottomCardTextColor }) => {
       if ($isLowerCardBgColorDefined) {
         return css`
-          color: var(--textColor);
+          color: ${$bottomCardTextColor};
 
           .bottom {
             background: var(--lowerCardBgColor);
           }
           * {
-            color: var(--textColor);
+            color: ${$bottomCardTextColor};
           }
         `;
       }
@@ -82,10 +86,10 @@ const ProductCardWrapper = styled.div<{
     max-width: 100%;
     word-break: break-word;
 
-    ${({ $isLowerCardBgColorDefined }) => {
+    ${({ $isLowerCardBgColorDefined, $avatarTextColor }) => {
       if ($isLowerCardBgColorDefined) {
         return css`
-          color: var(--accent);
+          color: ${$avatarTextColor};
         `;
       }
       return css``;
@@ -204,10 +208,21 @@ export default function ProductCard({
     (useLens ? lensProfile?.name : metadata?.name) ?? metadata?.name ?? "";
   const lowerCardBgColor = useCustomStoreQueryParameter("lowerCardBgColor");
   const isLowerCardBgColorDefined = !!lowerCardBgColor;
+  const bottomCardTextColor = getColor1OverColor2WithContrast({
+    color2: useCSSVariable("--lowerCardBgColor") || colors.white,
+    color1: useCSSVariable("--textColor") || colors.darkGrey
+  });
+  const avatarTextColor = getColor1OverColor2WithContrast({
+    color2: useCSSVariable("--lowerCardBgColor") || colors.white,
+    color1: colors.accent,
+    contrastThreshold: 4
+  });
   return (
     <ProductCardWrapper
       $isCustomStoreFront={!!isCustomStoreFront}
       $isLowerCardBgColorDefined={isLowerCardBgColorDefined}
+      $bottomCardTextColor={bottomCardTextColor}
+      $avatarTextColor={avatarTextColor}
     >
       {isTokenGated && (
         <LockIcon>

diff --git a/src/lib/utils/hooks/useCSSVariable.ts b/src/lib/utils/hooks/useCSSVariable.ts
@@ -3,15 +3,22 @@ import { useEffect, useState } from "react";
 // all css variables can be found in src/components/app/index.tsx
 export const useCSSVariable = (
   variableName:
+    | "--headerBgColor"
+    | "--headerTextColor"
     | "--primary"
     | "--secondary"
     | "--accent"
+    | "--accentNoDefault"
     | "--accentDark"
-    | "--buttonBgColor"
     | "--textColor"
-    | "--headerTextColor"
-    | "--headerBgColor"
+    | "--primaryBgColor"
     | "--secondaryBgColor"
+    | "--footerBgColor"
+    | "--footerTextColor"
+    | "--buttonBgColor"
+    | "--buttonTextColor"
+    | "--upperCardBgColor"
+    | "--lowerCardBgColor"
 ) => {
   const [value, setValue] = useState<string>();
   useEffect(() => {