back button

frontend/src/metabase/components/HeaderWithBack.jsx

@@ -5,14 +5,11 @@ import Icon from "metabase/components/Icon";
 const HeaderWithBack = ({ name }) =>
     <div className="flex align-center">
         { /* TODO - is this this the way we should do this? maybe makes more sense to just usa a link to the question index since you can navigate here from other spots potentially */ }
-        <div
-            className="cursor-pointer text-brand-hover mr2"
+        <Icon
+            className="cursor-pointer text-brand mr2 flex align-center circle p2 bg-light-blue bg-brand-hover text-white-hover transition-background transition-color"
+            name="backArrow"
             onClick={() => window.history.back()}
-        >
-            <div className="circle">
-                <Icon name="backArrow" />
-            </div>
-        </div>
+        />
         <h2>{name}</h2>
     </div>
 

frontend/src/metabase/css/core/base.css

@@ -61,6 +61,8 @@ textarea {
   background-color: #f9fbfc;
 }
 
+.circle { border-radius: 99px; }
+
 .undefined {
     border: 1px solid red !important;
 }