Fix merge conflicts

tapis-project · Aug 19, 2024 · ce91a38 · ce91a38
2 parents a9a7d5c + 56fd579
commit ce91a38
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 47 deletions.
diff --git a/packages/tapisui-common/src/wrappers/Navbar/Navbar.module.scss b/packages/tapisui-common/src/wrappers/Navbar/Navbar.module.scss
@@ -1,7 +1,6 @@
 $core-portal-color-primary: #9d85ef;
 
 .nav-list {
-  --horizontal-buffer: var(--global-space--section-left);
   --vertical-buffer: 0.75rem;
   --min-width: 100%;
   list-style: none;
@@ -12,7 +11,6 @@ $core-portal-color-primary: #9d85ef;
 .nav-link {
   min-width: var(--min-width);
   border: none;
-  padding: 0.5rem 1.5rem;
   padding-left: var(--horizontal-buffer);
   color: #707070;
   cursor: pointer;
@@ -28,7 +26,7 @@ $core-portal-color-primary: #9d85ef;
 }
 
 .nav-text {
-  padding-left: 1rem;
+  padding-left: 0.8rem;
   font-size: 0.75rem;
   font-weight: 500;
 }

diff --git a/packages/tapisui-common/src/wrappers/Navbar/Navbar.tsx b/packages/tapisui-common/src/wrappers/Navbar/Navbar.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { Icon } from '../../ui';
 import styles from './Navbar.module.scss';
+import { ListItemButton, ListItemText } from '@mui/material';
 
 export const NavItem: React.FC<
-  React.PropsWithChildren<{ to?: string; icon?: string }>
-> = ({ to, icon, children }) => {
+  React.PropsWithChildren<{ to?: string; icon?: string; secondary?: string }>
+> = ({ to, icon, children, secondary }) => {
   if (to) {
     return (
       <NavLink
@@ -14,23 +15,30 @@ export const NavItem: React.FC<
         activeClassName={styles['active']}
         exact={to === '/'}
       >
-        <div className={styles['nav-content']}>
+        <ListItemButton style={{ paddingLeft: '1.5rem' }}>
           {icon && <Icon name={icon} />}
           {children ? (
-            <span className={styles['nav-text']}>{children}</span>
+            <ListItemText
+              className={styles['nav-text']}
+              primary={children}
+              secondary={secondary}
+              style={{
+                paddingRight: '.8rem',
+                whiteSpace: 'nowrap',
+                margin: '0',
+              }}
+            />
           ) : undefined}
-        </div>
+        </ListItemButton>
       </NavLink>
     );
   } else {
     return (
       <div className={styles['nav-link']}>
-        <div className={styles['nav-content']}>
-          {icon && <Icon name={icon} />}
-          {children ? (
-            <span className={styles['nav-text']}>{children}</span>
-          ) : undefined}
-        </div>
+        {icon && <Icon name={icon} />}
+        {children ? (
+          <span className={styles['nav-text']}>{children}</span>
+        ) : undefined}
       </div>
     );
   }

diff --git a/src/app/_components/Sidebar/Sidebar.tsx b/src/app/_components/Sidebar/Sidebar.tsx
@@ -14,6 +14,9 @@ import { LoadingButton as Button } from '@mui/lab';
 import {
   Menu,
   Collapse,
+  List,
+  ListItemButton,
+  ListItemText,
   ListItemIcon,
   Divider,
   // Button,
@@ -72,13 +75,7 @@ const Sidebar: React.FC = () => {
   ) => {
     return (
       <NavItem to={to} icon={icon} key={uuidv4()}>
-        {expanded ? (
-          <span style={{ paddingRight: '.75rem', whiteSpace: 'nowrap' }}>
-            {text}
-          </span>
-        ) : (
-          ''
-        )}
+        {expanded ? text : ''}
       </NavItem>
     );
   };
@@ -259,28 +256,25 @@ const Sidebar: React.FC = () => {
                   style={{
                     whiteSpace: 'nowrap',
                     cursor: 'pointer',
-                    // paddingTop: '10px',
-                    // paddingBottom: '10px',
-                    paddingLeft: '21px',
                   }}
                 >
-                  {openSecondary ? (
-                    <ExpandLessRounded />
-                  ) : (
-                    <ExpandMoreRounded />
-                  )}
-                  {expanded && (
-                    <span
-                      style={{
-                        paddingLeft: '8px',
-                        fontSize: '14px',
-                        color: '#808080',
-                      }}
-                    >
-                      {' '}
-                      More
-                    </span>
-                  )}
+                  <ListItemButton
+                    sx={{
+                      color: '#707070',
+                      pl: '1.4rem',
+                      pt: '5px',
+                      pb: '5px',
+                    }}
+                  >
+                    {openSecondary ? (
+                      <ExpandLessRounded />
+                    ) : (
+                      <ExpandMoreRounded />
+                    )}
+                    {expanded && (
+                      <ListItemText primary="More" sx={{ pl: '.5rem' }} />
+                    )}
+                  </ListItemButton>
                 </div>
                 <Collapse in={openSecondary}>
                   {secondarySidebarItems.map((item) => item)}
@@ -378,7 +372,7 @@ const Sidebar: React.FC = () => {
         onClose={() => setModal(undefined)}
         aria-labelledby="jwt-dialog-title"
         PaperProps={{
-          style: { maxHeight: '70%' },
+          style: { maxHeight: '95%', minWidth: '60rem' },
         }}
       >
         <DialogContent>

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -1,15 +1,52 @@
 import React from 'react';
-import { ThemeProvider, createTheme } from '@mui/material';
+import {
+  ThemeProvider,
+  createTheme,
+  responsiveFontSizes,
+} from '@mui/material/styles';
 
-const theme = createTheme({
+var theme = createTheme({
   palette: {
-    primary: {
-      main: '#2a9461',
-    },
+    // primary: {
+    //   main: '#2a9461',
+    // },
     // secondary: {
     //   main: '#494c7d',
     // },
   },
+  // typography: {
+  // },
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        // Apply general styles that should affect all variants
+        root: {
+          // Styles here will apply to all variants including h6
+        },
+      },
+      variants: [
+        {
+          props: { variant: 'body1' }, // Target the base case explicitly if it's 'body1' or adjust as needed
+          style: {
+            lineHeight: '1',
+            fontSize: '.8rem',
+            color: '#707070',
+          },
+        },
+        // You can add more variants here if needed
+      ],
+    },
+  },
+});
+
+// Makes font sizes responsive, might help with things, might make them better.
+// Should just plug and play with MUI Typography
+// https://mui.com/material-ui/customization/typography/#responsive-font-sizes
+theme = responsiveFontSizes(theme, {
+  breakpoints: ['xs', 'sm', 'md', 'lg', 'xl'], // Custom breakpoints
+  disableAlign: false, // Use the default value
+  factor: 2, // Custom factor for font size adjustment
+  variants: ['h1', 'body1'], // Specify which typography variants to include
 });
 
 // const Theme: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {