WIP > feat: twap form styling WIP (#2785)

* feat: twap form styling WIP * Fix code style issues with Prettier * feat: twap form styling WIP * feat: twap form styling WIP * Fix code style issues with Prettier * feat: twap form styling WIP * feat(twap): refactor and wire price protection (#2797) * refactor: `ReactNode` already has `string` inside it * feat: new optional params to ExecutionPrice * refactor: make TradeWidgetField and TradeNumberInput more generic * feat: calculate limit price and pass it down to price protection row * feat: pass isInverted state onto price row * feat: calculate buyAmount outside of twapOrderAtom * feat: use buyAmount from its own atom twapOrder is null when the account isn't set * feat: show `0` rather than `-` when there's no limit price * chore: fix merge * Fix code style issues with Prettier * Update src/modules/twap/containers/TwapFormWidget/index.tsx Co-authored-by: Leandro <[email protected]> * feat: twap form styling WIP (#2796) * feat: twap form styling WIP * feat: twap form styling WIP * feat: twap form styling WIP * feat: twap form styling WIP * feat: twap form styling WIP * feat: twap form styling WIP * feat: twap form styling WIP * feat: twap form styling WIP * Fix code style issues with Prettier * feat: update styles * feat: update styles * feat: update styles * Fix code style issues with Prettier * feat: styling updates * feat: styling updates * feat: styling updates * feat: styling updates * Fix code style issues with Prettier * feat: styling updates * feat: styling updates * feat: fix custom date style * feat: safar text color fix * feat: fix styles * feat: fix styles * feat: fix styles --------- Co-authored-by: Lint Action <[email protected]> * feat: styles update * feat: styles update --------- Co-authored-by: Lint Action <[email protected]> Co-authored-by: Leandro <[email protected]> Co-authored-by: Alexandr Kazachenko <[email protected]>
cowprotocol · Jul 11, 2023 · 27d6829 · 27d6829
1 parent f8ebf26
commit 27d6829
Show file tree

Hide file tree

Showing 35 changed files with 634 additions and 163 deletions.
diff --git a/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx b/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx
@@ -126,7 +126,7 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
   )
 
   return (
-    <>
+    <styledEl.OuterWrapper>
       <styledEl.Wrapper id={id} className={className} withReceiveAmountInfo={!!receiveAmountInfo} disabled={disabled}>
         {topLabel && <styledEl.CurrencyTopLabel>{topLabel}</styledEl.CurrencyTopLabel>}
 
@@ -184,6 +184,6 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
         showCurrencyAmount={true}
         disableNonToken={disableNonToken}
       />
-    </>
+    </styledEl.OuterWrapper>
   )
 }
diff --git a/src/common/pure/CurrencyInputPanel/styled.tsx b/src/common/pure/CurrencyInputPanel/styled.tsx
@@ -6,6 +6,12 @@ import Input from 'legacy/components/NumericalInput'
 
 import { TokenAmount } from 'common/pure/TokenAmount'
 
