Home page updates (nebari-dev#311)

* home-update-595 # made updates to the home page, css, text and iconography

* updated a couple of tests

* updated conditional rendering for thumbnails on app cards

* deleteing index.js and will rebuild

* new index.js

* added modied index.js

* updates some styles, added thumbnail back to api

* fixed tests

* css finessing, added primary color to Home button on side nav

* added theme variable to the side naviagtion home button

* udated test for navigation.test.tsx to renderWithTheme

* added buildCoy items, index.js and .css

* added style, removed commented code

* updated theme, colors and use of theme.variable

* adjusted grayLighter

jhub_apps/templates/style.css

@@ -454,6 +454,10 @@ a:focus {
     color: var(--navbar-text-color) !important;
 }
 
+.MuiListItemButton-root::before  {
+    background-color: var(--primary-color) !important;
+}   
+
 /* Misc */
 .version {
     position: fixed;

ui/src/components/app-card/app-card.css

@@ -9,6 +9,10 @@
   height: 224px;
 }
 
+.card.service .card-content-content {
+  height: 93px;
+}
+
 .card > a {
   text-decoration: none;
 }

ui/src/components/app-card/app-card.tsx

@@ -208,15 +208,13 @@ export const AppCard = ({
               <></>
             )}
             <CardMedia>
-              {thumbnail ? (
-                <div
-                  className={isAppCard ? 'img-overlay' : 'img-overlay-service'}
-                >
-                  <img src={thumbnail} alt="App thumb" />
-                </div>
-              ) : (
-                <></>
-              )}
+              <div
+                className={
+                  isAppCard && thumbnail ? 'img-overlay' : 'img-overlay-service'
+                }
+              >
+                {thumbnail && <img src={thumbnail} alt="App thumb" />}
+              </div>
             </CardMedia>
           </div>
           <div className="card-content-content">
@@ -295,7 +293,6 @@ export const AppCard = ({
             ) : (
               <Box className="card-content-container app-service no-hover">
                 <CardContent className="card-inner-content">
-                  <span className="inline relative iconic">{getIcon()}</span>
                   <Typography
                     gutterBottom
                     variant="h5"

ui/src/components/context-menu/context-menu.tsx

@@ -1,4 +1,8 @@
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
+import PlayCircleFilledRoundedIcon from '@mui/icons-material/PlayCircleFilledRounded';
+import StopCircleRoundedIcon from '@mui/icons-material/StopCircleRounded';
 import { Divider } from '@mui/material';
 import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
@@ -23,7 +27,22 @@ export interface ContextMenuProps {
   items: ContextMenuItem[];
   sx?: object;
 }
-
+const getMenuItemIcon = (id: string) => {
+  switch (id) {
+    case 'start':
+      return (
+        <PlayCircleFilledRoundedIcon fontSize="small" sx={{ marginRight: 1 }} />
+      );
+    case 'stop':
+      return <StopCircleRoundedIcon fontSize="small" sx={{ marginRight: 1 }} />;
+    case 'edit':
+      return <EditRoundedIcon fontSize="small" sx={{ marginRight: 1 }} />;
+    case 'delete':
+      return <DeleteRoundedIcon fontSize="small" sx={{ marginRight: 1 }} />;
+    default:
+      return null;
+  }
+};
 export const ContextMenu = ({
   id,
   lastModified,
@@ -112,6 +131,7 @@ export const ContextMenu = ({
               }}
               disabled={item.disabled}
             >
+              {getMenuItemIcon(item.id)}
               {item.title}
             </MenuItem>
           ))}

ui/src/components/navigation/navigation.test.tsx

@@ -1,3 +1,4 @@
+import { ThemeProvider } from '@mui/material/styles';
 import { serverApps } from '@src/data/api';
 import { servicesFull } from '@src/data/jupyterhub';
 import { currentUser } from '@src/data/user';
@@ -6,11 +7,13 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import '@testing-library/jest-dom';
 import { act, fireEvent, render } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
+import { ReactNode } from 'react';
 import { BrowserRouter } from 'react-router-dom';
+import { JSX } from 'react/jsx-runtime';
 import { RecoilRoot } from 'recoil';
 import { Navigation } from '..';
 import { currentUser as defaultUser } from '../../store';
-
+import { theme } from '../../theme/theme';
 describe('Navigation', () => {
   const queryClient = new QueryClient();
   const mock = new MockAdapter(axios);
@@ -23,8 +26,20 @@ describe('Navigation', () => {
     mock.reset();
   });
 
+  // Wrap your components with the ThemeProvider and provide the theme
+  const renderWithTheme = (
+    component:
+      | string
+      | number
+      | boolean
+      | JSX.Element
+      | Iterable<ReactNode>
+      | null
+      | undefined,
+  ) => render(<ThemeProvider theme={theme}>{component}</ThemeProvider>);
+
   test('renders default top navigation successfully', () => {
-    const { baseElement } = render(
+    const { baseElement } = renderWithTheme(
       <RecoilRoot>
         <QueryClientProvider client={queryClient}>
           <BrowserRouter>
@@ -41,7 +56,7 @@ describe('Navigation', () => {
     mock.onGet(new RegExp('/services')).reply(200, servicesFull);
     queryClient.setQueryData(['service-data'], servicesFull);
 
-    const { baseElement } = render(
+    const { baseElement } = renderWithTheme(
       <RecoilRoot initializeState={({ set }) => set(defaultUser, currentUser)}>
         <QueryClientProvider client={queryClient}>
           <BrowserRouter>
@@ -63,7 +78,7 @@ describe('Navigation', () => {
     queryClient.setQueryData(['service-data'], servicesFull);
     queryClient.setQueryData(['app-state'], serverApps);
 
-    const { baseElement } = render(
+    const { baseElement } = renderWithTheme(
       <RecoilRoot initializeState={({ set }) => set(defaultUser, currentUser)}>
         <QueryClientProvider client={queryClient}>
           <BrowserRouter>
@@ -82,7 +97,7 @@ describe('Navigation', () => {
   test('renders with data error', async () => {
     mock.onGet(new RegExp('/services')).reply(500, { message: 'Some error' });
     queryClient.setQueryData(['service-data'], null);
-    const { baseElement } = render(
+    const { baseElement } = renderWithTheme(
       <RecoilRoot>
         <QueryClientProvider client={queryClient}>
           <Navigation />
@@ -95,7 +110,7 @@ describe('Navigation', () => {
   });
 
   test('handles profile menu click', async () => {
-    const { baseElement } = render(
+    const { baseElement } = renderWithTheme(
       <RecoilRoot initializeState={({ set }) => set(defaultUser, currentUser)}>
         <QueryClientProvider client={queryClient}>
           <Navigation />

ui/src/components/navigation/navigation.tsx

@@ -165,7 +165,7 @@ export const TopNavigation = ({ ...props }): React.ReactElement => {
             sx={{
               px: '1.5rem',
               mx: '.5rem',
-              backgroundColor: '#ebebeb',
+              backgroundColor: theme.palette.gray.lighter,
               borderRadius: '8px',
               position: 'relative',
               display: 'flex',
@@ -177,14 +177,14 @@ export const TopNavigation = ({ ...props }): React.ReactElement => {
                 top: 0,
                 bottom: 0,
                 width: '8px',
-                backgroundColor: '#BA18DA',
+                backgroundColor: theme.palette.primary.main,
                 borderTopLeftRadius: '8px',
                 borderBottomLeftRadius: '8px',
               },
               '&:hover': {
-                backgroundColor: '#E0E0E0',
+                backgroundColor: theme.palette.gray.light,
                 '&::before': {
-                  backgroundColor: '#BA18DA',
+                  backgroundColor: theme.palette.primary.main,
                 },
               },
             }}

ui/src/pages/home/apps-section/app-filters/app-filters.tsx

@@ -326,18 +326,6 @@ export const AppFilters = ({
               flexDirection: 'row',
             }}
           >
-            <SortRounded sx={{ position: 'relative', marginRight: '4px' }} />
-            <FormLabel
-              id="sort-by-label"
-              sx={{
-                fontSize: '16px',
-                pr: '6px',
-                fontWeight: 400,
-                color: 'common.black',
-              }}
-            >
-              Sort by:
-            </FormLabel>
             <Button
               id="sort-by-btn"
               variant="text"
@@ -361,6 +349,7 @@ export const AppFilters = ({
                 )
               }
             >
+              <SortRounded sx={{ position: 'relative', marginRight: '4px' }} />
               {currentSortValue}
             </Button>
             <Menu

ui/src/pages/home/apps-section/apps-section.test.tsx

@@ -32,7 +32,7 @@ describe('AppsSection', () => {
     const header = baseElement.querySelector('h2');
 
     expect(baseElement).toBeTruthy();
-    expect(header).toHaveTextContent('Apps');
+    expect(header).toHaveTextContent('App Library');
   });
 
   test('renders with mocked data', async () => {

ui/src/pages/home/apps-section/apps-section.tsx

@@ -130,13 +130,14 @@ export const AppsSection = (): React.ReactElement => {
       <Box>
         <Stack>
           <Item>
-            <Grid container spacing={2}>
-              <Grid item xs={12} md={4}>
+            <Grid container spacing={2} alignItems="center">
+              <Grid item xs={12} md={4} sx={{ padding: '0' }}>
                 <Item>
-                  <h2>Apps</h2>
+                  <h2>App Library</h2>
                 </Item>
               </Grid>
               <Grid
+                alignItems="center"
                 container
                 item
                 xs={12}
@@ -158,13 +159,31 @@ export const AppsSection = (): React.ReactElement => {
                     onFocus={() => setFocused(true)}
                     onBlur={() => setFocused(false)}
                     sx={{
+                      my: '0',
                       width: { sm: '200px', md: '300px', lg: '600px' },
-                      pr: '16px',
+                      mr: '16px',
+                      color: 'rgba(15, 16, 21, 0.56)',
+                      backgroundColor: '#fff',
+                      '& .MuiOutlinedInput-root': {
+                        '& fieldset': {
+                          borderColor: 'rgba(15, 16, 21, 0.12)',
+                        },
+                        '&:hover fieldset': {
+                          borderColor: 'rgba(15, 16, 21, 0.56)',
+                        },
+                        '&.Mui-focused fieldset': {
+                          borderColor: '#ba18da',
+                        },
+                      },
                     }}
                     InputProps={{
                       startAdornment: (
                         <InputAdornment position="start">
-                          {!focused && <SearchIcon />}
+                          {!focused && (
+                            <SearchIcon
+                              style={{ fill: 'rgba(15, 16, 21, 0.56)' }}
+                            />
+                          )}
                         </InputAdornment>
                       ),
                     }}
@@ -210,7 +229,7 @@ export const AppsSection = (): React.ReactElement => {
                 flexDirection: 'row',
                 flexWrap: 'wrap',
                 gap: 2,
-                rowGap: 3,
+                rowGap: 2,
                 justifyContent: 'flex-start',
                 paddingBottom: '48px',
               }}

ui/src/pages/home/home.css

@@ -0,0 +1,8 @@
+.h5 {
+  /* typography/h5 */
+  font-family: 'Inter', sans-serif;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 133.4%;
+}

ui/src/pages/home/home.test.tsx

@@ -71,8 +71,8 @@ describe('Home', () => {
   test('should render ServicesGrid and AppsGrid', async () => {
     const { getByText } = render(componentWrapper);
     await act(async () => {
-      expect(getByText('Services')).toBeTruthy();
-      expect(getByText('Apps')).toBeTruthy();
+      expect(getByText('Quick Access')).toBeTruthy();
+      expect(getByText('App Library')).toBeTruthy();
     });
   });
 

ui/src/pages/home/home.tsx

@@ -22,6 +22,7 @@ import {
 } from '../../../src/store';
 import { Item } from '../../styles/styled-item';
 import { AppsSection } from './apps-section/apps-section';
+import './home.css';
 import { ServicesSection } from './services-section/services-section';
 
 export const Home = (): React.ReactElement => {
@@ -234,7 +235,7 @@ export const Home = (): React.ReactElement => {
       <Grid container spacing={2} paddingBottom="32px">
         <Grid item xs={12} md={2}>
           <Item>
-            <h1>Home</h1>
+            <h1 className="h5">Home</h1>
           </Item>
         </Grid>
       </Grid>

ui/src/pages/home/services-section/services-section.test.tsx

@@ -32,7 +32,7 @@ describe('ServicesSection', () => {
     const header = baseElement.querySelector('h2');
 
     expect(baseElement).toBeTruthy();
-    expect(header).toHaveTextContent('Services');
+    expect(header).toHaveTextContent('Quick Access');
   });
 
   test('renders a message when no services', () => {

ui/src/pages/home/services-section/services-section.tsx

@@ -86,7 +86,7 @@ export const ServicesSection = (): React.ReactElement => {
           <Grid container spacing={2}>
             <Grid item xs={12} md={4}>
               <Item>
-                <h2>Services</h2>
+                <h2>Quick Access</h2>
               </Item>
             </Grid>
           </Grid>

ui/src/theme/colors.tsx

@@ -38,6 +38,8 @@ export const orange = '#F66A0A';
 
 export const white = '#FFFFFF';
 
-export const black = '#0F1015DE';
+export const black = '#0F1015';
 
 export const disabled = '#0F101561';
+
+export const grayLighter = gray[100];