chore: update loading colors (#3438)

* chore: update loading colors

* fix: loading opacity of 0.6

src/lib/assets/svg/inline_spinner.svg

@@ -12,6 +12,7 @@
         stroke="none"
       />
       <circle
+        id="track"
         cx="12"
         cy="12"
         r="10"

src/lib/components/Swap/Input.tsx

 import { useLingui } from '@lingui/react'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { useUSDCValue } from 'hooks/useUSDCPrice'
-import { loadingOpacityCss } from 'lib/css/loading'
+import { loadingTransitionCss } from 'lib/css/loading'
 import {
   useIsSwapFieldIndependent,
   useSwapAmount,
@@ -23,7 +23,7 @@ import TokenImg from '../TokenImg'
 import TokenInput from './TokenInput'
 
 export const USDC = styled(Row)`
-  ${loadingOpacityCss};
+  ${loadingTransitionCss};
 `
 
 export const Balance = styled(ThemedText.Body2)<{ focused: boolean }>`
@@ -122,7 +122,7 @@ export default function Input({ disabled, focused }: InputProps) {
       >
         <ThemedText.Body2 color="secondary" userSelect>
           <Row>
-            <USDC $loading={isLoading}>{inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}</USDC>
+            <USDC isLoading={isRouteLoading}>{inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}</USDC>
             {balance && (
               <Balance color={balanceColor} focused={focused}>
                 Balance: <span>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>

src/lib/components/Swap/Output.tsx

@@ -102,7 +102,7 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
         >
           <ThemedText.Body2 color="secondary" userSelect>
             <Row>
-              <USDC gap={0.5} $loading={isLoading}>
+              <USDC gap={0.5} isLoading={isRouteLoading}>
                 {outputUSDC ? `$${outputUSDC.toFixed(2)}` : '-'} {priceImpact}
               </USDC>
               {balance && (

src/lib/components/Swap/TokenInput.tsx

@@ -2,7 +2,7 @@ import 'setimmediate'
 
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
-import { loadingOpacityCss } from 'lib/css/loading'
+import { loadingTransitionCss } from 'lib/css/loading'
 import styled, { keyframes, ThemedText } from 'lib/theme'
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
@@ -16,7 +16,7 @@ const TokenInputRow = styled(Row)`
   grid-template-columns: 1fr;
 `
 
-const ValueInput = styled(DecimalInput)<{ $loading: boolean }>`
+const ValueInput = styled(DecimalInput)`
   color: ${({ theme }) => theme.primary};
   height: 1em;
 
@@ -28,7 +28,7 @@ const ValueInput = styled(DecimalInput)<{ $loading: boolean }>`
     color: ${({ theme }) => theme.onHover(theme.secondary)};
   }
 
-  ${loadingOpacityCss}
+  ${loadingTransitionCss}
 `
 
 const delayedFadeIn = keyframes`
@@ -108,7 +108,7 @@ export default function TokenInput({
             onFocus={() => setShowMax(hasMax)}
             onChange={onChangeInput}
             disabled={disabled || !currency}
-            $loading={Boolean(loading)}
+            isLoading={Boolean(loading)}
             ref={input}
           ></ValueInput>
         </ThemedText.H2>

src/lib/components/Swap/Toolbar/Caption.tsx

@@ -2,9 +2,10 @@ import { Trans } from '@lingui/macro'
 import { Currency, TradeType } from '@uniswap/sdk-core'
 import useUSDCPrice from 'hooks/useUSDCPrice'
 import Tooltip from 'lib/components/Tooltip'
+import { loadingCss } from 'lib/css/loading'
 import { WrapType } from 'lib/hooks/swap/useWrapCallback'
 import { AlertTriangle, Icon, Info, InlineSpinner } from 'lib/icons'
-import { ThemedText } from 'lib/theme'
+import styled, { ThemedText } from 'lib/theme'
 import { ReactNode, useCallback, useMemo, useState } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 
@@ -12,6 +13,11 @@ import { TextButton } from '../../Button'
 import Row from '../../Row'
 import RoutingDiagram from '../RoutingDiagram'
 
+const Loading = styled.span`
+  color: ${({ theme }) => theme.secondary};
+  ${loadingCss};
+`
+
 interface CaptionProps {
   icon?: Icon
   caption: ReactNode
@@ -47,7 +53,16 @@ export function Empty() {
 }
 
 export function LoadingTrade() {
-  return <Caption icon={InlineSpinner} caption={<Trans>Fetching best price…</Trans>} />
+  return (
+    <Caption
+      icon={InlineSpinner}
+      caption={
+        <Loading>
+          <Trans>Fetching best price…</Trans>
+        </Loading>
+      }
+    />
+  )
 }
 
 export function WrapCurrency({ loading, wrapType }: { loading: boolean; wrapType: WrapType.UNWRAP | WrapType.WRAP }) {

src/lib/css/loading.ts

 import { css } from 'lib/theme'
 
-// need to use $loading as `loading` is a reserved prop
-export const loadingOpacityCss = css<{ $loading: boolean }>`
-  filter: ${({ $loading }) => ($loading ? 'grayscale(1)' : 'none')};
-  opacity: ${({ $loading }) => ($loading ? '0.4' : '1')};
+export const loadingOpacity = 0.6
+
+export const loadingCss = css`
+  filter: grayscale(1);
+  opacity: ${loadingOpacity};
+`
+
+// need to use isLoading as `loading` is a reserved prop
+export const loadingTransitionCss = css<{ isLoading: boolean }>`
+  ${({ isLoading }) => isLoading && loadingCss};
   transition: opacity 0.2s ease-in-out;
 `

src/lib/icons/index.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as InlineSpinnerIcon } from 'lib/assets/svg/inline_spinn
 import { ReactComponent as LogoIcon } from 'lib/assets/svg/logo.svg'
 import { ReactComponent as SpinnerIcon } from 'lib/assets/svg/spinner.svg'
 import { ReactComponent as WalletIcon } from 'lib/assets/svg/wallet.svg'
+import { loadingCss } from 'lib/css/loading'
 import styled, { Color, css, keyframes } from 'lib/theme'
 import { FunctionComponent, SVGProps } from 'react'
 /* eslint-disable no-restricted-imports */
@@ -146,7 +147,10 @@ export const Spinner = styled(icon(SpinnerIcon))<{ color?: Color }>`
 export const InlineSpinner = styled(icon(InlineSpinnerIcon))<{ color?: Color }>`
   animation: ${rotate} 1s cubic-bezier(0.83, 0, 0.17, 1) infinite;
   color: ${({ color = 'active', theme }) => theme[color]};
-  fill: ${({ theme }) => theme.outline};
-  stroke: ${({ theme }) => theme.outline};
-  stroke-linecap: round;
+  fill: ${({ color = 'active', theme }) => theme[color]};
+
+  #track {
+    stroke: ${({ theme }) => theme.secondary};
+    ${loadingCss};
+  }
 `