[#3261] - Redirects: UI Enhancements

src/apps/seo/src/app/index.tsx

@@ -5,25 +5,26 @@ import { Box } from "@mui/material";
 
 import { RedirectsManager } from "../views/RedirectsManager";
 
-import styles from "./app.less";
 export default connect((state) => state)(
   class HealthApp extends Component {
     render() {
       return (
-        <Box component="section" className={styles.HealthApp}>
-          <Box
-            component="main"
-            className={styles.wrapper}
-            sx={{
-              backgroundColor: "background.paper",
-            }}
-          >
-            <Switch>
-              <Route exact path="/redirects">
-                <RedirectsManager {...this.props} />
-              </Route>
-            </Switch>
-          </Box>
+        <Box
+          component="section"
+          bgcolor="grey.50"
+          color="text.primary"
+          height="calc(100vh - 40px)"
+          width="100%"
+          display="flex"
+          flexDirection="column"
+          boxSizing="border-box"
+          overflow="hidden"
+        >
+          <Switch>
+            <Route exact path="/redirects">
+              <RedirectsManager {...this.props} />
+            </Route>
+          </Switch>
         </Box>
       );
     }

src/apps/seo/src/views/RedirectsManager/RedirectActions/RedirectActions.tsx

@@ -1,25 +1,44 @@
-import { Box } from "@mui/material";
-import styles from "./RedirectActions.less";
-
+import { Box, Typography } from "@mui/material";
+import { CSVImporter } from "../../../store/imports";
 import { RedirectFilter } from "./RedirectFilter";
+import RedirectsImport from "./RedirectsImport";
+import { useDispatch } from "react-redux";
 
 interface RedirectActionsProps {
   redirectsTotal: number;
   dispatch: () => void;
 }
 export default function RedirectActions(props: RedirectActionsProps) {
+  const dispatch = useDispatch();
   return (
     <Box
       component="header"
-      className={styles.RedirectActions}
+      width="100%"
       sx={{
         backgroundColor: "background.paper",
+        alignItems: "center",
+        justifyContent: "space-between",
+        display: "flex",
+        top: "0",
+        zIndex: 2,
       }}
     >
-      <h1 className={styles.title}>{props.redirectsTotal} Total Redirects</h1>
-      <div className={styles.actions}>
+      <Typography variant="h3" fontWeight="700">
+        {props.redirectsTotal} Total Redirects
+      </Typography>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        columnGap={1}
+      >
         <RedirectFilter dispatch={props.dispatch} />
-      </div>
+        <RedirectsImport
+          onChange={(evt: any) => {
+            dispatch(CSVImporter(evt as any));
+          }}
+        />
+      </Box>
     </Box>
   );
 }

src/apps/seo/src/views/RedirectsManager/RedirectActions/RedirectFilter/RedirectFilter.js

@@ -17,12 +17,18 @@ export function RedirectFilter(props) {
 
   return (
     <TextField
-      placeholder="Filter your redirects by url"
+      placeholder="Filter Redirects"
       type="search"
       variant="outlined"
       size="small"
       value={filter}
       InputProps={{
+        sx: {
+          backgroundColor: "grey.50",
+          input: {
+            py: 0.75,
+          },
+        },
         startAdornment: (
           <InputAdornment position="start">
             <SearchIcon fontSize="small" />
@@ -33,6 +39,12 @@ export function RedirectFilter(props) {
         const term = evt.target.value.trim();
         handleFilter(term);
       }}
+      sx={{
+        width: "240px",
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: 0,
+        },
+      }}
     />
   );
 }

src/apps/seo/src/views/RedirectsManager/RedirectActions/RedirectsImport/RedirectsImport.js

@@ -1,26 +1,28 @@
 import Button from "@mui/material/Button";
 import UploadIcon from "@mui/icons-material/Upload";
 
-import styles from "./RedirectsImport.less";
+import Box from "@mui/material/Box";
 export default function RedirectsImport(props) {
   let fileInput = null;
   return (
-    <div className={styles.RedirectsImport}>
+    <Box>
       <input
         type="file"
-        className={styles.hidden}
+        hidden
         ref={(input) => (fileInput = input)}
         onChange={props.onChange}
       />
       <Button
-        variant="contained"
+        variant="outlined"
+        color="inherit"
+        size="small"
         onClick={() => {
           fileInput.click();
         }}
         startIcon={<UploadIcon />}
       >
         Import CSV/XML
       </Button>
-    </div>
+    </Box>
   );
 }

src/apps/seo/src/views/RedirectsManager/RedirectImportTable/ImportTableRowDisabled/ImportTableRowDisabled.js

@@ -16,7 +16,7 @@ export default function ImportTableRowDisabled({
     <div className={styles.ImportTableRowDisabled}>
       <span className={styles.RowCell}>{path}</span>
       <span className={styles.RedirectCreatorCell}>
-        <ToggleButtonGroup color="secondary" value={code} size="small" disabled>
+        <ToggleButtonGroup color="primary" value={code} size="small" disabled>
           <ToggleButton value={302}>302</ToggleButton>
           <ToggleButton value={301}>301</ToggleButton>
         </ToggleButtonGroup>

src/apps/seo/src/views/RedirectsManager/RedirectImportTable/RedirectImportTableRow/RedirectImportTableRow.js

@@ -61,7 +61,7 @@ function RedirectImportTableRow(props) {
 
       <span className={styles.RedirectCreatorCell}>
         <ToggleButtonGroup
-          color="secondary"
+          color="primary"
           value={props.code}
           size="small"
           exclusive

src/apps/seo/src/views/RedirectsManager/RedirectsManager.js

@@ -1,14 +1,11 @@
 import { useEffect, useState } from "react";
-
 import { WithLoader } from "@zesty-io/core/WithLoader";
-
-import RedirectActions from "./RedirectActions";
 import RedirectsTable from "./RedirectsTable";
 import RedirectImportTable from "./RedirectImportTable";
-
 import { fetchRedirects } from "../../store/redirects";
+import { Box } from "@mui/material";
+import RedirectActions from "./RedirectActions";
 
-import styles from "./RedirectsManager.less";
 export default function RedirectManager(props) {
   const [loading, setLoading] = useState(true);
 
@@ -30,23 +27,46 @@ export default function RedirectManager(props) {
   }, []);
 
   return (
-    <div className={styles.RedirectsManager}>
-      <RedirectActions
-        dispatch={props.dispatch}
-        redirectsTotal={Object.keys(props.redirects).length}
-      />
+    <>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        px={4}
+        pt={4}
+        pb={1.75}
+        sx={{
+          borderBottom: (theme) => `2px solid ${theme.palette.border}`,
+          backgroundColor: "background.paper",
+        }}
+      >
+        <RedirectActions
+          dispatch={props.dispatch}
+          redirectsTotal={Object.keys(props.redirects).length}
+        />
+      </Box>
 
-      <WithLoader
-        condition={!loading}
-        message="Loading Redirects"
-        height="calc(100vh - 172px)"
+      <Box
+        flexGrow={1}
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        px={4}
+        py={2}
+        boxSizing="border-box"
+        position="relative"
       >
-        {Object.keys(props.imports).length ? (
-          <RedirectImportTable {...props} />
-        ) : (
-          <RedirectsTable {...props} />
-        )}
-      </WithLoader>
-    </div>
+        <WithLoader
+          condition={!loading}
+          message="Loading Redirects"
+          height="100%"
+        >
+          {Object.keys(props.imports).length ? (
+            <RedirectImportTable {...props} />
+          ) : (
+            <RedirectsTable {...props} />
+          )}
+        </WithLoader>
+      </Box>
+    </>
   );
 }