Style fixes (#3566)

* feat: styling fixes * feat: style updates --------- Co-authored-by: Alexandr Kazachenko <[email protected]>
cowprotocol · Jan 8, 2024 · e1f9054 · e1f9054
1 parent ab8b179
commit e1f9054
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 26 deletions.
diff --git a/apps/cowswap-frontend/src/legacy/components/Card/index.tsx b/apps/cowswap-frontend/src/legacy/components/Card/index.tsx
@@ -24,7 +24,7 @@ export const LightCard = styled(Card)`
     width: 100%;
     border-radius: 16px;
     height: 100%;
-    border: 1px solid var(${UI.COLOR_PAPER_DARKER});
+    border: 2px solid var(${UI.COLOR_PAPER_DARKEST});
     opacity: 0.2;
     user-select: none;
     pointer-events: none;

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
@@ -145,6 +145,10 @@ const TabsContainer = styled.div<{ withSingleChild: boolean }>`
   `};
 `
 
+const ExternalLinkStyled = styled(ExternalLink)`
+  text-decoration: underline;
+`
+
 // Todo: Makes this arrow default behavior of <ExternalLink />
 const ExternalArrow = styled.span`
   display: inline-block;
@@ -236,10 +240,10 @@ export function OrdersTableContainer({
                 <Trans>You don't have any {isOpenOrdersTab ? 'open' : ''} orders at the moment.</Trans> <br />
                 <Trans>Time to create a new one!</Trans> {/* TODO: add link for Advanced orders also */}
                 {orderType === TabOrderTypes.LIMIT ? (
-                  <ExternalLink href="https://cow-protocol.medium.com/how-to-user-cow-swaps-surplus-capturing-limit-orders-24324326dc9e">
+                  <ExternalLinkStyled href="https://cow-protocol.medium.com/how-to-user-cow-swaps-surplus-capturing-limit-orders-24324326dc9e">
                     <Trans>Learn more</Trans>
                     <ExternalArrow />
-                  </ExternalLink>
+                  </ExternalLinkStyled>
                 ) : null}
               </>
             )}

diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/StatusIcon.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/StatusIcon.tsx
@@ -30,7 +30,7 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
   border: ${({ status }) =>
     status === 'pending'
       ? 'none'
-      : status === 'error'
+      : status === 'error' || status === 'cancelled'
       ? 'none'
       : status === 'success'
       ? 'none'
@@ -39,7 +39,7 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
   background: ${({ status, theme }) =>
     status === 'pending'
       ? 'transparent'
-      : status === 'error'
+      : status === 'error' || status === 'cancelled'
       ? transparentize(theme.danger, 0.9)
       : status === 'success'
       ? transparentize(theme.success, 0.9)
@@ -83,14 +83,14 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
   }
 
   > svg {
-    --color: ${({ status, theme }) =>
+    --color: ${({ status }) =>
       status === 'success'
-        ? theme.success
-        : status === 'error'
-        ? theme.danger
+        ? `var(${UI.COLOR_SUCCESS})`
+        : status === 'error' || status === 'cancelled'
+        ? `var(${UI.COLOR_DANGER})`
         : status === 'pending'
-        ? theme.text3
-        : transparentize(theme.text, 0.4)};
+        ? `var(${UI.COLOR_TEXT})`
+        : `var(${UI.COLOR_TEXT_OPACITY_70})`};
     object-fit: contain;
     width: 24px;
     height: 19px;
@@ -117,16 +117,16 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
 `
 
 const Label = styled.span<{ status: StatusIconState; crossOut: boolean }>`
-  --color: ${({ status, crossOut, theme }) =>
+  --color: ${({ status, crossOut }) =>
     status === 'pending'
-      ? theme.text1
+      ? `var(${UI.COLOR_TEXT})`
       : crossOut
       ? `var(${UI.COLOR_PAPER_DARKER})`
-      : status === 'error'
-      ? theme.danger
+      : status === 'error' || status === 'cancelled'
+      ? `var(${UI.COLOR_DANGER})`
       : status === 'success'
-      ? theme.success
-      : transparentize(theme.text, 0.4)};
+      ? `var(${UI.COLOR_SUCCESS})`
+      : `var(${UI.COLOR_TEXT_OPACITY_70})`};
   color: var(--color);
   font-weight: ${({ status }) => (status === 'pending' ? '600' : '500')};
   font-size: 14px;

diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/Step.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/Step.tsx
@@ -1,5 +1,7 @@
 import React, { PropsWithChildren } from 'react'
 
+import { UI } from '@cowprotocol/ui'
+
 import styled from 'styled-components/macro'
 
 import { ExplorerLink } from 'legacy/components/ExplorerLink'
@@ -32,7 +34,7 @@ const StepWrapper = styled.div`
     display: block;
     font-weight: 500;
     text-decoration: underline;
-    color: ${({ theme }) => theme.text3};
+    color: var(${UI.COLOR_TEXT});
     opacity: 1;
     font-size: 13px;
   }

diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/index.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/index.tsx
@@ -95,7 +95,7 @@ export const Progress = styled.div<ProgressProps>`
   height: var(--height);
   position: relative;
   display: flex;
-  background: var(${UI.COLOR_TEXT_OPACITY_10});
+  background: var(${UI.COLOR_PAPER});
   margin: 28px 0 0;
   border-radius: var(--height);
 
@@ -117,8 +117,14 @@ export const Progress = styled.div<ProgressProps>`
     height: inherit;
     transition: width var(${UI.ANIMATION_DURATION}) ease-in-out, background var(${UI.ANIMATION_DURATION}) ease-in-out;
     width: ${({ value }) => (value ? `${value}%` : '0%')};
-    background: ${({ status, theme }) =>
-      status === 'error' ? `var(${UI.COLOR_DANGER})` : status === 'success' ? `var(${UI.COLOR_SUCCESS})` : theme.text3};
+    background: ${({ status }) =>
+      status === 'error'
+        ? `var(${UI.COLOR_DANGER})`
+        : status === 'success'
+        ? `var(${UI.COLOR_SUCCESS})`
+        : status === 'pending'
+        ? `var(${UI.COLOR_PRIMARY})`
+        : `var(${UI.COLOR_TEXT_OPACITY_25})`};
     border-radius: var(--height);
 
     ${({ theme }) => theme.mediaWidth.upToSmall<ProgressProps>`

diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/steps/Step3.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/steps/Step3.tsx
@@ -4,6 +4,7 @@ import Checkmark from '@cowprotocol/assets/cow-swap/checkmark.svg'
 import Exclamation from '@cowprotocol/assets/cow-swap/exclamation.svg'
 import Finish from '@cowprotocol/assets/cow-swap/finish.svg'
 import Refund from '@cowprotocol/assets/cow-swap/refund.svg'
+import { UI } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
@@ -16,7 +17,7 @@ const RefundMessage = styled.span`
 `
 
 const ExpiredMessage = styled.span`
-  color: ${({ theme }) => theme.warning};
+  color: var(${UI.COLOR_WARNING});
 `
 
 export function Step3({ nativeTokenSymbol, tokenLabel, order, creation, refund, cancellation }: EthFlowStepperProps) {

diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx
@@ -1,14 +1,20 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { ExplorerDataType, getExplorerLink } from '@cowprotocol/common-utils'
 import { TokenLogo } from '@cowprotocol/tokens'
-import { ButtonPrimary } from '@cowprotocol/ui'
+import { ButtonPrimary, ExternalLink } from '@cowprotocol/ui'
 
 import { AlertCircle } from 'react-feather'
+import styled from 'styled-components/macro'
 
 import * as styledEl from './styled'
 
 import { ModalHeader } from '../ModalHeader'
 
+const ExternalLinkStyled = styled(ExternalLink)`
+  text-decoration: underline;
+  color: inherit;
+`
+
 export interface ImportTokenModalProps {
   tokens: TokenWithLogo[]
   onBack?(): void
@@ -34,13 +40,13 @@ export function ImportTokenModal(props: ImportTokenModalProps) {
             <TokenLogo token={token} size={24} />
             <styledEl.StyledTokenSymbol token={token} />
             <styledEl.TokenName>{token.name}</styledEl.TokenName>
-            <a
+            <ExternalLinkStyled
               target="_blank"
               href={getExplorerLink(token.chainId, token.address, ExplorerDataType.TOKEN)}
               rel="noreferrer"
             >
               {token.address}
-            </a>
+            </ExternalLinkStyled>
             <styledEl.UnknownSourceWarning>
               <AlertCircle size={14} />
               <span>Unknown Source</span>

diff --git a/libs/ui/src/pure/Button/index.tsx b/libs/ui/src/pure/Button/index.tsx
@@ -173,7 +173,7 @@ export const ButtonErrorStyle = styled(ButtonPrimary)`
   &:focus,
   &:hover,
   &:active {
-    background: var(${UI.COLOR_WARNING});
+    background: var(${UI.COLOR_DANGER});
     color: var(${UI.COLOR_BUTTON_TEXT});
   }
 `