+export const OuterWrapper = styled.div`
+  max-width: 100%;
+  display: flex;
+  flex-flow: column wrap;
+`
+
 export const Wrapper = styled.div<{ withReceiveAmountInfo: boolean; disabled: boolean }>`
   display: flex;
   flex-flow: row wrap;
@@ -17,6 +23,7 @@ export const Wrapper = styled.div<{ withReceiveAmountInfo: boolean; disabled: bo
   border-radius: ${({ withReceiveAmountInfo }) => (withReceiveAmountInfo ? '16px 16px 0 0' : '16px')};
   min-height: 106px;
   pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
+  max-width: 100%;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     padding: 16px 12px;
@@ -67,14 +74,22 @@ export const NumericalInput = styled(Input)<{ $loading: boolean }>`
   font-weight: 500;
   color: ${({ theme }) => theme.text1};
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    font-size: 26px;
-  `}
+  &[disabled] {
+    -webkit-text-fill-color: ${({ theme }) => theme.text1}; // safari fix
+  }
+
+  &[disabled]::selection {
+    background: transparent;
+  }
 
   &::placeholder {
     color: ${({ theme }) => transparentize(0.3, theme.text1)};
   }
 
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 26px;
+  `}
+
   ${loadingOpacityMixin}
 `
 

diff --git a/src/common/pure/ExecutionPrice/index.tsx b/src/common/pure/ExecutionPrice/index.tsx
@@ -10,24 +10,28 @@ export interface ExecutionPriceProps {
   executionPrice: Price<Currency, Currency>
   isInverted: boolean
   showBaseCurrency?: boolean
+  hideSeparator?: boolean
   separatorSymbol?: string
+  hideFiat?: boolean
 }
 
 export function ExecutionPrice({
   executionPrice,
   isInverted,
   showBaseCurrency,
   separatorSymbol = '≈',
+  hideSeparator,
+  hideFiat,
 }: ExecutionPriceProps) {
-  const executionPriceFiat = useExecutionPriceFiat(executionPrice, isInverted)
+  const executionPriceFiat = useExecutionPriceFiat(hideFiat ? null : executionPrice, isInverted)
   const quoteCurrency = isInverted ? executionPrice?.baseCurrency : executionPrice?.quoteCurrency
   const baseCurrency = isInverted ? executionPrice?.quoteCurrency : executionPrice?.baseCurrency
   const oneBaseCurrency = tryParseCurrencyAmount('1', baseCurrency)
 
   return (
     <span>
       {showBaseCurrency && <TokenAmount amount={oneBaseCurrency} tokenSymbol={baseCurrency} />}
-      {` ${separatorSymbol} `}
+      {!hideSeparator && ` ${separatorSymbol} `}
       <TokenAmount amount={isInverted ? executionPrice.invert() : executionPrice} tokenSymbol={quoteCurrency} />
       {executionPriceFiat && (
         <i>

diff --git a/src/common/pure/InlineBanner/banners.tsx b/src/common/pure/InlineBanner/banners.tsx
@@ -11,10 +11,11 @@ import { InlineBanner } from './index'
 export function BundleTxApprovalBanner() {
   return (
     <InlineBanner type="information">
-      <>
-        <strong>Token approval</strong>: For your convenience, token approval and order placement will be bundled into a
-        single transaction, streamlining your experience!
-      </>
+      <strong>Token approval bundling</strong>
+      <p>
+        For your convenience, token approval and order placement will be bundled into a single transaction, streamlining
+        your experience!
+      </p>
     </InlineBanner>
   )
 }
@@ -27,11 +28,12 @@ export type BundleTxWrapBannerProps = {
 export function BundleTxWrapBanner({ nativeCurrencySymbol, wrappedCurrencySymbol }: BundleTxWrapBannerProps) {
   return (
     <InlineBanner type="information">
-      <>
-        <strong>Token wrapping</strong>: For your convenience, CoW Swap will bundle all the necessary actions for this
-        trade into a single transaction. This includes the {nativeCurrencySymbol} wrapping and, if needed,{' '}
+      <strong>Token wrapping bundling</strong>
+      <p>
+        For your convenience, CoW Swap will bundle all the necessary actions for this trade into a single transaction.
+        This includes the {nativeCurrencySymbol} wrapping and, if needed,
         {wrappedCurrencySymbol} approval. Even if the trade fails, your wrapping and approval will be done!
-      </>
+      </p>
     </InlineBanner>
   )
 }
@@ -48,13 +50,14 @@ export function BundleTxSafeWcBanner({ nativeCurrencySymbol, supportsWrapping }:
 
   return (
     <InlineBanner type="information">
-      <>
+      <strong>Use Safe web app</strong>
+      <p>
         Use the Safe web app for streamlined trading: {supportsWrappingText}token approval and orders bundled in one go!
         Only available in the{' '}
         <ExternalLink href="https://app.safe.global/share/safe-app?appUrl=https%3A%2F%2Fswap.cow.fi&chain=eth">
           CoW Swap Safe App↗
         </ExternalLink>
-      </>
+      </p>
     </InlineBanner>
   )
 }
@@ -67,17 +70,18 @@ export type SmallVolumeWarningBannerProps = {
 export function SmallVolumeWarningBanner({ feePercentage, feeAmount }: SmallVolumeWarningBannerProps) {
   return (
     <InlineBanner>
-      <>
-        Small orders are unlikely to be executed. For this order, network fees would be{' '}
+      <strong>Small orders are unlikely to be executed</strong>
+      <p>
+        For this order, network fees would be{' '}
         <b>
           {feePercentage?.toFixed(2)}% (
           <TokenAmount amount={feeAmount} tokenSymbol={feeAmount?.currency} />)
         </b>{' '}
         of your sell amount! Therefore, your order is unlikely to execute.
-        {/*<br />*/}
-        {/* TODO: add link to somewhere */}
-        {/*<a href="/">Learn more ↗</a>*/}
-      </>
+      </p>
+      {/*<br />*/}
+      {/* TODO: add link to somewhere */}
+      {/*<a href="/">Learn more ↗</a>*/}
     </InlineBanner>
   )
 }
diff --git a/src/common/pure/InlineBanner/index.cosmos.tsx b/src/common/pure/InlineBanner/index.cosmos.tsx
@@ -20,10 +20,11 @@ const Fixtures = {
   information: (
     <DemoContainer>
       <InlineBanner type="information">
-        <>
-          <strong>Token approval</strong>: For your convenience, token approval and order placement will be bundled into
-          a single transaction, streamlining your experience!
-        </>
+        <strong>Token approval bundling</strong>
+        <p>
+          For your convenience, token approval and order placement will be bundled into a single transaction,
+          streamlining your experience!
+        </p>
       </InlineBanner>
     </DemoContainer>
   ),
@@ -44,10 +45,11 @@ const Fixtures = {
   smallVolumeWarning: (
     <DemoContainer>
       <InlineBanner>
-        <>
-          Small orders are unlikely to be executed. For this order, network fees would be <b>1.00% (2500 COW)</b> of
-          your sell amount! Therefore, your order is unlikely to execute.
-        </>
+        <strong>Small orders are unlikely to be executed</strong>
+        <p>
+          For this order, network fees would be <b>1.00% (2500 COW)</b> of your sell amount! Therefore, your order is
+          unlikely to execute.
+        </p>
       </InlineBanner>
     </DemoContainer>
   ),

diff --git a/src/common/pure/InlineBanner/index.tsx b/src/common/pure/InlineBanner/index.tsx
@@ -38,18 +38,28 @@ const BANNER_CONFIG: Record<BannerType, BannerConfig> = {
 const Wrapper = styled.span<{ color: string }>`
   display: flex;
   align-items: center;
