From e8ce376273a91ecf46a92fc424a71bec16967214 Mon Sep 17 00:00:00 2001
From: wivern-co-uk <echo@wivern.co.uk>
Date: Wed, 12 Apr 2023 00:27:54 +0200
Subject: [PATCH 1/2] feat: whole area clickable back buttons

---
 src/components/Step/Step.tsx                  | 20 +++++++++--------
 src/components/Step/styles.tsx                | 13 ++++++-----
 .../QuoteSelectStep/QuoteSelectStep.tsx       |  2 +-
 .../Transact/StepHeader/StepHeader.tsx        | 22 +++++++++++++------
 .../Actions/Transact/StepHeader/styles.tsx    | 13 ++++++-----
 .../TokenSelectStep/TokenSelectStep.tsx       |  2 +-
 6 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/components/Step/Step.tsx b/src/components/Step/Step.tsx
index 3f69b0012..6b7a738e8 100644
--- a/src/components/Step/Step.tsx
+++ b/src/components/Step/Step.tsx
@@ -10,7 +10,7 @@ export type StepType = 'bridge' | 'onRamp';
 
 export type StepProps = {
   stepType: StepType;
-  title?: string;
+  title: string;
   onBack?: () => void;
   children: ReactNode;
   titleAdornment?: ReactNode;
@@ -33,17 +33,19 @@ export const Step = memo<StepProps>(function ({
 
   return (
     <div className={classes.container}>
-      {title ? (
-        <div className={classes.titleBar}>
-          {onBack !== undefined ? (
-            <button onClick={onBack} className={classes.backButton}>
+      <div className={classes.titleBar}>
+        {onBack ? (
+          <a onClick={onBack} className={classes.backLink}>
+            <button className={classes.backButton}>
               <BackArrow className={classes.backIcon} />
             </button>
-          ) : null}
+            {title}
+          </a>
+        ) : (
           <div>{title}</div>
-          {titleAdornment ? <div className={classes.adornment}>{titleAdornment}</div> : null}
-        </div>
-      ) : null}
+        )}
+        {titleAdornment ? <div className={classes.adornment}>{titleAdornment}</div> : null}
+      </div>
       <div className={clsx(classes.content, contentClass, { [classes.noPadding]: noPadding })}>
         {children}
       </div>
diff --git a/src/components/Step/styles.tsx b/src/components/Step/styles.tsx
index 5c560404c..b2291fa33 100644
--- a/src/components/Step/styles.tsx
+++ b/src/components/Step/styles.tsx
@@ -21,6 +21,13 @@ export const styles = (theme: Theme) => ({
     columnGap: '12px',
     alignItems: 'center',
   },
+  backLink: {
+    flexShrink: 0,
+    flexGrow: 0,
+    display: 'flex',
+    columnGap: '12px',
+    cursor: 'pointer',
+  },
   backButton: {
     margin: 0,
     padding: 0,
@@ -31,12 +38,6 @@ export const styles = (theme: Theme) => ({
     boxShadow: 'none',
     cursor: 'pointer',
     border: 'none',
-    color: '#F5F5FF',
-    flexShrink: 0,
-    flexGrow: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   backIcon: {
     fill: '#F5F5FF',
diff --git a/src/features/vault/components/Actions/Transact/QuoteSelectStep/QuoteSelectStep.tsx b/src/features/vault/components/Actions/Transact/QuoteSelectStep/QuoteSelectStep.tsx
index dd8b26843..423e9050c 100644
--- a/src/features/vault/components/Actions/Transact/QuoteSelectStep/QuoteSelectStep.tsx
+++ b/src/features/vault/components/Actions/Transact/QuoteSelectStep/QuoteSelectStep.tsx
@@ -29,7 +29,7 @@ export const QuoteSelectStep = memo(function QuoteSelectStep() {
 
   return (
     <div className={classes.container}>
-      <StepHeader onBack={handleBack}>{t('Transact-SelectProvider')}</StepHeader>
+      <StepHeader onBack={handleBack} title={t('Transact-SelectProvider')} />
       <div className={classes.select}>
         <Scrollable className={classes.listContainer}>
           <div className={classes.list}>
diff --git a/src/features/vault/components/Actions/Transact/StepHeader/StepHeader.tsx b/src/features/vault/components/Actions/Transact/StepHeader/StepHeader.tsx
index aa08abc95..206113751 100644
--- a/src/features/vault/components/Actions/Transact/StepHeader/StepHeader.tsx
+++ b/src/features/vault/components/Actions/Transact/StepHeader/StepHeader.tsx
@@ -7,18 +7,26 @@ const useStyles = makeStyles(styles);
 
 export type StepHeaderProps = {
   onBack?: () => void;
-  children: ReactNode;
+  title: string;
+  children?: ReactNode;
 };
-export const StepHeader = memo<StepHeaderProps>(function ({ onBack, children }) {
+export const StepHeader = memo<StepHeaderProps>(function ({ onBack, title, children }) {
   const classes = useStyles();
 
   return (
     <div className={classes.container}>
-      {onBack ? (
-        <button onClick={onBack} className={classes.backButton}>
-          <BackArrow className={classes.backIcon} />
-        </button>
-      ) : null}
+      <div>
+        {onBack ? (
+          <a onClick={onBack} className={classes.backLink}>
+            <button className={classes.backButton}>
+              <BackArrow className={classes.backIcon} />
+            </button>
+            {title}
+          </a>
+        ) : (
+          <div>{title}</div>
+        )}
+      </div>
       {children}
     </div>
   );
diff --git a/src/features/vault/components/Actions/Transact/StepHeader/styles.tsx b/src/features/vault/components/Actions/Transact/StepHeader/styles.tsx
index e516f70de..3dbb4adbe 100644
--- a/src/features/vault/components/Actions/Transact/StepHeader/styles.tsx
+++ b/src/features/vault/components/Actions/Transact/StepHeader/styles.tsx
@@ -22,6 +22,13 @@ export const styles = (theme: Theme) => ({
       background: '#363B63',
     },
   },
+  backLink: {
+    flexShrink: 0,
+    flexGrow: 0,
+    display: 'flex',
+    columnGap: '12px',
+    cursor: 'pointer',
+  },
   backButton: {
     margin: 0,
     padding: 0,
@@ -32,12 +39,6 @@ export const styles = (theme: Theme) => ({
     boxShadow: 'none',
     cursor: 'pointer',
     border: 'none',
-    color: '#F5F5FF',
-    flexShrink: 0,
-    flexGrow: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   backIcon: {
     fill: '#F5F5FF',
diff --git a/src/features/vault/components/Actions/Transact/TokenSelectStep/TokenSelectStep.tsx b/src/features/vault/components/Actions/Transact/TokenSelectStep/TokenSelectStep.tsx
index 72b0e534d..5ed8c4c8a 100644
--- a/src/features/vault/components/Actions/Transact/TokenSelectStep/TokenSelectStep.tsx
+++ b/src/features/vault/components/Actions/Transact/TokenSelectStep/TokenSelectStep.tsx
@@ -23,7 +23,7 @@ export const TokenSelectStep = memo(function () {
 
   return (
     <div className={classes.container}>
-      <StepHeader onBack={handleBack}>{t('Transact-SelectToken')}</StepHeader>
+      <StepHeader onBack={handleBack} title={t('Transact-SelectToken')} />
       {mode === TransactMode.Deposit ? <DepositTokenSelectList /> : <WithdrawTokenSelectList />}
     </div>
   );

From 122d5e31812480f29540975ccceeb33dc8269b3a Mon Sep 17 00:00:00 2001
From: wivern-co-uk <echo@wivern.co.uk>
Date: Wed, 12 Apr 2023 00:52:35 +0200
Subject: [PATCH 2/2] fix: UnsupportedCountryStep title

---
 .../UnsupportedCountryStep/UnsupportedCountryStep.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/on-ramp/components/OnRamp/components/UnsupportedCountryStep/UnsupportedCountryStep.tsx b/src/features/on-ramp/components/OnRamp/components/UnsupportedCountryStep/UnsupportedCountryStep.tsx
index a5131ed6b..7d8a88225 100644
--- a/src/features/on-ramp/components/OnRamp/components/UnsupportedCountryStep/UnsupportedCountryStep.tsx
+++ b/src/features/on-ramp/components/OnRamp/components/UnsupportedCountryStep/UnsupportedCountryStep.tsx
@@ -8,7 +8,7 @@ export const UnsupportedCountryStep = memo(function () {
   const { t } = useTranslation();
 
   return (
-    <Step stepType="onRamp">
+    <Step stepType="onRamp" title={t('OnRamp-UnsupportedCountryStep-Title')}>
       <ErrorIndicator
         title={t('OnRamp-UnsupportedCountryStep-Title')}
         content={t('OnRamp-UnsupportedCountryStep-Content')}