wip

bosonprotocol · Jan 16, 2025 · a363125 · a363125
1 parent 6b43df7
commit a363125
Show file tree

Hide file tree

Showing 69 changed files with 121 additions and 152 deletions.
diff --git a/src/components/currencyInputPanel/FiatValue.tsx b/src/components/currencyInputPanel/FiatValue.tsx
@@ -23,9 +23,9 @@ export function FiatValue({
     if (!priceImpact) return undefined;
     if (priceImpact.lessThan("0")) return colors.green;
     const severity = warningSeverity(priceImpact);
-    if (severity < 1) return colors.secondary;
+    if (severity < 1) return colors.violet;
     if (severity < 3) return "yellow";
-    return colors.darkRed;
+    return colors.redDark;
   }, [priceImpact]);
 
   if (fiatValue.isLoading) {
@@ -34,7 +34,7 @@ export function FiatValue({
 
   return (
     <Grid gap="1rem">
-      <Typography color={colors.secondary}>
+      <Typography color={colors.violet}>
         {fiatValue.data ? (
           formatNumber(fiatValue.data, NumberType.FiatTokenPrice)
         ) : (

diff --git a/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx
@@ -63,7 +63,7 @@ const CurrencySelect = styled(Button)<{
   min-width: 175px;
   align-items: center;
   background-color: ${({ selected }) =>
-    selected ? colors.black : colors.secondary};
+    selected ? colors.black : colors.violet};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) =>
     selected ? "none" : "0px 6px 10px rgba(0, 0, 0, 0.075)"};
@@ -97,7 +97,7 @@ const CurrencySelect = styled(Button)<{
     &:hover,
     &:active {
       background-color: ${({ selected }) =>
-        selected ? colors.greyDark : colors.secondary};
+        selected ? colors.greyDark : colors.violet};
       color: ${colors.white};
     }
 
@@ -182,7 +182,7 @@ const StyledTokenName = styled.span<{ active?: boolean }>`
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
   border: none;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;

diff --git a/src/components/datepicker/DatePicker.style.tsx b/src/components/datepicker/DatePicker.style.tsx
@@ -170,7 +170,7 @@ export const CalendarDay = styled(CalendarCell)<{
     active &&
     css`
       &:after {
-        background: ${colors.secondary};
+        background: ${colors.violet};
         width: 2.25rem;
         height: 2.25rem;
         z-index: 2;
@@ -185,7 +185,7 @@ export const CalendarDay = styled(CalendarCell)<{
     !active &&
     css`
       &:after {
-        background: ${colors.secondary};
+        background: ${colors.violet};
         width: 1.75rem;
         height: 1.75rem;
         z-index: 2;

diff --git a/src/components/detail/Detail.style.tsx b/src/components/detail/Detail.style.tsx
@@ -504,7 +504,7 @@ export const RaiseProblemButton = styled(Button)`
 export const StyledCancelButton = RaiseProblemButton;
 export const ContactSellerButton = styled(RaiseProblemButton)`
   && {
-    color: ${colors.secondary};
+    color: ${colors.violet};
   }
 `;
 

diff --git a/src/components/dispute/GetStarted.tsx b/src/components/dispute/GetStarted.tsx
@@ -11,7 +11,7 @@ import { Typography } from "../ui/Typography";
 const FormButton = styled.button`
   border: none;
   background: none;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   display: flex;
   align-items: flex-start;
   justify-content: space-between;

diff --git a/src/components/dispute/TellUsMore.tsx b/src/components/dispute/TellUsMore.tsx
@@ -13,7 +13,7 @@ import { Typography } from "../ui/Typography";
 const FormButton = styled.button`
   border: none;
   background: none;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   display: flex;
   align-items: flex-start;
   justify-content: space-between;

diff --git a/src/components/disputeResolver/DisputeResolverAside.tsx b/src/components/disputeResolver/DisputeResolverAside.tsx
@@ -38,7 +38,7 @@ const AsideLink = styled.li<{ $active?: boolean }>`
     color: ${colors.black};
   }
   svg:first-child {
-    fill: ${(props) => (props.$active ? colors.secondary : colors.black)};
+    fill: ${(props) => (props.$active ? colors.violet : colors.black)};
     width: 1.5rem;
     height: 1.5rem;
   }

diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx b/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx
@@ -405,9 +405,7 @@ export default function DisputesTable({ disputes }: Props) {
                   themeVal="blank"
                   style={{
                     color:
-                      pageNumber === pageIndex
-                        ? colors.secondary
-                        : colors.black,
+                      pageNumber === pageIndex ? colors.violet : colors.black,
                     background:
                       pageNumber === pageIndex
                         ? colors.greyLight

diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx b/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx
@@ -333,9 +333,7 @@ export default function DisputesTablePast({ disputes }: Props) {
                   themeVal="blank"
                   style={{
                     color:
-                      pageNumber === pageIndex
-                        ? colors.secondary
-                        : colors.black,
+                      pageNumber === pageIndex ? colors.violet : colors.black,
                     background:
                       pageNumber === pageIndex
                         ? colors.greyLight

diff --git a/src/components/footer/DrCenterFooter.tsx b/src/components/footer/DrCenterFooter.tsx
@@ -60,7 +60,7 @@ const NavigationLinks = styled.nav<INavigationLinks>`
     color: ${colors.white};
   }
   a:hover {
-    color: ${colors.secondary};
+    color: ${colors.violet};
   }
 
   ${breakpoint.xs} {

diff --git a/src/components/form/BaseSelect.tsx b/src/components/form/BaseSelect.tsx
@@ -13,12 +13,12 @@ const customStyles = (error: any) => ({
     padding: "0.4rem 0.25rem",
     boxShadow: "none",
     ":hover": {
-      borderColor: colors.secondary,
+      borderColor: colors.violet,
       borderWidth: "1px"
     },
     background: colors.greyLight,
     border: state.isFocused
-      ? `1px solid ${colors.secondary}`
+      ? `1px solid ${colors.violet}`
       : !checkIfValueIsEmpty(error)
         ? `1px solid ${colors.orange}`
         : `1px solid ${colors.border}`
@@ -38,9 +38,7 @@ const customStyles = (error: any) => ({
         ? colors.greyLight
         : colors.white,
     color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+      state.isOptionSelected || state.isSelected ? colors.violet : colors.black
   }),
   indicatorsContainer: () => ({
     display: "none"

diff --git a/src/components/form/CountrySelect.tsx b/src/components/form/CountrySelect.tsx
@@ -30,12 +30,12 @@ const customStyles = {
       padding: "0.4rem 0.25rem",
       boxShadow: "none",
       ":hover": {
-        borderColor: colors.secondary,
+        borderColor: colors.violet,
         borderWidth: "1px"
       },
       background: colors.greyLight,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
+        ? `1px solid ${colors.violet}`
         : `1px solid ${colors.border}`,
       ...before
     };
@@ -55,9 +55,7 @@ const customStyles = {
         ? colors.greyLight
         : colors.white,
     color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+      state.isOptionSelected || state.isSelected ? colors.violet : colors.black
   }),
   indicatorSeparator: () => ({
     display: "none"

diff --git a/src/components/form/Field.styles.ts b/src/components/form/Field.styles.ts
@@ -277,7 +277,7 @@ export const CheckboxWrapper = styled.label<{ error?: unknown }>`
       + div {
         cursor: pointer;
         &:hover {
-          border: 1px solid ${colors.secondary};
+          border: 1px solid ${colors.violet};
           svg {
             opacity: 0.25;
           }

diff --git a/src/components/form/FormField.tsx b/src/components/form/FormField.tsx
@@ -41,7 +41,7 @@ export default function FormField({
           {valueToCopy && (
             <Copy
               size={24}
-              color={colors.secondary}
+              color={colors.violet}
               style={{ cursor: "pointer" }}
               weight="light"
               onClick={() => {

diff --git a/src/components/form/Phone.tsx b/src/components/form/Phone.tsx
@@ -37,12 +37,12 @@ const customStyles = {
       padding: "0.4rem 0.25rem",
       boxShadow: "none",
       ":hover": {
-        borderColor: colors.secondary,
+        borderColor: colors.violet,
         borderWidth: "1px"
       },
       background: colors.greyLight,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
+        ? `1px solid ${colors.violet}`
         : `1px solid ${colors.border}`,
       ...before
     };
@@ -62,9 +62,7 @@ const customStyles = {
         ? colors.greyLight
         : colors.white,
     color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+      state.isOptionSelected || state.isSelected ? colors.violet : colors.black
   }),
   indicatorSeparator: () => ({
     display: "none"

diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
@@ -54,12 +54,12 @@ const customStyles = (
       padding: "0.4rem 0.25rem",
       boxShadow: "none",
       ":hover": {
-        borderColor: colors.secondary,
+        borderColor: colors.violet,
         borderWidth: "1px"
       },
       background: backgroundColor,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
+        ? `1px solid ${colors.violet}`
         : !checkIfValueIsEmpty(error)
           ? `1px solid ${colors.orange}`
           : `1px solid ${colors.border}`,
@@ -83,9 +83,7 @@ const customStyles = (
         ? colors.greyLight
         : colors.white,
     color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+      state.isOptionSelected || state.isSelected ? colors.violet : colors.black
   }),
   indicatorSeparator: () => ({
     display: "none"

diff --git a/src/components/form/Switch.tsx b/src/components/form/Switch.tsx
@@ -33,7 +33,7 @@ const StyledSwitchRoot = styled(ReactSwitch.Root)`
   box-shadow: 0 2px 10px hsl(0 0% 0% / 0.141);
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   &[data-state="checked"] {
-    background-color: ${colors.secondary};
+    background-color: ${colors.violet};
   }
   &:disabled {
     cursor: not-allowed;

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -376,7 +376,7 @@ export const HeaderComponent = forwardRef<HTMLElement, Props>(
                   </LinkWithQuery>
                   {isSideCrossVisible && (
                     <X
-                      color={colors.secondary}
+                      color={colors.violet}
                       onClick={toggleMenu}
                       style={{
                         cursor: "pointer",

diff --git a/src/components/header/selector/ChainSelectorRow.tsx b/src/components/header/selector/ChainSelectorRow.tsx
@@ -89,11 +89,7 @@ export default function ChainSelectorRow({
       {isPending && <CaptionText>Approve in wallet</CaptionText>}
       <Status>
         {active && (
-          <Check
-            width={LOGO_SIZE}
-            height={LOGO_SIZE}
-            color={colors.secondary}
-          />
+          <Check width={LOGO_SIZE} height={LOGO_SIZE} color={colors.violet} />
         )}
         {!active && isPending && (
           <Spinner width={LOGO_SIZE} height={LOGO_SIZE} />

diff --git a/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepOne.tsx b/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepOne.tsx
@@ -97,7 +97,7 @@ function EscalateStepOne({ exchange }: Props) {
             >
               {onlyFairExchangePolicyLabel}
             </Typography>
-            <StyledArrowSquare color={colors.secondary} size={22} />
+            <StyledArrowSquare color={colors.violet} size={22} />
           </Grid>
           <Typography fontWeight="400" fontSize="1rem" color={colors.greyDark}>
             Escalation deposit

diff --git a/src/components/modal/components/CustomStoreModal.tsx b/src/components/modal/components/CustomStoreModal.tsx
@@ -41,7 +41,7 @@ import { Channels } from "./SalesChannelsModal/form";
 
 const CopyIcon = styled(CopySimple)`
   cursor: pointer;
-  color: ${colors.secondary};
+  color: ${colors.violet};
 `;
 
 const Heading = styled(Typography).attrs({

diff --git a/src/components/modal/components/DetailWidget.tsx b/src/components/modal/components/DetailWidget.tsx
@@ -95,7 +95,7 @@ export default function DetailWidget({
               </Typography>
               <Typography
                 tag="h2"
-                style={{ margin: "1rem 0", color: colors.secondary }}
+                style={{ margin: "1rem 0", color: colors.violet }}
               >
                 {name}
               </Typography>

diff --git a/src/components/modal/components/DisputeModal/DisputeModal.tsx b/src/components/modal/components/DisputeModal/DisputeModal.tsx
@@ -167,7 +167,7 @@ function DisputeModal({ exchangeId }: Props) {
       </Typography>
       <ModalGrid>
         <ModalGridColumns>
-          <Chats size={24} color={colors.secondary} data-columns-icon />
+          <Chats size={24} color={colors.violet} data-columns-icon />
           <Typography
             margin="0"
             fontSize="1.25rem"
@@ -178,7 +178,7 @@ function DisputeModal({ exchangeId }: Props) {
           </Typography>
         </ModalGridColumns>
         <ModalGridColumns data-modal-columns>
-          <FilePlus size={24} color={colors.secondary} data-columns-icon />
+          <FilePlus size={24} color={colors.violet} data-columns-icon />
           <Typography
             margin="0"
             fontSize="1.25rem"
@@ -189,7 +189,7 @@ function DisputeModal({ exchangeId }: Props) {
           </Typography>
         </ModalGridColumns>
         <ModalGridColumns data-modal-columns>
-          <Handshake size={24} color={colors.secondary} data-columns-icon />
+          <Handshake size={24} color={colors.violet} data-columns-icon />
           <Typography
             margin="0"
             fontSize="1.25rem"

diff --git a/src/components/modal/components/ProductCreateSuccess.tsx b/src/components/modal/components/ProductCreateSuccess.tsx
@@ -137,7 +137,7 @@ export default function ProductCreateSuccess({
               <Typography
                 tag="h2"
                 margin="1rem 0"
-                color={colors.secondary}
+                color={colors.violet}
                 fontSize="1.5rem"
               >
                 {name}

diff --git a/src/components/modal/components/Profile/CreateProfileModal.tsx b/src/components/modal/components/Profile/CreateProfileModal.tsx
@@ -117,7 +117,7 @@ export default function CreateProfileModal({
         checked={switchChecked}
         label={() => (
           <Typography
-            color={colors.secondary}
+            color={colors.violet}
             fontSize="0.8rem"
             onClick={() => setSwitchAndProfileType(!switchChecked)}
             cursor="pointer"

diff --git a/src/components/modal/components/Profile/EditProfileModal.tsx b/src/components/modal/components/Profile/EditProfileModal.tsx
@@ -70,7 +70,7 @@ export default function EditProfileModal({
         checked={switchChecked}
         label={() => (
           <Typography
-            color={colors.secondary}
+            color={colors.violet}
             fontSize="0.8rem"
             onClick={() => setSwitchAndProfileType(!switchChecked)}
             cursor="pointer"

diff --git a/src/components/modal/components/Profile/ProfilePreview.tsx b/src/components/modal/components/Profile/ProfilePreview.tsx
@@ -54,7 +54,7 @@ export const ProfilePreview: React.FC<ProfilePreviewProps> = ({
     <>
       <Gear
         size={24}
-        color={colors.secondary}
+        color={colors.violet}
         weight="light"
         style={{ cursor: "pointer" }}
         onClick={() => {

diff --git a/...nts/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx b/...nts/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx
@@ -62,7 +62,7 @@ export default function TransactionSubmittedModal({
           fontSize="1rem"
           lineHeight="150%"
           margin="0.5rem 0 1.5rem 0"
-          color={colors.secondary}
+          color={colors.violet}
         >
           View on Explorer
         </Typography>