Move all graphs to cards (#6642)

* WIP * graphcard * small fix * small fix * fix overflow and border instead of border-[1px] * fix padding * add icons to graphs * add icon to breakdowngraph * fix graph units --------- Co-authored-by: Viktor Andersson <30777521+VIKTORVAV99@users.noreply.github.com>
electricitymaps · Apr 16, 2024 · 3f96ddc · 3f96ddc
1 parent c4673c0
commit 3f96ddc
Show file tree

Hide file tree

Showing 18 changed files with 167 additions and 26 deletions.
diff --git a/web/src/features/charts/BreakdownChart.tsx b/web/src/features/charts/BreakdownChart.tsx
@@ -1,8 +1,10 @@
 import { max, sum } from 'd3-array';
+import { CircleBoltIcon } from 'icons/circleBoltIcon';
 import { useTranslation } from 'react-i18next';
 import { Mode, TimeAverages } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
 
+import { GraphCard } from './bar-breakdown/GraphCard';
 import { ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
 import { getBadgeText, noop } from './graphUtils';
@@ -54,10 +56,11 @@ function BreakdownChart({
   }
 
   return (
-    <>
+    <GraphCard>
       <ChartTitle
         translationKey={`country-history.${titleDisplayMode}${titleMixMode}`}
         badgeText={badgeText}
+        icon={<CircleBoltIcon />}
       />
       <div className="relative">
         {isBreakdownGraphOverlayEnabled && (
@@ -93,7 +96,7 @@ function BreakdownChart({
           dangerouslySetInnerHTML={{ __html: t('country-panel.exchangesAreMissing') }}
         />
       )}
-    </>
+    </GraphCard>
   );
 }
 

diff --git a/web/src/features/charts/CarbonChart.tsx b/web/src/features/charts/CarbonChart.tsx
@@ -1,6 +1,8 @@
+import { CloudArrowUpIcon } from 'icons/cloudArrowUpIcon';
 import { useTranslation } from 'react-i18next';
 import { TimeAverages } from 'utils/constants';
 
+import { GraphCard } from './bar-breakdown/GraphCard';
 import { ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
 import { getBadgeText, noop } from './graphUtils';
@@ -31,10 +33,11 @@ function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) {
     return <NotEnoughDataMessage title="country-history.carbonintensity" />;
   }
   return (
-    <>
+    <GraphCard className="pb-2">
       <ChartTitle
         translationKey="country-history.carbonintensity"
         badgeText={badgeText}
+        icon={<CloudArrowUpIcon />}
       />
       <AreaGraph
         testId="details-carbon-graph"
@@ -50,7 +53,7 @@ function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) {
         selectedTimeAggregate={timeAverage}
         tooltip={CarbonChartTooltip}
       />
-    </>
+    </GraphCard>
   );
 }
 

diff --git a/web/src/features/charts/ChartTitle.tsx b/web/src/features/charts/ChartTitle.tsx
@@ -8,17 +8,21 @@ type Props = {
   translationKey: string;
   hasLink?: boolean;
   badgeText?: string;
+  icon?: JSX.Element;
 };
 
-export function ChartTitle({ translationKey, badgeText = undefined }: Props) {
+export function ChartTitle({ translationKey, badgeText = undefined, icon }: Props) {
   const { t } = useTranslation();
   const [timeAverage] = useAtom(timeAverageAtom);
   /*
   Use local for timeAverage if exists, otherwise use local default if exists. If no translation exists, use english
   */
   return (
     <div className="flex flex-row justify-between pb-0.5 pt-4">
-      <h3 className="text-md font-bold">{t(`${translationKey}.${timeAverage}`)}</h3>
+      <div className="flex content-center gap-1.5">
+        {icon && <div className="w-5">{icon}</div>}
+        <h3 className="text-md font-bold">{t(`${translationKey}.${timeAverage}`)}</h3>
+      </div>
       {badgeText != undefined && <EstimationBadge text={badgeText} />}
     </div>
   );

diff --git a/web/src/features/charts/EmissionChart.tsx b/web/src/features/charts/EmissionChart.tsx
@@ -1,7 +1,9 @@
+import { CloudArrowUpIcon } from 'icons/cloudArrowUpIcon';
 import { useTranslation } from 'react-i18next';
 import { TimeAverages } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
 
+import { GraphCard } from './bar-breakdown/GraphCard';
 import { ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
 import { getBadgeText, noop } from './graphUtils';
@@ -28,8 +30,12 @@ function EmissionChart({ timeAverage, datetimes }: EmissionChartProps) {
   const badgeText = getBadgeText(chartData, t);
 
   return (
-    <>
-      <ChartTitle translationKey="country-history.emissions" badgeText={badgeText} />
+    <GraphCard className="pb-2">
+      <ChartTitle
+        translationKey="country-history.emissions"
+        badgeText={badgeText}
+        icon={<CloudArrowUpIcon />}
+      />
       <AreaGraph
         testId="history-emissions-graph"
         data={chartData}
@@ -45,7 +51,7 @@ function EmissionChart({ timeAverage, datetimes }: EmissionChartProps) {
         tooltip={EmissionChartTooltip}
         formatTick={formatAxisTick}
       />
-    </>
+    </GraphCard>
   );
 }
 

diff --git a/web/src/features/charts/NetExchangeChart.tsx b/web/src/features/charts/NetExchangeChart.tsx
@@ -1,8 +1,10 @@
+import { ExchangeIcon } from 'icons/exchangeIcon';
 import { useAtom } from 'jotai';
 import { TimeAverages } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
 import { displayByEmissionsAtom, productionConsumptionAtom } from 'utils/state/atoms';
 
+import { GraphCard } from './bar-breakdown/GraphCard';
 import { ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
 import { noop } from './graphUtils';
@@ -37,8 +39,8 @@ function NetExchangeChart({ datetimes, timeAverage }: NetExchangeChartProps) {
   }
 
   return (
-    <>
-      <ChartTitle translationKey="country-history.netExchange" />
+    <GraphCard className="pb-2">
+      <ChartTitle translationKey="country-history.netExchange" icon={<ExchangeIcon />} />
       <div className="relative">
         <AreaGraph
           testId="history-exchange-graph"
@@ -58,7 +60,7 @@ function NetExchangeChart({ datetimes, timeAverage }: NetExchangeChartProps) {
           formatTick={formatAxisTick}
         />
       </div>
-    </>
+    </GraphCard>
   );
 }
 

diff --git a/web/src/features/charts/PriceChart.tsx b/web/src/features/charts/PriceChart.tsx
@@ -1,6 +1,8 @@
+import { CoinsIcon } from 'icons/coinsIcon';
 import { useTranslation } from 'react-i18next';
 import { TimeAverages } from 'utils/constants';
 
+import { GraphCard } from './bar-breakdown/GraphCard';
 import { ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
 import { noop } from './graphUtils';
@@ -51,12 +53,15 @@ function PriceChart({ datetimes, timeAverage }: PriceChartProps) {
   }
 
   return (
-    <>
-      <ChartTitle translationKey="country-history.electricityprices" />
-      <div className="relative overflow-hidden">
+    <GraphCard>
+      <ChartTitle
+        translationKey="country-history.electricityprices"
+        icon={<CoinsIcon />}
+      />
+      <div className={`relative ${isPriceDisabled ? 'overflow-hidden' : ''}`}>
         {isPriceDisabled && (
           <div className="absolute top-0 -ml-3 h-full w-[115%]">
-            <div className="h-full w-full rounded bg-white opacity-90 dark:bg-gray-900" />
+            <div className="h-full w-full rounded bg-zinc-50 opacity-90 dark:bg-gray-900" />
             <div className="absolute left-[45%] top-1/2 z-10 w-60 -translate-x-1/2 -translate-y-1/2 rounded-sm bg-gray-200 p-2 text-center text-sm shadow-lg dark:border dark:border-gray-700 dark:bg-gray-800">
               {t(`country-panel.disabledPriceReasons.${priceDisabledReason}`)}
             </div>
@@ -79,7 +84,7 @@ function PriceChart({ datetimes, timeAverage }: PriceChartProps) {
           tooltip={PriceChartTooltip}
         />
       </div>
-    </>
+    </GraphCard>
   );
 }
 

diff --git a/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx b/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx
@@ -1,6 +1,7 @@
 import * as Portal from '@radix-ui/react-portal';
 import Accordion from 'components/Accordion';
 import { getOffsetTooltipPosition } from 'components/tooltips/utilities';
+import Divider from 'features/panels/zone/Divider';
 import { IndustryIcon } from 'icons/industryIcon';
 import { UtilityPoleIcon } from 'icons/utilityPoleIcon';
 import { WindTurbineIcon } from 'icons/windTurbineIcon';
@@ -102,7 +103,10 @@ function BarBreakdownChart({
     .sort();
 
   return (
-    <div className="text-sm" ref={ref}>
+    <div
+      className="mt-4 rounded-2xl border border-neutral-200 px-4 pb-2 text-sm dark:border-gray-700"
+      ref={ref}
+    >
       <BySource
         hasEstimationPill={hasEstimationPill}
         estimatedPercentage={currentZoneDetail.estimatedPercentage}
@@ -155,7 +159,8 @@ function BarBreakdownChart({
           isMobile={false}
         />
       )}
-      <div className="pt-2">
+      <Divider />
+      <div className="py-1">
         <Accordion
           onClick={() => {
             trackEvent('Data Sources Clicked', { chart: 'bar-breakdown-chart' });

diff --git a/web/src/features/charts/bar-breakdown/GraphCard.tsx b/web/src/features/charts/bar-breakdown/GraphCard.tsx
@@ -0,0 +1,20 @@
+import { twMerge } from 'tailwind-merge';
+
+export function GraphCard({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={twMerge(
+        'my-2 rounded-2xl border-[1px] border-neutral-200 px-4 pb-2 dark:border-gray-700',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/web/src/features/charts/bar-breakdown/constants.ts b/web/src/features/charts/bar-breakdown/constants.ts
@@ -2,7 +2,7 @@ export const LABEL_MAX_WIDTH = 130;
 export const TEXT_ADJUST_Y = 11;
 export const ROW_HEIGHT = 13;
 export const PADDING_Y = 7;
-export const PADDING_X = 5;
+export const PADDING_X = 25;
 export const RECT_OPACITY = 0.8;
 export const X_AXIS_HEIGHT = 15;
 export const DEFAULT_FLAG_SIZE = 16;

diff --git a/web/src/features/charts/bar-breakdown/elements/BySource.tsx b/web/src/features/charts/bar-breakdown/elements/BySource.tsx
@@ -1,5 +1,6 @@
 import EstimationBadge from 'components/EstimationBadge';
 import { TFunction } from 'i18next';
+import { PlugCircleBoltIcon } from 'icons/plugCircleBoltIcon';
 import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { TimeAverages } from 'utils/constants';
@@ -51,7 +52,10 @@ export default function BySource({
     <div
       className={`relative flex flex-row justify-between pb-2 pt-4 text-md font-bold ${className}`}
     >
-      {text}
+      <div className="flex gap-1">
+        <PlugCircleBoltIcon />
+        {text}
+      </div>
       {hasEstimationPill && (
         <EstimationBadge
           text={

diff --git a/web/src/features/panels/LeftPanel.tsx b/web/src/features/panels/LeftPanel.tsx
@@ -108,7 +108,7 @@ function OuterPanel({ children }: { children: React.ReactNode }) {
       } ${isOpen ? '' : '-translate-x-full'}`}
     >
       <MobileHeader />
-      <section className="h-full w-full p-2 pr-0 sm:pl-1">{children}</section>
+      <section className="h-full w-full py-2 pr-0">{children}</section>
       <CollapseButton isCollapsed={!isOpen} onCollapse={onCollapse} />
     </aside>
   );

diff --git a/web/src/features/panels/zone/AreaGraphContainer.tsx b/web/src/features/panels/zone/AreaGraphContainer.tsx
@@ -17,7 +17,7 @@ export default function AreaGraphContainer({
   displayByEmissions: boolean;
 }) {
   return (
-    <div>
+    <div className="flex flex-col gap-1">
       {displayByEmissions ? (
         <EmissionChart datetimes={datetimes} timeAverage={timeAverage} />
       ) : (

diff --git a/web/src/features/panels/zone/ZoneDetails.tsx b/web/src/features/panels/zone/ZoneDetails.tsx
@@ -19,7 +19,6 @@ import { useBreakpoint } from 'utils/styling';
 import AreaGraphContainer from './AreaGraphContainer';
 import Attribution from './Attribution';
 import DisplayByEmissionToggle from './DisplayByEmissionToggle';
-import Divider from './Divider';
 import EstimationCard from './EstimationCard';
 import NoInformationMessage from './NoInformationMessage';
 import { getHasSubZones, getZoneDataStatus, ZoneDataStatus } from './util';
@@ -74,7 +73,7 @@ export default function ZoneDetails(): JSX.Element {
   return (
     <>
       <ZoneHeaderTitle zoneId={zoneId} />
-      <div className="h-[calc(100%-110px)] overflow-y-scroll p-4 pb-40 pt-2 sm:h-[calc(100%-130px)]">
+      <div className="h-[calc(100%-110px)] overflow-y-scroll p-3 pb-40 pt-2 sm:h-[calc(100%-130px)]">
         {cardType != 'none' &&
           zoneDataStatus !== ZoneDataStatus.NO_INFORMATION &&
           zoneDataStatus !== ZoneDataStatus.AGGREGATE_DISABLED && (
@@ -96,8 +95,8 @@ export default function ZoneDetails(): JSX.Element {
           zoneDataStatus={zoneDataStatus}
         >
           <BarBreakdownChart hasEstimationPill={hasEstimationPill} />
-          <Divider />
           <Button
+            backgroundClasses="mt-3 mb-1"
             size="lg"
             type="link"
             icon={<MdOutlineCloudDownload size={20} />}

diff --git a/web/src/icons/circleBoltIcon.tsx b/web/src/icons/circleBoltIcon.tsx
@@ -0,0 +1,18 @@
+export function CircleBoltIcon() {
+  return (
+    <div className="text-black dark:text-white">
+      <svg
+        width="16"
+        height="18"
+        viewBox="0 0 16 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.5 9C14.5 6.6875 13.25 4.5625 11.25 3.375C9.21875 2.21875 6.75 2.21875 4.75 3.375C2.71875 4.5625 1.5 6.6875 1.5 9C1.5 11.3438 2.71875 13.4688 4.75 14.6562C6.75 15.8125 9.21875 15.8125 11.25 14.6562C13.25 13.4688 14.5 11.3438 14.5 9ZM0 9C0 6.15625 1.5 3.53125 4 2.09375C6.46875 0.65625 9.5 0.65625 12 2.09375C14.4688 3.53125 16 6.15625 16 9C16 11.875 14.4688 14.5 12 15.9375C9.5 17.375 6.46875 17.375 4 15.9375C1.5 14.5 0 11.875 0 9ZM10.3125 4.625C10.4688 4.78125 10.5312 5.03125 10.4375 5.25L8.78125 8.5H11C11.1875 8.5 11.375 8.65625 11.4688 8.84375C11.5312 9.0625 11.4688 9.28125 11.3125 9.40625L6.3125 13.4062C6.125 13.5625 5.84375 13.5625 5.65625 13.4062C5.5 13.25 5.4375 13 5.53125 12.7812L7.1875 9.5H5C4.78125 9.5 4.59375 9.375 4.5 9.1875C4.4375 8.96875 4.5 8.75 4.6875 8.625L9.6875 4.625C9.84375 4.46875 10.125 4.46875 10.3125 4.625Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/web/src/icons/cloudArrowUpIcon.tsx b/web/src/icons/cloudArrowUpIcon.tsx
@@ -0,0 +1,18 @@
+export function CloudArrowUpIcon() {
+  return (
+    <div className="pt-0.5 text-black dark:text-white">
+      <svg
+        width="20"
+        height="14"
+        viewBox="0 0 20 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.0625 2.8125C10.375 2.03125 9.375 1.5 8.25 1.5C6.15625 1.5 4.5 3.1875 4.5 5.25V5.28125C4.5 5.90625 4.09375 6.46875 3.5 6.6875C2.3125 7.09375 1.5 8.21875 1.5 9.5C1.5 11.1562 2.84375 12.5 4.5 12.5H15.75H15.8438C15.8438 12.5 15.875 12.5 15.9062 12.5C17.3438 12.4375 18.5 11.2188 18.5 9.75C18.5 8.625 17.8125 7.65625 16.8438 7.25C16.2188 6.96875 15.8438 6.3125 15.9688 5.625C15.9688 5.5 16 5.375 16 5.25C16 4.03125 14.9688 3 13.75 3C13.4062 3 13.0938 3.09375 12.8125 3.21875C12.2188 3.46875 11.5 3.3125 11.0625 2.8125ZM16 14H15.75H14.5H4.5C2 14 0 12 0 9.5C0 7.5625 1.25 5.875 3 5.28125V5.25C3 2.375 5.34375 0 8.25 0C9.8125 0 11.25 0.71875 12.2188 1.84375C12.6875 1.625 13.1875 1.5 13.75 1.5C15.8125 1.5 17.5 3.1875 17.5 5.25C17.5 5.46875 17.4688 5.65625 17.4375 5.875C18.9375 6.53125 20 8.03125 20 9.75C20 12.0312 18.2188 13.875 16 14ZM6.96875 6.96875H6.9375L9.4375 4.46875C9.75 4.1875 10.2188 4.1875 10.5 4.46875L13 6.96875C13.3125 7.28125 13.3125 7.75 13 8.03125C12.7188 8.34375 12.25 8.34375 11.9375 8.03125L10.7188 6.8125V11C10.7188 11.4375 10.4062 11.75 9.96875 11.75C9.5625 11.75 9.21875 11.4375 9.21875 11V6.8125L8 8.03125C7.71875 8.34375 7.25 8.34375 6.96875 8.03125C6.65625 7.75 6.65625 7.28125 6.96875 6.96875Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/web/src/icons/coinsIcon.tsx b/web/src/icons/coinsIcon.tsx
@@ -0,0 +1,18 @@
+export function CoinsIcon() {
+  return (
+    <div className="pt-0.5 text-black dark:text-white">
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5.5 2.75C5.5 2.78125 5.5 2.78125 5.5 2.8125C5.53125 2.84375 5.5625 2.90625 5.65625 2.96875C5.65625 3 5.6875 3 5.6875 3C5.09375 3.03125 4.53125 3.0625 4 3.15625V2.75C4 2.1875 4.28125 1.75 4.65625 1.4375C5 1.09375 5.46875 0.84375 6 0.65625C7.0625 0.25 8.46875 0 10 0C11.5 0 12.9062 0.25 13.9688 0.65625C14.5 0.84375 14.9688 1.09375 15.3125 1.4375C15.6875 1.75 16 2.1875 16 2.75V6V9.25C16 9.8125 15.6875 10.2812 15.3125 10.5938C14.9688 10.9062 14.5 11.1875 13.9688 11.375C13.6562 11.5 13.3438 11.5938 13 11.6875V10.125C13.1562 10.0938 13.2812 10.0312 13.4375 9.96875C13.8438 9.8125 14.1562 9.625 14.3125 9.5C14.4062 9.40625 14.4375 9.34375 14.4688 9.3125C14.5 9.28125 14.5 9.28125 14.5 9.28125V7.90625C14.3125 7.96875 14.1562 8.0625 13.9688 8.125C13.6562 8.25 13.3438 8.34375 13 8.4375V6.875C13.1562 6.84375 13.2812 6.78125 13.4375 6.71875C13.8438 6.5625 14.1562 6.375 14.3125 6.25C14.4062 6.15625 14.4375 6.09375 14.4688 6.0625C14.5 6.03125 14.5 6.03125 14.5 6.03125V4.65625C14.3125 4.71875 14.1562 4.8125 13.9688 4.875C13.5312 5.03125 13.0625 5.1875 12.5312 5.28125C12.375 5.03125 12.1875 4.84375 12 4.6875C11.6875 4.40625 11.3125 4.15625 10.9375 3.96875C11.9375 3.90625 12.7812 3.71875 13.4375 3.46875C13.8438 3.3125 14.1562 3.125 14.3125 2.96875C14.4062 2.90625 14.4375 2.84375 14.4688 2.8125C14.5 2.78125 14.5 2.78125 14.5 2.75C14.5 2.75 14.5 2.75 14.4688 2.71875C14.4375 2.6875 14.4062 2.625 14.3125 2.53125C14.1562 2.375 13.8438 2.21875 13.4375 2.0625C12.5938 1.71875 11.375 1.5 10 1.5C8.59375 1.5 7.375 1.71875 6.53125 2.0625C6.125 2.21875 5.8125 2.375 5.65625 2.53125C5.5625 2.625 5.53125 2.6875 5.5 2.71875C5.5 2.75 5.5 2.75 5.5 2.75ZM1.5 6.75C1.5 6.78125 1.5 6.78125 1.5 6.8125C1.53125 6.84375 1.5625 6.90625 1.65625 6.96875C1.8125 7.125 2.125 7.3125 2.53125 7.46875C3.375 7.78125 4.59375 8 6 8C7.375 8 8.59375 7.78125 9.4375 7.46875C9.84375 7.3125 10.1562 7.125 10.3125 6.96875C10.4062 6.90625 10.4375 6.84375 10.4688 6.8125C10.4688 6.78125 10.5 6.78125 10.5 6.75C10.5 6.75 10.5 6.75 10.4688 6.71875C10.4375 6.6875 10.4062 6.625 10.3125 6.53125C10.1562 6.375 9.84375 6.21875 9.4375 6.0625C8.59375 5.71875 7.375 5.53125 6 5.53125C4.59375 5.53125 3.375 5.71875 2.53125 6.0625C2.125 6.21875 1.8125 6.40625 1.65625 6.53125C1.5625 6.625 1.53125 6.6875 1.5 6.71875C1.5 6.75 1.5 6.75 1.5 6.75ZM0 6.75C0 6.1875 0.28125 5.75 0.65625 5.4375C1 5.09375 1.46875 4.84375 2 4.65625C3.0625 4.25 4.46875 4 6 4C7.5 4 8.90625 4.25 9.96875 4.65625C10.5 4.84375 10.9688 5.09375 11.3125 5.4375C11.6875 5.75 12 6.1875 12 6.75V10V13.25C12 13.8125 11.6875 14.2812 11.3125 14.5938C10.9688 14.9062 10.5 15.1875 9.96875 15.375C8.90625 15.7812 7.5 16 6 16C4.46875 16 3.0625 15.7812 2 15.375C1.46875 15.1875 1 14.9375 0.65625 14.5938C0.28125 14.2812 0 13.8125 0 13.25V10V6.75ZM10.5 10V8.65625C10.3125 8.71875 10.1562 8.8125 9.96875 8.875C8.90625 9.28125 7.5 9.5 6 9.5C4.46875 9.5 3.0625 9.28125 2 8.875C1.8125 8.8125 1.65625 8.75 1.5 8.65625V10C1.5 10.0312 1.5 10.0312 1.5 10.0625C1.53125 10.0938 1.5625 10.1562 1.65625 10.2188C1.8125 10.375 2.125 10.5625 2.53125 10.7188C3.375 11.0312 4.59375 11.25 6 11.25C7.375 11.25 8.59375 11.0312 9.4375 10.7188C9.84375 10.5625 10.1562 10.375 10.3125 10.2188C10.4062 10.1562 10.4375 10.0938 10.4688 10.0625C10.4688 10.0312 10.5 10.0312 10.5 10ZM2 12.125C1.8125 12.0625 1.65625 12 1.5 11.9062V13.25C1.5 13.25 1.5 13.2812 1.5 13.3125C1.53125 13.3438 1.5625 13.4062 1.65625 13.4688C1.8125 13.625 2.125 13.8125 2.53125 13.9688C3.375 14.2812 4.59375 14.5 6 14.5C7.375 14.5 8.59375 14.2812 9.4375 13.9688C9.84375 13.8125 10.1562 13.625 10.3125 13.4688C10.4062 13.4062 10.4375 13.3438 10.4688 13.3125C10.5 13.2812 10.5 13.25 10.5 13.25V11.9062C10.3125 11.9688 10.1562 12.0625 9.96875 12.125C8.90625 12.5312 7.5 12.75 6 12.75C4.46875 12.75 3.0625 12.5312 2 12.125Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/web/src/icons/exchangeIcon.tsx b/web/src/icons/exchangeIcon.tsx
@@ -0,0 +1,18 @@
+export function ExchangeIcon() {
+  return (
+    <div className="pt-0.5 text-black dark:text-white">
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.21875 15.5312L1.21875 12.5312C0.90625 12.25 0.90625 11.7812 1.21875 11.4688L4.21875 8.5C4.5 8.1875 4.96875 8.1875 5.25 8.5C5.5625 8.78125 5.5625 9.25 5.25 9.53125L3.53125 11.25H14.25C14.6562 11.25 15 11.5938 15 12C15 12.4375 14.6562 12.75 14.25 12.75L3.53125 12.7812L5.25 14.5C5.5625 14.7812 5.5625 15.25 5.25 15.5312C4.96875 15.8438 4.5 15.8438 4.21875 15.5312ZM14.7812 4.53125L11.7812 7.53125C11.4688 7.84375 11 7.84375 10.7188 7.53125C10.4062 7.25 10.4062 6.78125 10.7188 6.46875L12.4375 4.75H1.75C1.3125 4.75 1 4.4375 1 4C1 3.59375 1.3125 3.25 1.75 3.25H12.4375L10.7188 1.53125C10.4062 1.25 10.4062 0.78125 10.7188 0.46875C11 0.1875 11.4688 0.1875 11.7812 0.46875L14.7812 3.5C15.0625 3.78125 15.0625 4.25 14.7812 4.53125Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  );
+}