wip: edit styles

2026-09-28 22:35:37 +00:00 · 2025-06-08 11:58:04 -05:00
parent 1f426989af
commit 3c06a1ae14
6 changed files with 99 additions and 91 deletions
@@ -53,7 +53,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
        bgcolor: "background.paper",
        border: 1,
        borderColor: "divider",
-        transition: "all 0.3s ease-in-out",
        "&:hover": {
          boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
        },
@@ -132,7 +131,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
                      "& .MuiOutlinedInput-root": {
                        borderRadius: 2,
                        bgcolor: "background.default",
-                        transition: "all 0.2s ease-in-out",
                        "&:hover": {
                          "& .MuiOutlinedInput-notchedOutline": {
                            borderColor: "primary.main",
@@ -157,7 +155,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
                      "& .MuiOutlinedInput-root": {
                        borderRadius: 2,
                        bgcolor: "background.default",
-                        transition: "all 0.2s ease-in-out",
                        "&:hover": {
                          "& .MuiOutlinedInput-notchedOutline": {
                            borderColor: "primary.main",
@@ -189,7 +186,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
                          bgcolor: "primary.main",
                          color: "primary.contrastText",
                          borderRadius: 2,
-                          transition: "all 0.2s ease-in-out",
                          "&:hover": {
                            bgcolor: "primary.dark",
                            transform: "translateY(-1px)",
@@ -239,7 +235,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
                      size="small"
                      color="error"
                      sx={{
-                        transition: "all 0.2s ease-in-out",
                        "&:hover": {
                          bgcolor: "error.main",
                          color: "error.contrastText",
@@ -2,3 +2,14 @@
  margin-bottom: 1rem;
  text-align: center;
 }
+
+.container {
+  text-align: left;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-weight: 600;
+  color: var(--mui-palette-text-primary);
+  margin-bottom: 8px;
+}
@@ -1,5 +1,6 @@
 import { Box, Typography } from "@mui/material";
 import React, { ReactNode } from "react";
+import styles from "./job-submitter-header.module.css";

 interface JobSubmitterHeaderProps {
  title?: string;
@@ -11,22 +12,11 @@ export const JobSubmitterHeader: React.FC<JobSubmitterHeaderProps> = ({
  children,
 }) => {
  return (
-    <Box
-      sx={{
-        textAlign: "left",
-        mb: 1,
-      }}
-    >
-      <Typography
-        variant="h4"
-        sx={{
-          fontWeight: 600,
-          color: "text.primary",
-          mb: 1,
-        }}
-      >
+    <Box className={styles.container}>
+      <Typography variant="h4" className={styles.title}>
        {title}
      </Typography>
+      {children}
    </Box>
  );
 };
@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: stretch;
+}
+
+@media (min-width: 600px) {
+  .container {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.input {
+  width: 100%;
+}
+
+.input :global(.MuiOutlinedInput-root) {
+  border-radius: 16px;
+  transition: all 0.2s ease-in-out;
+}
+
+.input
+  :global(.MuiOutlinedInput-root:hover)
+  :global(.MuiOutlinedInput-notchedOutline) {
+  border-color: var(--mui-palette-primary-main);
+}
+
+.submitButton {
+  height: 48px !important;
+  border-radius: 16px;
+  font-size: 1rem !important;
+  font-weight: 500 !important;
+}
+
+.submitButton:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.submitButton:disabled {
+  transform: none;
+  box-shadow: none;
+}
+
+@media (min-width: 600px) {
+  .submitButton {
+    min-width: 120px;
+    height: 56px;
+  }
+}
@@ -1,5 +1,6 @@
 import { Box, Button, CircularProgress, TextField } from "@mui/material";
 import { useJobSubmitterProvider } from "../provider";
+import styles from "./job-submitter-input.module.css";

 export type JobSubmitterInputProps = {
  urlError: string | null;
@@ -16,14 +17,7 @@ export const JobSubmitterInput = ({
    useJobSubmitterProvider();

  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: { xs: "column", sm: "row" },
-        gap: 2,
-        alignItems: { xs: "stretch", sm: "center" },
-      }}
-    >
+    <Box className={styles.container}>
      <TextField
        data-cy="url-input"
        label="URL"
@@ -33,17 +27,7 @@ export const JobSubmitterInput = ({
        onChange={(e) => setSubmittedURL(e.target.value)}
        error={!isValidURL}
        helperText={!isValidURL ? urlError : ""}
-        sx={{
-          "& .MuiOutlinedInput-root": {
-            borderRadius: 2,
-            transition: "all 0.2s ease-in-out",
-            "&:hover": {
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderColor: "primary.main",
-              },
-            },
-          },
-        }}
+        className={styles.input}
      />
      <Button
        data-cy="submit-button"
@@ -51,23 +35,7 @@ export const JobSubmitterInput = ({
        size="large"
        onClick={handleSubmit}
        disabled={!(rows.length > 0) || loading}
-        sx={{
-          minWidth: { xs: "100%", sm: 120 },
-          height: { xs: 48, sm: 56 },
-          borderRadius: 2,
-          textTransform: "none",
-          fontSize: "1rem",
-          fontWeight: 500,
-          transition: "all 0.2s ease-in-out",
-          "&:hover": {
-            transform: "translateY(-1px)",
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-          },
-          "&:disabled": {
-            transform: "none",
-            boxShadow: "none",
-          },
-        }}
+        className={styles.submitButton}
      >
        {loading ? <CircularProgress size={24} color="inherit" /> : "Submit"}
      </Button>
@@ -4,7 +4,7 @@ import { AdvancedJobOptions } from "@/components/common/advanced-job-options";
 import { useSubmitJob } from "@/hooks/use-submit-job";
 import { parseJobOptions } from "@/lib";
 import { useUser } from "@/store/hooks";
-import { Box, Fade, Paper } from "@mui/material";
+import { Box, Paper } from "@mui/material";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { JobSubmitterHeader } from "./job-submitter-header";
@@ -30,42 +30,34 @@ export const JobSubmitter = () => {
    await submitJob(submittedURL, rows, user, jobOptions, siteMap, false, null);
  };

-  console.log(jobOptions);
-  useEffect(() => {
-    console.log(jobOptions);
-  }, [jobOptions]);
-
  return (
-    <Fade in timeout={500}>
-      <Paper
-        elevation={0}
-        sx={{
-          p: 4,
-          borderRadius: 2,
-          bgcolor: "background.paper",
-          border: 1,
-          borderColor: "divider",
-          transition: "all 0.3s ease-in-out",
-          "&:hover": {
-            boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
-          },
-        }}
-      >
-        <Box className="flex flex-col gap-6">
-          <JobSubmitterHeader />
-          <Box className="flex flex-col gap-4">
-            <JobSubmitterInput
-              urlError={error}
-              handleSubmit={handleSubmit}
-              loading={loading}
-            />
-            <AdvancedJobOptions
-              jobOptions={jobOptions}
-              setJobOptions={setJobOptions}
-            />
-          </Box>
+    <Paper
+      elevation={0}
+      sx={{
+        p: 4,
+        borderRadius: 2,
+        bgcolor: "background.paper",
+        border: 1,
+        borderColor: "divider",
+        "&:hover": {
+          boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
+        },
+      }}
+    >
+      <Box className="flex flex-col gap-6">
+        <JobSubmitterHeader />
+        <Box className="flex flex-col gap-4">
+          <JobSubmitterInput
+            urlError={error}
+            handleSubmit={handleSubmit}
+            loading={loading}
+          />
+          <AdvancedJobOptions
+            jobOptions={jobOptions}
+            setJobOptions={setJobOptions}
+          />
        </Box>
-      </Paper>
-    </Fade>
+      </Box>
+    </Paper>
  );
 };