Admin & User Settings UI Updates

webapp/src/components/AdminOrganizationDeleteMenu.tsx

@@ -6,13 +6,16 @@ import { Options } from './AdminDeletionOptions'
 
 import '../features/adminRsuTab/Admin.css'
 import { ContainedIconButton } from '../styles/components/ContainedIconButton'
+import { alpha, useTheme } from '@mui/material/styles'
+import { DeleteOutline } from '@mui/icons-material'
 
 interface AdminOrganizationDeleteMenuProps {
   selectedOrganization: string
   deleteOrganization: () => void
 }
 
 const AdminOrganizationDeleteMenu = (props: AdminOrganizationDeleteMenuProps) => {
+  const theme = useTheme()
   const handleDelete = () => {
     const buttons = [
       {
@@ -36,14 +39,15 @@ const AdminOrganizationDeleteMenu = (props: AdminOrganizationDeleteMenuProps) =>
         title="Delete Organization"
         onClick={handleDelete}
         sx={{
-          float: 'left',
-          margin: 2,
-          mt: 0.5,
-          mr: 0,
-          ml: 0.5,
+          backgroundColor: 'transparent',
+          color: theme.palette.text.primary,
+          borderRadius: '2px',
+          '&:hover': {
+            backgroundColor: alpha(theme.palette.text.primary, 0.1),
+          },
         }}
       >
-        <DeleteIcon component={undefined} size={20} />
+        <DeleteOutline component={undefined} size={20} />
       </ContainedIconButton>
     </div>
   )

webapp/src/components/AdminTable.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import MaterialTable, { Action, Column, MTableBodyRow, MTableCell } from '@material-table/core'
+import MaterialTable, { Action, Column, MTableCell } from '@material-table/core'
 
 import '../features/adminRsuTab/Admin.css'
 import { alpha, Tooltip, useTheme } from '@mui/material'
@@ -33,9 +33,6 @@ const AdminTable = (props: AdminTableProps) => {
         actions={props.actions}
         columns={props.columns?.map((column) => ({
           ...column,
-          cellStyle: {
-            borderRight: `1px solid ${alpha(theme.palette.divider, 0.1)}`, // Add column lines
-          },
         }))}
         data={props.data}
         title={props.title}
@@ -54,6 +51,7 @@ const AdminTable = (props: AdminTableProps) => {
           },
           pageSize: 5,
           pageSizeOptions: props.pageSizeOptions === undefined ? [5, 10, 20] : props.pageSizeOptions,
+          searchFieldAlignment: 'left',
         }}
         components={{
           Cell: (props) => {

webapp/src/components/VerticalTabs.tsx

@@ -9,6 +9,12 @@ import { RootState } from '../store'
 import { alpha, Box, Tab, Tabs, useTheme } from '@mui/material'
 import { Link, Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import { evaluateFeatureFlags } from '../feature-flags'
+import {
+  FiberManualRecordOutlined,
+  PersonOutlined,
+  SignalCellularAltOutlined,
+  TrafficOutlined,
+} from '@mui/icons-material'
 
 interface TabPanelProps {
   children?: React.ReactNode
@@ -53,6 +59,19 @@ function VerticalTabs(props: VerticalTabProps) {
   const filteredTabs = tabs.filter((tab) => evaluateFeatureFlags(tab.tag))
   const defaultTabKey = filteredTabs[defaultTabIndex ?? 0]?.path
 
+  const getIcon = (tabName: string) => {
+    switch (tabName) {
+      case 'RSUs':
+        return <SignalCellularAltOutlined sx={{ marginRight: '40px' }} />
+      case 'Intersections':
+        return <TrafficOutlined sx={{ marginRight: '40px' }} />
+      case 'Users':
+        return <PersonOutlined sx={{ marginRight: '40px' }} />
+      case 'Organizations':
+        return <FiberManualRecordOutlined sx={{ marginRight: '40px' }} />
+    }
+  }
+
   const getSelectedTab = () => location.pathname.split('/').at(-1) || defaultTabKey
 
   const [value, setValue] = useState<string | number>(getSelectedTab())
@@ -92,14 +111,7 @@ function VerticalTabs(props: VerticalTabProps) {
           indicatorColor="secondary"
           textColor="inherit"
           orientation="vertical"
-          sx={{ width: 170 }}
-          TabIndicatorProps={{
-            style: {
-              right: 'auto', // remove the default right positioning
-              left: 0, // add left positioning
-              width: 5, // width of the indicator
-            },
-          }}
+          sx={{ width: 250 }}
         >
           {filteredTabs.map((tab) => {
             const index = filteredTabs.indexOf(tab)
@@ -110,22 +122,21 @@ function VerticalTabs(props: VerticalTabProps) {
                 value={tab.path}
                 component={Link}
                 to={tab.path}
+                icon={getIcon(tab.title)}
                 sx={{
-                  backgroundColor: value === tab.path || value === index ? theme.palette.primary.main : 'transparent',
                   fontSize: 20,
-                  height: '80px',
-                  alignItems: 'flex-start',
+                  height: '60px',
+                  alignItems: 'center',
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   textTransform: 'none',
                   borderRadius: 1,
-                  '&&': {
-                    color:
-                      value === tab.path || value === index
-                        ? theme.palette.primary.contrastText
-                        : theme.palette.text.primary,
-                    border:
-                      value === tab.path || value === index
-                        ? 'none'
-                        : `0.5px solid ${alpha(theme.palette.divider, 0.2)}`,
+                  fontWeight: value === tab.path || value === index ? 'bold' : 'normal',
+                  color: theme.palette.text.primary,
+                  backgroundColor: 'transparent',
+                  '&:hover': {
+                    backgroundColor: alpha(theme.palette.primary.main, 0.2),
                   },
                 }}
               />