From 9f9fdca8fab4e1a26b4fb0ab8277c3024e130975 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Tue, 6 Feb 2024 10:46:58 +0100
Subject: [PATCH] save

---
 .../CommandListItem/style.ts                  |   2 +-
 .../HomeView/InformationView/Notes/utils.ts   |   2 +-
 .../App/Singlestudy/NavHeader/Actions.tsx     |  13 +-
 .../App/Singlestudy/NavHeader/index.tsx       |   2 +-
 .../App/Singlestudy/UpgradeDialog.tsx         |   1 -
 .../explore/Configuration/General/Fields.tsx  |  10 +-
 .../AddConstraintTermForm/index.tsx           |   2 -
 .../BindingConstView/ConstraintTerm/index.tsx |   2 -
 .../BindingConstView/constraintviews/style.ts |   2 +-
 .../Modelization/Map/Areas/AreaConfig.tsx     |   1 -
 .../Districts/UpdateDistrictDialog.tsx        |   1 -
 .../MapConfig/Layers/UpdateLayerDialog.tsx    |   1 -
 .../Xpansion/Candidates/CandidateForm.tsx     |   6 -
 .../Xpansion/Settings/SettingsForm.tsx        |  10 +-
 .../ExportModal/ExportFilter/Filter/index.tsx |   2 -
 .../ExportFilter/TagSelect/index.tsx          |   1 -
 .../components/App/Studies/FilterDrawer.tsx   |   2 +-
 .../components/App/Studies/HeaderBottom.tsx   |   6 -
 .../components/App/Studies/LauncherDialog.tsx |   4 -
 webapp/src/components/App/Studies/SideNav.tsx |   2 +-
 .../App/Studies/StudiesList/index.tsx         |   6 +-
 .../src/components/App/Studies/StudyCard.tsx  |   1 -
 webapp/src/components/App/Tasks/index.tsx     |   2 -
 webapp/src/components/App/index.tsx           |  24 +-
 webapp/src/components/App/theme.ts            | 244 +++++++++++++++++
 .../components/common/FormGenerator/index.tsx |   4 -
 webapp/src/components/common/Handsontable.tsx |   2 +-
 webapp/src/components/common/SelectMulti.tsx  |   1 -
 .../common/fieldEditors/CheckboxesTagsFE.tsx  |   5 +-
 .../src/components/wrappers/LoginWrapper.tsx  |   2 -
 .../components/wrappers/MenuWrapper/index.tsx |  10 +-
 .../components/wrappers/MenuWrapper/styles.ts |   4 +-
 webapp/src/theme.ts                           | 247 ------------------
 33 files changed, 282 insertions(+), 342 deletions(-)
 create mode 100644 webapp/src/components/App/theme.ts
 delete mode 100644 webapp/src/theme.ts

diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts
index 55b979cdfc..9e21b56b7c 100644
--- a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts
+++ b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts
@@ -1,6 +1,6 @@
 import { Accordion, Box, styled } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/HighlightOff";
-import { PAPER_BACKGROUND_NO_TRANSPARENCY } from "../../../../../../../theme";
+import { PAPER_BACKGROUND_NO_TRANSPARENCY } from "../../../../../theme";
 
 export const ItemContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== "onTopVisible",
diff --git a/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts b/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts
index 91ca0f7b57..471e22f654 100644
--- a/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts
+++ b/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts
@@ -4,7 +4,7 @@ import { ContentState, convertToRaw, EditorState } from "draft-js";
 import draftToHtml from "draftjs-to-html";
 import { convertFromHTML } from "draft-convert";
 import { Element as XMLElement, js2xml, xml2json } from "xml-js";
