UI adjustments change requests (#2622)

frontend/src/component/admin/menu/AdminMenu.tsx

@@ -1,38 +1,12 @@
 import React from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
-import { Paper, Tab, Tabs, Theme } from '@mui/material';
+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';
+import { CenteredNavLink } from './CenteredNavLink';
-
-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;
-};
 
 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
+                        <CenteredNavLink to="/admin/users">
-                            to="/admin/users"
-                            style={({ isActive }) =>
-                                createNavLinkStyle({ isActive, theme })
-                            }
-                        >
                             <span>Users</span>
-                        </NavLink>
+                        </CenteredNavLink>
                     }
                 />
                 {flags.UG && (
                     <Tab
                         value="/admin/groups"
                         label={
-                            <NavLink
+                            <CenteredNavLink to="/admin/groups">
-                                to="/admin/groups"
-                                style={({ isActive }) =>
-                                    createNavLinkStyle({ isActive, theme })
-                                }
-                            >
                                 <span>Groups</span>
-                            </NavLink>
+                            </CenteredNavLink>
                         }
                     />
                 )}
@@ -83,83 +47,53 @@ function AdminMenu() {
                     <Tab
                         value="/admin/roles"
                         label={
-                            <NavLink
+                            <CenteredNavLink to="/admin/roles">
-                                to="/admin/roles"
-                                style={({ isActive }) =>
-                                    createNavLinkStyle({ isActive, theme })
-                                }
-                            >
                                 <span>Project roles</span>
-                            </NavLink>
+                            </CenteredNavLink>
                         }
                     />
                 )}
                 <Tab
                     value="/admin/api"
                     label={
-                        <NavLink
+                        <CenteredNavLink to="/admin/api">
-                            to="/admin/api"
-                            style={({ isActive }) =>
-                                createNavLinkStyle({ isActive, theme })
-                            }
-                        >
                             API access
-                        </NavLink>
+                        </CenteredNavLink>
                     }
                 />
                 {uiConfig.flags.embedProxyFrontend && (
                     <Tab
                         value="/admin/cors"
                         label={
-                            <NavLink
+                            <CenteredNavLink to="/admin/cors">
-                                to="/admin/cors"
-                                style={({ isActive }) =>
-                                    createNavLinkStyle({ isActive, theme })
-                                }
-                            >
                                 CORS origins
-                            </NavLink>
+                            </CenteredNavLink>
                         }
                     />
                 )}
                 <Tab
                     value="/admin/auth"
                     label={
-                        <NavLink
+                        <CenteredNavLink to="/admin/auth">
-                            to="/admin/auth"
-                            style={({ isActive }) =>
-                                createNavLinkStyle({ isActive, theme })
-                            }
-                        >
                             Single sign-on
-                        </NavLink>
+                        </CenteredNavLink>
                     }
                 />
                 <Tab
                     value="/admin/instance"
                     label={
-                        <NavLink
+                        <CenteredNavLink to="/admin/instance">
-                            to="/admin/instance"
-                            style={({ isActive }) =>
-                                createNavLinkStyle({ isActive, theme })
-                            }
-                        >
                             Instance stats
-                        </NavLink>
+                        </CenteredNavLink>
                     }
                 />
                 {isBilling && (
                     <Tab
                         value="/admin/billing"
                         label={
-                            <NavLink
+                            <CenteredNavLink to="/admin/billing">
-                                to="/admin/billing"
-                                style={({ isActive }) =>
-                                    createNavLinkStyle({ isActive, theme })
-                                }
-                            >
                                 Billing
-                            </NavLink>
+                            </CenteredNavLink>
                         }
                     />
                 )}

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>
+    );
+};

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,
         },

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

frontend/src/component/project/Project/ProjectOverview.tsx

@@ -25,7 +25,6 @@ const ProjectOverview = () => {
     }, [projectId, setLastViewed]);
 
     return (
-        <div>
         <div className={styles.containerStyles}>
             <ProjectInfo
                 id={projectId}
@@ -42,7 +41,6 @@ const ProjectOverview = () => {
                 />
             </div>
         </div>
-        </div>
     );
 };