fix: improve styles for tab bars and dividers (#1037)

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(
                         ({

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')]: {

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) => {