From 31719c7135b86faec54ae81cee98036acae68f07 Mon Sep 17 00:00:00 2001 From: Juga Paazmaya Date: Mon, 28 Aug 2023 17:14:48 +0300 Subject: [PATCH 1/2] JSS style migration with codemod --- src/components/BuildList/index.tsx | 49 +++++++++-------- src/components/CommentsPopper.tsx | 22 +++++--- src/components/ProjectSelect.tsx | 34 +++++++----- .../ApproveRejectButtons.tsx | 17 +++--- .../TestDetailsDialog/ArrowButtons.tsx | 22 +++++--- src/components/TestDetailsDialog/DrawArea.tsx | 23 +++++--- .../TestDetailsDialog/ImageDetails.tsx | 20 ++++--- .../TestDetailsDialog/NoImageAvailable.tsx | 15 +++--- .../TestDetailsDialog/TestDetailsModal.tsx | 54 +++++++++++++------ src/components/TestDetailsDialog/index.tsx | 16 +++--- src/components/TestVariationList.tsx | 21 +++++--- src/pages/ProjectPage.tsx | 18 ++++--- src/pages/TestVariationDetailsPage.tsx | 16 +++--- 13 files changed, 210 insertions(+), 117 deletions(-) diff --git a/src/components/BuildList/index.tsx b/src/components/BuildList/index.tsx index fdaa83b6..0eb94804 100644 --- a/src/components/BuildList/index.tsx +++ b/src/components/BuildList/index.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from "react"; -import { makeStyles, createStyles } from "@mui/styles"; +import { styled } from "@mui/material/styles"; import { List, ListItemButton, @@ -34,26 +34,34 @@ import { useNavigate } from "react-router"; import { buildTestRunLocation } from "../../_helpers/route.helpers"; import { Tooltip } from "../Tooltip"; -const useStyles = makeStyles(() => - createStyles({ - listContainer: { - height: "100%", - overflow: "auto", - }, - listItemSecondaryAction: { - visibility: "hidden", - }, - listItem: { - paddingRight: 48, - "&:hover $listItemSecondaryAction": { - visibility: "inherit", - }, +const PREFIX = "index"; + +const classes = { + listContainer: `${PREFIX}-listContainer`, + listItemSecondaryAction: `${PREFIX}-listItemSecondaryAction`, + listItem: `${PREFIX}-listItem`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.listContainer}`]: { + height: "100%", + overflow: "auto", + }, + + [`& .${classes.listItemSecondaryAction}`]: { + visibility: "hidden", + }, + + [`& .${classes.listItem}`]: { + paddingRight: 48, + "&:hover $listItemSecondaryAction": { + visibility: "inherit", }, - }), -); + }, +})); const BuildList: FunctionComponent = () => { - const classes = useStyles(); const navigate = useNavigate(); const { buildList, selectedBuild, loading, total, take } = useBuildState(); const buildDispatch = useBuildDispatch(); @@ -117,7 +125,7 @@ const BuildList: FunctionComponent = () => { }, [handlePaginationChange]); return ( - <> + {loading ? ( @@ -203,7 +211,6 @@ const BuildList: FunctionComponent = () => { - {menuBuild && ( {menuBuild.isRunning && ( @@ -315,7 +322,7 @@ const BuildList: FunctionComponent = () => { }} /> )} - + ); }; diff --git a/src/components/CommentsPopper.tsx b/src/components/CommentsPopper.tsx index 6e0d50ac..f40b84a1 100644 --- a/src/components/CommentsPopper.tsx +++ b/src/components/CommentsPopper.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { makeStyles } from "@mui/styles"; +import { styled } from "@mui/material/styles"; import { Button, Popper, @@ -15,11 +15,20 @@ import { bindPopper, } from "material-ui-popup-state/hooks"; -const useStyles = makeStyles((theme: Theme) => ({ - popperContainer: { +const PREFIX = "CommentsPopper"; + +const classes = { + popperContainer: `${PREFIX}-popperContainer`, + contentContainer: `${PREFIX}-contentContainer`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(({ theme: Theme }) => ({ + [`& .${classes.popperContainer}`]: { zIndex: 1400, }, - contentContainer: { + + [`& .${classes.contentContainer}`]: { padding: theme.spacing(2), }, })); @@ -33,7 +42,6 @@ export const CommentsPopper: React.FunctionComponent = ({ text, onSave, }) => { - const classes = useStyles(); const popupState = usePopupState({ variant: "popper", popupId: "commentPopper", @@ -44,7 +52,7 @@ export const CommentsPopper: React.FunctionComponent = ({ React.useEffect(() => setComment(text || ""), [text]); return ( - <> + = ({ )} - + ); }; diff --git a/src/components/ProjectSelect.tsx b/src/components/ProjectSelect.tsx index 4e1e55ef..9cb6101a 100644 --- a/src/components/ProjectSelect.tsx +++ b/src/components/ProjectSelect.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from "react"; -import { makeStyles, createStyles } from "@mui/styles"; +import { styled } from "@mui/material/styles"; import { FormControl, InputLabel, @@ -14,22 +14,28 @@ import { selectProject, } from "../contexts"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - formControl: { - width: "100%", - }, - input: { - margin: theme.spacing(1), - }, - }), -); +const PREFIX = "ProjectSelect"; + +const classes = { + formControl: `${PREFIX}-formControl`, + input: `${PREFIX}-input`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(({ theme: Theme }) => ({ + [`& .${classes.formControl}`]: { + width: "100%", + }, + + [`& .${classes.input}`]: { + margin: theme.spacing(1), + }, +})); const ProjectSelect: FunctionComponent<{ projectId?: string; onProjectSelect: (id: string) => void; }> = ({ projectId, onProjectSelect }) => { - const classes = useStyles(); const { projectList, selectedProjectId } = useProjectState(); const projectDispatch = useProjectDispatch(); @@ -40,7 +46,7 @@ const ProjectSelect: FunctionComponent<{ }, [projectId, selectedProjectId, projectDispatch]); return ( - <> + {projectList.length > 0 && ( @@ -68,7 +74,7 @@ const ProjectSelect: FunctionComponent<{ )} - + ); }; diff --git a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx index 5c8f2300..2d151d45 100644 --- a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx +++ b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx @@ -1,14 +1,20 @@ import { Chip, Button } from "@mui/material"; +import { styled } from "@mui/material/styles"; import { useSnackbar } from "notistack"; import { useHotkeys } from "react-hotkeys-hook"; import React from "react"; import { testRunService } from "../../services"; import { TestRun } from "../../types"; import { Tooltip } from "../Tooltip"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "ApproveRejectButtons"; -const useStyles = makeStyles(() => ({ - actionButton: { +const classes = { + actionButton: `${PREFIX}-actionButton`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.actionButton}`]: { width: 120, marginLeft: 4, marginRight: 4, @@ -21,7 +27,6 @@ export const ApproveRejectButtons: React.FunctionComponent<{ afterReject?: () => void; }> = ({ testRun, afterApprove, afterReject }) => { const { enqueueSnackbar } = useSnackbar(); - const classes = useStyles(); const approve = () => { testRunService @@ -59,7 +64,7 @@ export const ApproveRejectButtons: React.FunctionComponent<{ useHotkeys("x", reject, [testRun]); return ( - <> + {testRun.merge && ( - + ); }; diff --git a/src/components/TestDetailsDialog/ArrowButtons.tsx b/src/components/TestDetailsDialog/ArrowButtons.tsx index 3bd8fe42..44d93205 100644 --- a/src/components/TestDetailsDialog/ArrowButtons.tsx +++ b/src/components/TestDetailsDialog/ArrowButtons.tsx @@ -1,13 +1,20 @@ import { IconButton } from "@mui/material"; +import { styled } from "@mui/material/styles"; import { NavigateNext, NavigateBefore } from "@mui/icons-material"; import React from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { TestRun } from "../../types"; import { Tooltip } from "../Tooltip"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "ArrowButtons"; -const useStyles = makeStyles(() => ({ - button: { +const classes = { + button: `${PREFIX}-button`, + icon: `${PREFIX}-icon`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.button}`]: { width: 64, height: 64, padding: 0, @@ -15,7 +22,8 @@ const useStyles = makeStyles(() => ({ top: "50%", zIndex: 4000, }, - icon: { + + [`& .${classes.icon}`]: { width: 64, height: 64, }, @@ -26,8 +34,6 @@ export const ArrowButtons: React.FunctionComponent<{ selectedTestRunIndex: number; handleNavigation: (testRunId: string) => void; }> = ({ testRuns, selectedTestRunIndex, handleNavigation }) => { - const classes = useStyles(); - const navigateNext = () => { if (testRuns.length > selectedTestRunIndex + 1) { const next = testRuns[selectedTestRunIndex + 1]; @@ -46,7 +52,7 @@ export const ArrowButtons: React.FunctionComponent<{ useHotkeys("left", navigateBefore, [selectedTestRunIndex, handleNavigation]); return ( - <> + {testRuns.length > selectedTestRunIndex + 1 && ( )} - + ); }; diff --git a/src/components/TestDetailsDialog/DrawArea.tsx b/src/components/TestDetailsDialog/DrawArea.tsx index fe37c381..42f52970 100644 --- a/src/components/TestDetailsDialog/DrawArea.tsx +++ b/src/components/TestDetailsDialog/DrawArea.tsx @@ -1,26 +1,36 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ import React, { FunctionComponent, useCallback } from "react"; +import { styled } from "@mui/material/styles"; import { Stage, Layer, Image } from "react-konva"; import Rectangle, { MIN_RECT_SIDE_PIXEL } from "../Rectangle"; import { IgnoreArea } from "../../types/ignoreArea"; import { Grid, CircularProgress, type Theme } from "@mui/material"; import { NoImagePlaceholder } from "./NoImageAvailable"; import Konva from "konva"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "DrawArea"; -const useStyles = makeStyles((theme: Theme) => ({ - canvasContainer: { +const classes = { + canvasContainer: `${PREFIX}-canvasContainer`, + imageDetailsContainer: `${PREFIX}-imageDetailsContainer`, + progressContainer: `${PREFIX}-progressContainer`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(({ theme: Theme }) => ({ + [`& .${classes.canvasContainer}`]: { overflow: "auto", backgroundColor: "white", }, - imageDetailsContainer: { + + [`& .${classes.imageDetailsContainer}`]: { position: "absolute", backgroundColor: "white", zIndex: 1, padding: theme.spacing(1), height: "48px", }, - progressContainer: { + + [`& .${classes.progressContainer}`]: { minHeight: "300px", }, })); @@ -72,7 +82,6 @@ export const DrawArea: FunctionComponent = ({ stageScrollPosState, drawModeState, }) => { - const classes = useStyles(); const [stageInitPos, setStageInitPos] = stageInitPosState; const [stageOffset, setStageOffset] = stageOffsetState; const [stagePos, setStagePos] = stagePosState; @@ -339,5 +348,5 @@ export const DrawArea: FunctionComponent = ({ ); // TODO: Separate SVG with reason... - return <>{imageName ? imageCanvas() : }; + return {imageName ? imageCanvas() : }; }; diff --git a/src/components/TestDetailsDialog/ImageDetails.tsx b/src/components/TestDetailsDialog/ImageDetails.tsx index d33be359..879de3b7 100644 --- a/src/components/TestDetailsDialog/ImageDetails.tsx +++ b/src/components/TestDetailsDialog/ImageDetails.tsx @@ -1,17 +1,24 @@ import React from "react"; +import { styled } from "@mui/material/styles"; import { Typography, Grid, IconButton } from "@mui/material"; import { WarningRounded, AltRoute } from "@mui/icons-material"; import { IgnoreArea } from "../../types/ignoreArea"; import { Tooltip } from "../Tooltip"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "ImageDetails"; -const useStyles = makeStyles(() => ({ - container: { +const classes = { + container: `${PREFIX}-container`, + branchName: `${PREFIX}-branchName`, +}; + +const StyledGrid = styled(Grid)(() => ({ + [`&.${classes.container}`]: { display: "flex", alignItems: "center", color: "darkslategrey", }, - branchName: { + + [`& .${classes.branchName}`]: { cursor: "pointer", lineHeight: "20px", fontWeight: "bolder", @@ -39,7 +46,6 @@ const ImageDetails: React.FunctionComponent = ({ branchName, ignoreAreas, }) => { - const classes = useStyles(); const imageSize = () => { return ( imageName && ( @@ -54,7 +60,7 @@ const ImageDetails: React.FunctionComponent = ({ ); }; return ( - + {type === "Baseline" ? "Baseline" : "Checkpoint"} @@ -74,7 +80,7 @@ const ImageDetails: React.FunctionComponent = ({ )} - + ); }; diff --git a/src/components/TestDetailsDialog/NoImageAvailable.tsx b/src/components/TestDetailsDialog/NoImageAvailable.tsx index f74d75bb..de950cd5 100644 --- a/src/components/TestDetailsDialog/NoImageAvailable.tsx +++ b/src/components/TestDetailsDialog/NoImageAvailable.tsx @@ -1,9 +1,14 @@ import React from "react"; +import { styled } from "@mui/material/styles"; import noImage from "../../static/no-image.png"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "NoImagePlaceholder"; -const useStyles = makeStyles(() => ({ - img: { +const classes = { + img: `${PREFIX}-img`, +}; + +const Root = styled("img")(() => ({ + [`&.${classes.img}`]: { display: "block", marginLeft: "auto", marginRight: "auto", @@ -13,7 +18,5 @@ const useStyles = makeStyles(() => ({ // TODO: Use SVG and more specific text to describe reason... export const NoImagePlaceholder: React.FunctionComponent = () => { - const classes = useStyles(); - - return Not available; + return ; }; diff --git a/src/components/TestDetailsDialog/TestDetailsModal.tsx b/src/components/TestDetailsDialog/TestDetailsModal.tsx index 4d6238b0..d2bcdf4c 100644 --- a/src/components/TestDetailsDialog/TestDetailsModal.tsx +++ b/src/components/TestDetailsDialog/TestDetailsModal.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { makeStyles } from "@mui/styles"; +import { styled } from "@mui/material/styles"; import { Typography, Button, @@ -53,45 +53,70 @@ import ImageDetails, { ImageDetailsProps } from "./ImageDetails"; import { calculateScale } from "../../_helpers/scale.helper"; import TestStatusChip from "../TestStatusChip"; -const useStyles = makeStyles(() => ({ - header: { +const PREFIX = "TestDetailsModal"; + +const classes = { + header: `${PREFIX}-header`, + footer: `${PREFIX}-footer`, + scaleActions: `${PREFIX}-scaleActions`, + testRunActions: `${PREFIX}-testRunActions`, + testRunName: `${PREFIX}-testRunName`, + closeIcon: `${PREFIX}-closeIcon`, + testRunDetails: `${PREFIX}-testRunDetails`, + drawAreaContainer: `${PREFIX}-drawAreaContainer`, + drawAreaItem: `${PREFIX}-drawAreaItem`, + imageToolbar: `${PREFIX}-imageToolbar`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.header}`]: { position: "relative", textAlign: "left", background: "#efefef", paddingLeft: 8, paddingBottom: 8, }, - footer: { + + [`& .${classes.footer}`]: { background: "#efefef", }, - scaleActions: { + + [`& .${classes.scaleActions}`]: { display: "flex", alignItems: "center", }, - testRunActions: { + + [`& .${classes.testRunActions}`]: { display: "flex", alignItems: "center", alignContent: "center", }, - testRunName: { + + [`& .${classes.testRunName}`]: { fontWeight: 300, }, - closeIcon: { + + [`& .${classes.closeIcon}`]: { position: "absolute", right: "8px", }, - testRunDetails: { + + [`& .${classes.testRunDetails}`]: { paddingLeft: 8, }, - drawAreaContainer: { + + [`& .${classes.drawAreaContainer}`]: { width: "100%", height: "100%", }, - drawAreaItem: { + + [`& .${classes.drawAreaItem}`]: { padding: "0 4px", height: "100%", }, - imageToolbar: { + + [`& .${classes.imageToolbar}`]: { paddingLeft: 5, height: 52, }, @@ -121,7 +146,6 @@ const TestDetailsModal: React.FunctionComponent = ({ handleNext, handleClose, }) => { - const classes = useStyles(); const { enqueueSnackbar } = useSnackbar(); const testRunDispatch = useTestRunDispatch(); @@ -660,7 +684,7 @@ const TestDetailsModal: React.FunctionComponent = ({ ); return ( - <> + {header()} {processing && } @@ -805,7 +829,7 @@ const TestDetailsModal: React.FunctionComponent = ({ applyIgnoreArea(); }} /> - + ); }; diff --git a/src/components/TestDetailsDialog/index.tsx b/src/components/TestDetailsDialog/index.tsx index 0f58fc6e..d8d76d08 100644 --- a/src/components/TestDetailsDialog/index.tsx +++ b/src/components/TestDetailsDialog/index.tsx @@ -1,4 +1,5 @@ import { Dialog, Typography } from "@mui/material"; +import { styled } from "@mui/material/styles"; import React from "react"; import { useNavigate } from "react-router"; import { useBuildState, useTestRunState } from "../../contexts"; @@ -6,16 +7,19 @@ import { buildTestRunLocation } from "../../_helpers/route.helpers"; import { BaseModal } from "../BaseModal"; import TestDetailsModal from "./TestDetailsModal"; import { TestRun } from "../../types"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "TestDetailsDialog"; -const useStyles = makeStyles(() => ({ - modal: { +const classes = { + modal: `${PREFIX}-modal`, +}; + +const StyledDialog = styled(Dialog)(() => ({ + [`&.${classes.modal}`]: { margin: "20px 10px 10px 10px", }, })); export const TestDetailsDialog: React.FunctionComponent = () => { - const classes = useStyles(); const { selectedTestRun, touched, @@ -72,7 +76,7 @@ export const TestDetailsDialog: React.FunctionComponent = () => { } return ( - + { setNotSavedChangesModal(false); }} /> - + ); }; diff --git a/src/components/TestVariationList.tsx b/src/components/TestVariationList.tsx index 3e9be225..c2a99352 100644 --- a/src/components/TestVariationList.tsx +++ b/src/components/TestVariationList.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { styled } from "@mui/material/styles"; import { TestVariation } from "../types"; import { Card, @@ -16,13 +17,19 @@ import { routes } from "../constants"; import { TestVariationDetails } from "./TestVariationDetails"; import { Delete } from "@mui/icons-material"; import { BaseModal } from "./BaseModal"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "TestVariationList"; -const useStyles = makeStyles({ - card: { +const classes = { + card: `${PREFIX}-card`, + media: `${PREFIX}-media`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")({ + [`& .${classes.card}`]: { maxWidth: 345, }, - media: { + [`& .${classes.media}`]: { height: 140, objectFit: "contain", }, @@ -37,7 +44,6 @@ const TestVariationList: React.FunctionComponent = ({ items, onDeleteClick, }) => { - const classes = useStyles(); const [selectedItem, setSelectedItem] = React.useState( null, ); @@ -47,7 +53,7 @@ const TestVariationList: React.FunctionComponent = ({ }; return ( - <> + {items.length === 0 && ( No variations @@ -80,7 +86,6 @@ const TestVariationList: React.FunctionComponent = ({ ))} - {selectedItem && ( = ({ }} /> )} - + ); }; diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx index b13e9260..5a2b946f 100644 --- a/src/pages/ProjectPage.tsx +++ b/src/pages/ProjectPage.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { makeStyles } from "@mui/styles"; +import { styled } from "@mui/material/styles"; import { Grid, Box } from "@mui/material"; import { useParams, useNavigate } from "react-router-dom"; import BuildList from "../components/BuildList"; @@ -16,14 +16,20 @@ import { } from "../constants"; import { buildProjectPageUrl } from "../_helpers/route.helpers"; -const useStyles = makeStyles(() => ({ - root: { +const PREFIX = "ProjectPage"; + +const classes = { + root: `${PREFIX}-root`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.root}`]: { height: "100%", }, })); const ProjectPage = () => { - const classes = useStyles(); const { projectId } = useParams<{ projectId: string }>(); const navigate = useNavigate(); const helpDispatch = useHelpDispatch(); @@ -33,7 +39,7 @@ const ProjectPage = () => { }); return ( - <> + @@ -56,7 +62,7 @@ const ProjectPage = () => { - + ); }; diff --git a/src/pages/TestVariationDetailsPage.tsx b/src/pages/TestVariationDetailsPage.tsx index dabf3bec..49ce033a 100644 --- a/src/pages/TestVariationDetailsPage.tsx +++ b/src/pages/TestVariationDetailsPage.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { styled } from "@mui/material/styles"; import { useParams, useNavigate } from "react-router-dom"; import { TestVariation } from "../types"; import { testVariationService, staticService } from "../services"; @@ -21,17 +22,20 @@ import { useSnackbar } from "notistack"; import { formatDateTime } from "../_helpers/format.helper"; import TestStatusChip from "../components/TestStatusChip"; import { Baseline } from "../types/baseline"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "TestVariationDetailsPage"; -const useStyles = makeStyles({ - media: { +const classes = { + media: `${PREFIX}-media`, +}; + +const StyledContainer = styled(Container)({ + [`& .${classes.media}`]: { height: 600, objectFit: "contain", }, }); const TestVariationDetailsPage: React.FunctionComponent = () => { - const classes = useStyles(); const navigate = useNavigate(); const { enqueueSnackbar } = useSnackbar(); const { testVariationId } = useParams<{ testVariationId: string }>(); @@ -53,7 +57,7 @@ const TestVariationDetailsPage: React.FunctionComponent = () => { }, [testVariationId, enqueueSnackbar]); return ( - + {testVariation && ( @@ -109,7 +113,7 @@ const TestVariationDetailsPage: React.FunctionComponent = () => { )} - + ); }; From c8fd9c1ae5417f917e86cef5dc6eebff5ca2b17b Mon Sep 17 00:00:00 2001 From: Juga Paazmaya Date: Tue, 29 Aug 2023 11:13:46 +0300 Subject: [PATCH 2/2] Reduce the use of styles as sx is available for simple ones --- package.json | 1 - src/components/ProjectSelect.tsx | 28 ++++------------------------ 2 files changed, 4 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index cdf442d5..307724b4 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "@fontsource/roboto": "^5.0.5", "@mui/icons-material": "^5.14.0", "@mui/material": "^5.14.0", - "@mui/styles": "^5.14.4", "@mui/x-data-grid": "^6.10.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", diff --git a/src/components/ProjectSelect.tsx b/src/components/ProjectSelect.tsx index 9cb6101a..7389f573 100644 --- a/src/components/ProjectSelect.tsx +++ b/src/components/ProjectSelect.tsx @@ -1,11 +1,9 @@ import React, { FunctionComponent } from "react"; -import { styled } from "@mui/material/styles"; import { FormControl, InputLabel, MenuItem, Select, - type Theme, type SelectChangeEvent, } from "@mui/material"; import { @@ -14,24 +12,6 @@ import { selectProject, } from "../contexts"; -const PREFIX = "ProjectSelect"; - -const classes = { - formControl: `${PREFIX}-formControl`, - input: `${PREFIX}-input`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(({ theme: Theme }) => ({ - [`& .${classes.formControl}`]: { - width: "100%", - }, - - [`& .${classes.input}`]: { - margin: theme.spacing(1), - }, -})); - const ProjectSelect: FunctionComponent<{ projectId?: string; onProjectSelect: (id: string) => void; @@ -46,9 +26,9 @@ const ProjectSelect: FunctionComponent<{ }, [projectId, selectedProjectId, projectDispatch]); return ( - + <> {projectList.length > 0 && ( - + Project @@ -56,8 +36,8 @@ const ProjectSelect: FunctionComponent<{ variant="standard" id="project-select" labelId="projectSelect" - className={classes.input} displayEmpty + sx={{m: "16px"}} value={selectedProjectId ?? ""} onChange={(event: SelectChangeEvent) => onProjectSelect(event.target.value as string) @@ -74,7 +54,7 @@ const ProjectSelect: FunctionComponent<{ )} - + ); };