Making buttons, icons and window titles larger as well

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
open-rmf · Aug 30, 2023 · 45dcf5d · 45dcf5d
1 parent 1ef3043
commit 45dcf5d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/packages/dashboard/src/components/appbar.tsx b/packages/dashboard/src/components/appbar.tsx
@@ -64,6 +64,16 @@ const StyledAppBarTab = styled(AppBarTab)(({ theme }) => ({
   fontSize: theme.spacing(4), // spacing = 8
 }));
 
+const StyledAppBarButton = styled(Button)(({ theme }) => ({
+  fontSize: theme.spacing(4), // spacing = 8
+  paddingTop: 0,
+  paddingBottom: 0,
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  fontSize: theme.spacing(4), // spacing = 8
+}));
+
 export type TabValue = 'infrastructure' | 'robots' | 'tasks';
 
 const locationToTabValue = (pathname: string): TabValue | undefined => {
@@ -415,7 +425,7 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
           />
         </NavigationBar>
         <Toolbar variant="dense" sx={{ textAlign: 'right', flexGrow: -1 }}>
-          <Button
+          <StyledAppBarButton
             id="create-new-task-button"
             aria-label="new task"
             color="secondary"
@@ -425,18 +435,18 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
           >
             <AddOutlined />
             New Task
-          </Button>
+          </StyledAppBarButton>
           <Tooltip title="Notifications">
-            <IconButton
+            <StyledIconButton
               id="alert-list-button"
               aria-label="alert-list-button"
               color="inherit"
               onClick={handleOpenAlertList}
             >
               <Badge badgeContent={unacknowledgedAlertsNum} color="secondary">
-                <Notifications />
+                <Notifications fontSize="inherit" />
               </Badge>
-            </IconButton>
+            </StyledIconButton>
           </Tooltip>
           <Menu
             anchorEl={alertListAnchor}
@@ -492,49 +502,49 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
             )}
           </Menu>
           <Divider orientation="vertical" sx={{ marginLeft: 1, marginRight: 2 }} />
-          <Typography variant="caption">Powered by Open-RMF</Typography>
+          <Typography variant="subtitle1">Powered by Open-RMF</Typography>
           {extraToolbarItems}
           <Tooltip title="Settings">
-            <IconButton
+            <StyledIconButton
               id="show-settings-btn"
               aria-label="settings"
               color="inherit"
               onClick={(ev) => setSettingsAnchor(ev.currentTarget)}
             >
-              <Settings />
-            </IconButton>
+              <Settings fontSize="inherit" />
+            </StyledIconButton>
           </Tooltip>
           <Tooltip title="Help">
-            <IconButton
+            <StyledIconButton
               id="show-help-btn"
               aria-label="help"
               color="inherit"
               onClick={() => window.open(resourceManager?.helpLink, '_blank')}
             >
-              <Help />
-            </IconButton>
+              <Help fontSize="inherit" />
+            </StyledIconButton>
           </Tooltip>
           <Tooltip title="Report issues">
-            <IconButton
+            <StyledIconButton
               id="show-warning-btn"
               aria-label="warning"
               color="inherit"
               onClick={() => window.open(resourceManager?.reportIssue, '_blank')}
             >
-              <Issue />
-            </IconButton>
+              <Issue fontSize="inherit" />
+            </StyledIconButton>
           </Tooltip>
           {profile && (
             <>
               <Tooltip title="Profile">
-                <IconButton
+                <StyledIconButton
                   id="user-btn"
                   aria-label={'user-btn'}
                   color="inherit"
                   onClick={(event) => setAnchorEl(event.currentTarget)}
                 >
-                  <AccountCircle />
-                </IconButton>
+                  <AccountCircle fontSize="inherit" />
+                </StyledIconButton>
               </Tooltip>
               <Menu
                 anchorEl={anchorEl}

diff --git a/packages/react-components/lib/window/window-toolbar.tsx b/packages/react-components/lib/window/window-toolbar.tsx
@@ -9,7 +9,7 @@ export const WindowToolbar: React.FC<WindowToolbarProps> = ({ title, children, .
   return (
     <AppBar position="static" elevation={0} {...otherProps}>
       <Toolbar variant="dense" style={{ paddingRight: 0 }}>
-        <Typography variant="h6" style={{ flexGrow: 1 }}>
+        <Typography variant="h5" style={{ flexGrow: 1 }}>
           {title}
         </Typography>
         {children}