TT-7441 Improve theming of the APM mobile

src/renderer/src/App.tsx

@@ -10,6 +10,21 @@ import { getDataGridLocale } from './utils/dataGridLocale';
 import { useMemo } from 'react';
 export { HeadHeight } from './layout';
 
+declare module '@mui/material/styles' {
+  interface Palette {
+    custom: {
+      currentRegion: string;
+      headerBackground: string;
+    };
+  }
+  interface PaletteOptions {
+    custom?: {
+      currentRegion: string;
+      headerBackground: string;
+    };
+  }
+}
+
 function App(): React.JSX.Element {
   const lang = useSelector((state: IState) => state.strings.lang, shallowEqual);
 
@@ -19,19 +34,65 @@ function App(): React.JSX.Element {
         {
           palette: {
             primary: {
-              main: '#135CB9', //Original: 135CB9, Better color: 1D9F90
+              main: '#135CB9',
             },
             secondary: {
-              main: '#00A7E1', //Original: 00A7E1, Better color: 25CBB8
+              main: '#00A7E1',
             },
-            // Custom colors - simple key-value pairs
             custom: {
-              currentRegion: 'rgb(102, 255, 0, .5)',
+              currentRegion: '#66FF0080',
+              headerBackground: '#EEEEEE',
             },
-          } as any,
+          },
           typography: {
             button: {
-              textTransform: 'capitalize',
+              textTransform: 'none',
+            },
+          },
+          components: {
+            MuiAppBar: {
+              styleOverrides: {
+                root: {
+                  boxShadow: 'none',
+                },
+              },
+            },
+            MuiButton: {
+              defaultProps: {
+                disableElevation: true,
+              },
+              styleOverrides: {
+                root: {
+                  borderRadius: '8px',
+                  padding: '8px 16px',
+                  boxShadow: '1px 1px 3px #0000001F',
+                  color: '#000000',
+                  height: 36,
+                  background: '#FFFFFF',
+                  '&:hover': {
+                    background: '#E2E2E2',
+                  },
+                  '&:disabled': {
+                    background: '#F0F0F0',
+                  },
+                },
+              },
+              variants: [
+                {
+                  // Contained buttons are primary buttons
+                  props: { variant: 'contained' },
+                  style: {
+                    background: '#333333',
+                    color: '#FFFFFF',
+                    '&:hover': {
+                      background: '#555555',
+                    },
+                    '&:disabled': {
+                      background: '#F0F0F0',
+                    },
+                  },
+                },
+              ],
             },
           },
         },

src/renderer/src/components/App/AppHead.tsx

@@ -3,11 +3,7 @@ import { useGetGlobal, useGlobal } from '../../context/useGlobal';
 import { useLocation } from 'react-router-dom';
 import { IState, IViewModeStrings } from '../../model';
 import { shallowEqual, useSelector } from 'react-redux';
-import {
-  AppBar,
-  LinearProgress,
-  Box,
-} from '@mui/material';
+import { AppBar, LinearProgress, Box } from '@mui/material';
 import { isElectron } from '../../../api-variable';
 import { TokenContext } from '../../context/TokenProvider';
 import { UnsavedContext } from '../../context/UnsavedContext';
@@ -285,7 +281,12 @@ export const AppHead = (props: IProps) => {
   return (
     <AppBar
       position="fixed"
-      sx={{ width: '100%', display: 'flex' }}
+      sx={{
+        width: '100%',
+        display: 'flex',
+        px: 1.5,
+        backgroundColor: 'custom.headerBackground',
+      }}
       color="inherit"
     >
       <>

src/renderer/src/components/App/DesktopToolbar.tsx

@@ -98,7 +98,7 @@ export const DesktopToolbar = ({
   tv,
 }: DesktopToolbarProps) => {
   return (
-    <Toolbar>
+    <Toolbar disableGutters>
       {!home && orgRole && (
         <>
           <ProjectName switchTo={switchTo ?? false} />

src/renderer/src/components/App/MobileToolbar.tsx

@@ -40,9 +40,9 @@ export const MobileToolbar = ({
   handleUserMenu,
 }: MobileToolbarProps) => {
   return (
-    <Toolbar>
+    <Toolbar disableGutters>
       {!isDetail ? (
-        <IconButton onClick={() => navigate('/team')} sx={{ p: 0 }}>
+        <IconButton onClick={() => navigate('/team')}>
           <ApmLogo sx={{ width: '24px', height: '24px' }} />
         </IconButton>
       ) : (

src/renderer/src/components/HelpMenu.tsx

@@ -7,7 +7,7 @@ import ReportIcon from '@mui/icons-material/Report';
 import NotesIcon from '@mui/icons-material/SpeakerNotes';
 import BooksIcon from '@mui/icons-material/LibraryBooks';
 import TrainingIcon from '@mui/icons-material/FlightClass';
-import HelpIcon from '@mui/icons-material/Help';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import InfoIcon from '@mui/icons-material/Info';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -178,10 +178,9 @@ export function HelpMenu(props: IProps) {
       <IconButton
         aria-controls="customized-menu"
         aria-haspopup="true"
-        color="primary"
         onClick={handleClick}
       >
-        <HelpIcon />
+        <HelpOutlineIcon />
       </IconButton>
       <StyledMenu
         id="helpClose"
@@ -193,14 +192,14 @@ export function HelpMenu(props: IProps) {
       >
         <StyledMenuItem id="helpHelp" onClick={handleHelp('')}>
           <ListItemIcon>
-            <HelpIcon />
+            <HelpOutlineIcon />
           </ListItemIcon>
           <ListItemText primary={t.helpCenter} />
         </StyledMenuItem>
         {planRec && (
           <StyledMenuItem id="helpSheet" onClick={handleHelp(spreadsheetTopic)}>
             <ListItemIcon>
-              <HelpIcon />
+              <HelpOutlineIcon />
             </ListItemIcon>
             <ListItemText primary={t.helpSpreadsheet} />
           </StyledMenuItem>

src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx

@@ -33,7 +33,7 @@ export default function PassageDetailMobileLayout({
     >
       <Box
         sx={{
-          backgroundColor: 'background.default',
+          backgroundColor: 'custom.headerBackground',
           borderBottom: '1px solid',
           borderColor: 'divider',
         }}
@@ -42,6 +42,7 @@ export default function PassageDetailMobileLayout({
       </Box>
       <Box
         sx={{
+          backgroundColor: 'background.default',
           px: 1.5,
           pt: 1.5,
           pb: 1.5,
@@ -67,12 +68,11 @@ export default function PassageDetailMobileLayout({
       )}
       <Box
         sx={{
-          backgroundColor: 'background.default',
+          backgroundColor: 'custom.headerBackground',
           borderTop: '1px solid',
           borderColor: 'divider',
-          px: 1,
-          pt: '4px',
-          pb: 'calc(2px + env(safe-area-inset-bottom, 0px))',
+          px: 1.5,
+          py: 1,
         }}
       >
         {footer}

src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useGlobal } from '../../../context/useGlobal';
-import { Box, IconButton, Typography } from '@mui/material';
-import CompleteIcon from '@mui/icons-material/CheckBoxOutlined';
+import { Box, Button } from '@mui/material';
+import CompleteIcon from '@mui/icons-material/CheckBox';
 import NotCompleteIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import usePassageDetailContext from '../../../context/usePassageDetailContext';
 import { IPassageDetailStepCompleteStrings } from '../../../model';
@@ -78,37 +78,43 @@ export default function MobileStepComplete() {
   if (isBoldWorkflow) return null;
 
   return (
-    <Box
+    <Button
+      id="mobile-complete"
+      size="small"
+      title={t.title}
+      onClick={handleToggleComplete}
+      disabled={
+        !hasPermission || view !== '' || recording || busy || importexportBusy
+      }
+      startIcon={
+        complete ? (
+          <CompleteIcon
+            id="step-yes"
+            fontSize="small"
+            sx={{ color: 'black' }}
+          />
+        ) : (
+          <NotCompleteIcon id="step-no" fontSize="small" />
+        )
+      }
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 0.25,
-        minHeight: 0,
-        flexShrink: 0,
+        minWidth: 0,
         maxWidth: '100%',
       }}
     >
-      <IconButton
-        id="mobile-complete"
-        size="small"
-        title={t.title}
-        onClick={handleToggleComplete}
-        disabled={
-          !hasPermission || view !== '' || recording || busy || importexportBusy
-        }
-      >
-        {complete ? (
-          <CompleteIcon id="step-yes" fontSize="small" />
-        ) : (
-          <NotCompleteIcon id="step-no" fontSize="small" />
-        )}
-      </IconButton>
-      <Typography
-        variant="body2"
-        sx={{ lineHeight: 1.2, whiteSpace: 'nowrap' }}
+      <Box
+        component="span"
+        sx={{
+          display: 'block',
+          minWidth: 0,
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
       >
         {t.title}
-      </Typography>
-    </Box>
+      </Box>
+    </Button>
   );
 }

src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx

@@ -6,11 +6,9 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
   Menu,
   MenuItem,
   Typography,
-  useTheme,
 } from '@mui/material';
 import InfoIcon from '@mui/icons-material/Info';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
@@ -58,7 +56,6 @@ export default function MobileWorkflowSteps() {
   const getGlobal = useGetGlobal();
   const { showMessage } = useSnackBar();
   const ts = useSelector(sharedSelector, shallowEqual);
-  const theme = useTheme();
   const getWfLabel = useWfLabel();
   const { getOrgDefault } = useOrgDefaults();
   const isStepProgression =
@@ -210,23 +207,25 @@ export default function MobileWorkflowSteps() {
             alignItems: 'center',
           }}
         >
-          {!isStepProgression && currentTip && (
-            <IconButton
-              size="small"
-              onClick={() => setTipOpen(true)}
-              data-cy="workflow-step-tip"
-              aria-label={currentTip}
-              color="info"
-            >
-              <InfoIcon fontSize="small" />
-            </IconButton>
-          )}
           <Button
             size="small"
+            startIcon={
+              !isStepProgression && currentTip ? (
+                <InfoIcon
+                  sx={{ color: 'primary.light' }}
+                  fontSize="small"
+                  data-cy="workflow-step-tip"
+                  aria-label={currentTip}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setTipOpen(true);
+                  }}
+                />
+              ) : undefined
+            }
             endIcon={hasMultipleOptions ? <ArrowDropDownIcon /> : undefined}
             sx={{
               minWidth: 'auto',
-              textTransform: 'none',
               // These per-breakpoint widths are fine-tuned to constrain the dropdown so
               // its label truncates before it can overlap the parallelograms
               maxWidth: { xs: '45vw', md: '20vw', lg: '25vw' },
@@ -318,10 +317,10 @@ export default function MobileWorkflowSteps() {
         >
           {steps.map((step) => {
             const color = step.isCurrent
-              ? theme.palette.grey[700]
+              ? '#111'
               : step.isComplete
-                ? theme.palette.grey[400]
-                : theme.palette.grey[200];
+                ? '#888'
+                : '#ccc';
             return (
               <Box
                 key={step.id}
@@ -366,7 +365,7 @@ export default function MobileWorkflowSteps() {
               aria-label={currentTip}
             >
               {getWfLabel(currentLabel) + '\u00A0'}
-              <InfoIcon color="info" fontSize="small" />
+              <InfoIcon sx={{ color: 'primary.light' }} fontSize="small" />
             </ButtonBase>
           ) : (
             getWfLabel(currentLabel)