Fixit ticket 530 (nebari-dev#288)

* fixit ticket updates, added loading indicator, style adjustments * fixit-ticket-530 # added index.js index.css * updated jes.config.ts, test wasn't reading imported styles * fixit-ticket-530 # updates to chip size, font size * fixit-ticket-530 # made minor updates to PR review comments * fixit-ticekt-530 # changed Description label backgrond color
jbouder · May 23, 2024 · 1e6783e · 1e6783e
1 parent e02cd73
commit 1e6783e
Show file tree

Hide file tree

Showing 13 changed files with 242 additions and 74 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/ui/jest.config.ts b/ui/jest.config.ts
@@ -113,6 +113,7 @@ const config: JestConfigWithTsJest = {
     '^.+.(svg|css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
     // Paths from tsconfig.json
+    '^src/(.*)$': '<rootDir>/src/$1',
     '^@src/components': '<rootDir>/src/components',
     '^@src/data/(.*)$': '<rootDir>/src/data/$1',
     '^@src/features/(.*)$': '<rootDir>/src/features/$1',

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -19,6 +19,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.15",
+    "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "5.15.10",
     "@tanstack/react-query": "5.37.1",
     "axios": "1.6.8",

diff --git a/ui/src/components/app-card/app-card.css b/ui/src/components/app-card/app-card.css
@@ -5,6 +5,10 @@
   box-shadow: 0px 1px 2px rgba(210, 210, 207, 0.7);
 }
 
+.card.service {
+  height: 224px;
+}
+
 .card > a {
   text-decoration: none;
 }
@@ -158,10 +162,26 @@
   padding: 0.5rem 1rem 1rem;
 }
 
+/* .card-header {
+  display: flex;
+  align-items: center;
+}
+
+.inline.relative.iconic {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+} */
+
 .card-content-content .card-inner-content .iconic {
   font-size: 1rem !important;
   position: relative;
-  top: 3px;
+  top: 2px;
   margin-right: 8px;
 }
 

diff --git a/ui/src/components/app-card/app-card.tsx b/ui/src/components/app-card/app-card.tsx
@@ -170,7 +170,11 @@ export const AppCard = ({
   };
 
   return (
-    <Box className="card" id={`card-${id}`} tabIndex={0}>
+    <Box
+      className={`card ${isAppCard ? '' : 'service'}`}
+      id={`card-${id}`}
+      tabIndex={0}
+    >
       <Link href={url}>
         <Card id={`card-${id}`} tabIndex={0} className="Mui-card">
           <div
@@ -220,32 +224,34 @@ export const AppCard = ({
                           label={framework}
                           id={`chip-${id}`}
                           size="small"
-                          sx={{ mb: '8px' }}
+                          sx={{ mb: '8px', fontWeight: 600 }}
                         />
                       </div>
                     </div>
                   ) : (
                     <></>
                   )}
-                  <span className="inline relative iconic">{getIcon()}</span>
-                  <Typography
-                    gutterBottom
-                    variant="h5"
-                    component="div"
-                    className="card-title"
-                    sx={{ position: 'relative', top: '5px' }}
-                  >
-                    <Tooltip title={title} placement="top-start">
-                      <span
-                        className="card-content-truncate"
-                        style={{
-                          maxWidth: '220px',
-                        }}
-                      >
-                        {title}
-                      </span>
-                    </Tooltip>
-                  </Typography>
+                  <div>
+                    <span className="inline relative iconic">{getIcon()}</span>
+                    <Typography
+                      gutterBottom
+                      variant="h5"
+                      component="div"
+                      className="card-title"
+                      sx={{ position: 'relative', top: '5px' }}
+                    >
+                      <Tooltip title={title} placement="top-start">
+                        <span
+                          className="card-content-truncate"
+                          style={{
+                            maxWidth: '220px',
+                          }}
+                        >
+                          {title}
+                        </span>
+                      </Tooltip>
+                    </Typography>
+                  </div>
                   <Typography
                     variant="body2"
                     color="text.secondary"

diff --git a/ui/src/components/app-form/app-form.tsx b/ui/src/components/app-form/app-form.tsx
@@ -431,7 +431,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
                       : 'transparent',
                   backgroundColor:
                     description.length > 0 || isFocused
-                      ? '#ffffff'
+                      ? '#fafafa'
                       : 'transparent',
                 }}
               >

diff --git a/ui/src/components/status-chip/status-chip.tsx b/ui/src/components/status-chip/status-chip.tsx
@@ -1,6 +1,7 @@
 import { Chip } from '@mui/material';
 interface StatusChipProps {
   status: string;
+  size?: 'small' | 'medium';
 }
 const getStatusStyles = (status: string) => {
   let styles;
@@ -35,10 +36,13 @@ const getStatusStyles = (status: string) => {
   return styles;
 };
 
-export const StatusChip = ({ status }: StatusChipProps): React.ReactElement => (
+export const StatusChip = ({
+  status,
+  size = 'small',
+}: StatusChipProps): React.ReactElement => (
   <Chip
     label={status || 'Default'}
-    size="small"
+    size={size}
     sx={{ fontWeight: 600, fontSize: '12px', ...getStatusStyles(status) }}
   />
 );

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -30,6 +30,9 @@
 }
 
 /* Global Styling */
+html {
+  background: #fafafa;
+}
 main {
   margin: 24px 0;
 }

diff --git a/ui/src/pages/home/apps-section/app-table/app-table.css b/ui/src/pages/home/apps-section/app-table/app-table.css
@@ -1,9 +1,15 @@
+.align-vertical-center {
+  vertical-align: middle;
+  position: relative;
+  top: -6px; /* Adjust this value as needed */
+}
+
 .icon-button {
   padding: 0 20px !important;
 }
 
 .icon-text {
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   position: relative;
   top: -3px;
 }
@@ -19,6 +25,7 @@
 
 .actions .action-button:hover {
   background-color: transparent;
+  border-radius: 50%;
 }
 
 .actions button.button-icon {
@@ -27,6 +34,13 @@
 
 .actions button.button-icon:hover {
   background-color: transparent;
+  border-radius: 50%;
+}
+
+.action-button {
+  min-width: 0px !important;
+  border-radius: 50% !important;
+  margin: 0 1rem !important;
 }
 
 .truncate {
@@ -39,3 +53,7 @@
 .MuiDataGrid-menuIcon.base-Popper-root.MuiDataGrid-menu {
   display: none;
 }
+
+.app-header th {
+  font-weight: 600;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,9 @@ @@
     }
     /* Global Styling */
+    html {
+      background: #fafafa;
+    }
     main {
       margin: 24px 0;
     }
@@ Expand Down @@