Change icon names, make width and height 100% and allow color to be c…

…hanged, re-use arrow svg

src/components/simulator/SimulatorChartHeader.tsx

@@ -1,4 +1,4 @@
-import { ReactComponent as CalendarIcon } from 'assets/icons/sim-calendar.svg';
+import { ReactComponent as CalendarIcon } from 'assets/icons/calendar.svg';
 import { SimulatorPageTabs } from './SimulatorPageTabs';
 import { SimulatorDownloadMenu } from './SimulatorDownload';
 import { SimulatorReturn } from 'libs/queries';

src/components/simulator/SimulatorDownload.tsx

@@ -1,8 +1,8 @@
 import { cn } from 'utils/helpers';
-import { ReactComponent as IconLog } from 'assets/icons/sim-log.svg';
-import { ReactComponent as IconAnimation } from 'assets/icons/sim-animation.svg';
-import { ReactComponent as IconSummary } from 'assets/icons/sim-summary.svg';
-import { ReactComponent as IconDownload } from 'assets/icons/sim-download.svg';
+import { ReactComponent as IconLog } from 'assets/icons/page.svg';
+import { ReactComponent as IconAnimation } from 'assets/icons/movie.svg';
+import { ReactComponent as IconSummary } from 'assets/icons/image.svg';
+import { ReactComponent as IconDownload } from 'assets/icons/download.svg';
 import { DropdownMenu } from 'components/common/dropdownMenu';
 import { useState } from 'react';
 import { buttonStyles } from 'components/common/button/buttonStyles';

src/components/simulator/SimulatorPageTabs.tsx

@@ -1,7 +1,7 @@
 import { Pathnames, PathParams } from 'libs/routing';
 import { cn } from 'utils/helpers';
-import { ReactComponent as IconAnimation } from 'assets/icons/sim-animation.svg';
-import { ReactComponent as IconSummary } from 'assets/icons/sim-summary.svg';
+import { ReactComponent as IconAnimation } from 'assets/icons/movie.svg';
+import { ReactComponent as IconSummary } from 'assets/icons/image.svg';
 
 export interface StrategyTab {
   label: string;

src/components/simulator/SimulatorSummaryTable.tsx

@@ -1,5 +1,4 @@
-import { ReactComponent as ArrowUp } from 'assets/icons/sim-arrow-up.svg';
-import { ReactComponent as ArrowDown } from 'assets/icons/sim-arrow-down.svg';
+import { ReactComponent as Arrow } from 'assets/icons/arrow-round.svg';
 import { prettifyNumber } from 'utils/helpers';
 import { Token } from 'libs/tokens';
 import { SimulatorSearch } from 'libs/routing';
@@ -37,13 +36,13 @@ export const SimulatorSummaryTable = ({
 
   return (
     <article className="grid grid-cols-[auto,auto] grid-rows-4 items-center justify-evenly gap-2 md:grid-cols-[auto,auto,auto,auto] md:grid-rows-2">
-      <ArrowUp className="mx-6" />
+      <Arrow className="mx-6 h-16 w-16 text-green" />
       <span>
         {buyMin}-{buyMax} {baseSymbol} per {quoteSymbol}
       </span>
       <span className="mx-4 text-white/40">|</span>
       {quoteBudgetFormatted} {quoteSymbol}
-      <ArrowDown className="mx-6" />
+      <Arrow className="mx-6 h-16 w-16 -rotate-90 text-red" />
       <span>
         {sellMin}-{sellMax} {baseSymbol} per {quoteSymbol}
       </span>