From dc0e93f9210d62b241859e4e86d673e69e6c59fb Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 5 Sep 2024 11:07:15 +0200
Subject: [PATCH 1/8] Complete button styles and fix table buttons

---
 src/client/src/AppTheme.ts                    | 125 +++++++++++++-----
 src/client/src/components/buttons/buttons.tsx |  11 +-
 .../overview/boreholeTable/bottomBar.tsx      |   5 +-
 3 files changed, 105 insertions(+), 36 deletions(-)

diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
index 99a8e7225..6cf12b8d7 100644
--- a/src/client/src/AppTheme.ts
+++ b/src/client/src/AppTheme.ts
@@ -125,43 +125,100 @@ export const theme = createTheme({
           "&:hover": {
             boxShadow: "none",
           },
-        },
-        contained: {
-          backgroundColor: "#337083",
-          "&:hover": {
-            backgroundColor: "#295969",
-          },
           "&:focus-visible": {
-            backgroundColor: "#295969",
             boxShadow: "0px 0px 0px 3px #8655F6",
           },
-          "&:active": {
-            backgroundColor: "#1F444F",
-          },
-          "&:disabled": {
-            backgroundColor: "#C1D3D9",
-          },
-        },
-        outlined: {
-          color: "#337083",
-          backgroundColor: "#FFFFFF",
-          "&:hover": {
-            color: "#295969",
-            backgroundColor: "#D6E2E6",
-          },
-          "&:focus-visible": {
-            color: "#295969",
-            backgroundColor: "#D6E2E6",
-            boxShadow: "0px 0px 0px 3px #8655F6",
-          },
-          "&:active": {
-            color: "#1F444F",
-            backgroundColor: "#ADC6CD",
-          },
-          "&:disabled": {
-            backgroundColor: "#FFFFFF",
-            color: "#C1D3D9",
-          },
+          variants: [
+            {
+              props: { variant: "contained", color: "primary" },
+              style: {
+                backgroundColor: "#337083",
+                "&:hover": {
+                  backgroundColor: "#295969",
+                },
+                "&:focus-visible": {
+                  backgroundColor: "#295969",
+                },
+                "&:active": {
+                  backgroundColor: "#1F444F",
+                },
+                "&:disabled": {
+                  backgroundColor: "#C1D3D9",
+                },
+              },
+            },
+            {
+              props: { variant: "outlined", color: "primary" },
+              style: {
+                color: "#337083",
+                backgroundColor: "#FFFFFF",
+                "&:hover": {
+                  color: "#295969",
+                  backgroundColor: "#D6E2E6",
+                },
+                "&:focus-visible": {
+                  color: "#295969",
+                  backgroundColor: "#D6E2E6",
+                },
+                "&:active": {
+                  color: "#1F444F",
+                  backgroundColor: "#ADC6CD",
+                },
+                "&:disabled": {
+                  backgroundColor: "#FFFFFF",
+                },
+              },
+            },
+            {
+              props: { variant: "outlined", color: "secondary" },
+              style: {
+                backgroundColor: "rgba(0,0,0,0)",
+                color: "#337083",
+                borderColor: "#337083",
+                "&:hover": {
+                  color: "#2F4356",
+                  backgroundColor: "#D6E2E6",
+                  borderColor: "#2F4356",
+                },
+                "&:focus-visible": {
+                  color: "#295969",
+                  backgroundColor: "#D6E2E6",
+                  borderColor: "#295969",
+                },
+                "&:active": {
+                  color: "#1F444F",
+                  backgroundColor: "#ADC6CD",
+                  borderColor: "#1F444F",
+                },
+                "&:disabled": {
+                  backgroundColor: "#FFFFFF",
+                  borderColor: "#FFFFFF",
+                },
+              },
+            },
+            {
+              props: { variant: "text", color: "secondary" },
+              style: {
+                backgroundColor: "rgba(0,0,0,0)",
+                color: "#337083",
+                "&:hover": {
+                  color: "#2F4356",
+                  backgroundColor: "#D6E2E6",
+                },
+                "&:focus-visible": {
+                  color: "#295969",
+                  backgroundColor: "#D6E2E6",
+                },
+                "&:active": {
+                  color: "#1F444F",
+                  backgroundColor: "#ADC6CD",
+                },
+                "&:disabled": {
+                  backgroundColor: "rgba(0,0,0,0)",
+                },
+              },
+            },
+          ],
         },
       },
     },