+  justify-content: center;
   background: ${({ theme, color }) => (theme.darkMode ? transparentize(0.9, color) : transparentize(0.85, color))};
-  color: ${({ theme, color }) => (theme.darkMode ? lighten(0.2, color) : darken(0.15, color))};
-  gap: 10px;
-  border-radius: 10px;
+  color: ${({ theme, color }) => (theme.darkMode ? lighten(0.2, color) : darken(0.2, color))};
+  gap: 24px 10px;
+  border-radius: 16px;
   margin: auto;
-  padding: 16px 12px;
+  padding: 16px;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.2;
   width: 100%;
 
-  > svg {
+  > span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-flow: column wrap;
+    gap: 16px;
+    width: 100%;
+  }
+
+  > span > svg {
     --size: 32px;
     display: block;
     min-width: var(--size);
@@ -60,9 +70,32 @@ const Wrapper = styled.span<{ color: string }>`
     stroke: none !important;
   }
 
-  > svg > path {
+  > span > svg > path {
     fill: ${({ color }) => color};
   }
+
+  > span {
+    display: flex;
+    flex-flow: row wrap;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      flex-flow: column wrap;
+      gap: 16px;
+    `};
+  }
+
+  > span > strong {
+    display: flex;
+    align-items: center;
+  }
+
+  > span > p {
+    line-height: 1.4;
+    margin: auto;
+    padding: 0;
+    width: 100%;
+    text-align: center;
+  }
 `
 
 export type InlineBannerProps = {
@@ -79,8 +112,10 @@ export function InlineBanner({ children, className, hideIcon, type = 'alert' }:
 
   return (
     <Wrapper className={className} color={color}>
-      {!hideIcon && <SVG src={config.icon} description={type} />}
-      <span>{children}</span>
+      <span>
+        {!hideIcon && <SVG src={config.icon} description={type} />}
+        {children}
+      </span>
     </Wrapper>
   )
 }
diff --git a/src/common/pure/Modal/index.tsx b/src/common/pure/Modal/index.tsx
@@ -92,7 +92,7 @@ export const CowModal = styled(Modal)<{
   > [data-reach-dialog-content] {
     color: ${({ theme }) => theme.text1};
     width: 100%;
-    max-width: ${({ maxWidth = 470 }) => `${maxWidth}px`};
+    max-width: ${({ maxWidth = 500 }) => `${maxWidth}px`};
     border: ${({ border = 'inherit' }) => `${border}`};
     z-index: 100;
     padding: ${({ padding = '0px' }) => `${padding}`};

diff --git a/src/common/pure/RateInfo/index.tsx b/src/common/pure/RateInfo/index.tsx
@@ -28,7 +28,7 @@ export interface RateInfoParams {
 
 export interface RateInfoProps {
   className?: string
-  label?: string
+  label?: React.ReactNode
   stylized?: boolean
   noLabel?: boolean
   prependSymbol?: boolean
@@ -105,6 +105,7 @@ export const RateWrapper = styled.button`
   letter-spacing: -0.1px;
   text-align: right;
   font-weight: 500;
+  width: 100%;
 `
 
 export const FiatRate = styled.span`

diff --git a/src/common/pure/TokenAmount/index.tsx b/src/common/pure/TokenAmount/index.tsx
@@ -14,7 +14,7 @@ export const Wrapper = styled.span<{ highlight: boolean; lowVolumeWarning?: bool
   background: ${({ highlight }) => (highlight ? 'rgba(196,18,255,0.4)' : '')};
   color: ${({ lowVolumeWarning, theme }) =>
     lowVolumeWarning ? darken(theme.darkMode ? 0 : 0.15, theme.alert) : 'inherit'};
-  word-break: word-break;
+  word-break: break-word;
 `
 
 export const SymbolElement = styled.span<{ opacitySymbol?: boolean }>`

diff --git a/src/legacy/assets/cow-swap/protection.svg b/src/legacy/assets/cow-swap/protection.svg
diff --git a/src/legacy/components/SwapWarnings/index.tsx b/src/legacy/components/SwapWarnings/index.tsx
@@ -57,7 +57,7 @@ const WarningContainer = styled(AuxInformationContainer).attrs((props) => ({
   width: ${({ width = '100%' }) => width};
   border-radius: 16px;
   border: 0;
-  margin: ${({ margin = '0 auto 12px auto' }) => margin};
+  margin: ${({ margin = '0 auto' }) => margin};
   position: relative;
   z-index: 1;