Merge pull request #1412 from bancorprotocol/issue-#1186

Fix inconsistent back button styling

src/components/common/BackButton.tsx

@@ -0,0 +1,15 @@
+import { ReactComponent as IconChevronLeft } from 'assets/icons/chevron-left.svg';
+import { cn } from 'utils/helpers';
+import { ButtonHTMLProps } from './button';
+
+export const backStyle =
+  'bg-background-900 hover:bg-background-800 grid size-40 place-items-center rounded-full p-12';
+export const BackIcon = () => <IconChevronLeft className="size-16" />;
+
+export const BackButton = ({ className, ...props }: ButtonHTMLProps) => {
+  return (
+    <button type="button" className={cn(backStyle, className)} {...props}>
+      <BackIcon />
+    </button>
+  );
+};

src/components/strategies/create/CreateLayout.tsx

@@ -6,10 +6,10 @@ import { ReactComponent as IconCandles } from 'assets/icons/candles.svg';
 import { m } from 'libs/motion';
 import { Token } from 'libs/tokens';
 import { useRouter } from '@tanstack/react-router';
-import { ForwardArrow } from 'components/common/forwardArrow';
 import { carbonEvents } from 'services/events';
 import { StrategyGraph } from 'components/strategies/common/StrategyGraph';
 import { items, list } from 'components/strategies/common/variants';
+import { BackButton } from 'components/common/BackButton';
 
 interface Props {
   base?: Token;
@@ -44,12 +44,7 @@ export const CreateLayout: FC<Props> = (props) => {
           key="createStrategyHeader"
           className="flex items-center gap-16"
         >
-          <button
-            onClick={() => history.back()}
-            className="bg-background-800 grid size-40 place-items-center rounded-full"
-          >
-            <ForwardArrow className="size-18 rotate-180" />
-          </button>
+          <BackButton onClick={() => history.back()} />
           <h1 className="text-24 font-weight-500 flex-1">Set Prices</h1>
           {!showGraph && (
             <button

src/components/strategies/edit/EditStrategyLayout.tsx

@@ -2,11 +2,11 @@ import { FC, ReactNode, useState } from 'react';
 import { TradingviewChart } from 'components/tradingviewChart';
 import { ReactComponent as IconCandles } from 'assets/icons/candles.svg';
 import { useRouter } from '@tanstack/react-router';
-import { ForwardArrow } from 'components/common/forwardArrow';
 import { carbonEvents } from 'services/events';
 import { useEditStrategyCtx } from './EditStrategyContext';
 import { EditTypes } from 'libs/routing/routes/strategyEdit';
 import { StrategyGraph } from 'components/strategies/common/StrategyGraph';
+import { BackButton } from 'components/common/BackButton';
 
 interface Props {
   editType: EditTypes;
@@ -37,12 +37,7 @@ export const EditStrategyLayout: FC<Props> = (props) => {
       }`}
     >
       <header className="flex items-center gap-16">
-        <button
-          onClick={() => history.back()}
-          className="bg-background-800 grid size-40 place-items-center rounded-full"
-        >
-          <ForwardArrow className="size-18 rotate-180" />
-        </button>
+        <BackButton onClick={() => history.back()} />
         <h1 className="text-24 font-weight-500 flex-1">
           {titleByType[editType]}
         </h1>

src/pages/simulator/result/index.tsx

@@ -5,9 +5,9 @@ import { SimResultSummary } from 'components/simulator/result/SimResultSummary';
 import { useSimulator } from 'components/simulator/result/SimulatorProvider';
 import { useBreakpoints } from 'hooks/useBreakpoints';
 import { useCallback, useEffect } from 'react';
-import { ReactComponent as IconChevronLeft } from 'assets/icons/chevron-left.svg';
 import { wait } from 'utils/helpers';
 import { THREE_SECONDS_IN_MS } from 'utils/time';
+import { BackIcon, backStyle } from 'components/common/BackButton';
 
 export const SimulatorResultPage = () => {
   const { status, isSuccess, start, ...ctx } = useSimulator();
@@ -34,49 +34,49 @@ export const SimulatorResultPage = () => {
   return (
     <div className="p-20">
       {simulationType === 'recurring' && (
-        <Link
-          to="/simulate/recurring"
-          search={{
-            baseToken: ctx.search.baseToken,
-            quoteToken: ctx.search.quoteToken,
-            start: ctx.search.start,
-            end: ctx.search.end,
-            buyMin: ctx.search.buyMin,
-            buyMax: ctx.search.buyMax,
-            buyBudget: ctx.search.buyBudget,
-            sellMin: ctx.search.sellMin,
-            sellMax: ctx.search.sellMax,
-            sellBudget: ctx.search.sellBudget,
-            buyIsRange: ctx.search.buyIsRange,
-            sellIsRange: ctx.search.sellIsRange,
-          }}
-          className="text-24 font-weight-500 mb-16 flex items-center"
-        >
-          <div className="bg-background-800 mr-16 flex size-40 items-center justify-center rounded-full">
-            <IconChevronLeft className="size-16" />
-          </div>
+        <div className="text-24 font-weight-500 mb-16 flex items-center gap-16">
+          <Link
+            to="/simulate/recurring"
+            search={{
+              baseToken: ctx.search.baseToken,
+              quoteToken: ctx.search.quoteToken,
+              start: ctx.search.start,
+              end: ctx.search.end,
+              buyMin: ctx.search.buyMin,
+              buyMax: ctx.search.buyMax,
+              buyBudget: ctx.search.buyBudget,
+              sellMin: ctx.search.sellMin,
+              sellMax: ctx.search.sellMax,
+              sellBudget: ctx.search.sellBudget,
+              buyIsRange: ctx.search.buyIsRange,
+              sellIsRange: ctx.search.sellIsRange,
+            }}
+            className={backStyle}
+          >
+            <BackIcon />
+          </Link>
           Simulate Strategy
-        </Link>
+        </div>
       )}
       {simulationType === 'overlapping' && (
-        <Link
-          to="/simulate/overlapping"
-          search={{
-            baseToken: ctx.search.baseToken,
-            quoteToken: ctx.search.quoteToken,
-            start: ctx.search.start,
-            end: ctx.search.end,
-            buyMin: ctx.search.buyMin,
-            sellMax: ctx.search.sellMax,
-            spread: ctx.search.spread,
-          }}
-          className="text-24 font-weight-500 mb-16 flex items-center"
-        >
-          <div className="bg-background-800 mr-16 flex size-40 items-center justify-center rounded-full">
-            <IconChevronLeft className="size-16" />
-          </div>
+        <div className="text-24 font-weight-500 mb-16 flex items-center gap-16">
+          <Link
+            to="/simulate/overlapping"
+            search={{
+              baseToken: ctx.search.baseToken,
+              quoteToken: ctx.search.quoteToken,
+              start: ctx.search.start,
+              end: ctx.search.end,
+              buyMin: ctx.search.buyMin,
+              sellMax: ctx.search.sellMax,
+              spread: ctx.search.spread,
+            }}
+            className={backStyle}
+          >
+            <BackIcon />
+          </Link>
           Simulate Strategy
-        </Link>
+        </div>
       )}
 
       <div className="rounded-20 bg-background-900 p-20">

src/pages/strategies/create/token.tsx

@@ -4,8 +4,8 @@ import { items, list } from 'components/strategies/common/variants';
 import { CreateStrategyTokenSelection } from 'components/strategies/create/CreateStrategyTokenSelection';
 import { CreateStrategyOption } from 'components/strategies/create/CreateStrategyOption';
 import { useRouter } from '@tanstack/react-router';
-import { ForwardArrow } from 'components/common/forwardArrow';
 import { usePersistLastPair } from './usePersistLastPair';
+import { BackButton } from 'components/common/BackButton';
 
 const url = '/strategies/create';
 export const CreateStrategyTokenPage = () => {
@@ -25,12 +25,7 @@ export const CreateStrategyTokenPage = () => {
           key="createStrategyHeader"
           className="flex items-center gap-16"
         >
-          <button
-            onClick={() => history.back()}
-            className="bg-background-800 grid size-40 place-items-center rounded-full"
-          >
-            <ForwardArrow className="size-18 rotate-180" />
-          </button>
+          <BackButton onClick={() => history.back()} />
           <h1 className="text-24 font-weight-500 flex-1">Create Strategy</h1>
         </m.header>
         <CreateStrategyTokenSelection base={base} quote={quote} />

src/pages/strategy/index.tsx

@@ -2,7 +2,6 @@ import { useParams, useRouter } from '@tanstack/react-router';
 import { ActivityProvider } from 'components/activity/ActivityProvider';
 import { ActivitySection } from 'components/activity/ActivitySection';
 import { Page } from 'components/common/page';
-import { ReactComponent as IconChevronLeft } from 'assets/icons/chevron-left.svg';
 import { TokensOverlap } from 'components/common/tokensOverlap';
 import { cn } from 'utils/helpers';
 import { useGetStrategy } from 'libs/queries';
@@ -19,6 +18,7 @@ import { StrategySubtitle } from 'components/strategies/overview/strategyBlock/S
 import { CarbonLogoLoading } from 'components/common/CarbonLogoLoading';
 import { TradingviewChart } from 'components/tradingviewChart';
 import { NotFound } from 'components/common/NotFound';
+import { BackButton } from 'components/common/BackButton';
 
 export const StrategyPage = () => {
   const { history } = useRouter();
@@ -53,12 +53,7 @@ export const StrategyPage = () => {
   return (
     <Page hideTitle={true} className="gap-20">
       <header className="flex items-center gap-8">
-        <button
-          onClick={() => history.back()}
-          className="bg-background-900 hover:bg-background-800 rounded-full p-12"
-        >
-          <IconChevronLeft className="size-16" />
-        </button>
+        <BackButton onClick={() => history.back()} />
         <TokensOverlap tokens={[base, quote]} size={40} />
         <div className="flex-1 flex-col gap-8">
           <h1 className="text-18 font-weight-500 flex gap-8">