diff --git a/src/client/src/components/buttons/buttons.tsx b/src/client/src/components/buttons/buttons.tsx
index bcb5810ee..4ab92633e 100644
--- a/src/client/src/components/buttons/buttons.tsx
+++ b/src/client/src/components/buttons/buttons.tsx
@@ -43,6 +43,7 @@ export const BulkEditButton = forwardRef<HTMLButtonElement, ButtonProps>((props,
       {...props}
       label="bulkEditing"
       variant={props.variant ?? "outlined"}
+      color="secondary"
       icon={<EditIcon />}
     />
   );
@@ -79,5 +80,13 @@ export const AcceptButton = forwardRef<HTMLButtonElement, ButtonProps>((props, r
 });
 
 export const DeleteButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  return <BdmsBaseButton ref={ref} {...props} variant={props.variant ?? "outlined"} icon={<TrashIcon />} />;
+  return (
+    <BdmsBaseButton
+      ref={ref}
+      {...props}
+      variant={props.variant ?? "outlined"}
+      color={props.color ?? "primary"}
+      icon={<TrashIcon />}
+    />
+  );
 });
diff --git a/src/client/src/pages/overview/boreholeTable/bottomBar.tsx b/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
index 3d9e9b373..4054498d3 100644
--- a/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
+++ b/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
@@ -92,6 +92,7 @@ const BottomBar = ({
         <Stack direction="row" spacing={1} alignItems="center">
           <DeleteButton
             label="delete"
+            color="secondary"
             onClick={() =>
               showPrompt(t("deleteBoreholesMessage", { count: selectionModel.length }), [
                 {
@@ -106,7 +107,9 @@ const BottomBar = ({
               ])
             }
           />
-          {selectionModel.length === 1 && <CopyButton onClick={() => showCopyPromptForSelectedWorkgroup()} />}
+          {selectionModel.length === 1 && (
+            <CopyButton color="secondary" onClick={() => showCopyPromptForSelectedWorkgroup()} />
+          )}
           <BulkEditButton label={"bulkEditing"} onClick={bulkEditSelected} />
           <Typography variant="subtitle1"> {t("selectedCount", { count: selectionModel.length })}</Typography>
         </Stack>

From 737d52c8e6866934e84cdcebe89bbd640b576835 Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 5 Sep 2024 11:08:12 +0200
Subject: [PATCH 2/8] Use Mui spacing system for buttons

---
 .../src/components/dataCard/dataCard.jsx      |  2 +-
 .../multiple/multipleForm.jsx                 |  9 ++--
 src/client/src/pages/detail/detailHeader.tsx  | 52 ++++++++++---------
 .../detail/form/completion/completion.jsx     |  1 -
 .../infoCheckBox/infoCheckBox.jsx             |  6 +--
 5 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/client/src/components/dataCard/dataCard.jsx b/src/client/src/components/dataCard/dataCard.jsx
index 4aeb4de5b..de4f454b4 100644
--- a/src/client/src/components/dataCard/dataCard.jsx
+++ b/src/client/src/components/dataCard/dataCard.jsx
@@ -62,7 +62,7 @@ export const DataCardButtonContainer = forwardRef((props, ref) => {
         marginTop: "15px",
         marginRight: "10px",
       }}>
-      <Stack direction="row" justifyContent="flex-end" alignItems="center" gap="5px">
+      <Stack direction="row" justifyContent="flex-end" alignItems="center" gap={2}>
         {props.children}
       </Stack>
     </Box>
diff --git a/src/client/src/components/legacyComponents/multiple/multipleForm.jsx b/src/client/src/components/legacyComponents/multiple/multipleForm.jsx
index 600edf4c7..3c65c7edf 100644
--- a/src/client/src/components/legacyComponents/multiple/multipleForm.jsx
+++ b/src/client/src/components/legacyComponents/multiple/multipleForm.jsx
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { withTranslation } from "react-i18next";
 import _ from "lodash";
 import { produce } from "immer";
-import { FormControl, FormControlLabel, Radio, RadioGroup } from "@mui/material";
+import { FormControl, FormControlLabel, Radio, RadioGroup, Stack } from "@mui/material";
 import DomainDropdown from "../domain/dropdown/domainDropdown.jsx";
 import DomainTree from "../domain/tree/domainTree.jsx";
 import DateField from "../dateField.jsx";
@@ -386,10 +386,7 @@ class MultipleForm extends React.Component {
             {this.getDomain("chronostratigraphy_top_bedrock", "custom.chronostratigraphy_top_bedrock")}
           </Form>
         </div>
-        <div
-          style={{
-            textAlign: "right",
-          }}>
+        <Stack direction="row" justifyContent="flex-end" spacing={2}>
           <CancelButton
             onClick={() => {
               this.props.undo();
@@ -401,7 +398,7 @@ class MultipleForm extends React.Component {
               this.save();
             }}
           />
-        </div>
+        </Stack>
       </div>
     );
   }
diff --git a/src/client/src/pages/detail/detailHeader.tsx b/src/client/src/pages/detail/detailHeader.tsx
index 5d5b54a8e..562d0adfa 100644
--- a/src/client/src/pages/detail/detailHeader.tsx
+++ b/src/client/src/pages/detail/detailHeader.tsx
@@ -84,32 +84,34 @@ const DetailHeader = ({ editingEnabled, setEditingEnabled, editableByCurrentUser
           icon={borehole?.data.workflow?.finished != null ? <CheckmarkIcon /> : <div />}
         />
       </Stack>
-      {editableByCurrentUser &&
-        (editingEnabled ? (
-          <>
-            <DeleteButton
-              label="deleteBorehole"
-              onClick={() =>
-                showPrompt(t("deleteBoreholesMessage", { count: 1 }), [
-                  {
-                    label: t("cancel"),
-                  },
-                  {
-                    label: t("delete"),
-                    icon: <TrashIcon />,
-                    variant: "contained",
-                    action: () => {
-                      handleDelete();
+      <Stack direction="row" gap={2}>
+        {editableByCurrentUser &&
+          (editingEnabled ? (
+            <>
+              <DeleteButton
+                label="deleteBorehole"
+                onClick={() =>
+                  showPrompt(t("deleteBoreholesMessage", { count: 1 }), [
+                    {
+                      label: t("cancel"),
                     },
-                  },
-                ])
-              }
-            />
-            <EndEditButton onClick={stopEditing} sx={{ marginLeft: "5px" }} />
-          </>
-        ) : (
-          <EditButton onClick={startEditing} />
-        ))}
+                    {
+                      label: t("delete"),
+                      icon: <TrashIcon />,
+                      variant: "contained",
+                      action: () => {
+                        handleDelete();
+                      },
+                    },
+                  ])
+                }
+              />
+              <EndEditButton onClick={stopEditing} />
+            </>
+          ) : (
+            <EditButton onClick={startEditing} />
+          ))}
+      </Stack>
     </Stack>
   );
 };
diff --git a/src/client/src/pages/detail/form/completion/completion.jsx b/src/client/src/pages/detail/form/completion/completion.jsx
index 571115c57..b006fd7a4 100644
--- a/src/client/src/pages/detail/form/completion/completion.jsx
+++ b/src/client/src/pages/detail/form/completion/completion.jsx
@@ -330,7 +330,6 @@ const Completion = props => {
             {isEditable && (
               <AddButton
                 label="addCompletion"
-                sx={{ marginRight: "5px" }}
                 disabled={state.selected?.id === 0}
                 onClick={e => {
                   handleCompletionChanged(e, -1);
diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx
index 1091c1957..1e443434b 100644
--- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx
+++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx
@@ -6,6 +6,7 @@ import { CopyButton, DeleteButton } from "../../../../../../../components/button
 import { PromptContext } from "../../../../../../../components/prompt/promptContext";
 import { useContext } from "react";
 import TrashIcon from "../../../../../../../assets/icons/trash.svg?react";
+import { Stack } from "@mui/material";
 
 const InfoCheckBox = props => {
   const { profileInfo, updateChange, isEditable, onUpdated } = props.data;
@@ -28,7 +29,7 @@ const InfoCheckBox = props => {
         {t("mainStratigraphy")}
       </Styled.FormContainer>
       {isEditable && (
-        <div style={{ display: "flex" }} data-cy="clone-and-delete-buttons">
+        <Stack direction="row" data-cy="clone-and-delete-buttons" gap={2} mr={1}>
           <CopyButton
             onClick={() => {
               copyStratigraphy(profileInfo?.id).then(() => {
@@ -55,9 +56,8 @@ const InfoCheckBox = props => {
                 },
               ]);
             }}
-            sx={{ marginLeft: "5px" }}
           />
-        </div>
+        </Stack>
       )}
     </Styled.CheckBoxContainer>
   );

From 74b2cc752d09be9d5df61e7dfb64aa3be9233b7f Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 5 Sep 2024 12:00:02 +0200
Subject: [PATCH 3/8] Add button variant

---
 src/client/src/AppTheme.ts                    | 22 +++++++++++++++++++
 .../overview/boreholeTable/bottomBar.tsx      |  2 ++
 2 files changed, 24 insertions(+)

diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
index 6cf12b8d7..6bae85b36 100644
--- a/src/client/src/AppTheme.ts
+++ b/src/client/src/AppTheme.ts
@@ -196,6 +196,28 @@ export const theme = createTheme({
                 },
               },
             },
+            {
+              props: { variant: "text", color: "primary" },
+              style: {
+                backgroundColor: "#FFFFFF",
+                color: "#337083",
+                "&:hover": {
+                  color: "#2F4356",
+                  backgroundColor: "#D6E2E6",
+                },
+                "&:focus-visible": {
+                  color: "#295969",
+                  backgroundColor: "#D6E2E6",
+                },
+                "&:active": {
+                  color: "#1F444F",
+                  backgroundColor: "#ADC6CD",
+                },
+                "&:disabled": {
+                  backgroundColor: "#FFFFFF",
+                },
+              },
+            },
             {
               props: { variant: "text", color: "secondary" },
               style: {
diff --git a/src/client/src/pages/overview/boreholeTable/bottomBar.tsx b/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
index 4054498d3..a19bf66ca 100644
--- a/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
+++ b/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
@@ -118,6 +118,8 @@ const BottomBar = ({
       )}
       <Box sx={{ flex: 1 }}></Box>
       <Button
+        variant="text"
+        color="secondary"
         onClick={() => toggleBottomDrawer(!bottomDrawerOpen)}
         data-cy="showTableButton"
         sx={{ fontWeight: "normal", fontSize: "14px" }}

From 2d388caff3b2d423c88fd9afa1ebf2bab1634b76 Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 5 Sep 2024 13:36:18 +0200
Subject: [PATCH 4/8] Fix test expectation

---
 src/client/cypress/e2e/filters/polygonFilter.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/cypress/e2e/filters/polygonFilter.cy.js b/src/client/cypress/e2e/filters/polygonFilter.cy.js
index 27ddc04d1..55f7b9867 100644
--- a/src/client/cypress/e2e/filters/polygonFilter.cy.js
+++ b/src/client/cypress/e2e/filters/polygonFilter.cy.js
@@ -1,7 +1,7 @@
 import { loginAsAdmin } from "../helpers/testHelpers.js";
 
 const buttonInactiveColor = "rgb(255, 255, 255)";
-const buttonActiveColor = "rgb(28, 40, 52)";
+const buttonActiveColor = "rgb(214, 226, 230)";
 
 function drawPolygon() {
   const canvas = cy.get("canvas");

From b335bc9a09cf7820b4517d6c08c6c59b81e78d6d Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 5 Sep 2024 14:19:25 +0200
Subject: [PATCH 5/8] Fix theme

---
 src/client/src/AppTheme.ts                    |  4 ++--
 src/client/src/components/buttons/buttons.tsx | 10 ++--------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
index 2b71c4985..1b7d19775 100644
--- a/src/client/src/AppTheme.ts
+++ b/src/client/src/AppTheme.ts
@@ -191,8 +191,8 @@ export const theme = createTheme({
                   borderColor: "#1F444F",
                 },
                 "&:disabled": {
-                  backgroundColor: "#FFFFFF",
-                  borderColor: "#FFFFFF",
+                  backgroundColor: "rgba(0,0,0,0)",
+                  borderColor: "#828E94",
                 },
               },
             },
diff --git a/src/client/src/components/buttons/buttons.tsx b/src/client/src/components/buttons/buttons.tsx
index 44611ee08..effb59b05 100644
--- a/src/client/src/components/buttons/buttons.tsx
+++ b/src/client/src/components/buttons/buttons.tsx
@@ -38,7 +38,7 @@ export const BulkEditButton = forwardRef<HTMLButtonElement, ButtonProps>((props,
       {...props}
       label="bulkEditing"
       variant={props.variant ?? "outlined"}
-      color="secondary"
+      color={props.color ?? "secondary"}
       icon={<Pencil />}
     />
   );
@@ -70,12 +70,6 @@ export const AcceptButton = forwardRef<HTMLButtonElement, ButtonProps>((props, r
 
 export const DeleteButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   return (
-    <BdmsBaseButton
-      ref={ref}
-      {...props}
-      variant={props.variant ?? "outlined"}
-      color={props.color ?? "primary"}
-      icon={<Trash2 />}
-    />
+    <BdmsBaseButton ref={ref} {...props} variant={props.variant ?? "outlined"} color={props.color} icon={<Trash2 />} />
   );
 });

From fc91321c71c80e1a0606fc23213f3cedc0cb1292 Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 5 Sep 2024 15:37:54 +0200
Subject: [PATCH 6/8] Update src/client/src/components/buttons/buttons.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Roswita Tschümperlin <108136714+tschumpr@users.noreply.github.com>
---
 src/client/src/components/buttons/buttons.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/src/components/buttons/buttons.tsx b/src/client/src/components/buttons/buttons.tsx
index effb59b05..386345163 100644
--- a/src/client/src/components/buttons/buttons.tsx
+++ b/src/client/src/components/buttons/buttons.tsx
@@ -70,6 +70,6 @@ export const AcceptButton = forwardRef<HTMLButtonElement, ButtonProps>((props, r
 
 export const DeleteButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   return (
-    <BdmsBaseButton ref={ref} {...props} variant={props.variant ?? "outlined"} color={props.color} icon={<Trash2 />} />
+    <BdmsBaseButton ref={ref} {...props} variant={props.variant ?? "outlined"} icon={<Trash2 />} />
   );
 });

From 60127ef8e3cd11f2b528e6fbec50f6bcf3d11975 Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 5 Sep 2024 15:40:07 +0200
Subject: [PATCH 7/8] Fix merge error

---
 src/client/src/pages/overview/boreholeTable/bottomBar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/client/src/pages/overview/boreholeTable/bottomBar.tsx b/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
index d5c028222..4a77fa0d1 100644
--- a/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
+++ b/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
@@ -116,7 +116,6 @@ const BottomBar = ({
       <Button
         variant="text"
         color="secondary"
-        onClick={() => toggleBottomDrawer(!bottomDrawerOpen)}
         onClick={() => setBottomDrawerOpen(!bottomDrawerOpen)}
         data-cy="showTableButton"
         sx={{ fontWeight: "normal", fontSize: "14px" }}

From 47c5e5378df562dfbe34f4586535fab2b76be69a Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 5 Sep 2024 15:49:13 +0200
Subject: [PATCH 8/8] Fix prettier error

---
 src/client/src/components/buttons/buttons.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/client/src/components/buttons/buttons.tsx b/src/client/src/components/buttons/buttons.tsx
index 386345163..bf759b389 100644
--- a/src/client/src/components/buttons/buttons.tsx
+++ b/src/client/src/components/buttons/buttons.tsx
@@ -69,7 +69,5 @@ export const AcceptButton = forwardRef<HTMLButtonElement, ButtonProps>((props, r
 });
 
 export const DeleteButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  return (
-    <BdmsBaseButton ref={ref} {...props} variant={props.variant ?? "outlined"} icon={<Trash2 />} />
-  );
+  return <BdmsBaseButton ref={ref} {...props} variant={props.variant ?? "outlined"} icon={<Trash2 />} />;
 });