From 28cf78560732bee523274c297dab7ad3cd6a241a Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Tue, 18 Jun 2024 09:31:45 +0200
Subject: [PATCH] feat(ui-model): update style

---
 .../explore/Modelization/Areas/AreasTab.tsx   | 19 +------
 .../Areas/Hydro/InflowStructure/index.tsx     |  3 +-
 .../Areas/Hydro/ManagementOptions/index.tsx   |  1 -
 .../Modelization/Areas/Hydro/index.tsx        |  7 +--
 .../Modelization/Areas/Renewables/Form.tsx    | 50 +++++++++--------
 .../Modelization/Areas/Storages/Form.tsx      | 54 ++++++++++---------
 .../Modelization/Areas/Thermal/Form.tsx       | 46 +++++++++-------
 .../explore/Modelization/Areas/index.tsx      | 20 +++----
 .../BindingConstView/index.tsx                |  4 +-
 .../Modelization/BindingConstraints/index.tsx | 16 +++---
 .../Modelization/Links/LinkView/index.tsx     | 21 +++-----
 .../explore/Modelization/Links/index.tsx      | 16 +++---
 webapp/src/components/App/index.tsx           |  8 +--
 13 files changed, 127 insertions(+), 138 deletions(-)

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/AreasTab.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/AreasTab.tsx
index cb54e2fb30..0bc26081dc 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/AreasTab.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/AreasTab.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useMemo } from "react";
 import { useLocation, useNavigate, useOutletContext } from "react-router-dom";
-import { Paper } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { StudyMetadata } from "../../../../../../common/types";
 import TabWrapper from "../../TabWrapper";
@@ -83,23 +82,7 @@ function AreasTab({ renewablesClustering }: Props) {
       }));
   }, [study.id, areaId, renewablesClustering, t, study.version]);
 
