fix: numaflow package style fixes (#1622)

Signed-off-by: veds-g <[email protected]>
numaproj · Apr 2, 2024 · 35c2fe0 · 35c2fe0
1 parent f1e5ba0
commit 35c2fe0
Show file tree

Hide file tree

Showing 92 changed files with 898 additions and 611 deletions.
diff --git a/ui/src/App.css b/ui/src/App.css
@@ -1,4 +1,7 @@
-html,
+html {
+  height: 100%;
+  font-size: 10px;
+}
 body,
 #root,
 .MuiScopedCssBaseline-root {
@@ -16,26 +19,26 @@ body,
 }
 
 .logo {
-  width: 2.6875rem;
+  width: 4.3rem;
 }
 
 .text-logo {
-  margin-left: 0.81rem;
-  width: 9.125rem;
+  margin-left: 1.296rem;
+  width: 14.6rem;
 }
 
 .app-container {
   height: 100%;
 }
 
 .MuiAppBar-root {
-  height: 3.75rem;
+  height: 6rem;
   background: linear-gradient(90deg, #00254A 2.77%, #3492EF 105.54%) !important;
 }
 
 .MuiToolbar-root {
-  padding-left: 1.25rem !important;
-  min-height: 3.75rem !important;
+  padding-left: 2rem !important;
+  min-height: 6rem !important;
 }
 
 .MuiBackdrop-root {

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -213,7 +213,7 @@ function App(props: AppProps) {
             <Routes managedNamespace={systemInfo.managedNamespace} />
           </Route>
           <Route path="*">
-            <main style={{ padding: "1rem" }}>
+            <main style={{ padding: "1.6rem", fontSize: "1.6rem" }}>
               <p>There's nothing here!</p>
             </main>
           </Route>
@@ -230,7 +230,7 @@ function App(props: AppProps) {
           <Routes />
         </Route>
         <Route path="*">
-          <main style={{ padding: "1rem" }}>
+          <main style={{ padding: "1.6rem", fontSize: "1.6rem" }}>
             <p>There's nothing here!</p>
           </main>
         </Route>
@@ -268,7 +268,7 @@ function App(props: AppProps) {
             {!EXCLUDE_APP_BARS[location.pathname] && (
               <Box
                 sx={{
-                  height: "4rem",
+                  height: "6.4rem",
                 }}
               >
                 <AppBar
@@ -297,11 +297,11 @@ function App(props: AppProps) {
                   flexDirection: "column",
                   width: "100%",
                   overflow: "auto",
-                  height: "2.0625rem",
+                  height: "3.3rem",
                   background: "#F8F8FB",
                   zIndex: (theme) => theme.zIndex.drawer - 1,
                   position: "fixed",
-                  top: "3.75rem",
+                  top: "6rem",
                 }}
               >
                 <Breadcrumbs />
@@ -314,7 +314,7 @@ function App(props: AppProps) {
                 width: "100%",
                 height: "100%",
                 overflow: "auto",
-                marginTop: EXCLUDE_CRUMBS[location.pathname] ? 0 : "2.5rem",
+                marginTop: EXCLUDE_CRUMBS[location.pathname] ? 0 : "4rem",
               }}
             >
               {routes}

diff --git a/ui/src/components/common/AccountMenu/index.tsx b/ui/src/components/common/AccountMenu/index.tsx
@@ -39,7 +39,11 @@ export default function AccountMenu() {
         <IconButton onClick={handleLogout} size="small" sx={{ ml: 2 }}>
           <Chip
             label="Log out"
-            sx={{ backgroundColor: "#00D0E0", color: "#000" }}
+            sx={{
+              backgroundColor: "#00D0E0",
+              color: "#000",
+              fontSize: "1.3rem",
+            }}
           />
         </IconButton>
       </Box>

diff --git a/ui/src/components/common/Breadcrumbs/style.css b/ui/src/components/common/Breadcrumbs/style.css
@@ -1,22 +1,22 @@
 .Breadcrumbs {
-  margin: 0.5rem 1.25rem !important;
+  margin: 0.8rem 2rem !important;
   overflow: hidden !important;
 }
 
 .Breadcrumbs-typ {
   color: var(--badge-pending, #6B6C72);
-  font-size: 0.75rem !important;
+  font-size: 1.2rem !important;
   font-style: normal !important;
   font-weight: 400 !important;
-  line-height: 1rem !important;
+  line-height: 1.6rem !important;
 }
 
 .Breadcrumbs-link {
   text-decoration: none;
-  font-size: 0.75rem !important;
+  font-size: 1.2rem !important;
   font-style: normal !important;
   font-weight: 400 !important;
-  line-height: 1rem !important;
+  line-height: 1.6rem !important;
   color: #0077C5;
 }
 
@@ -29,13 +29,13 @@
 }
 
 .MuiBreadcrumbs-separator {
-  margin: 0 0.3125rem !important;
-  font-size: 1rem !important;
+  margin: 0 0.5rem !important;
+  font-size: 1.6rem !important;
 }
 
 .crumb-separator {
-  width: 1.875rem;
-  height: 1.8125rem;
-  margin: -0.3125rem;
-  margin-top: -0.25rem;
+  width: 3rem;
+  height: 2.9rem;
+  margin: -0.5rem;
+  margin-top: -0.4rem;
 }
diff --git a/ui/src/components/common/DebouncedSearchInput/index.tsx b/ui/src/components/common/DebouncedSearchInput/index.tsx
@@ -49,20 +49,25 @@ export function DebouncedSearchInput({
       sx={{
         background: "#FFFFFF",
         flexGrow: "2",
-        maxWidth: "39.375rem",
-        minWidth: "15.625rem",
+        maxWidth: "63rem",
+        minWidth: "25rem",
         border: "1px solid #6B6C72",
-        borderRadius: "0.25rem",
+        borderRadius: "0.4rem",
       }}
       variant="outlined"
       placeholder={placeHolder}
       disabled={disabled}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <SearchIcon sx={{ color: "#241C15" }} />
+            <SearchIcon
+              sx={{ color: "#241C15", height: "2.4rem", width: "2.4rem" }}
+            />
           </InputAdornment>
         ),
+        sx: {
+          fontSize: "1.6rem",
+        },
       }}
       onChange={handleInputChange}
       data-testid="debounced-search-input"

diff --git a/ui/src/components/common/ErrorDisplay/index.tsx b/ui/src/components/common/ErrorDisplay/index.tsx
@@ -19,7 +19,7 @@ export function ErrorDisplay({ title, message }: ErrorDisplayProps) {
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
-        maxWidth: "37.5rem",
+        maxWidth: "60rem",
       }}
     >
       <Box
@@ -34,7 +34,7 @@ export function ErrorDisplay({ title, message }: ErrorDisplayProps) {
           sx={{
             display: "flex",
             flexDirection: "column",
-            marginLeft: "0.5rem",
+            marginLeft: "0.8rem",
           }}
         >
           <span className="error-display-title">{title}</span>

diff --git a/ui/src/components/common/ErrorDisplay/style.css b/ui/src/components/common/ErrorDisplay/style.css
@@ -1,9 +1,15 @@
 .error-display-title {
-  font-size: 1.25rem;
+  font-size: 2rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.error-display-message {
+  font-size: 1.6rem;
   font-style: normal;
   font-weight: 400;
 }
 
 .error-display-icon {
-  width: 5.625rem;
+  width: 9rem;
 }
diff --git a/ui/src/components/common/ErrorIndicator/index.tsx b/ui/src/components/common/ErrorIndicator/index.tsx
@@ -22,22 +22,29 @@ export function ErrorIndicator() {
   }, []);
 
   return (
-    <Tooltip title={ERRORS_TOOLTIP} arrow>
+    <Tooltip
+      title={<div className="error-tooltip">{ERRORS_TOOLTIP}</div>}
+      arrow
+    >
       <Paper
         elevation={1}
         sx={{
           cursor: "pointer",
-          padding: "0.25rem 0.5rem",
+          padding: "0.4rem 0.8rem",
         }}
         onClick={onErrorClick}
       >
         <Box
           sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}
         >
           {errors && errors.length ? (
-            <ErrorIcon sx={{ color: "#D52B1E" }} />
+            <ErrorIcon
+              sx={{ color: "#D52B1E", height: "2.4rem", width: "2.4rem" }}
+            />
           ) : (
-            <ErrorOutlineIcon sx={{ color: "#6B6C72" }} />
+            <ErrorOutlineIcon
+              sx={{ color: "#6B6C72", height: "2.4rem", width: "2.4rem" }}
+            />
           )}
           {errors?.length ? (
             <span className="error-indicator-text">Error occurred</span>

diff --git a/ui/src/components/common/ErrorIndicator/style.css b/ui/src/components/common/ErrorIndicator/style.css
@@ -1,4 +1,9 @@
 .error-indicator-text {
-  margin-left: 0.5rem;
-  min-width: 6.5625rem;
+  margin-left: 0.8rem;
+  min-width: 10.5rem;
+  font-size: 1.6rem;
+}
+
+.error-tooltip {
+  font-size: 1.1rem;
 }
diff --git a/ui/src/components/common/SlidingSidebar/index.tsx b/ui/src/components/common/SlidingSidebar/index.tsx
@@ -264,6 +264,7 @@ export function SlidingSidebar({
         width: width,
         minWidth: minWidth,
         height: "100%",
+        fontSize: "1.6rem",
       }}
     >
       {slide && (
@@ -289,12 +290,12 @@ export function SlidingSidebar({
         sx={{
           display: "flex",
           flexDirection: "column",
-          paddingTop: "5.25rem",
-          paddingRight: "1.5rem",
-          paddingBottom: "1.5rem",
-          paddingLeft: "1rem",
+          paddingTop: "8.4rem",
+          paddingRight: "2.4rem",
+          paddingBottom: "2.4rem",
+          paddingLeft: "1.6rem",
           width: "100%",
-          height: "calc(100% - 6.75rem)",
+          height: "calc(100% - 10.8rem)",
           overflowX: "scroll",
         }}
       >
@@ -303,11 +304,11 @@ export function SlidingSidebar({
             display: "flex",
             flexDirection: "row",
             justifyContent: "flex-end",
-            marginBottom: "-2rem",
+            marginBottom: "-3.2rem",
           }}
         >
           <IconButton data-testid="close-button" onClick={handleClose}>
-            <CloseIcon />
+            <CloseIcon sx={{ height: "2.4rem", width: "2.4rem" }} />
           </IconButton>
         </Box>
         {content}

diff --git a/ui/src/components/common/SlidingSidebar/partials/CloseModal/index.tsx b/ui/src/components/common/SlidingSidebar/partials/CloseModal/index.tsx
@@ -55,9 +55,9 @@ export function CloseModal({
           left: "50%",
           transform: "translate(-50%, -50%)",
           bgcolor: "background.paper",
-          borderRadius: "0.3125rem",
+          borderRadius: "0.5rem",
           boxShadow: 24,
-          padding: "2rem",
+          padding: "3.2rem",
         }}
       >
         <Box
@@ -66,7 +66,7 @@ export function CloseModal({
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-around",
-            marginBottom: "1rem",
+            marginBottom: "1.6rem",
           }}
         >
           {icon}
@@ -80,10 +80,26 @@ export function CloseModal({
             justifyContent: "space-evenly",
           }}
         >
-          <Button data-testid="close-modal-confirm" onClick={onConfirm} variant="contained" color="primary">
+          <Button
+            data-testid="close-modal-confirm"
+            onClick={onConfirm}
+            variant="contained"
+            color="primary"
+            sx={{
+              fontSize: "1.4rem",
+            }}
+          >
             Confirm
           </Button>
-          <Button data-testid="close-modal-cancel" onClick={onCancel} variant="outlined" color="primary">
+          <Button
+            data-testid="close-modal-cancel"
+            onClick={onCancel}
+            variant="outlined"
+            color="primary"
+            sx={{
+              fontSize: "1.4rem",
+            }}
+          >
             Cancel
           </Button>
         </Box>

diff --git a/ui/src/components/common/SlidingSidebar/partials/CloseModal/style.css b/ui/src/components/common/SlidingSidebar/partials/CloseModal/style.css
@@ -1,10 +1,10 @@
 .close-modal-warn-icon {
-  width: 3.125rem;
+  width: 5rem;
 }
 
 .close-modal-message {
   color: #000;
-  font-size: 1.25rem;
+  font-size: 2rem;
   font-style: normal;
   font-weight: 400;
 }
diff --git a/ui/src/components/common/SlidingSidebar/partials/EdgeDetails/index.tsx b/ui/src/components/common/SlidingSidebar/partials/EdgeDetails/index.tsx
@@ -33,9 +33,9 @@ export function EdgeDetails({ edgeId, watermarks }: EdgeDetailsProps) {
       </Box>
       <TableContainer
         sx={{
-          maxHeight: "37.5rem",
+          maxHeight: "60rem",
           backgroundColor: "#FFF",
-          marginTop: "1rem",
+          marginTop: "1.6rem",
         }}
       >
         <Table stickyHeader>

diff --git a/ui/src/components/common/SlidingSidebar/partials/EdgeDetails/style.css b/ui/src/components/common/SlidingSidebar/partials/EdgeDetails/style.css
@@ -1,5 +1,5 @@
 .edge-details-header-text {
-  font-size: 1.25rem;
+  font-size: 2rem;
   font-style: normal;
   font-weight: 500;
-}
+}