fix colors

bosonprotocol · Jan 14, 2025 · c6a4e70 · c6a4e70
1 parent bf82425
commit c6a4e70
Show file tree

Hide file tree

Showing 20 changed files with 105 additions and 55 deletions.
diff --git a/packages/react-kit/src/components/buttons/BaseButton.tsx b/packages/react-kit/src/components/buttons/BaseButton.tsx
@@ -33,10 +33,10 @@ const ButtonWithThemeProps = styled.button<ButtonWithThemePropsType>`
   background-color: ${(props) => props.theme?.background || "transparent"};
 
   svg {
-    stroke: ${(props) => props.theme?.color || "#000000"};
     ${(props) =>
       props.theme.svg &&
       css`
+        stroke: ${(props) => props.theme?.svg.stroke};
         ${props.theme.svg.fill &&
         css`
           fill: ${props.theme.svg.fill};
@@ -94,18 +94,15 @@ const ButtonWithThemeProps = styled.button<ButtonWithThemePropsType>`
         `};
 
         svg {
-          fill: ${props.theme.hover?.svg?.fill || props.theme.hover.color};
+          fill: ${props.theme.hover?.svg?.fill};
           line {
-            stroke: ${props.theme.hover?.svg?.line?.stroke ||
-            props.theme.hover.color};
+            stroke: ${props.theme.hover?.svg?.line?.stroke};
           }
           polyline {
-            stroke: ${props.theme.hover?.svg?.polyline?.stroke ||
-            props.theme.hover.color};
+            stroke: ${props.theme.hover?.svg?.polyline?.stroke};
           }
           path {
-            stroke: ${props.theme.hover?.svg?.path?.stroke ||
-            props.theme.hover.color};
+            stroke: ${props.theme.hover?.svg?.path?.stroke};
             ${props.theme.hover?.svg?.path?.fill &&
             css`
               fill: ${props.theme.hover?.svg?.path?.fill};
@@ -155,6 +152,7 @@ const ButtonWithThemeProps = styled.button<ButtonWithThemePropsType>`
 `;
 
 type SvgTheme = Partial<{
+  stroke: CSSProperties["color"];
   fill: CSSProperties["color"];
   line: Partial<{
     stroke: CSSProperties["color"];

diff --git a/packages/react-kit/src/components/chat/InitializeChat.tsx b/packages/react-kit/src/components/chat/InitializeChat.tsx
@@ -5,15 +5,15 @@ import { Grid } from "../ui/Grid";
 import ThemedButton from "../ui/ThemedButton";
 import { Typography } from "../ui/Typography";
 import { Spinner } from "../ui/loading/Spinner";
-import { colors } from "../../theme";
+import { colors, getCssVar } from "../../theme";
 import { useChatContext } from "./ChatProvider/ChatContext";
 import { useAccount } from "../../hooks/connection/connection";
 import { BosonConnectWallet } from "../wallet2/web3Status/BosonConnectWallet";
 
 const Info = styled(Grid)`
   display: flex;
   justify-content: space-between;
-  background-color: ${colors.greyLight};
+  background-color: ${getCssVar("--background-color")};
   padding: 1.5rem;
 `;
 
@@ -61,9 +61,13 @@ export default function InitializeChat({ isError = false }: Props) {
           <ThemedButton
             type="button"
             themeVal="accentFill"
-            style={{
-              color: colors.white
-            }}
+            style={
+              isInitializing
+                ? undefined
+                : {
+                    color: colors.white
+                  }
+            }
             disabled={isInitializing}
             onClick={() => {
               initialize();

diff --git a/packages/react-kit/src/components/chat/InitializeChatWithSuccess.tsx b/packages/react-kit/src/components/chat/InitializeChatWithSuccess.tsx
@@ -6,17 +6,18 @@ import { useChatStatus } from "./useChatStatus";
 import { Grid } from "../ui/Grid";
 import InitializeChat from "./InitializeChat";
 import { Typography } from "../ui/Typography";
+import { colors, getCssVar } from "../../theme";
 
 const CheckIcon = styled(CheckCircle)`
-  color: var(--primary);
+  color: ${getCssVar("--main-accent-color")};
   path {
-    stroke: var(--primary);
+    stroke: ${getCssVar("--main-accent-color")};
   }
 `;
 const ChatDotsIcon = styled(ChatDots)`
-  fill: var(--accent);
+  fill: ${colors.violet};
   path {
-    stroke: var(--accent);
+    stroke: ${colors.violet};
   }
 `;
 

diff --git a/packages/react-kit/src/components/error/SimpleError.tsx b/packages/react-kit/src/components/error/SimpleError.tsx
@@ -35,7 +35,7 @@ export function SimpleError({
       $background={backgroundColor}
       {...rest}
     >
-      <Warning color={warningColor} size={16} />
+      <Warning color={warningColor} size={16} style={{ minWidth: "1rem" }} />
       {children ? (
         children
       ) : (

diff --git a/packages/react-kit/src/components/form/BaseSelect.tsx b/packages/react-kit/src/components/form/BaseSelect.tsx
@@ -6,7 +6,7 @@ import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
 import { colors } from "../../theme";
 import { zIndex } from "../ui/zIndex";
 import type { BaseSelectProps, SelectDataProps } from "./types";
-import { useFixSelectFontSize } from "../../hooks/form/useFixSelectFontSize";
+import { useFixSelectFont } from "../../hooks/form/useFixSelectFont";
 
 const customStyles = (error: any) => ({
   control: (provided: any, state: any) => ({
@@ -56,7 +56,7 @@ export default function BaseSelect({
   const handleChange = (option: SingleValue<SelectDataProps>) => {
     onChange?.(option);
   };
-  const { jsx, selectClassName } = useFixSelectFontSize({
+  const { jsx, selectClassName } = useFixSelectFont({
     selectClassName: "boson-base-select"
   });
   return (

diff --git a/packages/react-kit/src/components/form/CountrySelect.tsx b/packages/react-kit/src/components/form/CountrySelect.tsx
@@ -17,7 +17,8 @@ import type { BaseProps, SupportedReactSelectProps } from "./types";
 import { SelectDataProps } from "./types";
 import { colors, getCssVar } from "../../theme";
 import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
-import { useFixSelectFontSize } from "../../hooks/form/useFixSelectFontSize";
+import { useFixSelectFont } from "../../hooks/form/useFixSelectFont";
+import { inputStyles } from "./styles";
 export type { Country as CountryCode } from "react-phone-number-input";
 
 const customStyles = (
@@ -43,7 +44,7 @@ const customStyles = (
       alignContent: "center",
       padding: "0.4rem 1rem",
       boxShadow: "none",
-      background: getCssVar("--background-color"),
+      background: inputStyles.background,
       ...customTheme?.control,
       border: state.isFocused
         ? customTheme?.control?.focus?.border ?? `1px solid ${colors.violet}`
@@ -219,7 +220,7 @@ export function CountrySelect({
       setInitialized(true);
     }
   }, [field.value, initialized]); // eslint-disable-line
-  const { jsx, selectClassName } = useFixSelectFontSize({
+  const { jsx, selectClassName } = useFixSelectFont({
     selectClassName: "country-select"
   });
   return (

diff --git a/packages/react-kit/src/components/form/Field.styles.ts b/packages/react-kit/src/components/form/Field.styles.ts
@@ -14,6 +14,10 @@ export type InputTheme = {
   background: CSSProperties["backgroundColor"];
   borderColor: CSSProperties["borderColor"];
   borderRadius: CSSProperties["borderRadius"];
+  color: CSSProperties["color"];
+  placeholder: {
+    color: CSSProperties["color"];
+  };
   focus: {
     caretColor: CSSProperties["caretColor"];
   };
@@ -58,8 +62,20 @@ export const FieldInput = styled.input<{
   background: ${(props) => props.theme?.background || "transparent"};
   border: 1px solid ${(props) => props.theme?.borderColor || colors.border};
   border-radius: ${(props) => props.theme?.borderRadius || 0}px;
+  color: ${(props) => props.theme?.color};
   outline: none;
 
+  &::placeholder {
+    color: ${(props) => props.theme?.placeholder?.color};
+    opacity: 1;
+  }
+  &:-ms-input-placeholder {
+    color: ${(props) => props.theme?.placeholder?.color};
+  }
+  &::-ms-input-placeholder {
+    color: ${(props) => props.theme?.placeholder?.color};
+  }
+
   ${transition}
 
   &:not(:disabled) {

diff --git a/packages/react-kit/src/components/form/Input.tsx b/packages/react-kit/src/components/form/Input.tsx
@@ -1,11 +1,16 @@
 import React from "react";
 import { colors, getCssVar } from "../../theme";
 import { BaseInput, BaseInputProps } from "./BaseInput";
+import { inputStyles } from "./styles";
 
 const bosonTheme = {
-  background: getCssVar("--background-color"),
+  background: inputStyles.background,
   borderColor: getCssVar("--border-color"),
+  color: inputStyles.color,
   borderRadius: 0,
+  placeholder: {
+    color: inputStyles.placeholder.color
+  },
   focus: {
     caretColor: "initial"
   },

diff --git a/packages/react-kit/src/components/form/Phone.tsx b/packages/react-kit/src/components/form/Phone.tsx
@@ -20,7 +20,8 @@ import Error from "./Error";
 import { FieldInput } from "./Field.styles";
 import type { InputProps } from "./types";
 import { SelectDataProps } from "./types";
-import { useFixSelectFontSize } from "../../hooks/form/useFixSelectFontSize";
+import { useFixSelectFont } from "../../hooks/form/useFixSelectFont";
+import { inputStyles } from "./styles";
 
 const customStyles = {
   control: (provided: any, state: any) => {
@@ -42,7 +43,7 @@ const customStyles = {
         borderColor: colors.violet,
         borderWidth: "1px"
       },
-      background: getCssVar("--background-color"),
+      background: inputStyles.background,
       border: state.isFocused
         ? `1px solid ${colors.violet}`
         : `1px solid ${getCssVar("--border-color")}`,
@@ -112,8 +113,9 @@ export const PhoneWrapper = styled.div`
     width: 100%;
     padding: 1rem;
     gap: 0.5rem;
-    background: ${getCssVar("--background-color")};
+    background: ${getCssVar("--background-accent-color")};
     border: 1px solid ${getCssVar("--border-color")};
+    color: ${getCssVar("--main-text-color")};
     border-radius: 0;
     outline: none;
     font-family: "Plus Jakarta Sans";
@@ -184,7 +186,7 @@ export default function Phone({ name, ...props }: InputProps) {
     }
   }, [field.value, initialized]); // eslint-disable-line
 
-  const { jsx, selectClassName } = useFixSelectFontSize({
+  const { jsx, selectClassName } = useFixSelectFont({
     selectClassName: "phone-select"
   });
   return (

diff --git a/packages/react-kit/src/components/form/Select.tsx b/packages/react-kit/src/components/form/Select.tsx
@@ -8,7 +8,7 @@ import { zIndex } from "../ui/zIndex";
 
 import Error from "./Error";
 import type { SelectDataProps, SelectProps } from "./types";
-import { useFixSelectFontSize } from "../../hooks/form/useFixSelectFontSize";
+import { useFixSelectFont } from "../../hooks/form/useFixSelectFont";
 export type { SelectProps } from "./types";
 
 const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
@@ -139,7 +139,7 @@ export default function SelectComponent<
       helpers.setTouched(true);
     }
   };
-  const { jsx, selectClassName } = useFixSelectFontSize({
+  const { jsx, selectClassName } = useFixSelectFont({
     selectClassName: "boson-select"
   });
   return (

diff --git a/packages/react-kit/src/components/form/styles.ts b/packages/react-kit/src/components/form/styles.ts
@@ -0,0 +1,9 @@
+import { getCssVar } from "../../theme";
+
+export const inputStyles = {
+  background: getCssVar("--background-accent-color"),
+  color: getCssVar("--main-text-color"),
+  placeholder: {
+    color: getCssVar("--sub-text-color")
+  }
+} as const;
diff --git a/packages/react-kit/src/components/modal/Modal.tsx b/packages/react-kit/src/components/modal/Modal.tsx
@@ -87,8 +87,7 @@ const Wrapper = styled.div<{
   position: relative;
   z-index: ${zIndex.Modal};
   color: ${getCssVar("--main-text-color")};
-  background-color: ${getCssVar("--background-accent-color")};
-  border: var(--secondary);
+  background-color: ${getCssVar("--background-color")};
   border-radius: ${getCssVar("--modal-border-radius")};
   overflow: hidden;
   ${({ $maxWidths }) => {

diff --git a/packages/react-kit/src/components/modal/components/Commit/DetailView/RedeemWhatsNext.tsx b/packages/react-kit/src/components/modal/components/Commit/DetailView/RedeemWhatsNext.tsx
@@ -102,10 +102,15 @@ export const RedeemWhatsNext = ({
               <Button
                 style={{ flex: "1 1 50%" }}
                 onClick={() => {
-                  showModal("REQUEST_SHIPMENT", {
-                    exchange,
-                    ...requestShipmentProps
-                  });
+                  showModal(
+                    "REQUEST_SHIPMENT",
+                    {
+                      exchange,
+                      ...requestShipmentProps
+                    },
+                    "auto",
+                    { xs: "550px" }
+                  );
                 }}
               >
                 Request shipment

diff --git a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx
@@ -15,7 +15,7 @@ import { useAddPendingTransactionWithContext } from "../../../../../hooks/transa
 import { useCoreSDKWithContext } from "../../../../../hooks/core-sdk/useCoreSdkWithContext";
 import { poll } from "../../../../../lib/promises/promises";
 
-import { colors } from "../../../../../theme";
+import { colors, getCssVar } from "../../../../../theme";
 import { useChatContext } from "../../../../chat/ChatProvider/ChatContext";
 import InitializeChatWithSuccess from "../../../../chat/InitializeChatWithSuccess";
 import { useChatStatus } from "../../../../chat/useChatStatus";
@@ -46,7 +46,7 @@ import { useRedemptionContext } from "../../../../widgets/redemption/provider/Re
 import { extractUserFriendlyError } from "../../../../../lib/errors/transactions";
 
 const StyledGrid = styled(Grid)`
-  background-color: ${colors.greyLight};
+  background-color: ${getCssVar("--background-color")};
 `;
 
 const StyledRedeemButton = styled(ThemedButton)``;
@@ -319,7 +319,11 @@ ${FormModel.formFields.walletAddress.placeholder}: ${message.deliveryDetails.wal
             margin="1.5rem 0"
             padding="1.5rem"
           >
-            <Warning color={colors.orangeDark} size={16} />
+            <Warning
+              color={colors.orangeDark}
+              size={16}
+              style={{ minWidth: "1rem" }}
+            />
             <Typography fontWeight="600" fontSize="1rem" lineHeight="1.5rem">
               rNFTs are burned upon redemption to prevent double spend
             </Typography>

diff --git a/...components/modal/components/RequestShipment/exchangePolicyOverview/FairExchangePolicy.tsx b/...components/modal/components/RequestShipment/exchangePolicyOverview/FairExchangePolicy.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import styled, { css } from "styled-components";
 import { CONFIG } from "../../../../../lib/config/config";
 import { Typography } from "../../../../ui/Typography";
-import { colors } from "../../../../../theme";
+import { colors, getCssVar } from "../../../../../theme";
 import { onlyFairExchangePolicyLabel } from "../../../../../lib/const/policies";
 
 const InfoTitleWrapper = styled.div`
@@ -36,7 +36,7 @@ const InfoListItem = styled.li`
 
   p {
     margin: 0;
-    color: ${colors.greyDark};
+    color: ${getCssVar("--sub-text-color")};
   }
 `;
 

diff --git a/...onents/modal/components/RequestShipment/exchangePolicyOverview/RequestShipmentSuccess.tsx b/...onents/modal/components/RequestShipment/exchangePolicyOverview/RequestShipmentSuccess.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Grid } from "../../../../ui/Grid";
 import { Button } from "../../../../buttons/Button";
-import { colors } from "../../../../../theme";
+import { colors, getCssVar } from "../../../../../theme";
 import { CheckCircle } from "phosphor-react";
 import { Typography } from "../../../../ui/Typography";
 
@@ -30,7 +30,7 @@ export const RequestShipmentSuccess = ({
       >
         <CheckCircle
           weight="fill"
-          color={colors.green}
+          color={getCssVar("--main-accent-color")}
           style={{ minWidth: "42px", minHeight: "42px" }}
         />
         <Typography fontSize="1.25rem" fontWeight={600}>
@@ -43,10 +43,6 @@ export const RequestShipmentSuccess = ({
         justifyContent="center"
         gap="0.25rem"
         padding="1.5rem 1rem"
-        style={{
-          borderRadius: "0.25rem",
-          border: `2px solid ${colors.greyLight}`
-        }}
       >
         <Typography fontSize="1rem" fontWeight={600}>
           What’s next?
@@ -63,7 +59,7 @@ export const RequestShipmentSuccess = ({
       </Grid>
       <div
         style={{
-          border: `1px solid ${colors.greyLight}`,
+          border: `1px solid ${getCssVar("--background-accent-color")}`,
           width: "calc(100% + 2rem * 2)"
         }}
       />

diff --git a/packages/react-kit/src/components/modal/nonModal/Header.tsx b/packages/react-kit/src/components/modal/nonModal/Header.tsx
@@ -17,7 +17,7 @@ const Wrapper = styled.div<{ $flexWrap: string }>`
   padding: 1rem 2rem;
   display: flex;
   flex-wrap: ${({ $flexWrap }) => $flexWrap};
-  border-bottom: 2px solid ${getCssVar("--border-color")};
+  border-bottom: 2px solid ${getCssVar("--background-accent-color")};
   align-items: flex-end;
   justify-content: space-between;
   gap: 0.5rem;