feat: moved from Joy to MUI

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 (
-    <CssVarsProvider theme={lightTheme}>
+    <ThemeProvider theme={lightTheme}>
       <QueryClientProvider client={queryClient}>
         <SuperFormProvider>
           <div>
@@ -157,6 +157,6 @@ export default function App() {
         </SuperFormProvider>
         <ReactQueryDevtools initialIsOpen={true} />
       </QueryClientProvider>
-    </CssVarsProvider>
+    </ThemeProvider>
   );
 }

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) => {
             </StyledScrollView>
 
             <Actions>
-              <Button onClick={reportErrorsAndSubmit(formik)}>Save</Button>
+              <SaveButton
+                variant="contained"
+                disableElevation={true}
+                disableRipple={true}
+                size="small"
+                onClick={reportErrorsAndSubmit(formik)}
+              >
+                Save
+              </SaveButton>
             </Actions>
           </>
         )}

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";
 

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";
 

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;

services/frontend/src/components/Record.tsx

@@ -5,8 +5,7 @@ import {
   useCallback,
   useMemo
 } from "react";
-import { styled } from "@mui/joy";
+import { IconButton, styled } from "@mui/material";
-import IconButton from "@mui/joy/IconButton";
 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<IRecordProps> = (
       )}
       {renderRemoveWrapper(
         <div className="flex justify-end content-end">
-          <RemoveButton
+          <RemoveButton size="small" color="warning" onClick={handleRemove}>
-            variant="soft"
-            size="sm"
-            color="danger"
-            onClick={handleRemove}
-          >
             <MinusSmIcon className="h-5 w-5" />
           </RemoveButton>
         </div>

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<IRecordsProps> = (
       <Top onClick={toggle}>
         {title && <GroupTitle>{title}</GroupTitle>}
         {collapsible && (
-          <ExpandButton size="sm" variant="plain">
+          <ExpandButton size="small">
             {open && <ChevronUpIcon className="h-5 w-5" />}
             {!open && <ChevronDownIcon className="h-5 w-5" />}
           </ExpandButton>
@@ -171,7 +170,7 @@ const Records: FunctionComponent<IRecordsProps> = (
       )}
 
       {(!collapsible || open) && (
-        <AddButton size="sm" variant="soft" onClick={handleNew}>
+        <AddButton size="small" onClick={handleNew}>
           <PlusIcon className="h-4 w-4" />
         </AddButton>
       )}

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<HTMLDivElement> {
   children: ReactNode;

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";
 

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 {

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 {

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";
 

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)<IToggleButtonProps>(({ 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<IToggleProps> = (
         {options.map((option, index) => (
           <Fragment key={option.value}>
             <ToggleButton
-              variant={value === option.value ? "solid" : "soft"}
+              variant={value === option.value ? "contained" : "outlined"}
-              size="sm"
+              size="small"
               color="primary"
               index={index}
               total={options.length}
               onClick={handleChange(option.value)}
+              disableElevation={true}
+              disableRipple={true}
             >
               {option.text}
             </ToggleButton>

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<ICreateNetworkModalProps> = (
   props: ICreateNetworkModalProps
 ): ReactElement => {
@@ -50,13 +54,15 @@ const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
           </ScrollView>
 
           <Actions>
-            <Button
+            <CreateButton
-              size="sm"
+              size="small"
-              variant="solid"
+              variant="contained"
+              disableElevation={true}
+              disableRipple={true}
               onClick={reportErrorsAndSubmit(formik)}
             >
               Create
-            </Button>
+            </CreateButton>
           </Actions>
         </>
       )}

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) => {
           </ScrollView>
 
           <Actions>
-            <Button
+            <SaveButton
-              size="sm"
+              size="small"
-              variant="solid"
+              variant="contained"
               onClick={reportErrorsAndSubmit(formik)}
+              disableElevation={true}
+              disableRipple={true}
             >
               Save
-            </Button>
+            </SaveButton>
           </Actions>
         </>
       )}

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<IEmptyNetworksProps> = (
     <Root>
       <Description>No top-level networks available</Description>
 
-      <AddButton size="sm" variant="plain" onClick={onCreate}>
+      <AddButton
+        size="small"
+        variant="text"
+        onClick={onCreate}
+        disableElevation={true}
+        disableRipple={true}
+      >
         <PlusIcon className="h-4 w-4 mr-2" />
         New network
       </AddButton>

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";
 

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";
 

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, Button, styled } from "@mui/material";
-import IconButton from "@mui/joy/IconButton";
 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<INetworkListProps> = (
   props: INetworkListProps
 ): ReactElement => {
@@ -83,9 +86,8 @@ const NetworkList: FunctionComponent<INetworkListProps> = (
               {truncateStr(networks[networkUuid].canvasConfig.node_name, 10)}
             </ListItemText>
             <RemoveButton
-              variant="soft"
+              size="small"
-              size="sm"
+              color="warning"
-              color="danger"
               onClick={(e: any) => handleRemove(e, networkUuid)}
             >
               <MinusSmIcon className="h-4 w-4" />
@@ -95,10 +97,16 @@ const NetworkList: FunctionComponent<INetworkListProps> = (
       </Top>
 
       <Bottom>
-        <Button variant="plain" size="sm" onClick={onNew}>
+        <NewButton
+          variant="text"
+          size="small"
+          onClick={onNew}
+          disableElevation={true}
+          disableRipple={true}
+        >
           <PlusIcon className="h-4 w-4 mr-2" />
           New network
-        </Button>
+        </NewButton>
       </Bottom>
     </Root>
   );

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";

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, styled } from "@mui/material";
-import IconButton from "@mui/joy/IconButton";
 import { FunctionComponent, ReactElement, ReactNode } from "react";
 import { useAccordionState } from "../../../../hooks";
 
@@ -57,7 +56,7 @@ const Accordion: FunctionComponent<IAccordionProps> = (
     <Root>
       <Top onClick={toggle}>
         <Title>{title}</Title>
-        <ExpandButton size="sm" variant="plain">
+        <ExpandButton size="small">
           {open && <ChevronUpIcon className="h-5 w-5" />}
           {!open && <ChevronDownIcon className="h-5 w-5" />}
         </ExpandButton>

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";
 

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")`

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";

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")`

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";
 

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";
 

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";

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 ".";
 

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({
+export const lightTheme = createTheme({
-  colorSchemes: {
-    light: {
   palette: {
     primary: {
-          mainChannel: "#4f46e5"
+      main: "#4f46e5"
-        }
-      }
     }
   }
 });