-  return (
-    <Paper
-      sx={{
-        width: "100%",
-        height: "100%",
-        flexGrow: 1,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        boxSizing: "border-box",
-        overflow: "hidden",
-      }}
-    >
-      <TabWrapper study={study} tabList={tabList} />
-    </Paper>
-  );
+  return <TabWrapper study={study} tabList={tabList} />;
 }
 
 export default AreasTab;
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx
index d5f38785b8..79bef831a5 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx
@@ -38,7 +38,8 @@ function InflowStructure() {
       onSubmit={handleSubmit}
       miniSubmitButton
       enableUndoRedo
-      sx={{ display: "flex", alignItems: "center", ".Form__Footer": { p: 0 } }}
+      hideFooterDivider
+      sx={{ flexDirection: "row", alignItems: "center" }}
     >
       {({ control }) => (
         <NumberFE
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/ManagementOptions/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/ManagementOptions/index.tsx
index f9372da6df..1c1cd56489 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/ManagementOptions/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/ManagementOptions/index.tsx
@@ -36,7 +36,6 @@ function ManagementOptions() {
         defaultValues: () => getManagementOptionsFormFields(studyId, areaId),
       }}
       onSubmit={handleSubmit}
-      sx={{ pb: 2 }}
       enableUndoRedo
     >
       <Fields />
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/index.tsx
index ae0cafa00e..cca7f9519a 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/index.tsx
@@ -2,7 +2,6 @@ import { useMemo } from "react";
 import { useOutletContext } from "react-router";
 import { StudyMetadata } from "../../../../../../../common/types";
 import TabWrapper from "../../../TabWrapper";
-import { Root } from "./style";
 import useAppSelector from "../../../../../../../redux/hooks/useAppSelector";
 import { getCurrentAreaId } from "../../../../../../../redux/selectors";
 
@@ -37,11 +36,7 @@ function Hydro() {
   // JSX
   ////////////////////////////////////////////////////////////////
 
-  return (
-    <Root>
-      <TabWrapper study={study} tabList={tabList} />
-    </Root>
-  );
+  return <TabWrapper study={study} tabList={tabList} />;
 }
 
 export default Hydro;
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/Form.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/Form.tsx
index 30dc1bc7b7..fe39be2fc8 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/Form.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/Form.tsx
@@ -18,7 +18,7 @@ import { getCurrentAreaId } from "../../../../../../../redux/selectors";
 import useNavigateOnCondition from "../../../../../../../hooks/useNavigateOnCondition";
 import { nameToId } from "../../../../../../../services/utils";
 
-function RenewablesForm() {
+function Renewables() {
   const { t } = useTranslation();
   const { study } = useOutletContext<{ study: StudyMetadata }>();
   const navigate = useNavigate();
@@ -51,37 +51,43 @@ function RenewablesForm() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Box sx={{ width: 1, p: 1, overflow: "auto" }}>
+    <Box sx={{ display: "flex", flexDirection: "column", overflow: "auto" }}>
       <Button
         color="secondary"
         size="small"
         onClick={() => navigate("../renewables")}
         startIcon={<ArrowBackIcon color="secondary" />}
-        sx={{ alignSelf: "flex-start", px: 0 }}
+        sx={{ alignSelf: "flex-start", mb: 1 }}
       >
         {t("button.back")}
       </Button>
-      <Form
-        key={study.id + areaId}
-        config={{ defaultValues }}
-        onSubmit={handleSubmit}
-        enableUndoRedo
-      >
-        <Fields />
-      </Form>
-      <Box
-        sx={{
-          width: 1,
-          display: "flex",
-          flexDirection: "column",
-          py: 3,
-          height: "75vh",
-        }}
-      >
-        <Matrix study={study} areaId={areaId} clusterId={nameToId(clusterId)} />
+      <Box sx={{ overflow: "auto" }}>
+        <Form
+          key={study.id + areaId}
+          config={{ defaultValues }}
+          onSubmit={handleSubmit}
+          enableUndoRedo
+        >
+          <Fields />
+        </Form>
+        <Box
+          sx={{
+            width: 1,
+            display: "flex",
+            flexDirection: "column",
+            py: 3,
+            height: "75vh",
+          }}
+        >
+          <Matrix
+            study={study}
+            areaId={areaId}
+            clusterId={nameToId(clusterId)}
+          />
+        </Box>
       </Box>
     </Box>
   );
 }
 
-export default RenewablesForm;
+export default Renewables;
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/Form.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/Form.tsx
index 40aa166664..38a4bb2bc2 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/Form.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/Form.tsx
@@ -15,7 +15,7 @@ import Matrix from "./Matrix";
 import useNavigateOnCondition from "../../../../../../../hooks/useNavigateOnCondition";
 import { nameToId } from "../../../../../../../services/utils";
 
-function StorageForm() {
+function Storages() {
   const { t } = useTranslation();
   const { study } = useOutletContext<{ study: StudyMetadata }>();
   const navigate = useNavigate();
@@ -63,39 +63,45 @@ function StorageForm() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Box sx={{ width: 1, p: 1, overflow: "auto" }}>
+    <Box sx={{ display: "flex", flexDirection: "column", overflow: "auto" }}>
       <Button
         color="secondary"
         size="small"
         onClick={() => navigate("../storages")}
         startIcon={<ArrowBackIcon color="secondary" />}
-        sx={{ alignSelf: "flex-start", px: 0 }}
+        sx={{ alignSelf: "flex-start", mb: 1 }}
       >
         {t("button.back")}
       </Button>
-      <Form
-        key={study.id + areaId}
-        config={{
-          defaultValues,
-        }}
-        onSubmit={handleSubmit}
-        enableUndoRedo
-      >
-        <Fields />
-      </Form>
-      <Box
-        sx={{
-          width: 1,
-          display: "flex",
-          flexDirection: "column",
-          py: 3,
-          height: "75vh",
-        }}
-      >
-        <Matrix study={study} areaId={areaId} storageId={nameToId(storageId)} />
+      <Box sx={{ overflow: "auto" }}>
+        <Form
+          key={study.id + areaId}
+          config={{
+            defaultValues,
+          }}
+          onSubmit={handleSubmit}
+          enableUndoRedo
+        >
+          <Fields />
+        </Form>
+        <Box
+          sx={{
+            width: 1,
+            display: "flex",
+            flexDirection: "column",
+            py: 3,
+            height: "75vh",
+          }}
+        >
+          <Matrix
+            study={study}
+            areaId={areaId}
+            storageId={nameToId(storageId)}
+          />
+        </Box>
       </Box>
     </Box>
   );
 }
 
-export default StorageForm;
+export default Storages;
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Form.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Form.tsx
index 810338b581..e37f4749dd 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Form.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Form.tsx
@@ -49,34 +49,40 @@ function ThermalForm() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Box sx={{ width: 1, p: 1, overflow: "auto" }}>
+    <Box sx={{ display: "flex", flexDirection: "column", overflow: "auto" }}>
       <Button
         color="secondary"
         size="small"
         onClick={() => navigate("../thermal")}
         startIcon={<ArrowBackIcon color="secondary" />}
-        sx={{ alignSelf: "flex-start", px: 0 }}
+        sx={{ alignSelf: "flex-start", mb: 1 }}
       >
         {t("button.back")}
       </Button>
-      <Form
-        key={study.id + areaId}
-        config={{ defaultValues }}
-        onSubmit={handleSubmit}
-        enableUndoRedo
-      >
-        <Fields />
-      </Form>
-      <Box
-        sx={{
-          width: 1,
-          display: "flex",
-          flexDirection: "column",
-          py: 3,
-          height: "75vh",
-        }}
-      >
-        <Matrix study={study} areaId={areaId} clusterId={nameToId(clusterId)} />
+      <Box sx={{ overflow: "auto" }}>
+        <Form
+          key={study.id + areaId}
+          config={{ defaultValues }}
+          onSubmit={handleSubmit}
+          enableUndoRedo
+        >
+          <Fields />
+        </Form>
+        <Box
+          sx={{
+            width: 1,
+            display: "flex",
+            flexDirection: "column",
+            py: 3,
+            height: "75vh",
+          }}
+        >
+          <Matrix
+            study={study}
+            areaId={areaId}
+            clusterId={nameToId(clusterId)}
+          />
+        </Box>
       </Box>
     </Box>
   );
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/index.tsx
index d5926b6e63..8868838934 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/index.tsx
@@ -1,4 +1,3 @@
-import { Box } from "@mui/material";
 import { useOutletContext } from "react-router";
 import { StudyMetadata } from "../../../../../../common/types";
 import SimpleContent from "../../../../../common/page/SimpleContent";
@@ -14,6 +13,7 @@ import { setCurrentArea } from "../../../../../../redux/ducks/studySyntheses";
 import useAppSelector from "../../../../../../redux/hooks/useAppSelector";
 import UsePromiseCond from "../../../../../common/utils/UsePromiseCond";
 import SplitView from "../../../../../common/SplitView";
+import ViewWrapper from "../../../../../common/page/ViewWrapper";
 
 function Areas() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -38,14 +38,14 @@ function Areas() {
 
   return (
     <SplitView id="areas" sizes={[10, 90]}>
-      <Box>
-        <AreaPropsView
-          studyId={study.id}
-          onClick={handleAreaClick}
-          currentArea={currentArea?.id}
-        />
-      </Box>
-      <Box>
+      {/* Left */}
+      <AreaPropsView
+        studyId={study.id}
+        onClick={handleAreaClick}
+        currentArea={currentArea?.id}
+      />
+      {/* Right */}
+      <ViewWrapper>
         <UsePromiseCond
           response={res}
           ifResolved={(renewablesClustering) =>
@@ -58,7 +58,7 @@ function Areas() {
             )
           }
         />
-      </Box>
+      </ViewWrapper>
     </SplitView>
   );
 }
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx
index d889ae3173..43dd656e8a 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx
@@ -113,14 +113,14 @@ function BindingConstView({ constraintId }: Props) {
         height: 1,
         display: "flex",
         flexDirection: "column",
-        overflow: "hidden",
+        overflow: "auto",
       }}
     >
       <UsePromiseCond
         response={mergeResponses(constraint, linksAndClusters)}
         ifResolved={([defaultValues, linksAndClusters]) => (
           <>
-            <Box sx={{ position: "absolute", right: 15 }}>
+            <Box sx={{ alignSelf: "flex-end" }}>
               <Button
                 variant="outlined"
                 size="small"
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/index.tsx
index 01141aab09..259a0351d9 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/index.tsx
@@ -63,14 +63,14 @@ function BindingConstraints() {
       ifPending={() => <SimpleLoader />}
       ifResolved={(data) => (
         <SplitView id="binding-constraints" sizes={[10, 90]}>
-          <Box>
-            <BindingConstPropsView // TODO rename ConstraintsList
-              list={data}
-              onClick={handleConstraintChange}
-              currentConstraint={currentConstraintId}
-              reloadConstraintsList={constraints.reload}
-            />
-          </Box>
+          {/* Left */}
+          <BindingConstPropsView // TODO rename ConstraintsList
+            list={data}
+            onClick={handleConstraintChange}
+            currentConstraint={currentConstraintId}
+            reloadConstraintsList={constraints.reload}
+          />
+          {/* Right */}
           <Box>
             {data.length > 0 && currentConstraintId ? (
               <BindingConstView constraintId={currentConstraintId} />
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Links/LinkView/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Links/LinkView/index.tsx
index fd8c976d9e..b2cf965232 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Links/LinkView/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Links/LinkView/index.tsx
@@ -1,4 +1,3 @@
-import { Box, Paper } from "@mui/material";
 import { useOutletContext } from "react-router";
 import { LinkElement, StudyMetadata } from "../../../../../../../common/types";
 import usePromise from "../../../../../../../hooks/usePromise";
@@ -24,18 +23,14 @@ function LinkView(props: Props) {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Box sx={{ width: "100%", height: "100%", overflowY: "auto" }}>
-      <Paper sx={{ width: 1, height: 1, padding: 2, overflow: "auto" }}>
-        <UsePromiseCond
-          response={res}
-          ifResolved={(data) => (
-            <Form autoSubmit config={{ defaultValues: data }}>
-              <LinkForm link={link} study={study} />
-            </Form>
-          )}
-        />
-      </Paper>
-    </Box>
+    <UsePromiseCond
+      response={res}
+      ifResolved={(data) => (
+        <Form autoSubmit config={{ defaultValues: data }}>
+          <LinkForm link={link} study={study} />
+        </Form>
+      )}
+    />
   );
 }
 
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Links/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Links/index.tsx
index 0163d97940..e86d4b5a16 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Links/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Links/index.tsx
@@ -1,4 +1,3 @@
-import { Box } from "@mui/material";
 import { useOutletContext } from "react-router";
 import { StudyMetadata } from "../../../../../../common/types";
 import SimpleContent from "../../../../../common/page/SimpleContent";
@@ -10,6 +9,7 @@ import { setCurrentLink } from "../../../../../../redux/ducks/studySyntheses";
 import LinkView from "./LinkView";
 import UsePromiseCond from "../../../../../common/utils/UsePromiseCond";
 import SplitView from "../../../../../common/SplitView";
+import ViewWrapper from "../../../../../common/page/ViewWrapper";
 
 function Links() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -34,23 +34,21 @@ function Links() {
 
   return (
     <SplitView id="links" sizes={[10, 90]}>
-      <Box width="100%" height="100%">
-        <LinkPropsView studyId={study.id} onClick={handleLinkClick} />
-      </Box>
-      <Box>
+      {/* Left */}
+      <LinkPropsView studyId={study.id} onClick={handleLinkClick} />
+      {/* Right */}
+      <ViewWrapper>
         <UsePromiseCond
           response={res}
           ifResolved={(currentLink) =>
             currentLink ? (
-              <Box sx={{ width: 1, height: 1 }}>
-                <LinkView link={currentLink} />
-              </Box>
+              <LinkView link={currentLink} />
             ) : (
               <SimpleContent title="No Links" />
             )
           }
         />
-      </Box>
+      </ViewWrapper>
     </SplitView>
   );
 }
diff --git a/webapp/src/components/App/index.tsx b/webapp/src/components/App/index.tsx
index 9a3d442c18..35e1714e09 100644
--- a/webapp/src/components/App/index.tsx
+++ b/webapp/src/components/App/index.tsx
@@ -31,13 +31,11 @@ import XpansionSettings from "./Singlestudy/explore/Xpansion/Settings";
 import Capacities from "./Singlestudy/explore/Xpansion/Capacities";
 import Properties from "./Singlestudy/explore/Modelization/Areas/Properties";
 import Load from "./Singlestudy/explore/Modelization/Areas/Load";
-import Thermal from "./Singlestudy/explore/Modelization/Areas/Thermal";
 import Hydro from "./Singlestudy/explore/Modelization/Areas/Hydro";
 import MiscGen from "./Singlestudy/explore/Modelization/Areas/MiscGen";
 import Reserve from "./Singlestudy/explore/Modelization/Areas/Reserve";
 import Wind from "./Singlestudy/explore/Modelization/Areas/Wind";
 import Solar from "./Singlestudy/explore/Modelization/Areas/Solar";
-import Renewables from "./Singlestudy/explore/Modelization/Areas/Renewables";
 import ResultDetails from "./Singlestudy/explore/Results/ResultDetails";
 import Constraints from "./Singlestudy/explore/Xpansion/Constraints";
 import Weights from "./Singlestudy/explore/Xpansion/Weights";
@@ -51,8 +49,10 @@ import Allocation from "./Singlestudy/explore/Modelization/Areas/Hydro/Allocatio
 import Correlation from "./Singlestudy/explore/Modelization/Areas/Hydro/Correlation";
 import Storages from "./Singlestudy/explore/Modelization/Areas/Storages";
 import StorageForm from "./Singlestudy/explore/Modelization/Areas/Storages/Form";
+import Thermal from "./Singlestudy/explore/Modelization/Areas/Thermal";
 import ThermalForm from "./Singlestudy/explore/Modelization/Areas/Thermal/Form";
-import RenewablesForm from "./Singlestudy/explore/Modelization/Areas/Renewables/Form";
+import Renewables from "./Singlestudy/explore/Modelization/Areas/Renewables";
+import RenewableForm from "./Singlestudy/explore/Modelization/Areas/Renewables/Form";
 import SplitHydroMatrix from "./Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix";
 import CloseIcon from "@mui/icons-material/Close";
 
@@ -163,7 +163,7 @@ function App() {
                             <Route path="renewables" element={<Renewables />} />
                             <Route
                               path="renewables/:clusterId"
-                              element={<RenewablesForm />}
+                              element={<RenewableForm />}
                             />
                             <Route path="reserves" element={<Reserve />} />
                             <Route path="miscGen" element={<MiscGen />} />