From 2cd9e992feeb4632491403452997156f52032380 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Fri, 27 May 2022 12:27:33 +0200
Subject: [PATCH] fix: improve styles for tab bars and dividers (#1037)

---
 .../application/ApplicationView/ApplicationView.tsx        | 7 ++++---
 .../src/component/common/TabNav/TabNav/TabNav.styles.ts    | 3 +++
 frontend/src/component/common/TabNav/TabNav/TabNav.tsx     | 5 ++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/application/ApplicationView/ApplicationView.tsx b/frontend/src/component/application/ApplicationView/ApplicationView.tsx
index 5942c93d50..b6c014aa2f 100644
--- a/frontend/src/component/application/ApplicationView/ApplicationView.tsx
+++ b/frontend/src/component/application/ApplicationView/ApplicationView.tsx
@@ -7,6 +7,7 @@ import {
     ListItemAvatar,
     ListItemText,
     Typography,
+    Divider,
 } from '@mui/material';
 import {
     Extension,
@@ -107,7 +108,7 @@ export const ApplicationView = () => {
                 <Typography variant="subtitle1" style={{ padding: '1rem 0' }}>
                     Toggles
                 </Typography>
-                <hr />
+                <Divider />
                 <List>
                     {seenToggles.map(
                         ({ name, description, notFound, project }, i) => (
@@ -135,7 +136,7 @@ export const ApplicationView = () => {
                 <Typography variant="subtitle1" style={{ padding: '1rem 0' }}>
                     Implemented strategies
                 </Typography>
-                <hr />
+                <Divider />
                 <List>
                     {strategies.map(
                         ({ name, description, notFound }, i: number) => (
@@ -163,7 +164,7 @@ export const ApplicationView = () => {
                 <Typography variant="subtitle1" style={{ padding: '1rem 0' }}>
                     {instances.length} Instances registered
                 </Typography>
-                <hr />
+                <Divider />
                 <List>
                     {instances.map(
                         ({
diff --git a/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts b/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts
index a128c42acb..856db96277 100644
--- a/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts
+++ b/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts
@@ -3,6 +3,9 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     tabNav: {
         backgroundColor: theme.palette.background.paper,
+        borderBottom: '1px solid',
+        borderBottomColor: theme.palette.grey[300],
+        borderRadius: 0,
     },
     tab: {
         [theme.breakpoints.up('lg')]: {
diff --git a/frontend/src/component/common/TabNav/TabNav/TabNav.tsx b/frontend/src/component/common/TabNav/TabNav/TabNav.tsx
index e9854ee8a3..b3c1122456 100644
--- a/frontend/src/component/common/TabNav/TabNav/TabNav.tsx
+++ b/frontend/src/component/common/TabNav/TabNav/TabNav.tsx
@@ -45,7 +45,10 @@ export const TabNav = ({
 
     return (
         <>
-            <Paper className={classnames(styles.tabNav, navClass)}>
+            <Paper
+                className={classnames(styles.tabNav, navClass)}
+                elevation={0}
+            >
                 <Tabs
                     value={activeTab}
                     onChange={(_, tabId) => {