From 43014635f689b325ff3868ccc3f872ebcccce396 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Wed, 7 Sep 2022 16:25:21 +0530 Subject: [PATCH] feat: moved from Joy to MUI --- services/frontend/src/App.tsx | 6 ++--- .../frontend/src/components/FormModal.tsx | 16 ++++++++++++-- .../frontend/src/components/GridColumn.tsx | 2 +- services/frontend/src/components/GridRow.tsx | 2 +- services/frontend/src/components/Modal.tsx | 2 +- services/frontend/src/components/Record.tsx | 10 ++------- services/frontend/src/components/Records.tsx | 7 +++--- .../frontend/src/components/ScrollView.tsx | 2 +- .../frontend/src/components/SuperForm.tsx | 2 +- services/frontend/src/components/Tab.tsx | 2 +- services/frontend/src/components/Tabs.tsx | 2 +- .../global/FormElements/TextField.tsx | 2 +- .../components/global/FormElements/Toggle.tsx | 11 ++++++---- .../network/CreateNetworkModal.tsx | 16 +++++++++----- .../network/EditNetworkModal.tsx | 16 +++++++++----- .../docker-compose/network/EmptyNetworks.tsx | 11 ++++++++-- .../modals/docker-compose/network/General.tsx | 2 +- .../modals/docker-compose/network/IPAM.tsx | 2 +- .../docker-compose/network/NetworkList.tsx | 22 +++++++++++++------ .../modals/docker-compose/network/index.tsx | 2 +- .../docker-compose/service/Accordion.tsx | 5 ++--- .../modals/docker-compose/service/Build.tsx | 2 +- .../modals/docker-compose/service/Data.tsx | 2 +- .../modals/docker-compose/service/Deploy.tsx | 2 +- .../docker-compose/service/Environment.tsx | 2 +- .../modals/docker-compose/service/General.tsx | 2 +- .../modals/docker-compose/volume/General.tsx | 2 +- .../src/components/modals/import/index.tsx | 2 +- services/frontend/src/utils/forms.tsx | 2 +- services/frontend/src/utils/theme.tsx | 14 +++++------- 30 files changed, 101 insertions(+), 71 deletions(-) diff --git a/services/frontend/src/App.tsx b/services/frontend/src/App.tsx index b7e04ea..ee07d14 100644 --- a/services/frontend/src/App.tsx +++ b/services/frontend/src/App.tsx @@ -3,7 +3,6 @@ import { Routes, Route, useNavigate } from "react-router-dom"; import { Toaster } from "react-hot-toast"; import { QueryClient, QueryClientProvider } from "react-query"; import { ReactQueryDevtools } from "react-query/devtools"; -import { CssVarsProvider } from "@mui/joy/styles"; import { LOCAL_STORAGE } from "./constants"; import { reducer, initialState } from "./reducers"; @@ -26,6 +25,7 @@ import ProtectedRoute from "./partials/ProtectedRoute"; import "./index.css"; import { lightTheme } from "./utils/theme"; import { SuperFormProvider } from "./components/SuperFormProvider"; +import { ThemeProvider } from "@mui/material"; const queryClient = new QueryClient(); @@ -99,7 +99,7 @@ export default function App() { }, []); return ( - +
@@ -157,6 +157,6 @@ export default function App() { - + ); } diff --git a/services/frontend/src/components/FormModal.tsx b/services/frontend/src/components/FormModal.tsx index 906cfc2..7e8c8c3 100644 --- a/services/frontend/src/components/FormModal.tsx +++ b/services/frontend/src/components/FormModal.tsx @@ -6,7 +6,7 @@ import { useState } from "react"; import { Formik } from "formik"; -import { Button, styled } from "@mui/joy"; +import { Button, styled } from "@mui/material"; import { reportErrorsAndSubmit } from "../utils/forms"; import { ScrollView } from "./ScrollView"; @@ -54,6 +54,10 @@ const Actions = styled("div")` border-style: solid; `; +const SaveButton = styled(Button)` + text-transform: none; +`; + const FormModal = (props: IFormModalProps) => { const { title, @@ -110,7 +114,15 @@ const FormModal = (props: IFormModalProps) => { - + + Save + )} diff --git a/services/frontend/src/components/GridColumn.tsx b/services/frontend/src/components/GridColumn.tsx index 9e2719a..7eb44e7 100644 --- a/services/frontend/src/components/GridColumn.tsx +++ b/services/frontend/src/components/GridColumn.tsx @@ -1,5 +1,5 @@ import { FunctionComponent, ReactElement } from "react"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import { useSuperForm } from "../hooks"; import { IFormField } from "../types"; diff --git a/services/frontend/src/components/GridRow.tsx b/services/frontend/src/components/GridRow.tsx index df7bdfa..fb8efae 100644 --- a/services/frontend/src/components/GridRow.tsx +++ b/services/frontend/src/components/GridRow.tsx @@ -1,5 +1,5 @@ import { FunctionComponent, ReactElement, ReactNode } from "react"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import { useSuperForm } from "../hooks"; import { IFormField } from "../types"; diff --git a/services/frontend/src/components/Modal.tsx b/services/frontend/src/components/Modal.tsx index b685220..9b5fddf 100644 --- a/services/frontend/src/components/Modal.tsx +++ b/services/frontend/src/components/Modal.tsx @@ -1,6 +1,6 @@ import { FunctionComponent, ReactElement, ReactNode } from "react"; import { XIcon } from "@heroicons/react/outline"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; export interface IModalProps { title: string; diff --git a/services/frontend/src/components/Record.tsx b/services/frontend/src/components/Record.tsx index 659e1f6..751d59c 100644 --- a/services/frontend/src/components/Record.tsx +++ b/services/frontend/src/components/Record.tsx @@ -5,8 +5,7 @@ import { useCallback, useMemo } from "react"; -import { styled } from "@mui/joy"; -import IconButton from "@mui/joy/IconButton"; +import { IconButton, styled } from "@mui/material"; import { MinusSmIcon } from "@heroicons/react/solid"; import TextField from "./global/FormElements/TextField"; import Toggle from "./global/FormElements/Toggle"; @@ -119,12 +118,7 @@ const Record: FunctionComponent = ( )} {renderRemoveWrapper(
- +
diff --git a/services/frontend/src/components/Records.tsx b/services/frontend/src/components/Records.tsx index 76e3d27..ba3bd06 100644 --- a/services/frontend/src/components/Records.tsx +++ b/services/frontend/src/components/Records.tsx @@ -1,5 +1,5 @@ import { Fragment, FunctionComponent, ReactElement, useCallback } from "react"; -import { styled } from "@mui/joy"; +import { IconButton, styled } from "@mui/material"; import { ChevronDownIcon, ChevronUpIcon, @@ -8,7 +8,6 @@ import { import Record, { IFieldType } from "./Record"; import { useFormikContext } from "formik"; import lodash from "lodash"; -import IconButton from "@mui/joy/IconButton"; import { useAccordionState } from "../hooks"; import { useParams } from "react-router-dom"; @@ -142,7 +141,7 @@ const Records: FunctionComponent = ( {title && {title}} {collapsible && ( - + {open && } {!open && } @@ -171,7 +170,7 @@ const Records: FunctionComponent = ( )} {(!collapsible || open) && ( - + )} diff --git a/services/frontend/src/components/ScrollView.tsx b/services/frontend/src/components/ScrollView.tsx index 10cd0a6..bc4a955 100644 --- a/services/frontend/src/components/ScrollView.tsx +++ b/services/frontend/src/components/ScrollView.tsx @@ -1,5 +1,5 @@ import { FunctionComponent, HTMLProps, ReactElement, ReactNode } from "react"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; export interface IScrollViewProps extends HTMLProps { children: ReactNode; diff --git a/services/frontend/src/components/SuperForm.tsx b/services/frontend/src/components/SuperForm.tsx index 2451181..500ef16 100644 --- a/services/frontend/src/components/SuperForm.tsx +++ b/services/frontend/src/components/SuperForm.tsx @@ -1,5 +1,5 @@ import { FunctionComponent, ReactElement } from "react"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import { useSuperForm } from "../hooks"; import { IFormField, TFinalFormField } from "../types"; diff --git a/services/frontend/src/components/Tab.tsx b/services/frontend/src/components/Tab.tsx index fb990da..16d9c7f 100644 --- a/services/frontend/src/components/Tab.tsx +++ b/services/frontend/src/components/Tab.tsx @@ -1,5 +1,5 @@ import { useCallback } from "react"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import { useTabContext } from "../hooks"; export interface ITabProps { diff --git a/services/frontend/src/components/Tabs.tsx b/services/frontend/src/components/Tabs.tsx index 5eed12d..9776c29 100644 --- a/services/frontend/src/components/Tabs.tsx +++ b/services/frontend/src/components/Tabs.tsx @@ -1,5 +1,5 @@ import { FunctionComponent, ReactElement, ReactNode } from "react"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import { TabContext } from "../contexts"; export interface ITabsProps { diff --git a/services/frontend/src/components/global/FormElements/TextField.tsx b/services/frontend/src/components/global/FormElements/TextField.tsx index b2e5e5f..1eb6dce 100644 --- a/services/frontend/src/components/global/FormElements/TextField.tsx +++ b/services/frontend/src/components/global/FormElements/TextField.tsx @@ -1,5 +1,5 @@ import { FunctionComponent, ReactElement } from "react"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import lodash from "lodash"; import { useFormikContext } from "formik"; diff --git a/services/frontend/src/components/global/FormElements/Toggle.tsx b/services/frontend/src/components/global/FormElements/Toggle.tsx index 6a4d07c..3f03952 100644 --- a/services/frontend/src/components/global/FormElements/Toggle.tsx +++ b/services/frontend/src/components/global/FormElements/Toggle.tsx @@ -1,7 +1,7 @@ import lodash from "lodash"; import { useFormikContext } from "formik"; import { Fragment, FunctionComponent, ReactElement } from "react"; -import { Button, styled } from "@mui/joy"; +import { Button, styled } from "@mui/material"; export interface IToggleProps { name: string; @@ -49,7 +49,8 @@ const ToggleButton = styled(Button)(({ index, total }) => ({ ${index === total - 1 ? "8px" : "0px"} ${index === 0 ? "8px" : "0px"} `, - fontSize: 11 + fontSize: 11, + textTransform: "none" })); const ButtonBorder = styled("div")` @@ -74,12 +75,14 @@ const Toggle: FunctionComponent = ( {options.map((option, index) => ( {option.text} diff --git a/services/frontend/src/components/modals/docker-compose/network/CreateNetworkModal.tsx b/services/frontend/src/components/modals/docker-compose/network/CreateNetworkModal.tsx index f04affd..c795412 100644 --- a/services/frontend/src/components/modals/docker-compose/network/CreateNetworkModal.tsx +++ b/services/frontend/src/components/modals/docker-compose/network/CreateNetworkModal.tsx @@ -1,6 +1,6 @@ import { FunctionComponent, ReactElement, useMemo, useState } from "react"; import { Formik } from "formik"; -import { Button, styled } from "@mui/joy"; +import { Button, styled } from "@mui/material"; import General from "./General"; import IPAM from "./IPAM"; import { CallbackFunction } from "../../../../types"; @@ -22,6 +22,10 @@ const Actions = styled("div")` padding: ${({ theme }) => theme.spacing(1)}; `; +const CreateButton = styled(Button)` + text-transform: none; +`; + const CreateNetworkModal: FunctionComponent = ( props: ICreateNetworkModalProps ): ReactElement => { @@ -50,13 +54,15 @@ const CreateNetworkModal: FunctionComponent = ( - + )} diff --git a/services/frontend/src/components/modals/docker-compose/network/EditNetworkModal.tsx b/services/frontend/src/components/modals/docker-compose/network/EditNetworkModal.tsx index 2c64dcd..2ad8312 100644 --- a/services/frontend/src/components/modals/docker-compose/network/EditNetworkModal.tsx +++ b/services/frontend/src/components/modals/docker-compose/network/EditNetworkModal.tsx @@ -1,6 +1,6 @@ import { useMemo, useState } from "react"; import { Formik } from "formik"; -import { Button, styled } from "@mui/joy"; +import { Button, styled } from "@mui/material"; import General from "./General"; import IPAM from "./IPAM"; import { CallbackFunction } from "../../../../types"; @@ -23,6 +23,10 @@ const Actions = styled("div")` padding: ${({ theme }) => theme.spacing(1)}; `; +const SaveButton = styled(Button)` + text-transform: none; +`; + const EditNetworkModal = (props: IEditNetworkModalProps) => { const { onUpdateNetwork, network } = props; const [openTab, setOpenTab] = useState("General"); @@ -52,13 +56,15 @@ const EditNetworkModal = (props: IEditNetworkModalProps) => { - + )} diff --git a/services/frontend/src/components/modals/docker-compose/network/EmptyNetworks.tsx b/services/frontend/src/components/modals/docker-compose/network/EmptyNetworks.tsx index 60965c2..e1a6dd2 100644 --- a/services/frontend/src/components/modals/docker-compose/network/EmptyNetworks.tsx +++ b/services/frontend/src/components/modals/docker-compose/network/EmptyNetworks.tsx @@ -1,5 +1,5 @@ import { FunctionComponent, ReactElement } from "react"; -import { Button, styled } from "@mui/joy"; +import { Button, styled } from "@mui/material"; import { PlusIcon } from "@heroicons/react/outline"; const Root = styled("div")` @@ -13,6 +13,7 @@ const Root = styled("div")` const AddButton = styled(Button)` margin-top: ${({ theme }) => theme.spacing(1)}; + text-transform: none; `; const Description = styled("p")` @@ -34,7 +35,13 @@ const EmptyNetworks: FunctionComponent = ( No top-level networks available - + New network diff --git a/services/frontend/src/components/modals/docker-compose/network/General.tsx b/services/frontend/src/components/modals/docker-compose/network/General.tsx index 7cbb223..952aea7 100644 --- a/services/frontend/src/components/modals/docker-compose/network/General.tsx +++ b/services/frontend/src/components/modals/docker-compose/network/General.tsx @@ -1,4 +1,4 @@ -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import TextField from "../../../global/FormElements/TextField"; import Records from "../../../Records"; diff --git a/services/frontend/src/components/modals/docker-compose/network/IPAM.tsx b/services/frontend/src/components/modals/docker-compose/network/IPAM.tsx index 1290a4c..3e40ef6 100644 --- a/services/frontend/src/components/modals/docker-compose/network/IPAM.tsx +++ b/services/frontend/src/components/modals/docker-compose/network/IPAM.tsx @@ -1,5 +1,5 @@ import { FunctionComponent, ReactElement } from "react"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import TextField from "../../../global/FormElements/TextField"; import Records from "../../../Records"; diff --git a/services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx b/services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx index dcb928d..1503438 100644 --- a/services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx +++ b/services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx @@ -1,6 +1,5 @@ import { MinusSmIcon, PlusIcon } from "@heroicons/react/outline"; -import { Button, styled } from "@mui/joy"; -import IconButton from "@mui/joy/IconButton"; +import { IconButton, Button, styled } from "@mui/material"; import { FunctionComponent, ReactElement } from "react"; import { truncateStr } from "../../../../utils"; @@ -58,6 +57,10 @@ const RemoveButton = styled(IconButton)` max-height: 16px; `; +const NewButton = styled(Button)` + text-transform: none; +`; + const NetworkList: FunctionComponent = ( props: INetworkListProps ): ReactElement => { @@ -83,9 +86,8 @@ const NetworkList: FunctionComponent = ( {truncateStr(networks[networkUuid].canvasConfig.node_name, 10)} handleRemove(e, networkUuid)} > @@ -95,10 +97,16 @@ const NetworkList: FunctionComponent = ( - + ); diff --git a/services/frontend/src/components/modals/docker-compose/network/index.tsx b/services/frontend/src/components/modals/docker-compose/network/index.tsx index eaa73b5..f9b620e 100644 --- a/services/frontend/src/components/modals/docker-compose/network/index.tsx +++ b/services/frontend/src/components/modals/docker-compose/network/index.tsx @@ -1,5 +1,5 @@ import { useCallback, useState } from "react"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import CreateNetworkModal from "./CreateNetworkModal"; import { CallbackFunction, IEditNetworkForm } from "../../../../types"; import EditNetworkModal from "./EditNetworkModal"; diff --git a/services/frontend/src/components/modals/docker-compose/service/Accordion.tsx b/services/frontend/src/components/modals/docker-compose/service/Accordion.tsx index 62eb2b6..b950c2a 100644 --- a/services/frontend/src/components/modals/docker-compose/service/Accordion.tsx +++ b/services/frontend/src/components/modals/docker-compose/service/Accordion.tsx @@ -1,6 +1,5 @@ import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/outline"; -import { styled } from "@mui/joy"; -import IconButton from "@mui/joy/IconButton"; +import { IconButton, styled } from "@mui/material"; import { FunctionComponent, ReactElement, ReactNode } from "react"; import { useAccordionState } from "../../../../hooks"; @@ -57,7 +56,7 @@ const Accordion: FunctionComponent = ( {title} - + {open && } {!open && } diff --git a/services/frontend/src/components/modals/docker-compose/service/Build.tsx b/services/frontend/src/components/modals/docker-compose/service/Build.tsx index b1a313d..e4964fc 100644 --- a/services/frontend/src/components/modals/docker-compose/service/Build.tsx +++ b/services/frontend/src/components/modals/docker-compose/service/Build.tsx @@ -1,4 +1,4 @@ -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import TextField from "../../../global/FormElements/TextField"; import Records from "../../../Records"; diff --git a/services/frontend/src/components/modals/docker-compose/service/Data.tsx b/services/frontend/src/components/modals/docker-compose/service/Data.tsx index a4b1b5c..ed2f336 100644 --- a/services/frontend/src/components/modals/docker-compose/service/Data.tsx +++ b/services/frontend/src/components/modals/docker-compose/service/Data.tsx @@ -1,4 +1,4 @@ -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import Records from "../../../Records"; const Root = styled("div")` diff --git a/services/frontend/src/components/modals/docker-compose/service/Deploy.tsx b/services/frontend/src/components/modals/docker-compose/service/Deploy.tsx index 4da10e6..0dc4079 100644 --- a/services/frontend/src/components/modals/docker-compose/service/Deploy.tsx +++ b/services/frontend/src/components/modals/docker-compose/service/Deploy.tsx @@ -1,4 +1,4 @@ -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import { useParams } from "react-router-dom"; import TextField from "../../../global/FormElements/TextField"; import Toggle from "../../../global/FormElements/Toggle"; diff --git a/services/frontend/src/components/modals/docker-compose/service/Environment.tsx b/services/frontend/src/components/modals/docker-compose/service/Environment.tsx index 5a8b883..dc0d171 100644 --- a/services/frontend/src/components/modals/docker-compose/service/Environment.tsx +++ b/services/frontend/src/components/modals/docker-compose/service/Environment.tsx @@ -1,4 +1,4 @@ -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import Records from "../../../Records"; const Root = styled("div")` diff --git a/services/frontend/src/components/modals/docker-compose/service/General.tsx b/services/frontend/src/components/modals/docker-compose/service/General.tsx index 020a2c0..4ef0381 100644 --- a/services/frontend/src/components/modals/docker-compose/service/General.tsx +++ b/services/frontend/src/components/modals/docker-compose/service/General.tsx @@ -1,4 +1,4 @@ -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import { TFinalFormField } from "../../../../types"; import { SuperForm } from "../../../SuperForm"; diff --git a/services/frontend/src/components/modals/docker-compose/volume/General.tsx b/services/frontend/src/components/modals/docker-compose/volume/General.tsx index b789143..39a5488 100644 --- a/services/frontend/src/components/modals/docker-compose/volume/General.tsx +++ b/services/frontend/src/components/modals/docker-compose/volume/General.tsx @@ -1,4 +1,4 @@ -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import TextField from "../../../global/FormElements/TextField"; import Records from "../../../Records"; diff --git a/services/frontend/src/components/modals/import/index.tsx b/services/frontend/src/components/modals/import/index.tsx index 416bcea..75d1f7a 100644 --- a/services/frontend/src/components/modals/import/index.tsx +++ b/services/frontend/src/components/modals/import/index.tsx @@ -1,6 +1,6 @@ import { useCallback, useMemo } from "react"; import { Formik } from "formik"; -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import { XIcon } from "@heroicons/react/outline"; import { CallbackFunction } from "../../../types"; import { IImportForm } from "./form-utils"; diff --git a/services/frontend/src/utils/forms.tsx b/services/frontend/src/utils/forms.tsx index 6728ac1..bf1baa5 100644 --- a/services/frontend/src/utils/forms.tsx +++ b/services/frontend/src/utils/forms.tsx @@ -1,4 +1,4 @@ -import { styled } from "@mui/joy"; +import { styled } from "@mui/material"; import lodash from "lodash"; import { toaster } from "."; diff --git a/services/frontend/src/utils/theme.tsx b/services/frontend/src/utils/theme.tsx index 00bd10f..dc6969b 100644 --- a/services/frontend/src/utils/theme.tsx +++ b/services/frontend/src/utils/theme.tsx @@ -1,13 +1,9 @@ -import { extendTheme } from "@mui/joy/styles"; +import { createTheme } from "@mui/material"; -export const lightTheme = extendTheme({ - colorSchemes: { - light: { - palette: { - primary: { - mainChannel: "#4f46e5" - } - } +export const lightTheme = createTheme({ + palette: { + primary: { + main: "#4f46e5" } } });