-import theme from "../../../../../../theme";
+import theme from "../../../../theme";
 
 interface BlockMap {
   from: string;
diff --git a/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx b/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx
index b922b7589c..814d476ab8 100644
--- a/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx
+++ b/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx
@@ -124,18 +124,11 @@ function Actions({
         />
       </Tooltip>
       {isManaged ? (
-        <Chip
-          label={t("study.managedStudy")}
-          variant="filled"
-          color="info"
-          size="small"
-        />
+        <Chip label={t("study.managedStudy")} color="info" size="small" />
       ) : (
-        <Chip label={study.workspace} variant="filled" size="small" />
+        <Chip label={study.workspace} size="small" />
       )}
-      {study.tags?.map((tag) => (
-        <Chip key={tag} label={tag} variant="filled" size="small" />
-      ))}
+      {study.tags?.map((tag) => <Chip key={tag} label={tag} size="small" />)}
       {isExplorer && (
         <Button
           size="small"
diff --git a/webapp/src/components/App/Singlestudy/NavHeader/index.tsx b/webapp/src/components/App/Singlestudy/NavHeader/index.tsx
index 4a2f134418..029585beb2 100644
--- a/webapp/src/components/App/Singlestudy/NavHeader/index.tsx
+++ b/webapp/src/components/App/Singlestudy/NavHeader/index.tsx
@@ -12,7 +12,7 @@ import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import { useTranslation } from "react-i18next";
 import { StudyMetadata, VariantTree } from "../../../../common/types";
-import { STUDIES_HEIGHT_HEADER } from "../../../../theme";
+import { STUDIES_HEIGHT_HEADER } from "../../theme";
 import { archiveStudy, unarchiveStudy } from "../../../../services/api/study";
 import { deleteStudy } from "../../../../redux/ducks/studies";
 import LauncherDialog from "../../Studies/LauncherDialog";
diff --git a/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx b/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx
index 7828d1b4c0..74c6796a46 100644
--- a/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx
+++ b/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx
@@ -62,7 +62,6 @@ function UpgradeDialog({ study, onClose, open }: Props) {
           <SelectFE
             name="version"
             label="Version"
-            variant="filled"
             options={versionOptions}
             control={control}
           />
diff --git a/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx b/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx
index 0fe6af285b..8913ce3f49 100644
--- a/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx
@@ -141,7 +141,6 @@ function Fields(props: Props) {
         <NumberFE
           name="firstDay"
           label={t("study.configuration.general.firstDay")}
-          variant="filled"
           control={control}
           rules={{
             deps: "lastDay",
@@ -151,7 +150,6 @@ function Fields(props: Props) {
         <NumberFE
           name="lastDay"
           label={t("study.configuration.general.lastDay")}
-          variant="filled"
           control={control}
           rules={{
             deps: "firstDay",
@@ -160,12 +158,7 @@ function Fields(props: Props) {
         />
       </Fieldset>
       <Fieldset legend={t("study.configuration.general.legend.calendar")}>
-        <StringFE
-          name="horizon"
-          label="Horizon"
-          variant="filled"
-          control={control}
-        />
+        <StringFE name="horizon" label="Horizon" control={control} />
         <SelectFE
           name="firstMonth"
           label={t("study.configuration.general.year")}
@@ -207,7 +200,6 @@ function Fields(props: Props) {
           <NumberFE
             name="nbYears"
             label={t("study.configuration.general.nbYears")}
-            variant="filled"
             control={control}
             rules={{
               validate: handleNbYearsValidation,
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/AddConstraintTermForm/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/AddConstraintTermForm/index.tsx
index e833cbe810..6051d4b12e 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/AddConstraintTermForm/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/AddConstraintTermForm/index.tsx
@@ -43,7 +43,6 @@ export default function AddConstraintTermForm(props: Props) {
             <NumberFE
               name="weight"
               label={t("study.modelization.bindingConst.weight")}
-              variant="filled"
               control={control}
               rules={{
                 required: t("form.field.required") as string,
@@ -76,7 +75,6 @@ export default function AddConstraintTermForm(props: Props) {
                   <NumberFE
                     name="offset"
                     label={t("study.modelization.bindingConst.offset")}
-                    variant="filled"
                     control={control}
                     rules={{
                       required: t("form.field.required") as string,
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/ConstraintTerm/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/ConstraintTerm/index.tsx
index 136f0f287d..00b89e375e 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/ConstraintTerm/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/ConstraintTerm/index.tsx
@@ -80,7 +80,6 @@ export default function ConstraintItem(props: Props) {
         left={
           <TextField
             label={t("study.modelization.bindingConst.weight")}
-            variant="filled"
             type="number"
             value={weight}
             onChange={(e) => handleChange("weight", e.target.value)}
@@ -113,7 +112,6 @@ export default function ConstraintItem(props: Props) {
               <OffsetInput onRemove={() => handleChange("offset", null)}>
                 <TextField
                   label={t("study.modelization.bindingConst.offset")}
-                  variant="filled"
                   type="number"
                   value={offset}
                   onChange={(e) => handleChange("offset", e.target.value)}
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/style.ts b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/style.ts
index 11960d32c0..4259f5f74a 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/style.ts
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/style.ts
@@ -1,5 +1,5 @@
 import { Box, Paper, styled } from "@mui/material";
-import { PAPER_BACKGROUND_NO_TRANSPARENCY } from "../../../../../../../../theme";
+import { PAPER_BACKGROUND_NO_TRANSPARENCY } from "../../../../../../theme";
 
 export const ConstraintElementRoot = styled(Paper)(({ theme }) => ({
   display: "flex",
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/Areas/AreaConfig.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/Areas/AreaConfig.tsx
index 44749abe3e..f7e4209792 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/Areas/AreaConfig.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/Areas/AreaConfig.tsx
@@ -84,7 +84,6 @@ function AreaConfig(props: Props) {
           <TextField
             sx={{ mt: 1 }}
             label={t("study.modelization.map.areaName")}
-            variant="filled"
             value={currentArea.name}
             disabled
           />
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Districts/UpdateDistrictDialog.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Districts/UpdateDistrictDialog.tsx
index d99e37fc91..29b05fedc3 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Districts/UpdateDistrictDialog.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Districts/UpdateDistrictDialog.tsx
@@ -91,7 +91,6 @@ function UpdateDistrictDialog(props: Props) {
           <SelectFE
             name="districtId"
             label={t("study.modelization.map.districts")}
-            variant="filled"
             options={districtsOptions}
             control={control}
             onChange={(e) => {
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Layers/UpdateLayerDialog.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Layers/UpdateLayerDialog.tsx
index 1160b309bc..ce0bcfb7bd 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Layers/UpdateLayerDialog.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Layers/UpdateLayerDialog.tsx
@@ -91,7 +91,6 @@ function UpdateLayerDialog(props: Props) {
           <SelectFE
             name="layerId"
             label={t("Layers")}
-            variant="filled"
             options={layersOptions}
             control={control}
             onChange={(e) =>
diff --git a/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/CandidateForm.tsx b/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/CandidateForm.tsx
index f2bdb8c89f..c5b8fb916a 100644
--- a/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/CandidateForm.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/CandidateForm.tsx
@@ -129,7 +129,6 @@ function CandidateForm(props: PropType) {
         <Fields>
           <TextField
             label={t("global.name")}
-            variant="filled"
             value={currentCandidate?.name || ""}
             onChange={(e) => handleChange("name", e.target.value)}
           />
@@ -154,7 +153,6 @@ function CandidateForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.annualCost")}
-            variant="filled"
             value={currentCandidate?.["annual-cost-per-mw"] || ""}
             onChange={(e) =>
               handleChange("annual-cost-per-mw", parseFloat(e.target.value))
@@ -163,7 +161,6 @@ function CandidateForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.alreadyICapacity")}
-            variant="filled"
             value={currentCandidate?.["already-installed-capacity"] || ""}
             onChange={(e) =>
               handleChange(
@@ -206,7 +203,6 @@ function CandidateForm(props: PropType) {
                 sx={{ mr: 2 }}
                 type="number"
                 label={t("xpansion.unitSize")}
-                variant="filled"
                 value={currentCandidate?.["unit-size"] || ""}
                 onChange={(e) =>
                   handleChange("unit-size", parseFloat(e.target.value))
@@ -215,7 +211,6 @@ function CandidateForm(props: PropType) {
               <TextField
                 type="number"
                 label={t("xpansion.maxUnits")}
-                variant="filled"
                 value={currentCandidate?.["max-units"] || ""}
                 onChange={(e) =>
                   handleChange("max-units", parseFloat(e.target.value))
@@ -227,7 +222,6 @@ function CandidateForm(props: PropType) {
             <TextField
               type="number"
               label={t("xpansion.maxInvestments")}
-              variant="filled"
               value={currentCandidate?.["max-investment"] || ""}
               onChange={(e) =>
                 handleChange("max-investment", parseFloat(e.target.value))
diff --git a/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/SettingsForm.tsx b/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/SettingsForm.tsx
index 8a7298e2e5..23f38274a2 100644
--- a/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/SettingsForm.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/SettingsForm.tsx
@@ -129,7 +129,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.maxIteration")}
-            variant="filled"
             value={currentSettings.max_iteration}
             onChange={(e) => handleChange("max_iteration", e.target.value)}
             sx={{ mb: 1 }}
@@ -138,7 +137,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.optimalityGap")}
-            variant="filled"
             value={currentSettings.optimality_gap}
             onChange={(e) =>
               handleChange("optimality_gap", parseFloat(e.target.value))
@@ -149,7 +147,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.relativeGap")}
-            variant="filled"
             value={currentSettings.relative_gap}
             onChange={(e) =>
               handleChange("relative_gap", parseFloat(e.target.value))
@@ -160,7 +157,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.relaxedOptimalityGap")}
-            variant="filled"
             value={currentSettings.relaxed_optimality_gap}
             onChange={(e) =>
               handleChange("relaxed_optimality_gap", e.target.value)
@@ -185,7 +181,7 @@ function SettingsForm(props: PropType) {
           {/* <TextField
             type="number"
             label={t("xpansion.timeLimit")}
-            variant="filled"
+            
             value={Math.round((currentSettings.timelimit || 1e12) / 3600)}
             onChange={(e) =>
               handleChange(
@@ -198,7 +194,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.separationParameter")}
-            variant="filled"
             value={currentSettings.separation_parameter}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               handleChange("separation_parameter", parseFloat(e.target.value))
@@ -209,7 +204,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.batchSize")}
-            variant="filled"
             value={currentSettings.batch_size}
             onChange={(e) =>
               handleChange("batch_size", parseInt(e.target.value, 10))
@@ -220,7 +214,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.logLevel")}
-            variant="filled"
             value={currentSettings.log_level}
             onChange={(e) =>
               handleChange("log_level", parseInt(e.target.value, 10))
@@ -343,7 +336,6 @@ function SettingsForm(props: PropType) {
                 e.target.value as string[],
               )
             }
-            variant="filled"
             options={candidates}
           />
         </Box>
diff --git a/webapp/src/components/App/Studies/ExportModal/ExportFilter/Filter/index.tsx b/webapp/src/components/App/Studies/ExportModal/ExportFilter/Filter/index.tsx
index cffc673c9e..36e97a23dc 100644
--- a/webapp/src/components/App/Studies/ExportModal/ExportFilter/Filter/index.tsx
+++ b/webapp/src/components/App/Studies/ExportModal/ExportFilter/Filter/index.tsx
@@ -73,14 +73,12 @@ function Filter(props: PropTypes) {
       <TextField
         label={t("study.filterIn")}
         value={filterInValue}
-        variant="filled"
         onChange={(event) => setFilterInValue(event.target.value)}
         sx={{ m: 0, mb: 2, width: "95%" }}
       />
       <TextField
         label={t("study.filterOut")}
         value={filterOutValue}
-        variant="filled"
         onChange={(event) => setFilterOutValue(event.target.value)}
         sx={{ m: 0, mb: 2, width: "95%" }}
       />
diff --git a/webapp/src/components/App/Studies/ExportModal/ExportFilter/TagSelect/index.tsx b/webapp/src/components/App/Studies/ExportModal/ExportFilter/TagSelect/index.tsx
index ba4d1bca14..3644a11712 100644
--- a/webapp/src/components/App/Studies/ExportModal/ExportFilter/TagSelect/index.tsx
+++ b/webapp/src/components/App/Studies/ExportModal/ExportFilter/TagSelect/index.tsx
@@ -25,7 +25,6 @@ function TagSelect(props: PropTypes) {
         <TextField
           label={label}
           value={value}
-          variant="filled"
           onChange={(event) => setValue(event.target.value)}
           sx={{ m: 0, mr: 1, flex: 1 }}
         />
diff --git a/webapp/src/components/App/Studies/FilterDrawer.tsx b/webapp/src/components/App/Studies/FilterDrawer.tsx
index 5a613d7a6a..e19df7b63b 100644
--- a/webapp/src/components/App/Studies/FilterDrawer.tsx
+++ b/webapp/src/components/App/Studies/FilterDrawer.tsx
@@ -4,7 +4,7 @@ import Toolbar from "@mui/material/Toolbar";
 import Divider from "@mui/material/Divider";
 import { Button, Drawer, List, ListItem, Typography } from "@mui/material";
 import { useEffect, useRef } from "react";
-import { STUDIES_FILTER_WIDTH } from "../../../theme";
+import { STUDIES_FILTER_WIDTH } from "../theme";
 import useAppSelector from "../../../redux/hooks/useAppSelector";
 import {
   getGroups,
diff --git a/webapp/src/components/App/Studies/HeaderBottom.tsx b/webapp/src/components/App/Studies/HeaderBottom.tsx
index da107facd7..d93d4c78b4 100644
--- a/webapp/src/components/App/Studies/HeaderBottom.tsx
+++ b/webapp/src/components/App/Studies/HeaderBottom.tsx
@@ -84,7 +84,6 @@ function HeaderBottom(props: PropTypes) {
         {filters.managed && (
           <Chip
             label={t("studies.managedStudiesFilter")}
-            variant="filled"
             color="secondary"
             onDelete={() => setFilterValue("managed", false)}
             sx={{ mx: 1 }}
@@ -93,7 +92,6 @@ function HeaderBottom(props: PropTypes) {
         {filters.archived && (
           <Chip
             label={t("studies.archivedStudiesFilter")}
-            variant="filled"
             color="secondary"
             onDelete={() => setFilterValue("archived", false)}
             sx={{ mx: 1 }}
@@ -111,7 +109,6 @@ function HeaderBottom(props: PropTypes) {
           <Chip
             key={version}
             label={displayVersionName(version)}
-            variant="filled"
             color="primary"
             onDelete={() => {
               setFilterValue(
@@ -126,7 +123,6 @@ function HeaderBottom(props: PropTypes) {
           <Chip
             key={user.id}
             label={user.name}
-            variant="filled"
             onDelete={() => {
               setFilterValue(
                 "users",
@@ -140,7 +136,6 @@ function HeaderBottom(props: PropTypes) {
           <Chip
             key={group.id}
             label={group.name}
-            variant="filled"
             color="success"
             onDelete={() => {
               setFilterValue(
@@ -155,7 +150,6 @@ function HeaderBottom(props: PropTypes) {
           <Chip
             key={tag}
             label={tag}
-            variant="filled"
             onDelete={() => {
               setFilterValue(
                 "tags",
diff --git a/webapp/src/components/App/Studies/LauncherDialog.tsx b/webapp/src/components/App/Studies/LauncherDialog.tsx
index 1419bfe6ac..f6e4433ed4 100644
--- a/webapp/src/components/App/Studies/LauncherDialog.tsx
+++ b/webapp/src/components/App/Studies/LauncherDialog.tsx
@@ -248,7 +248,6 @@ function LauncherDialog(props: Props) {
             id="launcher-option-output-suffix"
             label={t("global.name")}
             type="text"
-            variant="filled"
             value={options.output_suffix}
             onChange={(e) =>
               handleChange("output_suffix", e.target.value.trim())
@@ -264,7 +263,6 @@ function LauncherDialog(props: Props) {
             id="launcher-option-time-limit"
             label={t("study.timeLimit")}
             type="number"
-            variant="filled"
             value={(options.time_limit ?? 864000) / 3600} // 240 hours default
             onChange={(e) =>
               handleChange("time_limit", timeLimitParse(e.target.value))
@@ -287,7 +285,6 @@ function LauncherDialog(props: Props) {
                 id="nb-cpu"
                 label={t("study.nbCpu")}
                 type="number"
-                variant="filled"
                 value={options.nb_cpu}
                 onChange={(e) => {
                   const newValue = parseInt(e.target.value, 10);
@@ -333,7 +330,6 @@ function LauncherDialog(props: Props) {
             id="other-options"
             label={t("study.otherOptions")}
             type="text"
-            variant="filled"
             value={options.other_options}
             onChange={(e) => handleChange("other_options", e.target.value)}
             sx={{
diff --git a/webapp/src/components/App/Studies/SideNav.tsx b/webapp/src/components/App/Studies/SideNav.tsx
index d1e2f7ac38..db7ca0fbd9 100644
--- a/webapp/src/components/App/Studies/SideNav.tsx
+++ b/webapp/src/components/App/Studies/SideNav.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router";
 import { Box, Typography, List, ListItem, ListItemText } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { STUDIES_SIDE_NAV_WIDTH } from "../../../theme";
+import { STUDIES_SIDE_NAV_WIDTH } from "../theme";
 import StudyTree from "./StudyTree";
 import useAppSelector from "../../../redux/hooks/useAppSelector";
 import { getFavoriteStudies } from "../../../redux/selectors";
diff --git a/webapp/src/components/App/Studies/StudiesList/index.tsx b/webapp/src/components/App/Studies/StudiesList/index.tsx
index 65c8befbf9..c442393516 100644
--- a/webapp/src/components/App/Studies/StudiesList/index.tsx
+++ b/webapp/src/components/App/Studies/StudiesList/index.tsx
@@ -25,10 +25,7 @@ import { FixedSizeGrid, GridOnScrollProps } from "react-window";
 import { v4 as uuidv4 } from "uuid";
 import { AxiosError } from "axios";
 import { StudyMetadata } from "../../../../common/types";
-import {
-  STUDIES_HEIGHT_HEADER,
-  STUDIES_LIST_HEADER_HEIGHT,
-} from "../../../../theme";
+import { STUDIES_HEIGHT_HEADER, STUDIES_LIST_HEADER_HEIGHT } from "../../theme";
 import {
   setStudyScrollPosition,
   StudiesSortConf,
@@ -293,7 +290,6 @@ function StudiesList(props: StudiesListProps) {
               labelId={sortLabelId}
               value={JSON.stringify(sortConf)}
               label={t("studies.sortBy")}
-              variant="filled"
               onChange={(e: SelectChangeEvent<string>) =>
                 dispatch(updateStudiesSortConf(JSON.parse(e.target.value)))
               }
diff --git a/webapp/src/components/App/Studies/StudyCard.tsx b/webapp/src/components/App/Studies/StudyCard.tsx
index 976ee7acd8..82bb809ffa 100644
--- a/webapp/src/components/App/Studies/StudyCard.tsx
+++ b/webapp/src/components/App/Studies/StudyCard.tsx
@@ -246,7 +246,6 @@ const StudyCard = memo((props: Props) => {
               component="div"
               onClick={() => navigate(`/studies/${study.id}`)}
               sx={{
-                color: "white",
                 boxSizing: "border-box",
                 flexFlow: "nowrap",
                 width: "calc(100% - 64px)",
diff --git a/webapp/src/components/App/Tasks/index.tsx b/webapp/src/components/App/Tasks/index.tsx
index 11c8a7f525..7171d59b10 100644
--- a/webapp/src/components/App/Tasks/index.tsx
+++ b/webapp/src/components/App/Tasks/index.tsx
@@ -161,7 +161,6 @@ function JobsListing() {
           <Chip
             key="xpansion"
             label="Xpansion"
-            variant="filled"
             sx={{ m: 0.25, color: "black", bgcolor: indigo[300] }}
           />
         )}
@@ -169,7 +168,6 @@ function JobsListing() {
           <Chip
             key="adequacy_patch"
             label="Adequacy patch"
-            variant="filled"
             sx={{ m: 0.25, color: "black", bgcolor: indigo[300] }}
           />
         )}
diff --git a/webapp/src/components/App/index.tsx b/webapp/src/components/App/index.tsx
index be247e296b..ff79989957 100644
--- a/webapp/src/components/App/index.tsx
+++ b/webapp/src/components/App/index.tsx
@@ -5,9 +5,13 @@ import {
   Routes,
   Outlet,
 } from "react-router-dom";
-import { CssBaseline, ThemeProvider } from "@mui/material";
+import {
+  CssBaseline,
+  ThemeProvider,
+  createTheme,
+  useMediaQuery,
+} from "@mui/material";
 import { SnackbarProvider } from "notistack";
-import maintheme from "../../theme";
 import MenuWrapper from "../wrappers/MenuWrapper";
 import Studies from "./Studies";
 import Data from "./Data";
@@ -54,11 +58,25 @@ import StorageForm from "./Singlestudy/explore/Modelization/Areas/Storages/Form"
 import ThermalForm from "./Singlestudy/explore/Modelization/Areas/Thermal/Form";
 import RenewablesForm from "./Singlestudy/explore/Modelization/Areas/Renewables/Form";
 import SplitHydroMatrix from "./Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix";
+import { useMemo } from "react";
+import mainTheme from "./theme";
 
 function App() {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+  const theme = useMemo(
+    () =>
+      createTheme(mainTheme, {
+        palette: {
+          //mode: prefersDarkMode ? "dark" : "light",
+        },
+      }),
+    [prefersDarkMode],
+  );
+
   return (
     <Router>
-      <ThemeProvider theme={maintheme}>
+      <ThemeProvider theme={theme}>
         <SnackbarProvider maxSnack={5}>
           <CssBaseline />
           <MaintenanceWrapper>
diff --git a/webapp/src/components/App/theme.ts b/webapp/src/components/App/theme.ts
new file mode 100644
index 0000000000..ba927aada6
--- /dev/null
+++ b/webapp/src/components/App/theme.ts
@@ -0,0 +1,244 @@
+import { createTheme } from "@mui/material/styles";
+
+export const DRAWER_WIDTH = 60;
+export const DRAWER_WIDTH_EXTENDED = 240;
+export const STUDIES_HEIGHT_HEADER = 100;
+export const STUDIES_SIDE_NAV_WIDTH = 300;
+export const STUDIES_LIST_HEADER_HEIGHT = 100;
+export const STUDIES_FILTER_WIDTH = 300;
+
+export const SECONDARY_MAIN_COLOR = "#00B2FF";
+export const PAPER_BACKGROUND_NO_TRANSPARENCY = "#212c38";
+
+export const scrollbarStyle = {
+  "&::-webkit-scrollbar": {
+    width: "7px",
+    height: "7px",
+  },
+  "&::-webkit-scrollbar-track": {
+    boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: SECONDARY_MAIN_COLOR,
+  },
+};
+
+// components: {
+//   MuiCssBaseline: {
+//     styleOverrides: {
+//       div: {
+//         ...scrollbarStyle,
+//       },
+//       ul: {
+//         ...scrollbarStyle,
+//       },
+//       pre: {
+//         ...scrollbarStyle,
+//       },
+//     },
+//   },
+//   MuiPaper: {
+//     styleOverrides: {
+//       root: {
+//         backgroundColor: "#222333",
+//       },
+//     },
+//   },
+//   MuiAlert: {
+//     styleOverrides: {
+//       root: {
+//         backgroundColor: "#222333",
+//         color: "#FFFFFF",
+//       },
+//     },
+//   },
+//   MuiPopover: {
+//     styleOverrides: {
+//       paper: {
+//         ...scrollbarStyle,
+//       },
+//     },
+//   },
+//   MuiButton: {
+//     variants: [
+//       {
+//         props: { variant: "contained", color: "success" },
+//         style: {
+//           color: "#FFFFFF",
+//         },
+//       },
+//       {
+//         props: { variant: "contained", color: "error" },
+//         style: {
+//           color: "#FFFFFF",
+//         },
+//       },
+//     ],
+//   },
+//   MuiTextField: {
+//     variants: [
+//       {
+//         props: { variant: "outlined" },
+//         style: {
+//           margin: "8px",
+//           "& .MuiOutlinedInput-root:not(.MuiInputBase-multiline):not(.MuiAutocomplete-inputRoot) .MuiInputAdornment-sizeMedium + .MuiOutlinedInput-input":
+//             {
+//               // Default value: 'padding: 16.5px 14px'
+//               // Don't use 'padding' to support adornments left and right
+//               paddingTop: "13.5px",
+//               paddingBottom: "13.5px",
+//             },
+//         },
+//       },
+//       {
+//         props: { variant: "filled" },
+//         style: {
+//           ".MuiFilledInput-root": {
+//             background: "rgba(255, 255, 255, 0.09)",
+//             borderBottom: "1px solid rgba(255, 255, 255, 0.42)",
+//           },
+//           borderRadius: "4px 4px 0px 0px",
+//           minHeight: 0,
+//         },
+//       },
+//     ],
+//   },
+//   MuiSelect: {
+//     variants: [
+//       {
+//         props: { variant: "filled" },
+//         style: {
+//           background: "rgba(255, 255, 255, 0.09)",
+//           borderRadius: "4px 4px 0px 0px",
+//           borderBottom: "1px solid rgba(255, 255, 255, 0.42)",
+//           ".MuiSelect-icon": {
+//             backgroundColor: "#222333",
+//           },
+//         },
+//       },
+//     ],
+//   },
+//   MuiFormControl: {
+//     variants: [
+//       {
+//         props: { variant: "outlined" },
+//         style: {
+//           "> div > fieldset": {
+//             borderColor: "rgba(255,255,255,0.09)",
+//           },
+//         },
+//       },
+//     ],
+//   },
+// },
+// typography: {
+//   fontFamily: "'Inter', sans-serif",
+// },
+// palette: {
+//   background: {
+//     default: "#222333",
+//   },
+//   primary: {
+//     dark: "#C9940B",
+//     main: "#FFB800",
+//     light: "#FFDB7D",
+//     contrast: "rgba(0, 0, 0, 0.87)",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #FFB800",
+//     outlinedHoverBackground: "rgba(255, 184, 0, 0.08)",
+//     outlinedRestingBackground: "rgba(255, 184, 0, 0.05)",
+//   },
+//   secondary: {
+//     dark: "#0092D0",
+//     main: SECONDARY_MAIN_COLOR,
+//     light: "#77CFF5",
+//     contrast: "rgba(30, 30, 30, 0.87)",
+//     containedHoverBackground: `linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), ${SECONDARY_MAIN_COLOR}`,
+//     outlinedHoverBackground: "rgba(0, 178, 255, 0.08)",
+//     outlinedRestingBackground: "rgba(0, 178, 255, 0.5)",
+//   },
+//   success: {
+//     dark: "#388E3C",
+//     main: "#66BB6A",
+//     light: "#81C784",
+//     contrast: "#FFFFFF",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #66BB6A",
+//     outlinedHoverBackground: "rgba(102, 187, 106, 0.5)",
+//     outlinedRestingBackground: "rgba(102, 187, 106, 0.08)",
+//   },
+//   warning: {
+//     dark: "#F57C00",
+//     main: "#FF9800",
+//     light: "#FFB74D",
+//     contrast: "#FFFFFF",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #FF9800",
+//     outlinedHoverBackground: "rgba(255, 152, 0, 0.08)",
+//     outlinedRestingBackground: "rgba(255, 152, 0, 0.05)",
+//   },
+//   error: {
+//     dark: "#D32F2F",
+//     main: "#F44336",
+//     light: "#E57373",
+//     contrast: "#FFFFFF",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #F44336",
+//     outlinedHoverBackground: "rgba(244, 67, 54, 0.08)",
+//     outlinedRestingBackground: "rgba(244, 67, 54, 0.05)",
+//   },
+//   info: {
+//     dark: "#1976D2",
+//     main: "#2196F3",
+//     light: "#64B5F6",
+//     contrast: "#FFFFFF",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #2196F3",
+//     outlinedHoverBackground: "rgba(33, 150, 243, 0.08)",
+//     outlinedRestingBackground: "rgba(33, 150, 243, 0.05)",
+//   },
+//   text: {
+//     primary: "#FFFFFF",
+//     secondary: "rgba(255, 255, 255, 0.7)",
+//     disabled: "rgba(255, 255, 255, 0.5)",
+//   },
+//   action: {
+//     active: "rgba(255, 255, 255, 0.56)",
+//     hover: "rgba(255, 255, 255, 0.32)",
+//     selected: "rgba(255, 255, 255, 0.16)",
+//     disabled: "rgba(255, 255, 255, 0.3)",
+//     disabledBackground: "rgba(255, 255, 255, 0.12)",
+//     focus: "rgba(255, 255, 255, 0.12)",
+//   },
+//   divider: "rgba(255, 255, 255, 0.12)",
+//   outlineBorder: "#222333",
+//   standardFieldLine: "#222333",
+//   backdrop: "rgba(0, 0, 0, 0.5)",
+//   activeRating: "#FFB400",
+//   snackbar: "#FFFFFF",
+// },
+
+export default createTheme({
+  components: {
+    MuiButton: {
+      defaultProps: {
+        size: "small",
+      },
+    },
+    MuiInputBase: {
+      defaultProps: {
+        size: "small",
+      },
+    },
+    MuiSvgIcon: {
+      defaultProps: {
+        fontSize: "small",
+      },
+    },
+    MuiCheckbox: {
+      defaultProps: {
+        size: "small",
+      },
+    },
+  },
+});
diff --git a/webapp/src/components/common/FormGenerator/index.tsx b/webapp/src/components/common/FormGenerator/index.tsx
index b91dc7c9bc..11d2bd0d06 100644
--- a/webapp/src/components/common/FormGenerator/index.tsx
+++ b/webapp/src/components/common/FormGenerator/index.tsx
@@ -109,7 +109,6 @@ export default function FormGenerator<T extends FieldValues>(
                     () => (
                       <StringFE
                         {...otherProps}
-                        variant="filled"
                         control={control}
                         rules={vRules}
                       />
@@ -120,7 +119,6 @@ export default function FormGenerator<T extends FieldValues>(
                     () => (
                       <NumberFE
                         {...otherProps}
-                        variant="filled"
                         control={control}
                         rules={vRules}
                       />
@@ -141,7 +139,6 @@ export default function FormGenerator<T extends FieldValues>(
                     () => (
                       <BooleanFE
                         {...otherProps}
-                        variant="filled"
                         control={control}
                         rules={vRules}
                       />
@@ -156,7 +153,6 @@ export default function FormGenerator<T extends FieldValues>(
                             .options || []
                         }
                         {...otherProps}
-                        variant="filled"
                         control={control}
                         rules={vRules}
                       />
diff --git a/webapp/src/components/common/Handsontable.tsx b/webapp/src/components/common/Handsontable.tsx
index 2434eff01d..bf36759dfe 100644
--- a/webapp/src/components/common/Handsontable.tsx
+++ b/webapp/src/components/common/Handsontable.tsx
@@ -3,7 +3,7 @@ import HotTable, { HotTableProps } from "@handsontable/react";
 import { styled } from "@mui/material";
 import { forwardRef } from "react";
 import * as RA from "ramda-adjunct";
-import { SECONDARY_MAIN_COLOR } from "../../theme";
+import { SECONDARY_MAIN_COLOR } from "../App/theme";
 
 // Register Handsontable's modules
 registerAllModules();
diff --git a/webapp/src/components/common/SelectMulti.tsx b/webapp/src/components/common/SelectMulti.tsx
index 5f916bd3f7..bb8c131017 100644
--- a/webapp/src/components/common/SelectMulti.tsx
+++ b/webapp/src/components/common/SelectMulti.tsx
@@ -72,7 +72,6 @@ function SelectMulti(props: Props) {
         id={`multiple-checkbox-${name}`}
         multiple
         value={data}
-        variant="filled"
         placeholder={placeholder}
         onChange={handleChange}
         renderValue={tagsMode === true ? chipRender : checkboxRender}
diff --git a/webapp/src/components/common/fieldEditors/CheckboxesTagsFE.tsx b/webapp/src/components/common/fieldEditors/CheckboxesTagsFE.tsx
index 42e3a7e3fb..448e031ab8 100644
--- a/webapp/src/components/common/fieldEditors/CheckboxesTagsFE.tsx
+++ b/webapp/src/components/common/fieldEditors/CheckboxesTagsFE.tsx
@@ -79,8 +79,8 @@ function CheckboxesTagsFE<
       renderOption={(props, option, { selected }) => (
         <li {...props}>
           <Checkbox
-            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
-            checkedIcon={<CheckBoxIcon fontSize="small" />}
+            icon={<CheckBoxOutlineBlankIcon />}
+            checkedIcon={<CheckBoxIcon />}
             style={{ marginRight: 8 }}
             checked={selected}
           />
@@ -91,7 +91,6 @@ function CheckboxesTagsFE<
         <TextField
           sx={{ m: 0 }}
           name={name}
-          variant="filled"
           label={label}
           error={error}
           helperText={helperText}
diff --git a/webapp/src/components/wrappers/LoginWrapper.tsx b/webapp/src/components/wrappers/LoginWrapper.tsx
index 9d5dee2ada..369fabb9e5 100644
--- a/webapp/src/components/wrappers/LoginWrapper.tsx
+++ b/webapp/src/components/wrappers/LoginWrapper.tsx
@@ -153,7 +153,6 @@ function LoginWrapper(props: Props) {
                         <StringFE
                           name="username"
                           label="NNI"
-                          variant="filled"
                           size="small"
                           sx={{ mb: 2 }}
                           fullWidth
@@ -163,7 +162,6 @@ function LoginWrapper(props: Props) {
                         <PasswordFE
                           name="password"
                           label={t("global.password")}
-                          variant="filled"
                           size="small"
                           inputProps={{
                             // https://web.dev/sign-in-form-best-practices/#current-password
diff --git a/webapp/src/components/wrappers/MenuWrapper/index.tsx b/webapp/src/components/wrappers/MenuWrapper/index.tsx
index 7426442e92..bc0f4c59c3 100644
--- a/webapp/src/components/wrappers/MenuWrapper/index.tsx
+++ b/webapp/src/components/wrappers/MenuWrapper/index.tsx
@@ -185,15 +185,7 @@ function MenuWrapper(props: Props) {
               {extended && <NavListItemText primary={t(`${elm.id}`)} />}
             </NavExternalLink>
           ) : (
-            <NavInternalLink
-              to={elm.link}
-              end={elm.strict}
-              style={({ isActive }) => ({
-                background: isActive
-                  ? theme.palette.primary.outlinedHoverBackground
-                  : undefined,
-              })}
-            >
+            <NavInternalLink to={elm.link} end={elm.strict}>
               <NavListItemIcon>
                 <elm.icon sx={{ color: "grey.400" }} />
               </NavListItemIcon>
diff --git a/webapp/src/components/wrappers/MenuWrapper/styles.ts b/webapp/src/components/wrappers/MenuWrapper/styles.ts
index f7f39a869f..bc0e550061 100644
--- a/webapp/src/components/wrappers/MenuWrapper/styles.ts
+++ b/webapp/src/components/wrappers/MenuWrapper/styles.ts
@@ -5,15 +5,13 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 
 import { Box, styled } from "@mui/material";
-import { DRAWER_WIDTH, DRAWER_WIDTH_EXTENDED } from "../../../theme";
+import { DRAWER_WIDTH, DRAWER_WIDTH_EXTENDED } from "../../App/theme";
 
 export const Root = styled(Box)({
   display: "flex",
   width: "100vw",
   height: "100vh",
   overflow: "hidden",
-  background:
-    "radial-gradient(ellipse at top right, #190520 0%, #190520 30%, #222333 100%)",
 });
 
 export const TootlbarContent = styled(Box, {
diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts
deleted file mode 100644
index 8840efceb8..0000000000
--- a/webapp/src/theme.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import * as React from "react";
-import { createTheme } from "@mui/material/styles";
-
-export const DRAWER_WIDTH = 60;
-export const DRAWER_WIDTH_EXTENDED = 240;
-export const STUDIES_HEIGHT_HEADER = 100;
-export const STUDIES_SIDE_NAV_WIDTH = 300;
-export const STUDIES_LIST_HEADER_HEIGHT = 100;
-export const STUDIES_FILTER_WIDTH = 300;
-
-export const SECONDARY_MAIN_COLOR = "#00B2FF";
-export const PAPER_BACKGROUND_NO_TRANSPARENCY = "#212c38";
-
-export const scrollbarStyle = {
-  "&::-webkit-scrollbar": {
-    width: "7px",
-    height: "7px",
-  },
-  "&::-webkit-scrollbar-track": {
-    boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
-  },
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: SECONDARY_MAIN_COLOR,
-  },
-};
-
-declare module "@mui/material/styles" {
-  interface PaletteColor {
-    contrast?: string;
-    containedHoverBackground?: string;
-    outlinedHoverBackground?: string;
-    outlinedRestingBackground?: string;
-  }
-  interface SimplePaletteColorOptions {
-    contrast?: string;
-    containedHoverBackground?: string;
-    outlinedHoverBackground?: string;
-    outlinedRestingBackground?: string;
-  }
-
-  interface PaletteOptions {
-    outlineBorder: React.CSSProperties["color"];
-    standardFieldLine: React.CSSProperties["color"];
-    backdrop: React.CSSProperties["color"];
-    activeRating: React.CSSProperties["color"];
-    snackbar: React.CSSProperties["color"];
-  }
-}
-
-const theme = createTheme({
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        div: {
-          ...scrollbarStyle,
-        },
-        ul: {
-          ...scrollbarStyle,
-        },
-        pre: {
-          ...scrollbarStyle,
-        },
-      },
-    },
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "#222333",
-        },
-      },
-    },
-    MuiAlert: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "#222333",
-          color: "#FFFFFF",
-        },
-      },
-    },
-    MuiPopover: {
-      styleOverrides: {
-        paper: {
-          ...scrollbarStyle,
-        },
-      },
-    },
-    MuiButton: {
-      variants: [
-        {
-          props: { variant: "contained", color: "success" },
-          style: {
-            color: "#FFFFFF",
-          },
-        },
-        {
-          props: { variant: "contained", color: "error" },
-          style: {
-            color: "#FFFFFF",
-          },
-        },
-      ],
-    },
-    MuiTextField: {
-      variants: [
-        {
-          props: { variant: "outlined" },
-          style: {
-            margin: "8px",
-            "& .MuiOutlinedInput-root:not(.MuiInputBase-multiline):not(.MuiAutocomplete-inputRoot) .MuiInputAdornment-sizeMedium + .MuiOutlinedInput-input":
-              {
-                // Default value: 'padding: 16.5px 14px'
-                // Don't use 'padding' to support adornments left and right
-                paddingTop: "13.5px",
-                paddingBottom: "13.5px",
-              },
-          },
-        },
-        {
-          props: { variant: "filled" },
-          style: {
-            ".MuiFilledInput-root": {
-              background: "rgba(255, 255, 255, 0.09)",
-              borderBottom: "1px solid rgba(255, 255, 255, 0.42)",
-            },
-            borderRadius: "4px 4px 0px 0px",
-            minHeight: 0,
-          },
-        },
-      ],
-    },
-    MuiSelect: {
-      variants: [
-        {
-          props: { variant: "filled" },
-          style: {
-            background: "rgba(255, 255, 255, 0.09)",
-            borderRadius: "4px 4px 0px 0px",
-            borderBottom: "1px solid rgba(255, 255, 255, 0.42)",
-            ".MuiSelect-icon": {
-              backgroundColor: "#222333",
-            },
-          },
-        },
-      ],
-    },
-    MuiFormControl: {
-      variants: [
-        {
-          props: { variant: "outlined" },
-          style: {
-            "> div > fieldset": {
-              borderColor: "rgba(255,255,255,0.09)",
-            },
-          },
-        },
-      ],
-    },
-  },
-  typography: {
-    fontFamily: "'Inter', sans-serif",
-  },
-  palette: {
-    background: {
-      default: "#222333",
-    },
-    primary: {
-      dark: "#C9940B",
-      main: "#FFB800",
-      light: "#FFDB7D",
-      contrast: "rgba(0, 0, 0, 0.87)",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #FFB800",
-      outlinedHoverBackground: "rgba(255, 184, 0, 0.08)",
-      outlinedRestingBackground: "rgba(255, 184, 0, 0.05)",
-    },
-    secondary: {
-      dark: "#0092D0",
-      main: SECONDARY_MAIN_COLOR,
-      light: "#77CFF5",
-      contrast: "rgba(30, 30, 30, 0.87)",
-      containedHoverBackground: `linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), ${SECONDARY_MAIN_COLOR}`,
-      outlinedHoverBackground: "rgba(0, 178, 255, 0.08)",
-      outlinedRestingBackground: "rgba(0, 178, 255, 0.5)",
-    },
-    success: {
-      dark: "#388E3C",
-      main: "#66BB6A",
-      light: "#81C784",
-      contrast: "#FFFFFF",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #66BB6A",
-      outlinedHoverBackground: "rgba(102, 187, 106, 0.5)",
-      outlinedRestingBackground: "rgba(102, 187, 106, 0.08)",
-    },
-    warning: {
-      dark: "#F57C00",
-      main: "#FF9800",
-      light: "#FFB74D",
-      contrast: "#FFFFFF",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #FF9800",
-      outlinedHoverBackground: "rgba(255, 152, 0, 0.08)",
-      outlinedRestingBackground: "rgba(255, 152, 0, 0.05)",
-    },
-    error: {
-      dark: "#D32F2F",
-      main: "#F44336",
-      light: "#E57373",
-      contrast: "#FFFFFF",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #F44336",
-      outlinedHoverBackground: "rgba(244, 67, 54, 0.08)",
-      outlinedRestingBackground: "rgba(244, 67, 54, 0.05)",
-    },
-    info: {
-      dark: "#1976D2",
-      main: "#2196F3",
-      light: "#64B5F6",
-      contrast: "#FFFFFF",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #2196F3",
-      outlinedHoverBackground: "rgba(33, 150, 243, 0.08)",
-      outlinedRestingBackground: "rgba(33, 150, 243, 0.05)",
-    },
-    text: {
-      primary: "#FFFFFF",
-      secondary: "rgba(255, 255, 255, 0.7)",
-      disabled: "rgba(255, 255, 255, 0.5)",
-    },
-    action: {
-      active: "rgba(255, 255, 255, 0.56)",
-      hover: "rgba(255, 255, 255, 0.32)",
-      selected: "rgba(255, 255, 255, 0.16)",
-      disabled: "rgba(255, 255, 255, 0.3)",
-      disabledBackground: "rgba(255, 255, 255, 0.12)",
-      focus: "rgba(255, 255, 255, 0.12)",
-    },
-    divider: "rgba(255, 255, 255, 0.12)",
-    outlineBorder: "#222333",
-    standardFieldLine: "#222333",
-    backdrop: "rgba(0, 0, 0, 0.5)",
-    activeRating: "#FFB400",
-    snackbar: "#FFFFFF",
-  },
-});
-
-export default theme;