feat: icon refactor

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardFooter.tsx

@@ -3,7 +3,7 @@ import { exhaustMap } from "rxjs/operators"
 
 import { Button } from "@/client/components/Button"
 import { BinIcon } from "@/client/components/icons/BinIcon"
-import { CheckCircle } from "@/client/components/icons/CheckCircle"
+import { CheckCircleIcon } from "@/client/components/icons/CheckCircleIcon"
 import { Typography } from "@/client/components/Typography"
 import { ACCEPTED_QUOTE_STATE, RfqState } from "@/generated/TradingGateway"
 import {
@@ -49,7 +49,7 @@ export const AcceptedFooterContent = ({
 
   return (
     <>
-      <CheckCircle />
+      {CheckCircleIcon}
       <Typography
         variant="Text xxs/Regular"
         color="Colors/Text/text-success-primary (600)"
@@ -81,7 +81,7 @@ export const TerminatedFooterContent = ({
   state: RfqState
 }) => (
   <CloseRfqButton onClick={() => removeRfqs([rfqId])}>
-    <BinIcon />
+    {BinIcon}
     <Typography
       variant="Text xxs/Regular"
       color="Colors/Text/text-secondary (700)"

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/CardQuote.tsx

@@ -1,7 +1,7 @@
 import { createSignal } from "@react-rxjs/utils"
 import { exhaustMap } from "rxjs/operators"
 
-import { CheckCircle } from "@/client/components/icons/CheckCircle"
+import { CheckCircleIcon } from "@/client/components/icons/CheckCircleIcon"
 import { Typography } from "@/client/components/Typography"
 import { Color } from "@/client/theme/types"
 import {
@@ -128,7 +128,7 @@ export const Quote = ({
           passed={passed}
           priced={priced}
         >
-          {accepted && <CheckCircle />}
+          {accepted && CheckCircleIcon}
           <Typography
             variant={accepted ? "Text sm/Medium" : "Text sm/Regular"}
             color={getPriceColor(

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/styled.ts

@@ -93,7 +93,7 @@ export const Price = styled(Typography)<RowFieldProps>`
   `}
 
   svg {
-    fill: ${({ theme }) =>
+    color: ${({ theme }) =>
       theme.newTheme.color["Colors/Text/text-success-primary (600)"]};
     margin-right: 4px;
   }

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx

@@ -84,9 +84,9 @@ export const CardFooterWrapper = styled(FlexBox)`
   padding: ${({ theme }) => theme.newTheme.spacing.md};
   background: ${({ theme }) =>
     theme.newTheme.color["Colors/Background/bg-secondary_subtle"]};
+  color: ${({ theme }) =>
+    theme.newTheme.color["Colors/Text/text-success-primary (600)"]};
   svg {
-    fill: ${({ theme }) =>
-      theme.newTheme.color["Colors/Text/text-success-primary (600)"]};
     margin-right: ${({ theme }) => theme.newTheme.spacing.xs};
   }
 `
@@ -124,11 +124,8 @@ export const CloseRfqButton = styled(FooterButton)`
   padding: ${({ theme }) => theme.newTheme.spacing.xs}
     ${({ theme }) => theme.newTheme.spacing.md};
   border-radius: ${({ theme }) => theme.newTheme.radius.xs};
-  svg {
-    fill: ${({ theme }) =>
-      theme.newTheme.color["Colors/Text/text-brand-tertiary (600)"]};
-    margin-right: ${({ theme }) => theme.newTheme.spacing.md};
-  }
+  color: ${({ theme }) =>
+    theme.newTheme.color["Colors/Text/text-brand-tertiary (600)"]};
 `
 
 export const QuantityTypography = styled(Typography)`

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqsHeader.tsx

@@ -1,5 +1,3 @@
-import styled from "styled-components"
-
 import { BinIcon } from "@/client/components/icons/BinIcon"
 import { TabBar, TabBarActionConfig } from "@/client/components/TabBar"
 import { removeRfqs, useExecutedRfqIds } from "@/services/credit"
@@ -10,19 +8,14 @@ import {
   useSelectedRfqsTab,
 } from "./selectedRfqsTab"
 
-const BinButton = styled(BinIcon)`
-  fill: ${({ theme }) =>
-    theme.newTheme.color["Colors/Text/text-quaternary (500)"]};
-`
-
 export const CreditRfqsHeader = () => {
   const rfqState = useSelectedRfqsTab()
   const executedRfqIds = useExecutedRfqIds()
 
   const actions: TabBarActionConfig = [
     {
       name: "clearRfqs",
-      inner: <BinButton />,
+      inner: BinIcon,
       onClick: () => removeRfqs(executedRfqIds),
       disabled: executedRfqIds.length === 0,
     },

packages/client/src/client/App/Credit/NewRfq/components/CreditInstrumentSearch.tsx

@@ -1,10 +1,10 @@
 import { bind } from "@react-rxjs/core"
 import { useCombobox } from "downshift"
 import { forwardRef, useMemo, useState } from "react"
-import { FaSearch } from "react-icons/fa"
 import { map, withLatestFrom } from "rxjs/operators"
 
 import { TextInput } from "@/client/components/Form/TextInput"
+import { SearchIcon } from "@/client/components/icons"
 import { Typography } from "@/client/components/Typography"
 import {
   creditInstrumentsByCusip$,
@@ -55,9 +55,7 @@ export const CreditInstrumentSearch = () => {
           <SearchBox onChange={setInstrumentId} ref={inputRef} />
         )}
       </InputWrapper>
-      <IconWrapper onClick={showAndResetInput}>
-        <FaSearch size="0.75em" />
-      </IconWrapper>
+      <IconWrapper onClick={showAndResetInput}>{SearchIcon}</IconWrapper>
     </InstrumentSearchWrapper>
   )
 }

packages/client/src/client/App/Credit/NewRfq/components/styled.ts

@@ -22,11 +22,13 @@ export const IconWrapper = styled.div`
   margin-left: 5px;
   height: 30px;
   width: 30px;
-  color: ${({ theme }) => theme.secondary[5]};
+  color: ${({ theme }) =>
+    theme.newTheme.color["Colors/Text/text-quaternary (500)"]};
 
   &:hover {
     cursor: pointer;
-    color: ${({ theme }) => theme.accents.primary.base};
+    color: ${({ theme }) =>
+      theme.newTheme.color["Colors/Text/text-brand-primary (900)"]};
   }
 `
 

packages/client/src/client/App/Footer/Aeron.tsx

@@ -24,6 +24,6 @@ export const Aeron = () => (
     >
       Powered by
     </Typography>
-    <AeronLogo height={10} />
+    {AeronLogo}
   </AeronLogoWrapper>
 )

packages/client/src/client/App/Header/PWA/PWAInstallPrompt.styles.ts

@@ -13,10 +13,9 @@ export const MainBanner = styled.div<{ isHidden: boolean }>`
 `
 
 export const CrossButton = styled.div`
+  color: ${({ theme }) => theme.newTheme.color["Colors/Text/text-primary_alt"]};
   svg {
     height: 10px;
-    fill: ${({ theme }) =>
-      theme.newTheme.color["Colors/Text/text-primary_alt"]};
   }
   &:hover {
     cursor: pointer;

packages/client/src/client/App/Header/PWA/PWAInstallPrompt.tsx

@@ -69,7 +69,7 @@ export const PWAInstallBanner = ({
 
   return (
     <MainBanner isHidden={isHidden}>
-      <CrossButton onClick={closeBanner}>{<CrossIcon />}</CrossButton>
+      <CrossButton onClick={closeBanner}>{CrossIcon}</CrossButton>
       <Typography
         variant="Text md/Semibold"
         color="Colors/Text/text-primary_alt"

packages/client/src/client/App/Header/theme-switcher/ThemeSwitcher.tsx

@@ -5,8 +5,7 @@ import { withTheme } from "styled-components"
 import { IconContainer, SwitchContainer } from "@/client/components/Switch"
 import { Theme, ThemeName, useTheme } from "@/client/theme"
 
-import DarkThemeIcon from "./DarkThemeIcon"
-import LightThemeIcon from "./LightThemeIcon"
+import { DarkThemeIcon, LightThemeIcon } from "../../../components/icons"
 
 export type ThemeStorageSwitchProps = Partial<ReactSwitchProps>
 
@@ -49,14 +48,10 @@ const ThemeStorageSwitch = ({
           onChange={handleChange}
           checked={isDarkTheme}
           checkedIcon={
-            <IconContainer hover={hover}>
-              <DarkThemeIcon />
-            </IconContainer>
+            <IconContainer hover={hover}>{DarkThemeIcon}</IconContainer>
           }
           uncheckedIcon={
-            <IconContainer hover={hover}>
-              <LightThemeIcon />
-            </IconContainer>
+            <IconContainer hover={hover}>{LightThemeIcon}</IconContainer>
           }
           handleDiameter={props.handleDiameter || 15}
           offColor={theme.newTheme.color["Colors/Background/bg-secondary"]}
@@ -70,9 +65,7 @@ const ThemeStorageSwitch = ({
           {...props}
         />
       ) : (
-        <IconContainer hover={hover}>
-          <Icon />
-        </IconContainer>
+        <IconContainer hover={hover}>{Icon}</IconContainer>
       )}
     </SwitchContainer>
   )

packages/client/src/client/App/LiveRates/LiveRatesCore.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/client/notifications"
 import { WithChildren } from "@/client/utils/utilityTypes"
 
-import { MainHeader, mainHeader$ } from "./MainHeader"
+import { LiveRatesHeader, mainHeader$ } from "./LiveRatesHeader"
 import { Tiles, tiles$ } from "./Tiles"
 
 export const liveRates$ = merge(tiles$, mainHeader$)
@@ -25,7 +25,7 @@ const LiveRates = ({ children }: WithChildren) => {
     <Region
       source$={liveRates$}
       fallback={children}
-      Header={<MainHeader />}
+      Header={<LiveRatesHeader />}
       Body={<Tiles />}
     />
   )

packages/client/src/client/App/LiveRates/MainHeader/MainHeader.tsx → packages/client/src/client/App/LiveRates/LiveRatesHeader/LiveRatesHeader.tsx

@@ -3,6 +3,7 @@ import { map } from "rxjs/operators"
 
 import { supportsTearOut } from "@/client/App/TearOutSection/supportsTearOut"
 import { TearOutComponent } from "@/client/App/TearOutSection/TearOutComponent"
+import { ChartIcon } from "@/client/components/icons"
 import { TabBar, TabBarActionConfig } from "@/client/components/TabBar/TabBar"
 import { currencyPairs$ } from "@/services/currencyPairs"
 import { useIsLimitCheckerRunning } from "@/services/limitChecker/limitChecker"
@@ -19,7 +20,6 @@ import {
   useSelectedTileView,
 } from "../selectedView"
 import { LimitCheckerIndicator } from "./LimitCheckerIndicator"
-import { ChartIcon } from "./ToggleView/ChartIcon"
 
 const [useCurrencies, mainHeader$] = bind(
   currencyPairs$.pipe(
@@ -33,7 +33,7 @@ const [useCurrencies, mainHeader$] = bind(
 
 export { mainHeader$ }
 
-export const MainHeader = () => {
+export const LiveRatesHeader = () => {
   const currencies = useCurrencies()
   const currency = useSelectedCurrency()
   const isLimitCheckerRunning = useIsLimitCheckerRunning()
@@ -43,7 +43,7 @@ export const MainHeader = () => {
   const actions: TabBarActionConfig = [
     {
       name: "toggleTileView",
-      inner: <ChartIcon />,
+      inner: ChartIcon,
       active: tileView === TileView.Analytics,
       onClick: onToggleSelectedView,
     },

packages/client/src/client/App/LiveRates/MainHeader/__tests__/MainHeader.test.tsx → packages/client/src/client/App/LiveRates/LiveRatesHeader/__tests__/MainHeader.test.tsx

@@ -8,7 +8,7 @@ import { ccppMock } from "@/services/currencyPairs/__mocks__/_ccpp"
 
 import { liveRates$ } from "../../LiveRatesCore"
 import { Tiles } from "../../Tiles"
-import { MainHeader } from ".."
+import { LiveRatesHeader } from ".."
 
 vi.mock("@/services/currencyPairs/currencyPairs")
 vi.mock("../../Tile/Tile.tsx")
@@ -36,7 +36,7 @@ const renderComponent = async () =>
     render(
       <TestThemeProvider>
         <Subscribe source$={liveRates$} fallback="No data">
-          <MainHeader />
+          <LiveRatesHeader />
           <Tiles />
         </Subscribe>
       </TestThemeProvider>,

packages/client/src/client/App/LiveRates/LiveRatesHeader/index.ts

@@ -0,0 +1 @@
+export * from "./LiveRatesHeader"