Merge branch 'main' into fix-some-style

src/client/cypress/e2e/editor/lithologicalDescription.cy.js

@@ -88,7 +88,7 @@ describe("Tests for the lithological description column.", () => {
     // delete last layer
     cy.get('[data-cy="description-1"] [data-testid="DeleteIcon"] ').click();
 
-    deleteItem();
+    deleteItem("description-button-box");
     cy.wait("@lithological_description"); // delete request
     cy.wait("@lithological_description"); // updated get request
     cy.wait(5000);
@@ -119,7 +119,7 @@ describe("Tests for the lithological description column.", () => {
 
     // assert error message
     cy.get('[data-cy="description-1"]').contains("You are about to delete this layer, how do you want to proceed?");
-    deleteItem();
+    deleteItem("description-button-box");
     cy.wait("@lithological_description"); // delete request
     cy.wait("@lithological_description"); // updated get request
     cy.get('[data-cy="description-1"]').contains("There is an undefined interval in the sequence");

src/client/src/components/buttons/buttons.tsx

@@ -60,6 +60,6 @@ export const DeleteButton = forwardRef<HTMLButtonElement, ButtonProps>((props, r
   return <BdmsBaseButton ref={ref} {...props} variant="outlined" icon={<TrashIcon />} />;
 });
 
-export const DeletePrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  return <BdmsBaseButton ref={ref} {...props} variant="contained" icon={<TrashIcon />} />;
+export const SavePrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  return <BdmsBaseButton ref={ref} {...props} label="save" variant="contained" icon={<SaveIcon />} />;
 });

src/client/src/components/legacyComponents/multiple/multipleForm.jsx

@@ -4,16 +4,14 @@ 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 DomainDropdown from "../domain/dropdown/domainDropdown.jsx";
 import DomainTree from "../domain/tree/domainTree.jsx";
 import DateField from "../dateField.jsx";
 import TranslationText from "../translationText.jsx";
-
 import { Button, Form, Header, Input } from "semantic-ui-react";
-import { FormControl, FormControlLabel, Radio, RadioGroup } from "@mui/material";
-
 import { patchBoreholes } from "../../../api-lib/index.js";
+import { CancelButton, SavePrimaryButton } from "../../buttons/buttons";
 
 class MultipleForm extends React.Component {
   constructor(props) {
@@ -392,20 +390,14 @@ class MultipleForm extends React.Component {
           style={{
             textAlign: "right",
           }}>
-          <Button
-            negative
+          <CancelButton
             onClick={() => {
               this.props.undo();
-            }}>
-            Cancel
-          </Button>
-          <Button
+            }}></CancelButton>
+          <SavePrimaryButton
             onClick={() => {
               this.save();
-            }}
-            positive>
-            Save
-          </Button>
+            }}></SavePrimaryButton>
         </div>
       </div>
     );

src/client/src/pages/detail/attachments/table/filesTableComponent.jsx

@@ -1,9 +1,11 @@
 import PropTypes from "prop-types";
 import { withTranslation } from "react-i18next";
-import { Button, Checkbox, Icon, Table, TextArea } from "semantic-ui-react";
+import { Checkbox, Icon, Table, TextArea } from "semantic-ui-react";
 import DateText from "../../../../components/legacyComponents/dateText.js";
 import DownloadLink from "../downloadlink.jsx";
 import { downloadBoreholeAttachment } from "../../../../api/fetchApiV2.js";
+import { IconButton } from "@mui/material";
+import TrashIcon from "../../../../assets/icons/trash.svg?react";
 
 const FilesTableComponent = props => {
   const { t } = props;
@@ -89,17 +91,14 @@ const FilesTableComponent = props => {
               </Table.Cell>
               {props.unlocked === true ? (
                 <Table.Cell>
-                  <Button
-                    basic
-                    color="red"
-                    icon
+                  <IconButton
                     onClick={e => {
                       e.stopPropagation();
                       props.detachFile(props.id, boreholeFile.fileId);
                     }}
-                    size="mini">
-                    <Icon name="trash alternate outline" />
-                  </Button>
+                    color="error">
+                    <TrashIcon />
+                  </IconButton>
                 </Table.Cell>
               ) : null}
             </Table.Row>

src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx

@@ -1,7 +1,8 @@
 import * as Styled from "./styles.js";
-import { Button, Checkbox, Icon, Popup } from "semantic-ui-react";
+import { Checkbox, Popup } from "semantic-ui-react";
 import { copyStratigraphy, deleteStratigraphy } from "../../../../../../../api/fetchApiV2.js";
 import { useTranslation } from "react-i18next";
+import { CopyButton, DeleteButton } from "../../../../../../../components/buttons/buttons";
 
 const InfoCheckBox = props => {
   const { profileInfo, updateChange, isEditable, onUpdated } = props.data;
@@ -24,40 +25,23 @@ const InfoCheckBox = props => {
       </Styled.FormContainer>
       {isEditable && (
         <div style={{ display: "flex" }} data-cy="clone-and-delete-buttons">
-          <Button
-            // disabled={!_.isEmpty(consistency)}
-            icon
+          <CopyButton
             onClick={() => {
               copyStratigraphy(profileInfo?.id).then(() => {
                 onUpdated("cloneStratigraphy");
               });
-            }}
-            size="tiny">
-            <Icon name="clone outline" />
-          </Button>
-          <Popup
-            flowing
-            hoverable
-            on="click"
-            position="right center"
-            trigger={
-              <Button icon size="tiny">
-                <Icon name="trash alternate" />
-              </Button>
-            }>
+            }}></CopyButton>
+          <Popup flowing hoverable on="click" position="right center" trigger={<DeleteButton label="delete" />}>
             {t("deleteForever")}?
             <br />
-            <Button
-              icon
+            <DeleteButton
+              label="delete"
               onClick={() => {
                 deleteStratigraphy(profileInfo?.id).then(() => {
                   onUpdated("deleteStratigraphy");
                 });
               }}
-              secondary
-              size="tiny">
-              {t("yes")}
-            </Button>
+            />
           </Popup>
         </div>
       )}

src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/descriptionLayers/descriptionDeleteDialog.jsx

@@ -22,7 +22,10 @@ const DescriptionDeleteDialog = props => {
       <Typography sx={{ color: theme.palette.error.main }} variant="subtitle2">
         {t("deletelayerconfirmation")}
       </Typography>
-      <Box alignSelf="flex-end" sx={{ marginTop: "auto", marginRight: "0.5em", marginBottom: "0.5em" }}>
+      <Box
+        data-cy="description-button-box"
+        alignSelf="flex-end"
+        sx={{ marginTop: "auto", marginRight: "0.5em", marginBottom: "0.5em" }}>
         <CancelButton
           onClick={e => {
             e.stopPropagation();