Add bottom border to the active tab

frontend/src/metabase/admin/databases/components/DatabaseEditForms.jsx

@@ -19,7 +19,7 @@ export default class DatabaseEditForms extends Component {
 
         let errors = {};
         return (
-            <div>
+            <div className="mt4">
                 <div className={cx("Form-field", {"Form--fieldError": errors["engine"]})}>
                     <label className="Form-label Form-offset">Database type: <span>{errors["engine"]}</span></label>
                     <label className="Select Form-offset mt1">

frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx

@@ -36,12 +36,18 @@ const mapStateToProps = (state, props) => ({
     formState: getFormState(state, props)
 });
 
-export const Tab = ({ name, setTab, currentTab }) =>
-    <div
-        className={cx('cursor-pointer py3', {'text-brand': currentTab === name.toLowerCase() })}
-        onClick={() => setTab(name)}>
-        <h3>{name}</h3>
-    </div>
+export const Tab = ({ name, setTab, currentTab }) => {
+    const isCurrentTab = currentTab === name.toLowerCase()
+
+    return (
+        <div
+            className={cx('cursor-pointer py2', {'text-brand': isCurrentTab })}
+            style={isCurrentTab ? { borderBottom: "3px solid #2D86D4" } : {}}
+            onClick={() => setTab(name)}>
+            <h3>{name}</h3>
+        </div>
+    )
+}
 
 export const Tabs = ({ currentTab, setTab }) =>
     <div className="border-bottom">