App Launcher Button Refinements (nebari-dev#312)

* Update base button theming. * Update home and app form for new button styles. * Misc button updates. * Fix unit tests. Add new build. * Update default secondary hover color.
jbouder · May 30, 2024 · 683de5d · 683de5d
1 parent 659f36f
commit 683de5d
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 77 deletions.
diff --git a/jhub_apps/static/css/index.css b/jhub_apps/static/css/index.css
diff --git a/jhub_apps/static/js/index.js b/jhub_apps/static/js/index.js
diff --git a/jhub_apps/templates/style.css b/jhub_apps/templates/style.css
@@ -33,7 +33,8 @@
     --light-text-color: #f1f1f6;
     --danger-color: #e60f66;
     --danger-color-dark: #b81a53;
-    --gray-color: #e6e6e6;
+    --gray-color: #EEEEEE;
+    --gray-color-dark: #E0E0E0;
     --blue-link-color: #276BE9;
 
     /* Miscellaneous */
@@ -401,6 +402,10 @@ a:focus {
     background-color: var(--gray-color) !important;
 }
 
+.MuiButton-containedSecondary:hover {
+    background-color: var(--gray-color-dark) !important;
+}
+
 .MuiButton-outlinedSecondary:not(:disabled):not(#filters-btn) {
     color: var(--secondary-color) !important;
     background-color: #ffffff !important;

diff --git a/ui/src/components/app-form/app-form.css b/ui/src/components/app-form/app-form.css
@@ -28,10 +28,6 @@
   margin: 0 0 16px 0;
 }
 
-.form-breadcrumb > button {
-  width: 50px;
-}
-
 @media screen and (max-width: 768px) {
   .form {
     max-width: unset;

diff --git a/ui/src/components/app-form/app-form.tsx b/ui/src/components/app-form/app-form.tsx
@@ -671,7 +671,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
             id="cancel-btn"
             type="button"
             variant="text"
-            color="secondary"
+            color="primary"
             onClick={() => navigateToUrl(`${APP_BASE_URL}`)}
           >
             Cancel

diff --git a/ui/src/components/app-sharing/app-sharing.tsx b/ui/src/components/app-sharing/app-sharing.tsx
@@ -230,7 +230,7 @@ export const AppSharing = ({
                     disableCloseOnSelect
                     clearOnBlur
                     limitTags={2}
-                    sx={{ width: 470 }}
+                    sx={{ width: 510 }}
                     renderInput={(params) => (
                       <TextField
                         {...params}
@@ -263,7 +263,7 @@ export const AppSharing = ({
                     color="primary"
                     onClick={handleShare}
                     disabled={currentShare.length === 0}
-                    sx={{ height: '42px' }}
+                    sx={{ height: '42px', px: '22px', py: '8px' }}
                   >
                     Share
                   </Button>

diff --git a/ui/src/components/thumbnail/thumbnail.css b/ui/src/components/thumbnail/thumbnail.css
@@ -59,7 +59,6 @@
 }
 
 .thumbnail-actions button {
-  border: none;
   padding: 4px 8px;
   margin-top: 0 !important;
   margin-bottom: 10px;

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -116,6 +116,11 @@ a {
   font-weight: 700;
 }
 
+/* Misc */
+#search {
+  padding: 10px 12px;
+}
+
 @media only screen and (min-width: 1537px) {
   .grid-spacer {
     width: 1460px;
@@ -156,7 +161,7 @@ a {
   }
 
   #create-app {
-    width: 120px;
+    width: 150px;
   }
 }
 
@@ -177,6 +182,6 @@ a {
   }
 
   #create-app {
-    width: 120px;
+    width: 150px;
   }
 }
diff --git a/ui/src/pages/create-app/create-app.tsx b/ui/src/pages/create-app/create-app.tsx
@@ -22,7 +22,7 @@ export const CreateApp = (): React.ReactElement => {
               startIcon={<ArrowBackIcon />}
               onClick={() => navigateToUrl(APP_BASE_URL)}
             >
-              Back
+              Back To Home
             </Button>
           </div>
         </Item>

diff --git a/ui/src/pages/edit-app/edit-app.tsx b/ui/src/pages/edit-app/edit-app.tsx
@@ -26,7 +26,7 @@ export const EditApp = (): React.ReactElement => {
               startIcon={<ArrowBackIcon />}
               onClick={() => navigateToUrl(APP_BASE_URL)}
             >
-              Back
+              Back To Home
             </Button>
           </div>
         </Item>

diff --git a/ui/src/pages/home/apps-section/app-filters/app-filters.tsx b/ui/src/pages/home/apps-section/app-filters/app-filters.tsx
@@ -135,7 +135,7 @@ export const AppFilters = ({
         <Item sx={{ pb: 0 }}>
           <StyledFilterButton
             id="filters-btn"
-            variant="outlined"
+            variant="text"
             color="secondary"
             onClick={(event) => setFiltersAnchorEl(event.currentTarget)}
             startIcon={<FilterAltRoundedIcon />}

diff --git a/ui/src/pages/home/apps-section/apps-section.tsx b/ui/src/pages/home/apps-section/apps-section.tsx
@@ -175,6 +175,7 @@ export const AppsSection = (): React.ReactElement => {
                     id="create-app"
                     variant="contained"
                     color="primary"
+                    size="large"
                     startIcon={<AddIcon />}
                     onClick={() => {
                       window.location.href = `${API_BASE_URL}/create-app`;

diff --git a/ui/src/pages/home/home.tsx b/ui/src/pages/home/home.tsx
@@ -153,7 +153,7 @@ export const Home = (): React.ReactElement => {
           id="cancel-btn"
           data-testid="cancel-btn"
           variant="text"
-          color="secondary"
+          color="primary"
           onClick={() => setIsStartOpen(false)}
         >
           Cancel
@@ -181,7 +181,7 @@ export const Home = (): React.ReactElement => {
         <Button
           id="cancel-btn"
           variant="text"
-          color="secondary"
+          color="primary"
           onClick={() => setIsStopOpen(false)}
         >
           Cancel
@@ -210,7 +210,7 @@ export const Home = (): React.ReactElement => {
           id="cancel-btn"
           data-testid="cancel-btn"
           variant="text"
-          color="secondary"
+          color="primary"
           onClick={() => setIsDeleteOpen(false)}
         >
           Cancel
@@ -220,7 +220,7 @@ export const Home = (): React.ReactElement => {
           id="delete-btn"
           data-testid="delete-btn"
           variant="contained"
-          color="primary"
+          color="error"
           onClick={handleDelete}
           disabled={submitting}
         >

diff --git a/ui/src/pages/server-types/server-types.test.tsx b/ui/src/pages/server-types/server-types.test.tsx
@@ -228,7 +228,7 @@ describe('ServerTypes', () => {
     await act(async () => {
       btn.click();
     });
-    expect(window.location.pathname).toBe('/create-app');
+    expect(window.location.pathname).toBe('/');
   });
 
   test('clicks back to edit app', async () => {
@@ -253,7 +253,7 @@ describe('ServerTypes', () => {
     await act(async () => {
       btn.click();
     });
-    expect(window.location.pathname).toBe('/edit-app');
+    expect(window.location.pathname).toBe('/');
     mockSearchParamsGet.mockRestore();
   });
 

diff --git a/ui/src/pages/server-types/server-types.tsx b/ui/src/pages/server-types/server-types.tsx
@@ -214,11 +214,9 @@ export const ServerTypes = (): React.ReactElement => {
               variant="text"
               color="primary"
               startIcon={<ArrowBackIcon />}
-              onClick={() =>
-                navigate(id ? `/edit-app?id=${id}` : '/create-app')
-              }
+              onClick={() => navigateToUrl(APP_BASE_URL)}
             >
-              Back
+              Back To Home
             </Button>
           </div>
         </Item>
@@ -283,10 +281,12 @@ export const ServerTypes = (): React.ReactElement => {
                     id="cancel-btn"
                     type="button"
                     variant="text"
-                    color="secondary"
-                    onClick={() => navigateToUrl(APP_BASE_URL)}
+                    color="primary"
+                    onClick={() =>
+                      navigate(id ? `/edit-app?id=${id}` : '/create-app')
+                    }
                   >
-                    Cancel
+                    Back
                   </Button>
                 </div>
                 <div className="next">

diff --git a/ui/src/theme/colors.tsx b/ui/src/theme/colors.tsx
@@ -12,10 +12,10 @@ export const blue = {
 };
 
 export const gray = {
-  50: '#F7F8F8',
+  50: '#0F10150A',
   100: '#E1E3E4',
-  200: '#C3C7CB',
-  300: '#A6ACB2',
+  200: '#EEEEEE',
+  300: '#E0E0E0',
   400: '#90969C',
   500: '#5B5F63',
   600: '#44474A',
@@ -38,4 +38,6 @@ export const orange = '#F66A0A';
 
 export const white = '#FFFFFF';
 
-export const black = '#0F1015';
+export const black = '#0F1015DE';
+
+export const disabled = '#0F101561';
diff --git a/ui/src/theme/theme.tsx b/ui/src/theme/theme.tsx
@@ -4,6 +4,7 @@ import { PaletteColorOptions } from '@mui/material/styles';
 import {
   black,
   blue,
+  disabled,
   gray,
   green,
   greenDark,
@@ -155,39 +156,58 @@ export const theme = createTheme(baseTheme, {
         {
           props: { variant: 'contained', color: 'primary' },
           style: {
-            minWidth: '120px',
             backgroundColor: `${purple}`,
-            border: `1px solid ${purple}`,
             fontWeight: 700,
             '&:hover': {
               backgroundColor: `${purpleDark}`,
             },
             '&:disabled': {
-              borderColor: 'transparent',
+              color: disabled,
             },
           },
         },
         {
           props: { variant: 'contained', color: 'secondary' },
           style: {
-            minWidth: '120px',
-            backgroundColor: gray[100],
-            border: `1px solid ${gray[100]}`,
-            color: gray[700],
-            fontWeight: 700,
+            backgroundColor: gray[200],
+            border: `1px solid ${gray[200]}`,
+            color: black,
+            fontWeight: 600,
             '&:hover': {
-              backgroundColor: white,
-              filter: 'brightness(0.96)',
+              backgroundColor: gray[300],
+              border: `1px solid ${gray[300]}`,
             },
             '&:disabled': {
+              color: disabled,
               borderColor: 'transparent',
             },
           },
         },
+        {
+          props: { variant: 'contained', color: 'error' },
+          style: {
+            fontWeight: 600,
+          },
+        },
+        {
+          props: { variant: 'outlined', color: 'primary' },
+          style: {
+            backgroundColor: white,
+            border: `2px solid ${purple}`,
+            color: `${purple}`,
+            fontWeight: 700,
+            textTransform: 'none',
+            '&:hover': {
+              backgroundColor: white,
+              borderWidth: 2,
+              border: `2px solid ${purple}`,
+              color: `${purple}`,
+            },
+          },
+        },
         {
           props: { variant: 'outlined', color: 'secondary' },
           style: {
-            minWidth: '120px',
             backgroundColor: white,
             border: `2px solid ${green}`,
             color: `${green}`,
@@ -205,18 +225,29 @@ export const theme = createTheme(baseTheme, {
           props: { variant: 'text', color: 'primary' },
           style: {
             color: `${purple}`,
+            '&:hover': {
+              backgroundColor: `${purpleLight}`,
+            },
             '&:focus': {
               backgroundColor: `${purpleLight}`,
             },
+            '&:disabled': {
+              color: disabled,
+            },
           },
         },
         {
           props: { variant: 'text', color: 'secondary' },
           style: {
-            minWidth: '100px',
-            color: gray[500],
+            color: black,
+            '&:hover': {
+              backgroundColor: `${gray[50]}`,
+            },
             '&:focus': {
-              backgroundColor: `${gray[100]}`,
+              backgroundColor: `${gray[50]}`,
+            },
+            '&:disabled': {
+              color: disabled,
             },
           },
         },