feat: whole area clickable back buttons

[wivern-co-uk]

• Small refactoring to unify two Stepper components more
• Make title next to back button clickable

[ReflectiveChimp]

Please don't have <button> inside <a>, <a> without href or <button> without a click handler.

Maybe something like this?

Index: src/components/Step/Step.tsx
<+>UTF-8
===================================================================
@@ -37,10 +37,14 @@
         <div className={classes.titleBar}>
           {onBack !== undefined ? (
             <button onClick={onBack} className={classes.backButton}>
-              <BackArrow className={classes.backIcon} />
+              <div className={classes.backIconSizer}>
+                <BackArrow className={classes.backIcon} />
+              </div>
+              <div>{title}</div>
             </button>
-          ) : null}
-          <div>{title}</div>
+          ) : (
+            <div>{title}</div>
+          )}
           {titleAdornment ? <div className={classes.adornment}>{titleAdornment}</div> : null}
         </div>
       ) : null}

Index: src/components/Step/styles.tsx
<+>UTF-8
===================================================================
@@ -24,19 +24,28 @@
   backButton: {
     margin: 0,
     padding: 0,
-    borderRadius: '50%',
-    width: '24px',
-    height: '24px',
-    background: '#363B63',
+    font: 'inherit',
+    background: 'transparent',
     boxShadow: 'none',
     cursor: 'pointer',
     border: 'none',
-    color: '#F5F5FF',
+    color: 'inherit',
+    flexShrink: 0,
+    flexGrow: 0,
+    display: 'flex',
+    columnGap: '12px',
+    alignItems: 'center',
+  },
+  backIconSizer: {
     flexShrink: 0,
     flexGrow: 0,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    background: '#363B63',
+    borderRadius: '50%',
+    width: '24px',
+    height: '24px',
   },
   backIcon: {
     fill: '#F5F5FF',