diff --git a/package-lock.json b/package-lock.json index 3ba2a2fca..c2a09e770 100644 --- a/package-lock.json +++ b/package-lock.json @@ -87,6 +87,7 @@ "react": "^18.2.0", "react-avatar-editor": "^13.0.0", "react-chartjs-2": "^4.2.0", + "react-cookie": "^7.2.2", "react-csv": "^2.2.2", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", @@ -15109,6 +15110,11 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "node_modules/@types/debug": { "version": "4.1.7", "license": "MIT", @@ -15174,8 +15180,9 @@ } }, "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.1", - "license": "MIT", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz", + "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==", "dependencies": { "@types/react": "*", "hoist-non-react-statics": "^3.3.0" @@ -40084,6 +40091,19 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-cookie": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.2.2.tgz", + "integrity": "sha512-e+hi6axHcw9VODoeVu8WyMWyoosa1pzpyjfvrLdF7CexfU+WSGZdDuRfHa4RJgTpfv3ZjdIpHE14HpYBieHFhg==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.5", + "hoist-non-react-statics": "^3.3.2", + "universal-cookie": "^7.0.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-css-styled": { "version": "1.1.9", "license": "MIT", @@ -45453,6 +45473,23 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/universal-cookie": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.2.2.tgz", + "integrity": "sha512-fMiOcS3TmzP2x5QV26pIH3mvhexLIT0HmPa3V7Q7knRfT9HG6kTwq02HZGLPw0sAOXrAmotElGRvTLCMbJsvxQ==", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^0.7.2" + } + }, + "node_modules/universal-cookie/node_modules/cookie": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", + "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/universalify": { "version": "2.0.0", "license": "MIT", diff --git a/package.json b/package.json index 359c53078..8895fb673 100644 --- a/package.json +++ b/package.json @@ -123,6 +123,7 @@ "react": "^18.2.0", "react-avatar-editor": "^13.0.0", "react-chartjs-2": "^4.2.0", + "react-cookie": "^7.2.2", "react-csv": "^2.2.2", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", diff --git a/src/components/addressInputPanel/index.tsx b/src/components/addressInputPanel/index.tsx index 73895d8cb..2a9572c63 100644 --- a/src/components/addressInputPanel/index.tsx +++ b/src/components/addressInputPanel/index.tsx @@ -14,7 +14,7 @@ const InputPanel = styled.div` ${flexColumnNoWrap}; position: relative; border-radius: 1.25rem; - background-color: ${colors.darkGrey}; + background-color: ${colors.greyDark}; z-index: 1; width: 100%; `; @@ -30,7 +30,7 @@ const ContainerRow = styled.div<{ error: boolean }>` transition: border-color 300ms ${({ error }) => (error ? "step-end" : "step-start")}, color 500ms ${({ error }) => (error ? "step-end" : "step-start")}; - background-color: ${colors.darkGrey}; + background-color: ${colors.greyDark}; `; const InputContainer = styled.div` @@ -44,7 +44,7 @@ const Input = styled.input<{ error?: boolean }>` border: none; flex: 1 1 auto; width: 0; - background-color: ${colors.darkGrey}; + background-color: ${colors.greyDark}; transition: color 300ms ${({ error }) => (error ? "step-end" : "step-start")}; color: ${({ error, theme }) => error ? theme.accentFailure : theme.textPrimary}; @@ -111,7 +111,7 @@ export default function AddressInputPanel({ diff --git a/src/components/avatar/fallback-avatar.tsx b/src/components/avatar/fallback-avatar.tsx index 59de29377..cecaa2882 100644 --- a/src/components/avatar/fallback-avatar.tsx +++ b/src/components/avatar/fallback-avatar.tsx @@ -4,9 +4,9 @@ import styled from "styled-components"; import { colors } from "../../lib/styles/colors"; const AddressImageContainer = styled.div<{ avatarSize: number }>` - border: ${({ avatarSize }) => avatarSize / 40}px solid ${colors.lightGrey}; + border: ${({ avatarSize }) => avatarSize / 40}px solid ${colors.greyLight}; border-radius: 50%; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; margin-bottom: 5px; display: flex; `; diff --git a/src/components/breadcrumbs/Breadcrumbs.tsx b/src/components/breadcrumbs/Breadcrumbs.tsx index c2a4309d3..9d60d92f7 100644 --- a/src/components/breadcrumbs/Breadcrumbs.tsx +++ b/src/components/breadcrumbs/Breadcrumbs.tsx @@ -49,7 +49,7 @@ function Breadcrumbs({ steps, margin }: Props) { {step.label} @@ -57,7 +57,7 @@ function Breadcrumbs({ steps, margin }: Props) { {isNotFinalStep(step.id) && ( )} diff --git a/src/components/collapse/Collapse.tsx b/src/components/collapse/Collapse.tsx index 0610eeeea..bfb7951f8 100644 --- a/src/components/collapse/Collapse.tsx +++ b/src/components/collapse/Collapse.tsx @@ -21,7 +21,7 @@ const ArrowContainer = styled.div` font-size: 1.5rem; `; const CollapseWrapper = styled.div` - background: ${colors.lightGrey}; + background: ${colors.greyLight}; padding: 1rem; `; diff --git a/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx index bd0757c6f..b66989019 100644 --- a/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx +++ b/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx @@ -97,7 +97,7 @@ const CurrencySelect = styled(Button)<{ &:hover, &:active { background-color: ${({ selected }) => - selected ? colors.darkGrey : colors.secondary}; + selected ? colors.greyDark : colors.secondary}; color: ${colors.white}; } @@ -115,11 +115,11 @@ const CurrencySelect = styled(Button)<{ } &:hover:before { - background-color: ${opacify(8, colors.darkGrey)}; + background-color: ${opacify(8, colors.greyDark)}; } &:active:before { - background-color: ${opacify(24, colors.lightGrey)}; + background-color: ${opacify(24, colors.greyLight)}; } } @@ -135,13 +135,13 @@ const InputRow = styled.div` const LabelRow = styled.div` ${flexRowNoWrap}; align-items: center; - color: ${colors.lightGrey}; + color: ${colors.greyLight}; font-size: 0.75rem; line-height: 1rem; span:hover { cursor: pointer; - color: ${darken(0.2, colors.lightGrey)}; + color: ${darken(0.2, colors.greyLight)}; } `; @@ -285,7 +285,7 @@ export default function SwapCurrencyInputPanel({ )} - {label} + {label} diff --git a/src/components/datepicker/DatePicker.style.tsx b/src/components/datepicker/DatePicker.style.tsx index 53c497cb1..1dc8a21f5 100644 --- a/src/components/datepicker/DatePicker.style.tsx +++ b/src/components/datepicker/DatePicker.style.tsx @@ -104,7 +104,7 @@ export const CalendarRow = styled.div` export const CalendarHeader = styled(CalendarFlex)` margin-bottom: 0.5rem; > div { - color: ${colors.darkGrey}; + color: ${colors.greyDark}; font-size: 0.875rem; font-weight: 600; } @@ -136,7 +136,7 @@ export const CalendarDay = styled(CalendarCell)<{ top: 50%; left: 50%; transform: translate(-50%, -50%); - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border-radius: 50%; width: 0; height: 0; diff --git a/src/components/detail/Detail.style.tsx b/src/components/detail/Detail.style.tsx index d669b2bab..c330f6937 100644 --- a/src/components/detail/Detail.style.tsx +++ b/src/components/detail/Detail.style.tsx @@ -37,7 +37,7 @@ export const CommitStepWrapper = styled.div` export const CommitStep = styled.div` position: relative; padding: 1rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; &:not(:last-child) { &:before { position: absolute; @@ -50,7 +50,7 @@ export const CommitStep = styled.div` transform: translate(-50%, 0); border-left: 30rem solid transparent; border-right: 30rem solid transparent; - border-top: 1rem solid ${colors.lightGrey}; + border-top: 1rem solid ${colors.greyLight}; } &:after { @@ -85,7 +85,7 @@ export const CommitStep = styled.div` left: initial; transform: translate(0%, -50%); border-top: 10rem solid transparent; - border-left: 1rem solid ${colors.lightGrey}; + border-left: 1rem solid ${colors.greyLight}; border-bottom: 10rem solid transparent; border-right: none; } @@ -269,7 +269,7 @@ export const Table = styled.table<{ color: inherit; ` : css` - color: ${colors.darkGrey}; + color: ${colors.greyDark}; `} } tr { @@ -472,7 +472,7 @@ export const RedeemLeftButton = styled.button` cursor: pointer; transition: all 150ms ease-in-out; &:hover { - background: ${colors.lightGrey}; + background: ${colors.greyLight}; } ${miniButton} @@ -494,7 +494,7 @@ export const RaiseProblemButton = styled(Button)` transition: all 150ms ease-in-out; &:hover:not(:disabled) { color: ${colors.red}; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; } svg { margin-left: 1rem; diff --git a/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx b/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx index daff3b641..d11a6f940 100644 --- a/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx +++ b/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx @@ -28,6 +28,7 @@ export const BasicCommitDetailWidget: React.FC< { - showModal(MODAL_TYPES.WHAT_IS_REDEEM, { - title: "Commit to Buy and Redeem" - }); - }} onClickBuyOrSwap={({ swapParams }) => { navigate({ pathname: BosonRoutes.Swap, search: swapParams }); }} diff --git a/src/components/detail/DetailWidget/CommitDetailWidget.tsx b/src/components/detail/DetailWidget/CommitDetailWidget.tsx index 63fc201f3..c065bfd53 100644 --- a/src/components/detail/DetailWidget/CommitDetailWidget.tsx +++ b/src/components/detail/DetailWidget/CommitDetailWidget.tsx @@ -1,12 +1,12 @@ import { - CommitButton, ExternalCommitDetailView, extractUserFriendlyError, getHasUserRejectedTx, getIsOfferExpired, Provider, RedeemButton, - subgraph + subgraph, + ThemedCommitButton } from "@bosonprotocol/react-kit"; import * as Sentry from "@sentry/browser"; import { useConfigContext } from "components/config/ConfigContext"; @@ -231,7 +231,6 @@ export const CommitDetailWidget: React.FC = ({ disabled={disabled} data-commit-proxy-address style={{ height: "3.5rem" }} - withBosonStyle > Commit Step 1/2 @@ -464,7 +463,9 @@ export const CommitDetailWidget: React.FC = ({ externalConnectedSigner: signer, withReduxProvider: false, withWeb3React: false, - withCustomReduxContext: false + withCustomReduxContext: false, + sendDeliveryInfoThroughXMTP: true, + roundness: "min" }} selectedVariant={selectedVariant} showPriceAsterisk={isPreview} @@ -477,11 +478,6 @@ export const CommitDetailWidget: React.FC = ({ exchangePolicyCheckResult: exchangePolicyCheckResult }); }} - onPurchaseOverview={() => { - showModal(MODAL_TYPES.WHAT_IS_REDEEM, { - title: "Commit to Buy and Redeem" - }); - }} onClickBuyOrSwap={({ swapParams }) => { navigate({ pathname: BosonRoutes.Swap, search: swapParams }); }} @@ -513,14 +509,13 @@ export const CommitDetailWidget: React.FC = ({ {showCommitProxyButton ? ( ) : ( - = ({ onPendingTransaction={onCommitPendingTransaction} onSuccess={onCommitSuccess} extraInfo="Step 1/2" - withBosonStyle /> )} @@ -566,7 +560,6 @@ export const CommitDetailWidget: React.FC = ({ metaTx: config.envConfig.metaTx }} disabled - withBosonStyle exchangeId="0" extraInfo="Step 2/2" variant="primaryFill" diff --git a/src/components/detail/DetailWidget/ExchangeDetailWidget.tsx b/src/components/detail/DetailWidget/ExchangeDetailWidget.tsx index 33d022d60..c9bd8ae8c 100644 --- a/src/components/detail/DetailWidget/ExchangeDetailWidget.tsx +++ b/src/components/detail/DetailWidget/ExchangeDetailWidget.tsx @@ -197,11 +197,6 @@ export const ExchangeDetailWidget: React.FC = ({ exchangePolicyCheckResult: exchangePolicyCheckResult }); }} - onPurchaseOverview={() => { - showModal(MODAL_TYPES.WHAT_IS_REDEEM, { - title: "Commit to Buy and Redeem" - }); - }} topChildren={ isExchangeExpired ? ( = ({ > You can withdraw your funds here - + ) : isToRedeem ? ( diff --git a/src/components/dispute/GetStarted.tsx b/src/components/dispute/GetStarted.tsx index 8e8dbe847..09b06b0b2 100644 --- a/src/components/dispute/GetStarted.tsx +++ b/src/components/dispute/GetStarted.tsx @@ -16,7 +16,7 @@ const FormButton = styled.button` align-items: flex-start; justify-content: space-between; width: 100%; - border-bottom: 1px solid ${colors.lightGrey}; + border-bottom: 1px solid ${colors.greyLight}; padding: 0; font-size: 1rem; font-family: ${defaultFontFamily}; @@ -52,7 +52,7 @@ function GetStarted({ Get started - + First, choose the issue you're facing with your exchange. diff --git a/src/components/dispute/TellUsMore.tsx b/src/components/dispute/TellUsMore.tsx index 958ba4b00..e6b824e1d 100644 --- a/src/components/dispute/TellUsMore.tsx +++ b/src/components/dispute/TellUsMore.tsx @@ -18,7 +18,7 @@ const FormButton = styled.button` align-items: flex-start; justify-content: space-between; width: 100%; - border-bottom: 1px solid ${colors.lightGrey}; + border-bottom: 1px solid ${colors.greyLight}; padding: 0; font-size: 1rem; font-family: ${defaultFontFamily}; @@ -59,7 +59,7 @@ function TellUsMore({ Tell us more about your problem - + Choose from one of the problems listed below diff --git a/src/components/disputeResolver/DisputeResolverAside.tsx b/src/components/disputeResolver/DisputeResolverAside.tsx index c5074fcb6..3f42dd166 100644 --- a/src/components/disputeResolver/DisputeResolverAside.tsx +++ b/src/components/disputeResolver/DisputeResolverAside.tsx @@ -85,7 +85,7 @@ export default function DRAside() { {label} diff --git a/src/components/disputeResolver/DisputeWrapper.tsx b/src/components/disputeResolver/DisputeWrapper.tsx index 355916ccc..c38cbec0e 100644 --- a/src/components/disputeResolver/DisputeWrapper.tsx +++ b/src/components/disputeResolver/DisputeWrapper.tsx @@ -5,7 +5,7 @@ import { Typography } from "../ui/Typography"; const DisputeResolverMain = styled.main` padding: 1.375rem 2.5rem 2.75rem 2.5rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; min-height: calc(100vh - 5.5rem); `; const DisputeResolverTitle = styled(Typography)` diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTable.styles.ts b/src/components/disputeResolver/ManageDisputes/DisputesTable.styles.ts index 94370b5e3..cd9c0456d 100644 --- a/src/components/disputeResolver/ManageDisputes/DisputesTable.styles.ts +++ b/src/components/disputeResolver/ManageDisputes/DisputesTable.styles.ts @@ -9,7 +9,7 @@ export const Table = styled.table` border-collapse: collapse; th { font-weight: 600; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; &:not([data-sortable]) { cursor: default !important; } @@ -47,7 +47,7 @@ export const Table = styled.table` tr { &:hover { td { - background-color: ${colors.darkGrey}08; + background-color: ${colors.greyDark}08; cursor: pointer; } } @@ -102,7 +102,7 @@ export const Pagination = styled.div` export const Span = styled.span` font-size: 0.75rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; &:not(:last-of-type) { margin-right: 1rem; } diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx b/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx index 545ac4e4a..db551dec1 100644 --- a/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx +++ b/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx @@ -410,7 +410,7 @@ export default function DisputesTable({ disputes }: Props) { : colors.black, background: pageNumber === pageIndex - ? colors.lightGrey + ? colors.greyLight : "transparent" }} onClick={() => gotoPage(pageNumber)} diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx b/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx index 995fe7738..976c4544a 100644 --- a/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx +++ b/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx @@ -338,7 +338,7 @@ export default function DisputesTablePast({ disputes }: Props) { : colors.black, background: pageNumber === pageIndex - ? colors.lightGrey + ? colors.greyLight : "transparent" }} onClick={() => gotoPage(pageNumber)} diff --git a/src/components/error/SimpleError.tsx b/src/components/error/SimpleError.tsx index 90f072eda..356f6f140 100644 --- a/src/components/error/SimpleError.tsx +++ b/src/components/error/SimpleError.tsx @@ -7,7 +7,7 @@ import { Grid, GridProps } from "../ui/Grid"; import { Typography } from "../ui/Typography"; const StyledGrid = styled(Grid)` - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; `; interface Props extends GridProps { diff --git a/src/components/exchangePolicy/FairExchangePolicy.tsx b/src/components/exchangePolicy/FairExchangePolicy.tsx index 398cb507f..f8aa6c542 100644 --- a/src/components/exchangePolicy/FairExchangePolicy.tsx +++ b/src/components/exchangePolicy/FairExchangePolicy.tsx @@ -36,7 +36,7 @@ const InfoListItem = styled.li` p { margin: 0; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; } `; diff --git a/src/components/expand/index.tsx b/src/components/expand/index.tsx index d91d87570..a77385ce6 100644 --- a/src/components/expand/index.tsx +++ b/src/components/expand/index.tsx @@ -13,7 +13,7 @@ const ButtonContainer = styled(Grid)` `; const ExpandIcon = styled(CaretDown)<{ $isOpen: boolean }>` - color: ${colors.darkGrey}; + color: ${colors.greyDark}; transform: ${({ $isOpen }) => ($isOpen ? "rotate(180deg)" : "rotate(0deg)")}; transition: transform 250ms; `; diff --git a/src/components/form/BaseSelect.tsx b/src/components/form/BaseSelect.tsx index 3b6edd9ad..a99cfb791 100644 --- a/src/components/form/BaseSelect.tsx +++ b/src/components/form/BaseSelect.tsx @@ -16,7 +16,7 @@ const customStyles = (error: any) => ({ borderColor: colors.secondary, borderWidth: "1px" }, - background: colors.lightGrey, + background: colors.greyLight, border: state.isFocused ? `1px solid ${colors.secondary}` : !checkIfValueIsEmpty(error) @@ -35,7 +35,7 @@ const customStyles = (error: any) => ({ opacity: state.isDisabled ? "0.5" : "1", background: state.isOptionSelected || state.isSelected || state.isFocused - ? colors.lightGrey + ? colors.greyLight : colors.white, color: state.isOptionSelected || state.isSelected diff --git a/src/components/form/CountrySelect.tsx b/src/components/form/CountrySelect.tsx index e49224c6d..495cc9b29 100644 --- a/src/components/form/CountrySelect.tsx +++ b/src/components/form/CountrySelect.tsx @@ -33,7 +33,7 @@ const customStyles = { borderColor: colors.secondary, borderWidth: "1px" }, - background: colors.lightGrey, + background: colors.greyLight, border: state.isFocused ? `1px solid ${colors.secondary}` : `1px solid ${colors.border}`, @@ -52,7 +52,7 @@ const customStyles = { opacity: state.isDisabled ? "0.5" : "1", background: state.isOptionSelected || state.isSelected || state.isFocused - ? colors.lightGrey + ? colors.greyLight : colors.white, color: state.isOptionSelected || state.isSelected @@ -97,7 +97,7 @@ const PhoneWrapper = styled.div` width: 100%; padding: 1rem; gap: 0.5rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border: 1px solid ${colors.border}; border-radius: 0; outline: none; diff --git a/src/components/form/Field.styles.ts b/src/components/form/Field.styles.ts index 8294c0c90..ad45d0a25 100644 --- a/src/components/form/Field.styles.ts +++ b/src/components/form/Field.styles.ts @@ -17,7 +17,7 @@ export const FieldInput = styled.input<{ error?: any }>` padding: 1rem; gap: 0.5rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border: 1px solid ${colors.border}; border-radius: 0; outline: none; @@ -101,7 +101,7 @@ export const FileUploadWrapper = styled.div<{ $error: unknown }>` } } - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border-radius: 0; outline: none; @@ -118,7 +118,7 @@ export const FileUploadWrapper = styled.div<{ $error: unknown }>` &:focus, &:hover { - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; } /* prettier-ignore */ @@ -172,7 +172,7 @@ export const FieldTextArea = styled.textarea<{ error: unknown }>` gap: 0.5rem; font-family: ${defaultFontFamily}; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border: 1px solid ${colors.border}; border-radius: 0; outline: none; @@ -257,7 +257,7 @@ export const FormFieldWrapper = styled(Grid)` margin: 0; font-weight: 400; font-size: 0.75rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; } `; @@ -297,7 +297,7 @@ export const CheckboxWrapper = styled.label<{ error?: unknown }>` width: 1.5rem; height: 1.5rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; margin-right: 0.5rem; } @@ -330,11 +330,11 @@ export const CheckboxWrapper = styled.label<{ error?: unknown }>` `; export const VideoPreview = styled.video` - background: ${colors.lightGrey}; + background: ${colors.greyLight}; height: 100%; width: 100%; object-fit: contain; `; export const ImagePreview = styled.img` - background: ${colors.lightGrey}; + background: ${colors.greyLight}; `; diff --git a/src/components/form/InputColor.tsx b/src/components/form/InputColor.tsx index e47618d9e..12082036c 100644 --- a/src/components/form/InputColor.tsx +++ b/src/components/form/InputColor.tsx @@ -14,7 +14,7 @@ const Container = styled.div` align-items: center; width: 100%; padding: 0.5rem 1rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border: 1px solid ${colors.border}; border-radius: 0; outline: none; @@ -47,7 +47,7 @@ export default function InputColor({ name, ...props }: InputColorProps) { colorRef.current?.click(); }} > - + {field.value?.toUpperCase() || props.placeholder} diff --git a/src/components/form/Phone.tsx b/src/components/form/Phone.tsx index 961b2c901..ef5f7821f 100644 --- a/src/components/form/Phone.tsx +++ b/src/components/form/Phone.tsx @@ -40,7 +40,7 @@ const customStyles = { borderColor: colors.secondary, borderWidth: "1px" }, - background: colors.lightGrey, + background: colors.greyLight, border: state.isFocused ? `1px solid ${colors.secondary}` : `1px solid ${colors.border}`, @@ -59,7 +59,7 @@ const customStyles = { opacity: state.isDisabled ? "0.5" : "1", background: state.isOptionSelected || state.isSelected || state.isFocused - ? colors.lightGrey + ? colors.greyLight : colors.white, color: state.isOptionSelected || state.isSelected @@ -112,7 +112,7 @@ export const PhoneWrapper = styled.div` width: 100%; padding: 1rem; gap: 0.5rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border: 1px solid ${colors.border}; border-radius: 0; outline: none; diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx index 070a2e2ed..08824a2cb 100644 --- a/src/components/form/Select.tsx +++ b/src/components/form/Select.tsx @@ -33,7 +33,7 @@ const customStyles = ( singleValue: (provided: any, state: any) => { return { ...provided, - color: state.isDisabled ? colors.darkGrey : textColor, + color: state.isDisabled ? colors.greyDark : textColor, fontSize: "13.33px" }; }, @@ -80,7 +80,7 @@ const customStyles = ( opacity: state.isDisabled ? "0.5" : "1", background: state.isOptionSelected || state.isSelected || state.isFocused - ? colors.lightGrey + ? colors.greyLight : colors.white, color: state.isOptionSelected || state.isSelected @@ -112,10 +112,10 @@ const customStyles = ( }); const useSelectColors = () => { - const backgroundColor = colors.lightGrey; + const backgroundColor = colors.greyLight; const textColor = getColor1OverColor2WithContrast({ color2: backgroundColor, - color1: useCSSVariable("--buttonTextColor") || colors.darkGrey + color1: useCSSVariable("--buttonTextColor") || colors.greyDark }); return { backgroundColor, diff --git a/src/components/form/Switch.tsx b/src/components/form/Switch.tsx index 396e77d11..628e6edc3 100644 --- a/src/components/form/Switch.tsx +++ b/src/components/form/Switch.tsx @@ -39,11 +39,11 @@ const StyledSwitchRoot = styled(ReactSwitch.Root)` cursor: not-allowed; ~ *, * { - color: ${colors.darkGrey}; + color: ${colors.greyDark}; cursor: not-allowed; } ${StyledSwitchThumb} { - background-color: ${colors.darkGrey}; + background-color: ${colors.greyDark}; } } `; diff --git a/src/components/form/Upload/UploadedFile.tsx b/src/components/form/Upload/UploadedFile.tsx index f60a4aabd..f79c2c33c 100644 --- a/src/components/form/Upload/UploadedFile.tsx +++ b/src/components/form/Upload/UploadedFile.tsx @@ -15,7 +15,7 @@ const AttachmentContainer = styled.div<{ $isLeftAligned: boolean }>` align-items: center; padding: 1rem; background-color: ${({ $isLeftAligned }) => - $isLeftAligned ? "inherit" : colors.lightGrey}; + $isLeftAligned ? "inherit" : colors.greyLight}; ${({ $isLeftAligned }) => $isLeftAligned ? `border: 2px solid ${colors.white}` : ""}; color: ${({ $isLeftAligned }) => ($isLeftAligned ? "inherit" : colors.black)}; diff --git a/src/components/form/styles/TagsInput.styles.ts b/src/components/form/styles/TagsInput.styles.ts index 06c0892f1..4312f40eb 100644 --- a/src/components/form/styles/TagsInput.styles.ts +++ b/src/components/form/styles/TagsInput.styles.ts @@ -25,7 +25,7 @@ export const Helper = styled.div` } `; export const TagWrapper = styled.div` - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; display: inline-block; padding: 0.5em 0.75em; margin-top: 1rem; @@ -35,7 +35,7 @@ export const TagWrapper = styled.div` `; export const Close = styled.span` - color: ${colors.darkGrey}; + color: ${colors.greyDark}; border-radius: 50%; display: inline-flex; justify-content: center; diff --git a/src/components/header/BurgerButton.tsx b/src/components/header/BurgerButton.tsx index df40cc79b..e7376781c 100644 --- a/src/components/header/BurgerButton.tsx +++ b/src/components/header/BurgerButton.tsx @@ -29,7 +29,7 @@ type BurgerButtonProps = { export const BurgerButton: React.FC = ({ onClick }) => { const backgroundColor = getColor1OverColor2WithContrast({ color2: useCSSVariable("--headerBgColor") || colors.white, - color1: useCSSVariable("--accent") || colors.darkGrey, + color1: useCSSVariable("--accent") || colors.greyDark, contrastThreshold: 4 }); return ( diff --git a/src/components/header/HeaderLinks.tsx b/src/components/header/HeaderLinks.tsx index 4c80ff64c..c3c0f34fd 100644 --- a/src/components/header/HeaderLinks.tsx +++ b/src/components/header/HeaderLinks.tsx @@ -196,7 +196,7 @@ export default function HeaderLinks({ $navigationBarPosition={navigationBarPosition} $hoverHeaderTextColor={getColor1OverColor2WithContrast({ color2: useCSSVariable("--headerBgColor") || colors.white, - color1: useCSSVariable("--headerTextColor") || colors.darkGrey + color1: useCSSVariable("--headerTextColor") || colors.greyDark })} > {withSearch && ( diff --git a/src/components/header/accountDrawer/index.tsx b/src/components/header/accountDrawer/index.tsx index a3258e797..036cc2c20 100644 --- a/src/components/header/accountDrawer/index.tsx +++ b/src/components/header/accountDrawer/index.tsx @@ -59,7 +59,7 @@ const ScrimBackground = styled.div<{ open: boolean }>` position: fixed; width: 100%; height: 100%; - background-color: ${colors.darkGrey}; + background-color: ${colors.greyDark}; opacity: 0; pointer-events: none; diff --git a/src/components/header/accountDrawer/miniPortfolio/PortfolioLogo.tsx b/src/components/header/accountDrawer/miniPortfolio/PortfolioLogo.tsx index 6a7b8f150..1a12cd457 100644 --- a/src/components/header/accountDrawer/miniPortfolio/PortfolioLogo.tsx +++ b/src/components/header/accountDrawer/miniPortfolio/PortfolioLogo.tsx @@ -65,13 +65,13 @@ const CircleLogoImage = styled.img<{ size: string }>` const L2LogoContainer = styled.div<{ $hasSquareLogo?: boolean }>` background-color: ${({ $hasSquareLogo }) => - $hasSquareLogo ? colors.lightGrey : colors.white}; + $hasSquareLogo ? colors.greyLight : colors.white}; border-radius: 2px; height: 16px; left: 60%; position: absolute; top: 60%; - outline: 2px solid ${colors.lightGrey}; + outline: 2px solid ${colors.greyLight}; width: 16px; display: flex; align-items: center; diff --git a/src/components/header/identicon/index.tsx b/src/components/header/identicon/index.tsx index ff6f2276b..e33d1320f 100644 --- a/src/components/header/identicon/index.tsx +++ b/src/components/header/identicon/index.tsx @@ -8,7 +8,7 @@ const StyledIdenticon = styled.div<{ $iconSize: number }>` height: ${({ $iconSize }) => `${$iconSize}px`}; width: ${({ $iconSize }) => `${$iconSize}px`}; border-radius: 50%; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; font-size: initial; `; diff --git a/src/components/header/selector/ChainSelectorRow.tsx b/src/components/header/selector/ChainSelectorRow.tsx index d552c46d4..162d9ffb3 100644 --- a/src/components/header/selector/ChainSelectorRow.tsx +++ b/src/components/header/selector/ChainSelectorRow.tsx @@ -28,7 +28,7 @@ const Container = styled.button<{ disabled: boolean }>` &:hover { background-color: ${({ disabled }) => - disabled ? "none" : colors.lightGrey}; + disabled ? "none" : colors.greyLight}; } `; @@ -47,7 +47,7 @@ const Status = styled.div` `; const CaptionText = styled.div` - /* color: ${colors.lightGrey}; */ + /* color: ${colors.greyLight}; */ font-size: 0.75rem; grid-column: 2; grid-row: 2; diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts index ab65bdb1e..247614524 100644 --- a/src/components/header/styles.ts +++ b/src/components/header/styles.ts @@ -16,7 +16,7 @@ export const ClickableStyle = css` export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>` // Firefox scrollbar styling scrollbar-width: thin; - scrollbar-color: ${colors.lightGrey} transparent; + scrollbar-color: ${colors.greyLight} transparent; height: 100%; // safari and chrome scrollbar styling @@ -38,7 +38,7 @@ export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>` } &::-webkit-scrollbar-thumb { - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border-radius: 8px; } `; diff --git a/src/components/header/walletModal/Option.tsx b/src/components/header/walletModal/Option.tsx index 026640d33..41d595c95 100644 --- a/src/components/header/walletModal/Option.tsx +++ b/src/components/header/walletModal/Option.tsx @@ -116,22 +116,19 @@ export default function Option({ connection }: OptionProps) { const isCurrentOptionPending = isSomeOptionPending && activationState.connection.type === connection.type; const headerTextColor = getColor1OverColor2WithContrast({ - color2: useCSSVariable("--secondaryBgColor") || colors.secondary, + color2: useCSSVariable("--secondaryBgColor") || colors.violet, color1: useCSSVariable("--textColor") || colors.black }); const hoverHeaderBackground = getColor1OverColor2WithContrast({ - color2: useCSSVariable("--secondaryBgColor") || colors.secondary, - color1: darken( - 0.2, - useCSSVariable("--secondaryBgColor") || colors.secondary - ), + color2: useCSSVariable("--secondaryBgColor") || colors.violet, + color1: darken(0.2, useCSSVariable("--secondaryBgColor") || colors.violet), defaultDarkColor1: darken( 0.75, - useCSSVariable("--secondaryBgColor") || colors.secondary + useCSSVariable("--secondaryBgColor") || colors.violet ), defaultLightColor1: lighten( 0.1, - useCSSVariable("--secondaryBgColor") || colors.secondary + useCSSVariable("--secondaryBgColor") || colors.violet ) }); return ( diff --git a/src/components/header/walletModal/index.tsx b/src/components/header/walletModal/index.tsx index fef9287a3..3c52326de 100644 --- a/src/components/header/walletModal/index.tsx +++ b/src/components/header/walletModal/index.tsx @@ -44,7 +44,7 @@ const OptionGrid = styled.div` const PrivacyPolicyWrapper = styled.div` padding: 0 4px; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; font-weight: 400; font-size: 0.75rem; @@ -72,12 +72,12 @@ export default function WalletModal() { }, [chainId, connector]); const viewMode = getCurrentViewMode(); const magicLoginTextColor = getColor1OverColor2WithContrast({ - color2: useCSSVariable("--accentNoDefault") || colors.white, - color1: useCSSVariable("--textColor") || colors.darkGrey + color2: colors.white, + color1: useCSSVariable("--textColor") || colors.greyDark }); const privacyTextColor = getColor1OverColor2WithContrast({ color2: useCSSVariable("--primaryBgColor") || colors.white, - color1: useCSSVariable("--textColor") || colors.darkGrey + color1: useCSSVariable("--textColor") || colors.greyDark }); return ( @@ -98,7 +98,7 @@ export default function WalletModal() { { toggleAccountDrawer(); }, [toggleAccountDrawer]); - const buttonBgColor = useCSSVariable("--buttonBgColor") || colors.primary; + const buttonBgColor = useCSSVariable("--buttonBgColor") || colors.green; const textColor = useCSSVariable("--textColor") || colors.black; const connectedButtonTextColor = getColor1OverColor2WithContrast({ - color2: useCSSVariable("--buttonBgColor") || colors.primary, - color1: useCSSVariable("--textColor") || colors.black + color2: buttonBgColor, + color1: textColor }); const wasConnected = !!accountRef.current; const previousChainId = chainIdRef.current; diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 1ccb928ee..2dceb5b52 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -11,7 +11,7 @@ export const Divider = styled.div` height: 1px; border-width: 0; margin: 0; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; `; export const Separator = styled.div` diff --git a/src/components/loader/styled.tsx b/src/components/loader/styled.tsx index 35facc42c..1fc12d474 100644 --- a/src/components/loader/styled.tsx +++ b/src/components/loader/styled.tsx @@ -15,9 +15,9 @@ const shimmerMixin = css` animation-fill-mode: both; background: linear-gradient( to left, - ${colors.darkGrey} 25%, - ${colors.lightGrey} 50%, - ${colors.darkGrey} 75% + ${colors.greyDark} 25%, + ${colors.greyLight} 50%, + ${colors.greyDark} 75% ); background-size: 400%; will-change: background-position; diff --git a/src/components/logo/AssetLogo.tsx b/src/components/logo/AssetLogo.tsx index be8266bbc..25f757c80 100644 --- a/src/components/logo/AssetLogo.tsx +++ b/src/components/logo/AssetLogo.tsx @@ -9,7 +9,7 @@ export const MissingImageLogo = styled.div<{ size?: string }>` --size: ${({ size }) => size}; border-radius: 100px; color: ${colors.black}; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; font-size: calc(var(--size) / 3); font-weight: 500; height: ${({ size }) => size ?? "24px"}; @@ -32,7 +32,7 @@ const LogoImage = styled.img<{ size: string; imgLoaded?: boolean }>` const LogoImageWrapper = styled.div<{ size: string; imgLoaded?: boolean }>` width: ${({ size }) => size}; height: ${({ size }) => size}; - background: ${({ imgLoaded }) => (imgLoaded ? "none" : colors.lightGrey)}; + background: ${({ imgLoaded }) => (imgLoaded ? "none" : colors.greyLight)}; transition: background-color 250ms ease-in; box-shadow: 0 0 1px white; border-radius: 50%; diff --git a/src/components/modal/ModalComponents.tsx b/src/components/modal/ModalComponents.tsx index 827dac733..674988533 100644 --- a/src/components/modal/ModalComponents.tsx +++ b/src/components/modal/ModalComponents.tsx @@ -1,5 +1,4 @@ /* eslint @typescript-eslint/no-explicit-any: "off" */ -import { PurchaseOverviewInner } from "@bosonprotocol/react-kit"; import { BuyerSellerAgreementModal } from "./components/BuyerSellerAgreementModal"; import EscalateModal from "./components/Chat/components/EscalateModal/EscalateModal"; @@ -70,7 +69,6 @@ export const MODAL_TYPES = { UPLOAD_MODAL: "UPLOAD_MODAL", VOID_PRODUCT: "VOID_PRODUCT", WAITING_FOR_CONFIRMATION: "WAITING_FOR_CONFIRMATION", - WHAT_IS_REDEEM: "WHAT_IS_REDEEM", PROGRESS_BAR: "PROGRESS_BAR", EXPORT_EXCHANGES_WITH_DELIVERY: "EXPORT_EXCHANGES_WITH_DELIVERY", PROFILE_DETAILS: "PROFILE_DETAILS", @@ -121,7 +119,6 @@ export const MODAL_COMPONENTS = { [MODAL_TYPES.UPLOAD_MODAL]: Upload, [MODAL_TYPES.VOID_PRODUCT]: VoidProduct, [MODAL_TYPES.WAITING_FOR_CONFIRMATION]: WaitingForConfirmationModal, - [MODAL_TYPES.WHAT_IS_REDEEM]: PurchaseOverviewInner, [MODAL_TYPES.PROGRESS_BAR]: ProgressBarModal, [MODAL_TYPES.EXPORT_EXCHANGES_WITH_DELIVERY]: ExportExchangesWithDeliveryModal, diff --git a/src/components/modal/components/Chat/MakeProposal/steps/DescribeProblemStep.tsx b/src/components/modal/components/Chat/MakeProposal/steps/DescribeProblemStep.tsx index e3ee8cfc7..c81cf80a1 100644 --- a/src/components/modal/components/Chat/MakeProposal/steps/DescribeProblemStep.tsx +++ b/src/components/modal/components/Chat/MakeProposal/steps/DescribeProblemStep.tsx @@ -31,7 +31,7 @@ export default function DescribeProblemStep({ onNextClick, isValid }: Props) { Add documents to support your case - + You may provide any information or attach any files that support your case. diff --git a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/InEscrowInput.tsx b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/InEscrowInput.tsx index 12e521faa..7ea67d92c 100644 --- a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/InEscrowInput.tsx +++ b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/InEscrowInput.tsx @@ -14,7 +14,7 @@ const Wrapper = styled.div` width: 100%; display: flex; align-items: center; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border: 1px solid ${colors.border}; padding: 0 0 0 0.5rem; diff --git a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/MakeAProposalStep.tsx b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/MakeAProposalStep.tsx index 8a9676f5f..313472d6a 100644 --- a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/MakeAProposalStep.tsx +++ b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/MakeAProposalStep.tsx @@ -70,7 +70,7 @@ export default function MakeAProposalStep({ Make a {proposalOrCounterProposal} - + Here you can make a {proposalOrCounterProposal} to the{" "} {counterPartyText} on how you would like the issue to be resolved. Note that this proposal is binding and if the  {counterPartyText} agrees diff --git a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RefundRequest.tsx b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RefundRequest.tsx index b71b00399..ade999d11 100644 --- a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RefundRequest.tsx +++ b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RefundRequest.tsx @@ -124,7 +124,7 @@ export default function RefundRequest({ exchange, iAmTheBuyer }: Props) {
Escalate Dispute - + Escalating a dispute will enable the dispute resolver to decide on the outcome of the dispute. The dispute resolver will decide based on the contractual agreement and evidence submitted by both parties. - + Dispute resolver Redeemeum - + Exchange policy {onlyFairExchangePolicyLabel} - + Escalation deposit {feeAmount} - + Dispute period {deadlineTimeLeft} diff --git a/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepTwo.tsx b/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepTwo.tsx index 3284541cd..e24c52e7b 100644 --- a/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepTwo.tsx +++ b/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepTwo.tsx @@ -284,7 +284,7 @@ function EscalateStepTwo({ Click the button below to sign an arbitrary message with your wallet. This will allow the dispute resolver to verify @@ -330,7 +330,7 @@ function EscalateStepTwo({ Email the dispute resolver by copying the below details and attaching any evidence (e.g. Chat Transcript, Files, etc) @@ -422,7 +422,7 @@ function EscalateStepTwo({ Your Escalation deposit is {feeAmount} {""} {exchange.offer.exchangeToken.symbol}. This dispute resolver diff --git a/src/components/modal/components/Chat/components/InitializeChat.tsx b/src/components/modal/components/Chat/components/InitializeChat.tsx index 061958970..83a9953de 100644 --- a/src/components/modal/components/Chat/components/InitializeChat.tsx +++ b/src/components/modal/components/Chat/components/InitializeChat.tsx @@ -16,7 +16,7 @@ import { Typography } from "../../../../ui/Typography"; const Info = styled(Grid)` display: flex; justify-content: space-between; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; padding: 1.5rem; `; diff --git a/src/components/modal/components/CustomStoreModal.tsx b/src/components/modal/components/CustomStoreModal.tsx index 997a26307..fd39a40bc 100644 --- a/src/components/modal/components/CustomStoreModal.tsx +++ b/src/components/modal/components/CustomStoreModal.tsx @@ -54,14 +54,14 @@ const Heading = styled(Typography).attrs({ const marginBetweenContainers = `1.875rem`; const CollapsibleContainer = styled.div` margin-top: ${marginBetweenContainers}; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; padding: 1.5rem; `; const StyledTooltip = styled.div` background: ${colors.white}; padding: 1rem; - border: 1px solid ${colors.darkGrey}; + border: 1px solid ${colors.greyDark}; max-width: 20rem; `; @@ -115,7 +115,7 @@ export function CustomStoreModal({ return ( <> null} /> - + State @@ -124,14 +124,14 @@ function DisputeListMobileElement({ exchange }: { exchange: Exchange }) { alignItems="flex-start" justifyContent="flex-end" margin="0 0 0 0" - color={colors.darkGrey} + color={colors.greyDark} > {isResolved ? ( <> {deadlineTimeLeft}{" "} diff --git a/src/components/modal/components/DisputeModal/DisputeModal.tsx b/src/components/modal/components/DisputeModal/DisputeModal.tsx index da824b0d2..9b41f8dd6 100644 --- a/src/components/modal/components/DisputeModal/DisputeModal.tsx +++ b/src/components/modal/components/DisputeModal/DisputeModal.tsx @@ -21,13 +21,13 @@ const ModalGrid = styled.div` `; const ModalGridColumns = styled.div` - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; padding: 1.5625rem; grid-gap: 0.3125rem; position: relative; &:nth-of-type(1) { &:after { - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; content: ""; bottom: calc(-100% + 1px); width: 100%; @@ -38,7 +38,7 @@ const ModalGridColumns = styled.div` left: 0; ${breakpoint.m} { clip-path: polygon(0 0, 0% 100%, 13% 49%); - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; content: ""; height: 100%; width: 6.25rem; @@ -72,7 +72,7 @@ const ModalGridColumns = styled.div` } } &:after { - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; content: ""; bottom: calc(-100% + 0.0625rem); width: 100%; @@ -83,7 +83,7 @@ const ModalGridColumns = styled.div` left: 0; ${breakpoint.m} { clip-path: polygon(0 0, 0% 100%, 13% 49%); - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; content: ""; height: 100%; width: 6.25rem; @@ -154,7 +154,7 @@ function DisputeModal({ exchangeId }: Props) { diff --git a/src/components/modal/components/DisputeTable/DisputeTable.tsx b/src/components/modal/components/DisputeTable/DisputeTable.tsx index d178fac17..05c5166cf 100644 --- a/src/components/modal/components/DisputeTable/DisputeTable.tsx +++ b/src/components/modal/components/DisputeTable/DisputeTable.tsx @@ -16,7 +16,7 @@ const Table = styled.table` const TableHeader = styled.th` text-align: left; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; font-size: 1.1rem; font-weight: 600; font-family: inherit; diff --git a/src/components/modal/components/ExpireVoucherModal.tsx b/src/components/modal/components/ExpireVoucherModal.tsx index f8c5ff7df..8bd03473e 100644 --- a/src/components/modal/components/ExpireVoucherModal.tsx +++ b/src/components/modal/components/ExpireVoucherModal.tsx @@ -46,7 +46,7 @@ const Content = styled.div` `; const ButtonsWrapper = styled.div` - border-top: 1px solid ${colors.lightGrey}; + border-top: 1px solid ${colors.greyLight}; padding-top: 2rem; `; const Line = styled.hr` @@ -99,7 +99,7 @@ export default function ExpireVoucherModal({ exchange }: Props) { tag="p" textAlign="left" margin="0" - color={colors.darkGrey} + color={colors.greyDark} width="100%" style={{ width: "100%" diff --git a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx index 1438b3af8..e00c49a2f 100644 --- a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx +++ b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx @@ -22,7 +22,7 @@ const CardContainer = styled.div<{ display: flex; cursor: pointer; flex-direction: column; - border: 2px solid ${colors.lightGrey}; + border: 2px solid ${colors.greyLight}; border-radius: 4px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); min-width: 16.5625rem; @@ -79,7 +79,7 @@ const LargeImage = styled(Image)` transform: none; left: 0; top: 30px; - box-shadow: 0 0 0 2px ${colors.lightGrey}; + box-shadow: 0 0 0 2px ${colors.greyLight}; width: inherit; } `; @@ -97,7 +97,7 @@ const BaseSmallImage = css` height: 3.125rem; max-height: 3.125rem; object-fit: contain; - box-shadow: 0 0 0 2px ${colors.lightGrey}; + box-shadow: 0 0 0 2px ${colors.greyLight}; width: 100%; left: unset; transform: none; @@ -252,7 +252,7 @@ export default function CollectionsCard({ collection, lensProfile }: Props) { {numProducts} Products diff --git a/src/components/modal/components/Profile/Lens/CreateBosonLensAccountSummary.tsx b/src/components/modal/components/Profile/Lens/CreateBosonLensAccountSummary.tsx index fbf92c508..724940d02 100644 --- a/src/components/modal/components/Profile/Lens/CreateBosonLensAccountSummary.tsx +++ b/src/components/modal/components/Profile/Lens/CreateBosonLensAccountSummary.tsx @@ -132,7 +132,7 @@ export default function CreateBosonLensAccountSummary({ @@ -346,7 +346,7 @@ export default function CreateBosonLensAccountSummary({ diff --git a/src/components/modal/components/Profile/Regular/RegularProfileSummary.tsx b/src/components/modal/components/Profile/Regular/RegularProfileSummary.tsx index 7ce4b15df..da01651dc 100644 --- a/src/components/modal/components/Profile/Regular/RegularProfileSummary.tsx +++ b/src/components/modal/components/Profile/Regular/RegularProfileSummary.tsx @@ -46,7 +46,7 @@ export default function RegularProfileSummary({ @@ -238,7 +238,7 @@ export default function RegularProfileSummary({ diff --git a/src/components/modal/components/Profile/bosonAccount/BosonAccountFormFields.tsx b/src/components/modal/components/Profile/bosonAccount/BosonAccountFormFields.tsx index 0396a3aa9..101b732e9 100644 --- a/src/components/modal/components/Profile/bosonAccount/BosonAccountFormFields.tsx +++ b/src/components/modal/components/Profile/bosonAccount/BosonAccountFormFields.tsx @@ -64,7 +64,7 @@ export default function BosonAccountFormFields({ {text} diff --git a/src/components/modal/components/SellerFinance/FinancesStyles.tsx b/src/components/modal/components/SellerFinance/FinancesStyles.tsx index e028ba0d3..11603c57b 100644 --- a/src/components/modal/components/SellerFinance/FinancesStyles.tsx +++ b/src/components/modal/components/SellerFinance/FinancesStyles.tsx @@ -8,7 +8,7 @@ import { Grid } from "../../../ui/Grid"; export const CTAButton = styled(Button)` padding: 0.75rem 1.5rem; &:disabled { - border: 2px solid ${colors.darkGrey}; + border: 2px solid ${colors.greyDark}; } &:hover:not(:disabled) { border: 2px solid var(--primary); @@ -26,7 +26,7 @@ export const InputWrapper = styled(Grid)<{ $hasError?: boolean }>` margin-top: -1rem; padding: 1.125rem 1rem; max-height: 3.5rem; - background: ${colors.darkGrey}; + background: ${colors.greyDark}; ${({ $hasError }) => $hasError && ` diff --git a/src/components/modal/components/Transactions/RecentTransactionsModal/Toggle.tsx b/src/components/modal/components/Transactions/RecentTransactionsModal/Toggle.tsx index 2f837291e..788a1fa27 100644 --- a/src/components/modal/components/Transactions/RecentTransactionsModal/Toggle.tsx +++ b/src/components/modal/components/Transactions/RecentTransactionsModal/Toggle.tsx @@ -6,7 +6,7 @@ import Button from "../../../../ui/Button"; import { Grid } from "../../../../ui/Grid"; const StyledGrid = styled(Grid)` - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; `; const StyledButton = styled(Button)<{ $isActive: boolean }>` @@ -16,7 +16,7 @@ const StyledButton = styled(Button)<{ $isActive: boolean }>` !$isActive && css` border-color: transparent; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; `} `; diff --git a/src/components/modal/components/Transactions/WaitingForConfirmationModal/WaitingForConfirmationModal.tsx b/src/components/modal/components/Transactions/WaitingForConfirmationModal/WaitingForConfirmationModal.tsx index a3654c890..39f8d1252 100644 --- a/src/components/modal/components/Transactions/WaitingForConfirmationModal/WaitingForConfirmationModal.tsx +++ b/src/components/modal/components/Transactions/WaitingForConfirmationModal/WaitingForConfirmationModal.tsx @@ -45,7 +45,7 @@ export default function WaitingForConfirmationModal({ action }: Props) { fontWeight="600" fontSize="1rem" lineHeight="150%" - color={colors.darkGrey} + color={colors.greyDark} margin="0.5rem 0 1.5rem 0" > {action} @@ -54,7 +54,7 @@ export default function WaitingForConfirmationModal({ action }: Props) { fontWeight="400" fontSize="0.75rem" lineHeight="150%" - color={colors.darkGrey} + color={colors.greyDark} > Confirm this transaction into your wallet diff --git a/src/components/modal/components/createProduct/VariableStepsExplainerModal.tsx b/src/components/modal/components/createProduct/VariableStepsExplainerModal.tsx index d30db1efe..597fa4c63 100644 --- a/src/components/modal/components/createProduct/VariableStepsExplainerModal.tsx +++ b/src/components/modal/components/createProduct/VariableStepsExplainerModal.tsx @@ -48,13 +48,13 @@ const StepWrapper = styled.div<{ $numSteps: number }>` const Step = styled.div<{ $isActive: boolean }>` position: relative; padding: 1rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; ${({ $isActive }) => { if ($isActive) { return css``; } return css` - background: ${colors.lightGrey}AA; + background: ${colors.greyLight}AA; color: ${colors.black}AA; svg { filter: opacity(50%); @@ -73,13 +73,13 @@ const Step = styled.div<{ $isActive: boolean }>` transform: translate(-50%, 0); border-left: 30rem solid transparent; border-right: 30rem solid transparent; - border-top: 1rem solid ${colors.lightGrey}; + border-top: 1rem solid ${colors.greyLight}; ${({ $isActive }) => { if ($isActive) { return css``; } return css` - border-top: 1rem solid ${colors.lightGrey}AA; + border-top: 1rem solid ${colors.greyLight}AA; `; }} } @@ -116,7 +116,7 @@ const Step = styled.div<{ $isActive: boolean }>` left: initial; transform: translate(0%, -50%); border-top: 10rem solid transparent; - border-left: 1rem solid ${colors.lightGrey}; + border-left: 1rem solid ${colors.greyLight}; border-bottom: 10rem solid transparent; border-right: none; ${({ $isActive }) => { @@ -124,7 +124,7 @@ const Step = styled.div<{ $isActive: boolean }>` return css``; } return css` - border-left: 1rem solid ${colors.lightGrey}AA; + border-left: 1rem solid ${colors.greyLight}AA; `; }} } diff --git a/src/components/modal/header/styles.tsx b/src/components/modal/header/styles.tsx index e732d07a3..a8d1f814d 100644 --- a/src/components/modal/header/styles.tsx +++ b/src/components/modal/header/styles.tsx @@ -6,7 +6,7 @@ import { Typography } from "../../ui/Typography"; export const Close = styled(X)` line { - stroke: ${colors.darkGrey} !important; + stroke: ${colors.greyDark} !important; stroke-width: 18px !important; } `; diff --git a/src/components/offer/ExchangeStatuses.tsx b/src/components/offer/ExchangeStatuses.tsx index cff3db99b..70a53c6ac 100644 --- a/src/components/offer/ExchangeStatuses.tsx +++ b/src/components/offer/ExchangeStatuses.tsx @@ -24,7 +24,7 @@ const Statuses = styled.div` &[data-testid="voided-status"] { &:before { background: transparent; - box-shadow: inset 0px 0px 0px 2px ${colors.darkGrey}; + box-shadow: inset 0px 0px 0px 2px ${colors.greyDark}; } } padding-left: 1.5rem; @@ -36,7 +36,7 @@ const Statuses = styled.div` transform: translate(0.25rem, -50%); width: 0.5rem; height: 0.5rem; - background: ${colors.darkGrey}; + background: ${colors.greyDark}; opacity: 0.6; border-radius: 50%; } @@ -124,7 +124,7 @@ const StatusToComponent = ( return { [subgraph.ExchangeState.CANCELLED]: ( ` width: 23.25rem; display: flex; flex-direction: column; - background: ${(props) => props.$background || colors.lightGrey}; + background: ${(props) => props.$background || colors.greyLight}; `; const HelpTitleContainer = styled.div` diff --git a/src/components/product/ProductType.tsx b/src/components/product/ProductType.tsx index 5f04868a8..c21a61a04 100644 --- a/src/components/product/ProductType.tsx +++ b/src/components/product/ProductType.tsx @@ -64,7 +64,7 @@ const productTypeItemsPerRow = { export const Label = styled.label` max-width: 12.5rem; align-items: center; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; width: 100%; text-align: center; margin-top: 0.25rem; @@ -99,7 +99,7 @@ const RadioButtonText = styled(Typography).attrs({ fontWeight: "600", fontSize: "1rem", margin: "1.5rem 0", - color: colors.darkGrey + color: colors.greyDark })``; const Container = styled.div` @@ -427,7 +427,7 @@ export default function ProductType({ fontWeight="600" fontSize="1rem" margin="1.5rem 0" - color={colors.darkGrey} + color={colors.greyDark} > Physical @@ -457,7 +457,7 @@ export default function ProductType({ fontWeight="600" fontSize="1rem" margin="1.5rem 0" - color={colors.darkGrey} + color={colors.greyDark} > Phygital diff --git a/src/components/product/TermsOfExchange.tsx b/src/components/product/TermsOfExchange.tsx index 04246add9..f97a5aa34 100644 --- a/src/components/product/TermsOfExchange.tsx +++ b/src/components/product/TermsOfExchange.tsx @@ -64,7 +64,7 @@ const InfoWrapper = styled.div` const InfoWrapperList = styled.div` padding: 1.25rem 1.5rem 1.5rem 1.5rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; > p { margin: 0; } diff --git a/src/components/product/confirmProductDetailsPage/ConfirmProductDetails.styles.tsx b/src/components/product/confirmProductDetailsPage/ConfirmProductDetails.styles.tsx index d9d2ebbee..1a820c73e 100644 --- a/src/components/product/confirmProductDetailsPage/ConfirmProductDetails.styles.tsx +++ b/src/components/product/confirmProductDetailsPage/ConfirmProductDetails.styles.tsx @@ -15,7 +15,7 @@ export const ConfirmProductDetailsContainer = styled(ContainerProductPage)` export const CollapseContainer = styled.div` padding: 1.5rem 2rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; &:nth-of-type(2) { margin-top: 2rem; margin-bottom: 2rem; @@ -74,7 +74,7 @@ export const ProductTypeBox = styled(GridBox)` export const ContentValue = styled(Typography)` font-size: 0.75rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; word-break: break-all; white-space: pre-wrap; gap: 0.5rem; @@ -160,7 +160,7 @@ export const InitializeChatContainer = styled.div` export const Info = styled(Grid)` justify-content: space-between; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; padding: 1.5rem; `; diff --git a/src/components/product/productDigital/styles.ts b/src/components/product/productDigital/styles.ts index 6de3e04f2..476ddf5f9 100644 --- a/src/components/product/productDigital/styles.ts +++ b/src/components/product/productDigital/styles.ts @@ -11,7 +11,7 @@ export const Delete = styled(Trash)` border-radius: 50%; box-sizing: content-box; &:hover { - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; } `; diff --git a/src/components/productCard/ProductCard.tsx b/src/components/productCard/ProductCard.tsx index 14300cf1e..791931975 100644 --- a/src/components/productCard/ProductCard.tsx +++ b/src/components/productCard/ProductCard.tsx @@ -56,8 +56,8 @@ const ProductCardWrapper = styled.div<{ background: transparent; box-shadow: none; &:hover { - box-shadow: 0 0 0 2px ${colors.lightGrey}; - filter: drop-shadow(0 0 2px ${colors.lightGrey}); + box-shadow: 0 0 0 2px ${colors.greyLight}; + filter: drop-shadow(0 0 2px ${colors.greyLight}); border-radius: 4px; } ${({ $isLowerCardBgColorDefined, $bottomCardTextColor }) => { @@ -221,13 +221,16 @@ export default function ProductCard({ (useLens ? lensProfile?.name : metadata?.name) ?? metadata?.name ?? ""; const lowerCardBgColor = useCustomStoreQueryParameter("lowerCardBgColor"); const isLowerCardBgColorDefined = !!lowerCardBgColor; + const bottomCardTextColor2 = + useCSSVariable("--lowerCardBgColor") || colors.white; const bottomCardTextColor = getColor1OverColor2WithContrast({ - color2: useCSSVariable("--lowerCardBgColor") || colors.white, - color1: useCSSVariable("--textColor") || colors.darkGrey + color2: bottomCardTextColor2, + color1: useCSSVariable("--textColor") || colors.greyDark }); + const avatarTextColor2 = useCSSVariable("--lowerCardBgColor") || colors.white; const avatarTextColor = getColor1OverColor2WithContrast({ - color2: useCSSVariable("--lowerCardBgColor") || colors.white, - color1: colors.accent, + color2: avatarTextColor2, + color1: colors.violet, contrastThreshold: 4 }); const isPhygital = isBundle(offer); @@ -246,11 +249,9 @@ export default function ProductCard({ { // to avoid infinite loop if (avatarObj.status === "lens" && avatarDifferentIpfsGateway) { diff --git a/src/components/questionHelper/index.tsx b/src/components/questionHelper/index.tsx index 23e5e8f3a..7ee598f4c 100644 --- a/src/components/questionHelper/index.tsx +++ b/src/components/questionHelper/index.tsx @@ -29,7 +29,7 @@ const QuestionMark = styled.span` font-size: 0.875rem; margin-left: 8px; align-items: center; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; margin-top: 2.5px; `; diff --git a/src/components/routingDiagram/RoutingDiagram.tsx b/src/components/routingDiagram/RoutingDiagram.tsx index 5c3f6b81a..c815d799a 100644 --- a/src/components/routingDiagram/RoutingDiagram.tsx +++ b/src/components/routingDiagram/RoutingDiagram.tsx @@ -47,12 +47,12 @@ const DottedLine = styled.div` const DotColor = styled(DotLine)` path { - stroke: ${colors.lightGrey}; + stroke: ${colors.greyLight}; } `; // styled(Badge); const OpaqueBadge = styled.div` - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; border-radius: 8px; display: grid; font-size: 0.75rem; @@ -65,7 +65,7 @@ const OpaqueBadge = styled.div` const ProtocolBadge = styled.div` border-radius: 4px; - color: ${colors.lightGrey}; + color: ${colors.greyLight}; font-size: 0.625rem; padding: 2px 4px; /* z-index: {Z_INDEX.sticky + 1}; */ diff --git a/src/components/searchModal/CurrencyList/index.tsx b/src/components/searchModal/CurrencyList/index.tsx index 93efcc4b3..da9b968ee 100644 --- a/src/components/searchModal/CurrencyList/index.tsx +++ b/src/components/searchModal/CurrencyList/index.tsx @@ -32,7 +32,7 @@ function currencyKey(currency: Currency): string { } */ const StyledFixedSizeList = styled(FixedSizeList)` scrollbar-width: thin; - scrollbar-color: ${colors.darkGrey} transparent; + scrollbar-color: ${colors.greyDark} transparent; height: 100%; `; @@ -59,7 +59,7 @@ const CurrencyName = styled(Typography)` const Tag = styled.div` background-color: ${({ theme }) => theme.deprecated_bg3}; - color: ${colors.lightGrey}; + color: ${colors.greyLight}; font-size: 0.875rem; border-radius: 4px; padding: 0.25rem 0.3rem 0.25rem 0.3rem; diff --git a/src/components/searchModal/styled.tsx b/src/components/searchModal/styled.tsx index fdb4c1349..5b7693084 100644 --- a/src/components/searchModal/styled.tsx +++ b/src/components/searchModal/styled.tsx @@ -47,7 +47,7 @@ export const SearchInput = styled.input` border-radius: 12px; color: ${({ theme }) => theme.textPrimary}; border-style: solid; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; -webkit-appearance: none; font-size: 1rem; @@ -59,14 +59,14 @@ export const SearchInput = styled.input` transition: border 100ms; &:focus { border: 1px solid ${({ theme }) => theme.accentActiveSoft}; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; outline: none; } `; export const Separator = styled.div` width: 100%; height: 1px; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; `; export const LoadingRows = styled(BaseLoadingRows)` diff --git a/src/components/seller/SellerAside.tsx b/src/components/seller/SellerAside.tsx index 579a5c9c3..2f46d503a 100644 --- a/src/components/seller/SellerAside.tsx +++ b/src/components/seller/SellerAside.tsx @@ -183,7 +183,7 @@ export default function SellerAside( {collapsed && showWarning && ( diff --git a/src/components/seller/SellerTags.tsx b/src/components/seller/SellerTags.tsx index caf779309..24ae6a56d 100644 --- a/src/components/seller/SellerTags.tsx +++ b/src/components/seller/SellerTags.tsx @@ -19,7 +19,7 @@ const TagItem = styled.li<{ $active: boolean; $disabled?: boolean }>` border-bottom: ${(props) => props.$active ? `1px solid ${colors.black}` : colors.black}; color: ${(props) => - props.$active ? `1px solid ${colors.black}` : colors.darkGrey}; + props.$active ? `1px solid ${colors.black}` : colors.greyDark}; padding: 1.125rem 1.5rem; display: flex; list-style-type: none; diff --git a/src/components/seller/SellerWrapper.tsx b/src/components/seller/SellerWrapper.tsx index e803cdafb..8c901b0a8 100644 --- a/src/components/seller/SellerWrapper.tsx +++ b/src/components/seller/SellerWrapper.tsx @@ -5,7 +5,7 @@ import { Typography } from "../ui/Typography"; const margin = "5.5rem"; const SellerMain = styled.main` padding: 1.375rem 2.5rem 2.75rem 2.5rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; min-height: calc(100vh - ${margin}); overflow: hidden; `; diff --git a/src/components/seller/common/PaginationPages.tsx b/src/components/seller/common/PaginationPages.tsx index a78eb4aa5..5fc991eca 100644 --- a/src/components/seller/common/PaginationPages.tsx +++ b/src/components/seller/common/PaginationPages.tsx @@ -4,7 +4,7 @@ import { colors } from "../../../lib/styles/colors"; const Span = styled.span` font-size: 0.75rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; &:not(:last-of-type) { margin-right: 1rem; } diff --git a/src/components/seller/dashboard/SellerDashboard.styles.tsx b/src/components/seller/dashboard/SellerDashboard.styles.tsx index 94da27db2..da558fe6f 100644 --- a/src/components/seller/dashboard/SellerDashboard.styles.tsx +++ b/src/components/seller/dashboard/SellerDashboard.styles.tsx @@ -75,7 +75,7 @@ export const ItemsDates = styled(Typography)` } > * { font-size: 0.75rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; &:first-child { font-weight: 600; } diff --git a/src/components/seller/exchanges/SellerExchangeTable.tsx b/src/components/seller/exchanges/SellerExchangeTable.tsx index 97802cdcb..5beaae5d1 100644 --- a/src/components/seller/exchanges/SellerExchangeTable.tsx +++ b/src/components/seller/exchanges/SellerExchangeTable.tsx @@ -104,7 +104,7 @@ const Table = styled.table` border-collapse: collapse; .th { font-weight: 600; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; :not([data-sortable]) { cursor: default !important; } @@ -144,7 +144,7 @@ const Table = styled.table` display: flex; &:hover { .td { - background-color: ${colors.darkGrey}08; + background-color: ${colors.greyDark}08; cursor: pointer; } } @@ -188,7 +188,7 @@ const Pagination = styled.div` `; const Span = styled.span` font-size: 0.75rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; &:not(:last-of-type) { margin-right: 1rem; } @@ -573,7 +573,7 @@ export default function SellerExchangeTable({ : colors.black, background: pageNumber === pageIndex - ? colors.lightGrey + ? colors.greyLight : "transparent" }} onClick={() => gotoPage(pageNumber)} diff --git a/src/components/seller/products/Actions.tsx b/src/components/seller/products/Actions.tsx index 50a85a2ba..72ba0dcfa 100644 --- a/src/components/seller/products/Actions.tsx +++ b/src/components/seller/products/Actions.tsx @@ -62,15 +62,15 @@ const GlobalStyle = createGlobalStyle` .DropdownMenuCheckboxItem[data-disabled], .DropdownMenuRadioItem[data-disabled], .DropdownMenuSubTrigger[data-disabled] { - color: ${colors.lightGrey}; + color: ${colors.greyLight}; pointer-events: none; } .DropdownMenuItem[data-highlighted], .DropdownMenuCheckboxItem[data-highlighted], .DropdownMenuRadioItem[data-highlighted], .DropdownMenuSubTrigger[data-highlighted] { - background-color: ${colors.lightGrey}; - color: ${colors.darkGrey}; + background-color: ${colors.greyLight}; + color: ${colors.greyDark}; } .DropdownMenuLabel { diff --git a/src/components/seller/products/SellerProductsTable.tsx b/src/components/seller/products/SellerProductsTable.tsx index 5053aad9d..c985d4ba7 100644 --- a/src/components/seller/products/SellerProductsTable.tsx +++ b/src/components/seller/products/SellerProductsTable.tsx @@ -60,7 +60,7 @@ import OfferVariation from "./OfferVariation"; import { SalesChannels } from "./types"; const TagWrapper = styled.div` - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; display: inline-block; padding: 0.5em 0.75em; font-size: 0.75rem; @@ -155,7 +155,7 @@ const Table = styled.table` border-collapse: collapse; .th { font-weight: 600; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; :not([data-sortable]) { cursor: default !important; } @@ -215,7 +215,7 @@ const Table = styled.table` .tr { &:hover { .td { - background-color: ${colors.darkGrey}08; + background-color: ${colors.greyDark}08; cursor: pointer; } } @@ -262,7 +262,7 @@ const Pagination = styled.div` `; const Span = styled.span` font-size: 0.75rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; &:not(:last-of-type) { margin-right: 1rem; } @@ -671,7 +671,7 @@ export default function SellerProductsTable({ {offer?.additional?.variants.length} variants @@ -1194,7 +1194,7 @@ export default function SellerProductsTable({ : colors.black, background: pageNumber === pageIndex - ? colors.lightGrey + ? colors.greyLight : "transparent" }} onClick={() => gotoPage(pageNumber)} diff --git a/src/components/seller/salesChannels/SalesChannelCard.tsx b/src/components/seller/salesChannels/SalesChannelCard.tsx index 42e19d5e0..1870f006e 100644 --- a/src/components/seller/salesChannels/SalesChannelCard.tsx +++ b/src/components/seller/salesChannels/SalesChannelCard.tsx @@ -26,7 +26,7 @@ const Time = styled(Grid)` position: absolute; top: 0.5rem; right: 0.5rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; padding: 0.25rem 0.5rem; `; @@ -42,7 +42,7 @@ export const SalesChannelCard: React.FC = ({ diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx index 20c499c40..961467dc4 100644 --- a/src/components/settings/index.tsx +++ b/src/components/settings/index.tsx @@ -32,7 +32,7 @@ const Menu = styled.div` const MenuFlyout = styled(AutoColumn)` min-width: 20.125rem; background-color: ${colors.white}; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), @@ -76,7 +76,7 @@ const MobileMenuWrapper = styled(Column)<{ open: boolean }>` height: min-content; width: 100%; padding: 8px 16px 24px; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; overflow: hidden; position: absolute; bottom: ${({ open }) => (open ? `100vh` : 0)}; diff --git a/src/components/settings/maxSlippageSettings/index.tsx b/src/components/settings/maxSlippageSettings/index.tsx index 98e6cfab0..d7544158e 100644 --- a/src/components/settings/maxSlippageSettings/index.tsx +++ b/src/components/settings/maxSlippageSettings/index.tsx @@ -31,7 +31,7 @@ const Option = styled(Grid)<{ isActive: boolean }>` const Switch = styled(Grid)` width: auto; padding: 4px; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; border-radius: 16px; `; @@ -112,7 +112,7 @@ export default function MaxSlippageSettings({ onToggle={() => setIsOpen(!isOpen)} header={ - + <>Max slippage ` /* TODO: div { color: ${({ theme, displayWarning }) => - displayWarning ? theme.accentWarning : colors.lightGrey}; + displayWarning ? theme.accentWarning : colors.greyLight}; } background-color: ${({ theme, displayWarning }) => diff --git a/src/components/settings/routerPreferenceSettings/index.tsx b/src/components/settings/routerPreferenceSettings/index.tsx index 4ae282839..63ceb80cb 100644 --- a/src/components/settings/routerPreferenceSettings/index.tsx +++ b/src/components/settings/routerPreferenceSettings/index.tsx @@ -71,7 +71,7 @@ export default function RouterPreferenceSettings() { - + <>Local routing diff --git a/src/components/settings/transactionDeadlineSettings/index.tsx b/src/components/settings/transactionDeadlineSettings/index.tsx index 605a41f6d..078032107 100644 --- a/src/components/settings/transactionDeadlineSettings/index.tsx +++ b/src/components/settings/transactionDeadlineSettings/index.tsx @@ -69,7 +69,7 @@ export default function TransactionDeadlineSettings() { testId="transaction-deadline-settings" header={ - + <>Transaction deadline { if (active && callback) { callback(active - 1); @@ -111,7 +111,7 @@ export default function MultiSteps({ { diff --git a/src/components/step/Step.styles.ts b/src/components/step/Step.styles.ts index 332f949e0..24df12b46 100644 --- a/src/components/step/Step.styles.ts +++ b/src/components/step/Step.styles.ts @@ -50,9 +50,9 @@ export const StepStyle = styled.div<{ ${!disabled && css` &:hover { - background: ${colors.lightGrey}; + background: ${colors.greyLight}; &:before { - background: ${colors.darkGrey}; + background: ${colors.greyDark}; width: 0.5rem; height: 0.5rem; } @@ -151,7 +151,7 @@ export const MultiStepStyle = styled.div<{ $isLteS: boolean }>` font-weight: 600; font-size: 0.75rem; line-height: 1.5; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; } `; diff --git a/src/components/swap/SwapDetailsDropdown.tsx b/src/components/swap/SwapDetailsDropdown.tsx index 1b45720b8..a28eb423a 100644 --- a/src/components/swap/SwapDetailsDropdown.tsx +++ b/src/components/swap/SwapDetailsDropdown.tsx @@ -55,7 +55,7 @@ const StyledPollingDot = styled.div` min-width: 8px; border-radius: 50%; position: relative; - /* background-color: ${colors.lightGrey}; */ + /* background-color: ${colors.greyLight}; */ transition: 250ms ease background-color; `; diff --git a/src/components/swap/SwapModalHeaderAmount.tsx b/src/components/swap/SwapModalHeaderAmount.tsx index fe827cb31..369dc01d8 100644 --- a/src/components/swap/SwapModalHeaderAmount.tsx +++ b/src/components/swap/SwapModalHeaderAmount.tsx @@ -68,7 +68,7 @@ export function SwapModalHeaderAmount({ {formatReviewSwapCurrencyAmount(amount)} {currency?.symbol} {usdAmount && ( - + {formatNumber(usdAmount, NumberType.FiatTokenQuantity)} )} diff --git a/src/components/swap/styled.tsx b/src/components/swap/styled.tsx index 0a9d187fd..67ab9f7c8 100644 --- a/src/components/swap/styled.tsx +++ b/src/components/swap/styled.tsx @@ -23,9 +23,9 @@ export const PageWrapper = styled.div` // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility. export const SwapWrapper = styled.main<{ chainId?: number }>` position: relative; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border-radius: 24px; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; padding: 8px; padding-top: 12px; box-shadow: ${({ chainId }) => @@ -34,7 +34,7 @@ export const SwapWrapper = styled.main<{ chainId?: number }>` transition: transform 250ms ease; &:hover { - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; } `; @@ -45,9 +45,9 @@ export const UniswapPopoverContainer = styled.div` font-size: 0.75rem; line-height: 16px; word-break: break-word; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border-radius: 20px; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)}; position: relative; overflow: hidden; @@ -132,11 +132,11 @@ export const UniswapXOptInLargeContainer = styled.div<{ visible: boolean }>` export const SwapMustache = styled.main` position: relative; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; border-radius: 16px; border-top-left-radius: 0; border-top-right-radius: 0; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; border-top-width: 0; padding: 18px; padding-top: calc(12px + 18px); @@ -165,7 +165,7 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>` margin-bottom: -18px; margin-left: auto; margin-right: auto; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; border: 4px solid; border-color: ${colors.white}; diff --git a/src/components/timeline/Timeline.tsx b/src/components/timeline/Timeline.tsx index e80315b2b..0fc6bc57d 100644 --- a/src/components/timeline/Timeline.tsx +++ b/src/components/timeline/Timeline.tsx @@ -38,7 +38,7 @@ const StyledStatus = styled.span` `; const StyledDate = styled.span` - color: ${colors.darkGrey}; + color: ${colors.greyDark}; font-size: 0.75rem; `; diff --git a/src/components/toasts/common/ErrorToast.tsx b/src/components/toasts/common/ErrorToast.tsx index 7cd1d2ec9..6d4c858a4 100644 --- a/src/components/toasts/common/ErrorToast.tsx +++ b/src/components/toasts/common/ErrorToast.tsx @@ -9,7 +9,7 @@ import { Grid } from "../../ui/Grid"; const Close = styled(X)` line { - stroke: ${colors.darkGrey}; + stroke: ${colors.greyDark}; } `; const StyledButton = styled(Button)` diff --git a/src/components/toasts/common/LoadingToast.tsx b/src/components/toasts/common/LoadingToast.tsx index 5a9fa9ec3..84c759aaf 100644 --- a/src/components/toasts/common/LoadingToast.tsx +++ b/src/components/toasts/common/LoadingToast.tsx @@ -10,7 +10,7 @@ import Loading from "../../ui/Loading"; const Close = styled(X)` line { - stroke: ${colors.darkGrey}; + stroke: ${colors.greyDark}; } `; const StyledButton = styled(Button)` diff --git a/src/components/toasts/common/SuccessToast.tsx b/src/components/toasts/common/SuccessToast.tsx index 3450f9140..a71566c82 100644 --- a/src/components/toasts/common/SuccessToast.tsx +++ b/src/components/toasts/common/SuccessToast.tsx @@ -9,7 +9,7 @@ import { Grid } from "../../ui/Grid"; const Close = styled(X)` line { - stroke: ${colors.darkGrey}; + stroke: ${colors.greyDark}; } `; const StyledButton = styled(Button)` diff --git a/src/components/toggle/index.tsx b/src/components/toggle/index.tsx index c5ba435a0..5838ad85a 100644 --- a/src/components/toggle/index.tsx +++ b/src/components/toggle/index.tsx @@ -8,7 +8,7 @@ const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>` background: ${({ isActive }) => isActive ? colors.secondary : "transparent"}; border: ${({ isActive }) => - isActive ? "1px solid transparent" : `1px solid ${colors.darkGrey}`}; + isActive ? "1px solid transparent" : `1px solid ${colors.greyDark}`}; border-radius: 20px; cursor: pointer; display: flex; @@ -47,7 +47,7 @@ const ToggleElementHoverStyle = (hasBgColor: boolean, isActive?: boolean) => : { background: isActive ? lighten(0.15, colors.secondary) - : darken(0.05, colors.lightGrey), + : darken(0.05, colors.greyLight), color: isActive ? colors.white : colors.black }; @@ -64,8 +64,8 @@ const ToggleElement = styled.span<{ isActive ? bgColor ?? lighten(0.09, colors.secondary) : bgColor - ? colors.lightGrey - : colors.darkGrey}; + ? colors.greyLight + : colors.greyDark}; border-radius: 50%; height: 24px; &:hover { diff --git a/src/components/tokenSafety/TokenSafetyIcon.tsx b/src/components/tokenSafety/TokenSafetyIcon.tsx index a1e1e0a00..0b7b03d3f 100644 --- a/src/components/tokenSafety/TokenSafetyIcon.tsx +++ b/src/components/tokenSafety/TokenSafetyIcon.tsx @@ -21,7 +21,7 @@ const WarningIcon = styled(WarningTriangle)<{ size?: string }>` const BlockedIcon = styled(Prohibit)<{ size?: string }>` ${WarningIconStyle} - color: ${colors.lightGrey}; + color: ${colors.greyLight}; `; export default function TokenSafetyIcon({ diff --git a/src/components/tokenSafety/index.tsx b/src/components/tokenSafety/index.tsx index f847d133d..1f6ba91bd 100644 --- a/src/components/tokenSafety/index.tsx +++ b/src/components/tokenSafety/index.tsx @@ -69,11 +69,11 @@ const StyledCancelButton = styled(Button)` `; const StyledCloseButton = styled(StyledButton)` - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; /* color: ${({ theme }) => theme.textPrimary}; */ &:hover { - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; opacity: 0.6; transition: opacity 250ms ease; } diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx index 0ecb3b484..d59fd3bcd 100644 --- a/src/components/tooltip/Tooltip.tsx +++ b/src/components/tooltip/Tooltip.tsx @@ -43,7 +43,7 @@ interface Props extends Omit { const Button = styled.button` ${() => Styles.button}; display: flex; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; background-color: transparent; &:hover { color: ${colors.black}; diff --git a/src/components/transactions/TransactionsTable.styles.ts b/src/components/transactions/TransactionsTable.styles.ts index bbdf47f33..ec4a25550 100644 --- a/src/components/transactions/TransactionsTable.styles.ts +++ b/src/components/transactions/TransactionsTable.styles.ts @@ -8,7 +8,7 @@ export const Table = styled.table` border-collapse: collapse; th { font-weight: 600; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; :not([data-sortable]) { cursor: default !important; } @@ -46,7 +46,7 @@ export const Table = styled.table` tr { &:hover { td { - background-color: ${colors.darkGrey}08; + background-color: ${colors.greyDark}08; cursor: pointer; } } @@ -99,7 +99,7 @@ export const Pagination = styled.div` export const Span = styled.span` font-size: 0.75rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; &:not(:last-of-type) { margin-right: 1rem; } diff --git a/src/components/transactions/TransactionsTable.tsx b/src/components/transactions/TransactionsTable.tsx index f6a7c87b6..eca52da92 100644 --- a/src/components/transactions/TransactionsTable.tsx +++ b/src/components/transactions/TransactionsTable.tsx @@ -278,7 +278,7 @@ export default function TransactionsTable({ transactions }: Props) { : colors.black, background: pageNumber === pageIndex - ? colors.lightGrey + ? colors.greyLight : "transparent" }} onClick={() => gotoPage(pageNumber)} diff --git a/src/components/ui/ClearButton.tsx b/src/components/ui/ClearButton.tsx index 03ddaeb31..f86a94a0a 100644 --- a/src/components/ui/ClearButton.tsx +++ b/src/components/ui/ClearButton.tsx @@ -15,7 +15,7 @@ const CrossIcon = (props: Record) => ( ); export const ClearButton = styled(CrossIcon)` position: absolute; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; top: 0; right: 0; height: 100%; diff --git a/src/components/ui/Image.tsx b/src/components/ui/Image.tsx index 80e88b5fb..0c44852f2 100644 --- a/src/components/ui/Image.tsx +++ b/src/components/ui/Image.tsx @@ -55,7 +55,7 @@ const ImagePlaceholder = styled.div` top: 0; height: 100%; width: 100%; - background-color: ${colors.darkGrey}; + background-color: ${colors.greyDark}; display: flex; flex-direction: column; justify-content: center; diff --git a/src/components/ui/InputGroup.tsx b/src/components/ui/InputGroup.tsx index e32c07f7d..4cb1a41cc 100644 --- a/src/components/ui/InputGroup.tsx +++ b/src/components/ui/InputGroup.tsx @@ -32,7 +32,7 @@ const TitleContainer = styled.div` const SubTitleContainer = styled.div` > p { font-size: 0.75rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; margin: 0 0 0.75rem 0; } `; diff --git a/src/components/ui/Video.tsx b/src/components/ui/Video.tsx index 8434d36c2..766eb849e 100644 --- a/src/components/ui/Video.tsx +++ b/src/components/ui/Video.tsx @@ -75,7 +75,7 @@ const VideoPlaceholder = styled.div<{ $position?: CSSProperties["position"] }>` top: 0; height: 100%; width: 100%; - background-color: ${colors.darkGrey}; + background-color: ${colors.greyDark}; display: flex; flex-direction: column; justify-content: center; diff --git a/src/lib/styles/GlobalStyle.tsx b/src/lib/styles/GlobalStyle.tsx index f0e3ed8e3..299d12d9c 100644 --- a/src/lib/styles/GlobalStyle.tsx +++ b/src/lib/styles/GlobalStyle.tsx @@ -47,21 +47,19 @@ const GlobalStyle = createGlobalStyle<{ --headerTextColor: ${(props) => props.$headerTextColor && !props.$withBosonStyles ? props.$headerTextColor - : colors.darkGrey}; + : colors.greyDark}; --primary: ${(props) => props.$primaryBgColor && !props.$withBosonStyles ? props.$primaryBgColor - : colors.primary}; + : colors.green}; --secondary: ${(props) => props.$secondaryBgColor && !props.$withBosonStyles ? props.$secondaryBgColor - : colors.lightGrey}; + : colors.greyLight}; --accent: ${(props) => props.$accentColor && !props.$withBosonStyles ? props.$accentColor - : colors.accent}; - --accentNoDefault : ${(props) => - props.$accentColor && !props.$withBosonStyles ? props.$accentColor : ""}; + : colors.violet}; --accentDark: ${(props) => props.$accentColor && !props.$withBosonStyles ? props.$accentColor @@ -73,11 +71,11 @@ const GlobalStyle = createGlobalStyle<{ --primaryBgColor: ${(props) => props.$primaryBgColor && !props.$withBosonStyles ? props.$primaryBgColor - : colors.primaryBgColor}; + : colors.white}; --secondaryBgColor: ${(props) => props.$secondaryBgColor && !props.$withBosonStyles ? props.$secondaryBgColor - : colors.secondary}; + : colors.violet}; --footerBgColor: ${(props) => props.$footerBgColor && !props.$withBosonStyles ? props.$footerBgColor @@ -89,7 +87,7 @@ const GlobalStyle = createGlobalStyle<{ --buttonBgColor: ${(props) => props.$buttonBgColor && !props.$withBosonStyles ? props.$buttonBgColor - : colors.primary}; + : colors.green}; --buttonTextColor: ${(props) => props.$buttonTextColor && !props.$withBosonStyles ? props.$buttonTextColor diff --git a/src/lib/styles/colors.ts b/src/lib/styles/colors.ts index 99c3d346c..d314aa306 100644 --- a/src/lib/styles/colors.ts +++ b/src/lib/styles/colors.ts @@ -1,3 +1 @@ -import { theme } from "@bosonprotocol/react-kit"; - -export const colors = theme.colors.light; +export { colors } from "@bosonprotocol/react-kit"; diff --git a/src/lib/styles/preventCustomStoreStyles.ts b/src/lib/styles/preventCustomStoreStyles.ts index 52105fc3f..3be2da4a0 100644 --- a/src/lib/styles/preventCustomStoreStyles.ts +++ b/src/lib/styles/preventCustomStoreStyles.ts @@ -4,18 +4,17 @@ import { colors } from "./colors"; export const PreventCustomStoreStyles = styled.div` --headerBgColor: ${colors.white}; - --headerTextColor: ${colors.darkGrey}; - --primary: ${colors.primary}; - --secondary: ${colors.lightGrey}; - --accent: ${colors.accent}; - --accentNoDefault: initial; + --headerTextColor: ${colors.greyDark}; + --primary: ${colors.green}; + --secondary: ${colors.greyLight}; + --accent: ${colors.violet}; --accentDark: ${colors.arsenic}; --textColor: ${colors.black}; - --primaryBgColor: ${colors.primaryBgColor}; - --secondaryBgColor: ${colors.secondary}; + --primaryBgColor: ${colors.white}; + --secondaryBgColor: ${colors.violet}; --footerBgColor: ${colors.black}; --footerTextColor: ${colors.white}; - --buttonBgColor: ${colors.primary}; + --buttonBgColor: ${colors.green}; --buttonTextColor: ${colors.black}; --upperCardBgColor: ${colors.white}; --lowerCardBgColor: ${colors.white}; diff --git a/src/lib/utils/hooks/useCSSVariable.ts b/src/lib/utils/hooks/useCSSVariable.ts index 0581b33f3..9e19d2d33 100644 --- a/src/lib/utils/hooks/useCSSVariable.ts +++ b/src/lib/utils/hooks/useCSSVariable.ts @@ -8,7 +8,6 @@ export const useCSSVariable = ( | "--primary" | "--secondary" | "--accent" - | "--accentNoDefault" | "--accentDark" | "--textColor" | "--primaryBgColor" @@ -22,9 +21,13 @@ export const useCSSVariable = ( ) => { const [value, setValue] = useState(); useEffect(() => { - setValue( - getComputedStyle(document.documentElement).getPropertyValue(variableName) - ); + const computedCssVar = getComputedStyle( + document.documentElement + ).getPropertyValue(variableName); + if (!computedCssVar) { + console.error(`CSS variable ${variableName} is not defined`); + } + setValue(computedCssVar); }, [variableName]); return value; }; diff --git a/src/pages/chat/Chat.tsx b/src/pages/chat/Chat.tsx index 10bce590f..39238f91f 100644 --- a/src/pages/chat/Chat.tsx +++ b/src/pages/chat/Chat.tsx @@ -60,7 +60,7 @@ const SimpleMessage = styled.p` width: 100%; height: 100%; padding: 1rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; `; export default function Chat() { diff --git a/src/pages/chat/components/ExchangeSidePreview.tsx b/src/pages/chat/components/ExchangeSidePreview.tsx index 559920b19..203134c9f 100644 --- a/src/pages/chat/components/ExchangeSidePreview.tsx +++ b/src/pages/chat/components/ExchangeSidePreview.tsx @@ -70,7 +70,7 @@ const Container = styled.div<{ $disputeOpen: boolean }>` right: ${({ $disputeOpen }) => ($disputeOpen ? "0" : "-160vw")}; transition: 400ms; width: ${({ $disputeOpen }) => $disputeOpen && "100vw"}; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; ${breakpoint.m} { padding-top: 0; width: 100%; @@ -118,7 +118,7 @@ const sectionStyles = css` ${breakpoint.l} { background: ${colors.white}; } - background: ${colors.lightGrey}; + background: ${colors.greyLight}; `; const Section = styled.div` ${sectionStyles}; diff --git a/src/pages/chat/components/Message.tsx b/src/pages/chat/components/Message.tsx index 66ea0010a..c6ca3e746 100644 --- a/src/pages/chat/components/Message.tsx +++ b/src/pages/chat/components/Message.tsx @@ -121,7 +121,7 @@ const Bottom = styled.div<{ $isLeftAligned: boolean }>` align-items: center; * { color: ${({ $isLeftAligned }) => - $isLeftAligned ? colors.lightGrey : colors.darkGrey}; + $isLeftAligned ? colors.greyLight : colors.greyDark}; font-size: 0.75rem; } `; diff --git a/src/pages/chat/components/MessageSeparator.tsx b/src/pages/chat/components/MessageSeparator.tsx index 2126843ce..fdc5d8b27 100644 --- a/src/pages/chat/components/MessageSeparator.tsx +++ b/src/pages/chat/components/MessageSeparator.tsx @@ -24,7 +24,7 @@ const Separator = styled.div` font-size: 0.75rem; &:before { position: absolute; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; left: -0.625rem; height: 100%; width: 0.625rem; @@ -32,7 +32,7 @@ const Separator = styled.div` } &:after { position: absolute; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; right: -0.625rem; height: 100%; width: 0.625rem; diff --git a/src/pages/chat/components/MessagesDisputesToggle.tsx b/src/pages/chat/components/MessagesDisputesToggle.tsx index d41c2f4cf..4f1abcdee 100644 --- a/src/pages/chat/components/MessagesDisputesToggle.tsx +++ b/src/pages/chat/components/MessagesDisputesToggle.tsx @@ -12,7 +12,7 @@ const StyledButton = styled(Button)<{ $isActive: boolean }>` css` && { border-color: transparent; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; } `} `; diff --git a/src/pages/chat/components/ProgressBar.tsx b/src/pages/chat/components/ProgressBar.tsx index d571e48ad..ea20810e1 100644 --- a/src/pages/chat/components/ProgressBar.tsx +++ b/src/pages/chat/components/ProgressBar.tsx @@ -24,7 +24,7 @@ const commonStyles = css` right: 0; top: 0; bottom: 0; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; padding: 0.5rem; width: 100%; `; @@ -39,7 +39,7 @@ const Back = styled.div<{ $backgroundColor: CSSProperties["background"] }>` const Front = styled.div<{ $progress: number }>` ${commonStyles}; color: ${colors.black}; - background: ${darken(0.05, colors.lightGrey)}; + background: ${darken(0.05, colors.greyLight)}; clip-path: inset(0 0 0 ${({ $progress }) => $progress}%); transition: clip-path 1s linear; `; diff --git a/src/pages/chat/components/UploadForm/UploadForm.tsx b/src/pages/chat/components/UploadForm/UploadForm.tsx index b1ec88437..59e66fea7 100644 --- a/src/pages/chat/components/UploadForm/UploadForm.tsx +++ b/src/pages/chat/components/UploadForm/UploadForm.tsx @@ -17,7 +17,7 @@ export default function UploadForm() { - + File format: PDF, PNG, JPG
Max. file size: {MAX_FILE_SIZE / (1024 * 1024)}MB diff --git a/src/pages/chat/components/conversation/ChatConversation.tsx b/src/pages/chat/components/conversation/ChatConversation.tsx index 6c11f7860..afc8577ba 100644 --- a/src/pages/chat/components/conversation/ChatConversation.tsx +++ b/src/pages/chat/components/conversation/ChatConversation.tsx @@ -119,7 +119,7 @@ const SimpleMessage = styled.p` width: 100%; height: 100%; padding: 1rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; `; const GridHeader = styled.div` diff --git a/src/pages/chat/components/conversation/ChatInfoBox/DaysLeftToResolve.tsx b/src/pages/chat/components/conversation/ChatInfoBox/DaysLeftToResolve.tsx index 849a82dc5..f4067aaae 100644 --- a/src/pages/chat/components/conversation/ChatInfoBox/DaysLeftToResolve.tsx +++ b/src/pages/chat/components/conversation/ChatInfoBox/DaysLeftToResolve.tsx @@ -42,7 +42,7 @@ export const DaysLeftToResolve: React.FC = ({ {showText && ( diff --git a/src/pages/chat/components/conversation/ChatInfoBox/DrHasDecided.tsx b/src/pages/chat/components/conversation/ChatInfoBox/DrHasDecided.tsx index 7cb8d40b1..07558d8da 100644 --- a/src/pages/chat/components/conversation/ChatInfoBox/DrHasDecided.tsx +++ b/src/pages/chat/components/conversation/ChatInfoBox/DrHasDecided.tsx @@ -56,7 +56,7 @@ export const DrHasDecided: React.FC = ({ diff --git a/src/pages/chat/components/conversation/ChatInfoBox/ProposalButtons.tsx b/src/pages/chat/components/conversation/ChatInfoBox/ProposalButtons.tsx index 8b63ed83d..beb18eba3 100644 --- a/src/pages/chat/components/conversation/ChatInfoBox/ProposalButtons.tsx +++ b/src/pages/chat/components/conversation/ChatInfoBox/ProposalButtons.tsx @@ -44,7 +44,7 @@ export const ProposalButtons: React.FC = ({ {showText && ( diff --git a/src/pages/chat/components/conversation/ChatInfoBox/YouHaveAccepted.tsx b/src/pages/chat/components/conversation/ChatInfoBox/YouHaveAccepted.tsx index 079aae6d9..3665fd1a3 100644 --- a/src/pages/chat/components/conversation/ChatInfoBox/YouHaveAccepted.tsx +++ b/src/pages/chat/components/conversation/ChatInfoBox/YouHaveAccepted.tsx @@ -55,7 +55,7 @@ export const YouHaveAccepted: React.FC = ({ diff --git a/src/pages/chat/components/conversation/ChatInput.tsx b/src/pages/chat/components/conversation/ChatInput.tsx index db2902517..b68e20fed 100644 --- a/src/pages/chat/components/conversation/ChatInput.tsx +++ b/src/pages/chat/components/conversation/ChatInput.tsx @@ -49,7 +49,7 @@ const InputWrapper = styled.div` const Input = styled.div` width: 100%; font-size: 1rem; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; height: max-content; font-family: ${defaultFontFamily}; font-style: normal; diff --git a/src/pages/chat/components/conversation/Messages.tsx b/src/pages/chat/components/conversation/Messages.tsx index aaf3e891d..4a68e2444 100644 --- a/src/pages/chat/components/conversation/Messages.tsx +++ b/src/pages/chat/components/conversation/Messages.tsx @@ -16,7 +16,7 @@ import MessageSeparator from "../MessageSeparator"; import { SellerComponent } from "./SellerComponent"; const Container = styled.div<{ $overflow: string }>` - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; overflow: ${({ $overflow }) => $overflow}; display: flex; flex-direction: column-reverse; @@ -25,7 +25,7 @@ const Container = styled.div<{ $overflow: string }>` const LoadingContainer = styled.div` display: flex; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; justify-content: center; align-items: center; width: 100%; @@ -39,7 +39,7 @@ const Conversation = styled.div<{ $alignStart: boolean }>` align-items: ${({ $alignStart }) => $alignStart ? "flex-start" : "flex-end"}; flex-grow: 1; - background-color: ${colors.lightGrey}; + background-color: ${colors.greyLight}; padding-bottom: 1.875rem; position: relative; `; diff --git a/src/pages/common/PrivacyPolicy.tsx b/src/pages/common/PrivacyPolicy.tsx index 9e8dffb0f..79aadf8cf 100644 --- a/src/pages/common/PrivacyPolicy.tsx +++ b/src/pages/common/PrivacyPolicy.tsx @@ -121,7 +121,7 @@ const Table = styled.table` } &:hover { td { - background: ${colors.lightGrey}; + background: ${colors.greyLight}; } } } diff --git a/src/pages/common/PrivacyPolicyDrCenter.tsx b/src/pages/common/PrivacyPolicyDrCenter.tsx index b4d7e5e54..188ee5a5f 100644 --- a/src/pages/common/PrivacyPolicyDrCenter.tsx +++ b/src/pages/common/PrivacyPolicyDrCenter.tsx @@ -121,7 +121,7 @@ const Table = styled.table` } &:hover { td { - background: ${colors.lightGrey}; + background: ${colors.greyLight}; } } } diff --git a/src/pages/create-product/AgreeToTermsAndSellerAgreement.tsx b/src/pages/create-product/AgreeToTermsAndSellerAgreement.tsx index 410ee4d70..8205323d1 100644 --- a/src/pages/create-product/AgreeToTermsAndSellerAgreement.tsx +++ b/src/pages/create-product/AgreeToTermsAndSellerAgreement.tsx @@ -12,7 +12,7 @@ const VariantsGrid = styled.div` grid-template-columns: repeat(3, 1fr); margin: 1rem 0 2rem 0; * { - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; padding: 0.5rem; } `; diff --git a/src/pages/create-product/congratulations/CardCTA.tsx b/src/pages/create-product/congratulations/CardCTA.tsx index 44d66d665..007955394 100644 --- a/src/pages/create-product/congratulations/CardCTA.tsx +++ b/src/pages/create-product/congratulations/CardCTA.tsx @@ -22,7 +22,7 @@ const StyledGrid = styled(Grid)<{ $cardTheme: CardCTAProps["cardTheme"] }>` `; } return css` - background: ${colors.lightGrey}; + background: ${colors.greyLight}; `; }} `; diff --git a/src/pages/create-product/congratulations/CongratulationsPage.tsx b/src/pages/create-product/congratulations/CongratulationsPage.tsx index 1b1e1fa30..9e499bc69 100644 --- a/src/pages/create-product/congratulations/CongratulationsPage.tsx +++ b/src/pages/create-product/congratulations/CongratulationsPage.tsx @@ -8,7 +8,7 @@ import { Congratulations, CongratulationsProps } from "./Congratulations"; type CongratulationsPageProps = CongratulationsProps; const Background = styled.div` - background: ${colors.lightGrey}; + background: ${colors.greyLight}; width: 100vw; transform: translate(-50%); margin-left: 50%; diff --git a/src/pages/custom-store/manage/ManageStoreFrontsPage.tsx b/src/pages/custom-store/manage/ManageStoreFrontsPage.tsx index eedb78d9d..dbc95e234 100644 --- a/src/pages/custom-store/manage/ManageStoreFrontsPage.tsx +++ b/src/pages/custom-store/manage/ManageStoreFrontsPage.tsx @@ -103,7 +103,7 @@ const DeleteButton = ({ const StoreFrontItem = styled.li` list-style-type: none; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; padding: 2rem; width: 100%; `; diff --git a/src/pages/custom-store/store-fields.ts b/src/pages/custom-store/store-fields.ts index 5b870541e..19a45b26e 100644 --- a/src/pages/custom-store/store-fields.ts +++ b/src/pages/custom-store/store-fields.ts @@ -515,7 +515,7 @@ export const initialValues: Yup.InferType = { [storeFields.headerBgColor]: colors.white, [storeFields.headerTextColor]: colors.black, [storeFields.primaryBgColor]: colors.white, - [storeFields.secondaryBgColor]: colors.lightGrey, + [storeFields.secondaryBgColor]: colors.greyLight, [storeFields.accentColor]: "", [storeFields.textColor]: colors.black, // [storeFields.footerBgColor]: colors.black, diff --git a/src/pages/custom-store/styles.tsx b/src/pages/custom-store/styles.tsx index fad2b3c47..9d9975f4b 100644 --- a/src/pages/custom-store/styles.tsx +++ b/src/pages/custom-store/styles.tsx @@ -28,7 +28,7 @@ export const FieldDescription = styled(Typography)` font-size: 0.75rem; line-height: 150%; font-feature-settings: "zero" on; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; `; export const gapBetweenInputs = "2rem"; export const subFieldsMarginLeft = "4rem"; diff --git a/src/pages/dcl/DCLPage.tsx b/src/pages/dcl/DCLPage.tsx index bbb8fa148..e450ba1d3 100644 --- a/src/pages/dcl/DCLPage.tsx +++ b/src/pages/dcl/DCLPage.tsx @@ -60,7 +60,7 @@ const iconStyle: CSSProperties = { margin: "1.1875rem", position: "absolute", top: 0, - color: colors.darkGrey + color: colors.greyDark }; const iconSize = 32; diff --git a/src/pages/dcl/steps/details/DetailsStep.tsx b/src/pages/dcl/steps/details/DetailsStep.tsx index 7e106547b..8b47554aa 100644 --- a/src/pages/dcl/steps/details/DetailsStep.tsx +++ b/src/pages/dcl/steps/details/DetailsStep.tsx @@ -91,7 +91,7 @@ export const DetailsStep: React.FC = ({ goToNextStep }) => { fontWeight="600" fontSize="1rem" margin="1.5rem 0" - color={colors.darkGrey} + color={colors.greyDark} > Your own land @@ -126,7 +126,7 @@ export const DetailsStep: React.FC = ({ goToNextStep }) => { fontWeight="600" fontSize="1rem" margin="1.5rem 0" - color={colors.darkGrey} + color={colors.greyDark} > Boson Boulevard diff --git a/src/pages/dispute-centre/DisputeCenterPage.tsx b/src/pages/dispute-centre/DisputeCenterPage.tsx index 2bcbe16a1..90f31e6dd 100644 --- a/src/pages/dispute-centre/DisputeCenterPage.tsx +++ b/src/pages/dispute-centre/DisputeCenterPage.tsx @@ -26,7 +26,7 @@ import { useExchanges } from "../../lib/utils/hooks/useExchanges"; import { goToViewMode, ViewMode } from "../../lib/viewMode"; const DisputeListHeader = styled.div` - background: ${colors.lightGrey}; + background: ${colors.greyLight}; width: 100vw; translate: -50%; margin-left: 50%; diff --git a/src/pages/dispute-centre/RaiseDisputePage.tsx b/src/pages/dispute-centre/RaiseDisputePage.tsx index e16e6bc83..66f906e45 100644 --- a/src/pages/dispute-centre/RaiseDisputePage.tsx +++ b/src/pages/dispute-centre/RaiseDisputePage.tsx @@ -83,7 +83,7 @@ const ItemWidget = styled.div``; const DisputeContainer = styled(Grid)` height: 100%; - background: ${colors.lightGrey}; + background: ${colors.greyLight}; `; const GetStartedBox = styled.div<{ isLteS: boolean }>` @@ -214,7 +214,7 @@ function RaiseDisputePage() { { goToViewMode( diff --git a/src/pages/explore/ExploreSelect.tsx b/src/pages/explore/ExploreSelect.tsx index 439b727d8..3fc8995c6 100644 --- a/src/pages/explore/ExploreSelect.tsx +++ b/src/pages/explore/ExploreSelect.tsx @@ -82,7 +82,7 @@ const customStyles: StylesConfig< cursor: state.isDisabled ? "not-allowed" : "pointer", opacity: state.isDisabled ? "0.5" : "1", background: - state.isSelected || state.isFocused ? colors.lightGrey : colors.white, + state.isSelected || state.isFocused ? colors.greyLight : colors.white, color: state.isSelected ? colors.secondary : colors.black }), indicatorSeparator: () => ({ diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx index 9fe233db2..c77f9c1b0 100644 --- a/src/pages/landing/Landing.tsx +++ b/src/pages/landing/Landing.tsx @@ -88,7 +88,7 @@ const ExploreProductsButton = styled(BosonButton)` `; const LandingContainer = styled.div` - border: 2px solid ${colors.lightGrey}; + border: 2px solid ${colors.greyLight}; border-radius: 0.5rem; background-color: ${colors.white}; margin-bottom: 3.813rem; diff --git a/src/pages/profile/ProfilePage.styles.tsx b/src/pages/profile/ProfilePage.styles.tsx index 1d9cd0634..63b988f37 100644 --- a/src/pages/profile/ProfilePage.styles.tsx +++ b/src/pages/profile/ProfilePage.styles.tsx @@ -100,7 +100,7 @@ export const AddressContainer = styled.div` flex-basis: 50%; margin-top: 0.5rem; [data-addrest-text] { - color: ${colors.darkGrey}; + color: ${colors.greyDark}; font-size: 1.25rem; } ${breakpoint.s} { diff --git a/src/pages/profile/common/ReadMore.tsx b/src/pages/profile/common/ReadMore.tsx index 8988340bf..cefbdd196 100644 --- a/src/pages/profile/common/ReadMore.tsx +++ b/src/pages/profile/common/ReadMore.tsx @@ -8,11 +8,11 @@ import { useBreakpoints } from "../../../lib/utils/hooks/useBreakpoints"; const ReadMoreContainer = styled.div` margin-bottom: 2rem; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; `; const ReadMoreButton = styled(Button)` - color: ${colors.darkGrey}; + color: ${colors.greyDark}; outline: none; border: none; padding: 0; diff --git a/src/pages/profile/seller/Seller.tsx b/src/pages/profile/seller/Seller.tsx index 3e3ac18c0..5f29e8a8c 100644 --- a/src/pages/profile/seller/Seller.tsx +++ b/src/pages/profile/seller/Seller.tsx @@ -46,7 +46,7 @@ const SellerCalculationContainer = styled.div` const LensTitle = styled(Typography)` font-weight: 600; margin: 0.5rem 0 0 0; - color: ${colors.darkGrey}; + color: ${colors.greyDark}; ${breakpoint.s} { margin: 0 0.5rem 0 0; font-size: 1rem; @@ -293,7 +293,7 @@ export default function Seller() { tag="p" fontSize={!isLteXS ? "0.75rem" : "1.25rem"} margin="0" - color={colors.darkGrey} + color={colors.greyDark} > Products diff --git a/src/pages/profile/seller/SellerImagesSection.tsx b/src/pages/profile/seller/SellerImagesSection.tsx index 3598f399e..ba492814b 100644 --- a/src/pages/profile/seller/SellerImagesSection.tsx +++ b/src/pages/profile/seller/SellerImagesSection.tsx @@ -72,7 +72,7 @@ const StyledBannerImage = styled.img<{ }>` pointer-events: auto; max-width: 100%; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; transform: none !important; height: 100%; width: 100%; diff --git a/src/pages/profile/seller/SellerImagesSectionView.tsx b/src/pages/profile/seller/SellerImagesSectionView.tsx index fb04921a2..500229369 100644 --- a/src/pages/profile/seller/SellerImagesSectionView.tsx +++ b/src/pages/profile/seller/SellerImagesSectionView.tsx @@ -78,7 +78,7 @@ export const SellerImagesSectionView: React.FC = ({ diff --git a/src/pages/sell/landing/SellerLandingPage.tsx b/src/pages/sell/landing/SellerLandingPage.tsx index 6fd603271..eb5543fd7 100644 --- a/src/pages/sell/landing/SellerLandingPage.tsx +++ b/src/pages/sell/landing/SellerLandingPage.tsx @@ -30,7 +30,7 @@ const Title = styled(Typography)` `; const Background = styled.div` - background: ${colors.lightGrey}; + background: ${colors.greyLight}; width: 100%; margin-bottom: 5rem; `; diff --git a/src/pages/swap/UniswapXOptIn.tsx b/src/pages/swap/UniswapXOptIn.tsx index 7cf302db0..645778977 100644 --- a/src/pages/swap/UniswapXOptIn.tsx +++ b/src/pages/swap/UniswapXOptIn.tsx @@ -35,9 +35,9 @@ export const Arrow = styled.div` z-index: 9998; content: ""; - border: 1px solid ${colors.lightGrey}; + border: 1px solid ${colors.greyLight}; transform: rotate(45deg); - background: ${colors.lightGrey}; + background: ${colors.greyLight}; } &.arrow-top { diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx index b686c3f43..50e21f4b7 100644 --- a/src/pages/swap/index.tsx +++ b/src/pages/swap/index.tsx @@ -99,9 +99,9 @@ export const ArrowContainer = styled.div` `; const SwapSection = styled.div` - /* background-color: ${colors.darkGrey}; */ + /* background-color: ${colors.greyDark}; */ border-radius: 16px; - color: ${colors.lightGrey}; + color: ${colors.greyLight}; font-size: 0.875remå; font-weight: 500; height: 120px; @@ -130,7 +130,7 @@ const SwapSection = styled.div` } &:focus-within:before { - /* border-color: ${opacify(24, colors.lightGrey)}; */ + /* border-color: ${opacify(24, colors.greyLight)}; */ } `; @@ -774,7 +774,7 @@ export function Swap({ style={{ padding: "0 1rem" }} > - +