Fix button styles in table (#1489)

swisstopo · Sep 5, 2024 · 69f5f4f · 69f5f4f
2 parents 78213cc + 47c5e53
commit 69f5f4f
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 73 deletions.
diff --git 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");

diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
@@ -125,43 +125,122 @@ 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: "rgba(0,0,0,0)",
+                  borderColor: "#828E94",
+                },
+              },
+            },
+            {
+              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: {
+                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
@@ -33,7 +33,14 @@ export const EditButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref
 
 export const BulkEditButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   return (
-    <BdmsBaseButton ref={ref} {...props} label="bulkEditing" variant={props.variant ?? "outlined"} icon={<Pencil />} />
+    <BdmsBaseButton
+      ref={ref}
+      {...props}
+      label="bulkEditing"
+      variant={props.variant ?? "outlined"}
+      color={props.color ?? "secondary"}
+      icon={<Pencil />}
+    />
   );
 });
 

diff --git 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
@@ -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";
@@ -387,10 +387,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();
@@ -402,7 +399,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
@@ -82,32 +82,34 @@ const DetailHeader = ({ editingEnabled, setEditingEnabled, editableByCurrentUser
           icon={borehole?.data.workflow?.finished != null ? <Check /> : <div />}
         />
       </Stack>
-      {editableByCurrentUser &&
-        (editingEnabled ? (
-          <>
-            <DeleteButton
-              label="deleteBorehole"
-              onClick={() =>
-                showPrompt(t("deleteBoreholesMessage", { count: 1 }), [
-                  {
-                    label: t("cancel"),
-                  },
-                  {
-                    label: t("delete"),
-                    icon: <Trash2 />,
-                    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: <Trash2 />,
+                      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
@@ -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/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx b/.../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 { Trash2 } from "lucide-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>
   );

diff --git a/src/client/src/pages/overview/boreholeTable/bottomBar.tsx b/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
@@ -88,6 +88,7 @@ const BottomBar = ({
         <Stack direction="row" spacing={1} alignItems="center">
           <DeleteButton
             label="delete"
+            color="secondary"
             onClick={() =>
               showPrompt(t("deleteBoreholesMessage", { count: selectionModel.length }), [
                 {
@@ -102,7 +103,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>
@@ -111,6 +114,8 @@ const BottomBar = ({
       )}
       <Box sx={{ flex: 1 }}></Box>
       <Button
+        variant="text"
+        color="secondary"
         onClick={() => setBottomDrawerOpen(!bottomDrawerOpen)}
         data-cy="showTableButton"
         sx={{ fontWeight: "normal", fontSize: "14px" }}