App Launcher Button Refinements

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;

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;

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

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>

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;

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;
  }
 }

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>

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>

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 />}

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`;

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}
  >

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();
  });
 

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">

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';

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,
  },
  },
  },