From fee95475bd6913272b6c490190c717749b90a1eb Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 7 Dec 2022 12:52:17 +0100
Subject: [PATCH] UI adjustments change requests (#2622)

---
 .../src/component/admin/menu/AdminMenu.tsx    | 104 ++++--------------
 .../component/admin/menu/CenteredNavLink.tsx  |  41 +++++++
 .../project/Project/Project.styles.ts         |   8 +-
 .../src/component/project/Project/Project.tsx |   2 +
 .../project/Project/ProjectOverview.tsx       |  28 +++--
 5 files changed, 81 insertions(+), 102 deletions(-)
 create mode 100644 frontend/src/component/admin/menu/CenteredNavLink.tsx

diff --git a/frontend/src/component/admin/menu/AdminMenu.tsx b/frontend/src/component/admin/menu/AdminMenu.tsx
index 40606af2e8..829212ec91 100644
--- a/frontend/src/component/admin/menu/AdminMenu.tsx
+++ b/frontend/src/component/admin/menu/AdminMenu.tsx
@@ -1,38 +1,12 @@
 import React from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
-import { Paper, Tab, Tabs, Theme } from '@mui/material';
+import { useLocation } from 'react-router-dom';
+import { Paper, Tab, Tabs } from '@mui/material';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
-import { useTheme } from '@mui/material/styles';
-
-const createNavLinkStyle = (props: {
-    isActive: boolean;
-    theme: Theme;
-}): React.CSSProperties => {
-    const navLinkStyle = {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        textDecoration: 'none',
-        color: 'inherit',
-        padding: props.theme.spacing(1.5, 3),
-    };
-
-    const activeNavLinkStyle: React.CSSProperties = {
-        fontWeight: 'bold',
-        borderRadius: '3px',
-        padding: props.theme.spacing(1.5, 3),
-    };
-
-    return props.isActive
-        ? { ...navLinkStyle, ...activeNavLinkStyle }
-        : navLinkStyle;
-};
+import { CenteredNavLink } from './CenteredNavLink';
 
 function AdminMenu() {
     const { uiConfig } = useUiConfig();
-    const theme = useTheme();
     const { pathname } = useLocation();
     const { isBilling } = useInstanceStatus();
     const { flags } = uiConfig;
@@ -54,28 +28,18 @@ function AdminMenu() {
                 <Tab
                     value="/admin/users"
                     label={
-                        <NavLink
-                            to="/admin/users"
-                            style={({ isActive }) =>
-                                createNavLinkStyle({ isActive, theme })
-                            }
-                        >
+                        <CenteredNavLink to="/admin/users">
                             <span>Users</span>
-                        </NavLink>
+                        </CenteredNavLink>
                     }
                 />
                 {flags.UG && (
                     <Tab
                         value="/admin/groups"
                         label={
-                            <NavLink
-                                to="/admin/groups"
-                                style={({ isActive }) =>
-                                    createNavLinkStyle({ isActive, theme })
-                                }
-                            >
+                            <CenteredNavLink to="/admin/groups">
                                 <span>Groups</span>
-                            </NavLink>
+                            </CenteredNavLink>
                         }
                     />
                 )}
@@ -83,83 +47,53 @@ function AdminMenu() {
                     <Tab
                         value="/admin/roles"
                         label={
-                            <NavLink
-                                to="/admin/roles"
-                                style={({ isActive }) =>
-                                    createNavLinkStyle({ isActive, theme })
-                                }
-                            >
+                            <CenteredNavLink to="/admin/roles">
                                 <span>Project roles</span>
-                            </NavLink>
+                            </CenteredNavLink>
                         }
                     />
                 )}
                 <Tab
                     value="/admin/api"
                     label={
-                        <NavLink
-                            to="/admin/api"
-                            style={({ isActive }) =>
-                                createNavLinkStyle({ isActive, theme })
-                            }
-                        >
+                        <CenteredNavLink to="/admin/api">
                             API access
-                        </NavLink>
+                        </CenteredNavLink>
                     }
                 />
                 {uiConfig.flags.embedProxyFrontend && (
                     <Tab
                         value="/admin/cors"
                         label={
-                            <NavLink
-                                to="/admin/cors"
-                                style={({ isActive }) =>
-                                    createNavLinkStyle({ isActive, theme })
-                                }
-                            >
+                            <CenteredNavLink to="/admin/cors">
                                 CORS origins
-                            </NavLink>
+                            </CenteredNavLink>
                         }
                     />
                 )}
                 <Tab
                     value="/admin/auth"
                     label={
-                        <NavLink
-                            to="/admin/auth"
-                            style={({ isActive }) =>
-                                createNavLinkStyle({ isActive, theme })
-                            }
-                        >
+                        <CenteredNavLink to="/admin/auth">
                             Single sign-on
-                        </NavLink>
+                        </CenteredNavLink>
                     }
                 />
                 <Tab
                     value="/admin/instance"
                     label={
-                        <NavLink
-                            to="/admin/instance"
-                            style={({ isActive }) =>
-                                createNavLinkStyle({ isActive, theme })
-                            }
-                        >
+                        <CenteredNavLink to="/admin/instance">
                             Instance stats
-                        </NavLink>
+                        </CenteredNavLink>
                     }
                 />
                 {isBilling && (
                     <Tab
                         value="/admin/billing"
                         label={
-                            <NavLink
-                                to="/admin/billing"
-                                style={({ isActive }) =>
-                                    createNavLinkStyle({ isActive, theme })
-                                }
-                            >
+                            <CenteredNavLink to="/admin/billing">
                                 Billing
-                            </NavLink>
+                            </CenteredNavLink>
                         }
                     />
                 )}
diff --git a/frontend/src/component/admin/menu/CenteredNavLink.tsx b/frontend/src/component/admin/menu/CenteredNavLink.tsx
new file mode 100644
index 0000000000..3b6c981898
--- /dev/null
+++ b/frontend/src/component/admin/menu/CenteredNavLink.tsx
@@ -0,0 +1,41 @@
+import { Theme } from '@mui/material';
+import React, { FC } from 'react';
+import { NavLink } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+
+const createNavLinkStyle = (props: {
+    isActive: boolean;
+    theme: Theme;
+}): React.CSSProperties => {
+    const navLinkStyle = {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        textDecoration: 'none',
+        color: 'inherit',
+        padding: props.theme.spacing(1.5, 3),
+    };
+
+    const activeNavLinkStyle: React.CSSProperties = {
+        fontWeight: 'bold',
+        borderRadius: '3px',
+        padding: props.theme.spacing(1.5, 3),
+    };
+
+    return props.isActive
+        ? { ...navLinkStyle, ...activeNavLinkStyle }
+        : navLinkStyle;
+};
+
+export const CenteredNavLink: FC<{ to: string }> = ({ to, children }) => {
+    const theme = useTheme();
+    return (
+        <NavLink
+            to={to}
+            style={({ isActive }) => createNavLinkStyle({ isActive, theme })}
+        >
+            {children}
+        </NavLink>
+    );
+};
diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts
index 7a4a841371..cd19609118 100644
--- a/frontend/src/component/project/Project/Project.styles.ts
+++ b/frontend/src/component/project/Project/Project.styles.ts
@@ -2,7 +2,6 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     containerStyles: {
-        marginTop: '1.5rem',
         display: 'flex',
         [theme.breakpoints.down('md')]: {
             flexDirection: 'column',
@@ -32,8 +31,13 @@ export const useStyles = makeStyles()(theme => ({
     },
     tabButton: {
         textTransform: 'none',
-        width: 'auto',
         fontSize: '1rem',
+        flexGrow: 1,
+        flexBasis: 0,
+        [theme.breakpoints.down('md')]: {
+            paddingLeft: theme.spacing(1),
+            paddingRight: theme.spacing(1),
+        },
         [theme.breakpoints.up('md')]: {
             minWidth: 160,
         },
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 6c1a8b8592..cb8e10b1b1 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -31,6 +31,7 @@ import { ProjectSettings } from './ProjectSettings/ProjectSettings';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { FavoriteIconButton } from '../../common/FavoriteIconButton/FavoriteIconButton';
 import { useFavoriteProjectsApi } from '../../../hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi';
+import { CenteredNavLink } from '../../admin/menu/CenteredNavLink';
 
 const StyledDiv = styled('div')(() => ({
     display: 'flex',
@@ -241,6 +242,7 @@ const Project = () => {
                         indicatorColor="primary"
                         textColor="primary"
                         variant="scrollable"
+                        allowScrollButtonsMobile
                     >
                         {tabs.map(tab => (
                             <Tab
diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx
index 28ee3ca1b5..54f4e41fc0 100644
--- a/frontend/src/component/project/Project/ProjectOverview.tsx
+++ b/frontend/src/component/project/Project/ProjectOverview.tsx
@@ -25,22 +25,20 @@ const ProjectOverview = () => {
     }, [projectId, setLastViewed]);
 
     return (
-        <div>
-            <div className={styles.containerStyles}>
-                <ProjectInfo
-                    id={projectId}
-                    description={description}
-                    memberCount={members}
-                    health={health}
-                    featureCount={features?.length}
+        <div className={styles.containerStyles}>
+            <ProjectInfo
+                id={projectId}
+                description={description}
+                memberCount={members}
+                health={health}
+                featureCount={features?.length}
+            />
+            <div className={styles.projectToggles}>
+                <ProjectFeatureToggles
+                    features={features}
+                    environments={environments}
+                    loading={loading}
                 />
-                <div className={styles.projectToggles}>
-                    <ProjectFeatureToggles
-                        features={features}
-                        environments={environments}
-                        loading={loading}
-                    />
-                </div>
             </div>
         </div>
     );