Remove default margin

swisstopo · Sep 4, 2024 · 2e7b736 · 2e7b736
1 parent 42c29e6
commit 2e7b736
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
@@ -111,7 +111,6 @@ export const theme = createTheme({
           textTransform: "none",
           whiteSpace: "nowrap",
           minWidth: "auto",
-          marginLeft: "5px",
           padding: "8px 12px",
           borderRadius: "4px",
           boxShadow: "none",

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">
+      <Stack direction="row" justifyContent="flex-end" alignItems="center" gap="5px">
         {props.children}
       </Stack>
     </Box>

diff --git a/src/client/src/pages/detail/detailHeader.tsx b/src/client/src/pages/detail/detailHeader.tsx
@@ -84,9 +84,9 @@ const DetailHeader = ({ editingEnabled, setEditingEnabled, editableByCurrentUser
           icon={borehole?.data.workflow?.finished != null ? <CheckmarkIcon /> : <div />}
         />
       </Stack>
-      {editableByCurrentUser && (
-        <>
-          {editingEnabled && (
+      {editableByCurrentUser &&
+        (editingEnabled ? (
+          <>
             <DeleteButton
               label="deleteBorehole"
               onClick={() =>
@@ -105,10 +105,11 @@ const DetailHeader = ({ editingEnabled, setEditingEnabled, editableByCurrentUser
                 ])
               }
             />
-          )}
-          {editingEnabled ? <EndEditButton onClick={stopEditing} /> : <EditButton onClick={startEditing} />}
-        </>
-      )}
+            <EndEditButton onClick={stopEditing} sx={{ marginLeft: "5px" }} />
+          </>
+        ) : (
+          <EditButton onClick={startEditing} />
+        ))}
     </Stack>
   );
 };

diff --git a/.../src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx b/.../src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx
@@ -1,12 +1,16 @@
 import * as Styled from "./styles.js";
-import { Checkbox, Popup } from "semantic-ui-react";
+import { Checkbox } from "semantic-ui-react";
 import { copyStratigraphy, deleteStratigraphy } from "../../../../../../../api/fetchApiV2.js";
 import { useTranslation } from "react-i18next";
 import { CopyButton, DeleteButton } from "../../../../../../../components/buttons/buttons";
+import { PromptContext } from "../../../../../../../components/prompt/promptContext";
+import { useContext } from "react";
+import TrashIcon from "../../../../../../../assets/icons/trash.svg?react";
 
 const InfoCheckBox = props => {
   const { profileInfo, updateChange, isEditable, onUpdated } = props.data;
   const { t } = useTranslation();
+  const { showPrompt } = useContext(PromptContext);
 
   return (
     <Styled.CheckBoxContainer>
@@ -31,18 +35,28 @@ const InfoCheckBox = props => {
                 onUpdated("cloneStratigraphy");
               });
             }}></CopyButton>
-          <Popup flowing hoverable on="click" position="right center" trigger={<DeleteButton label="delete" />}>
-            {t("deleteForever")}?
-            <br />
-            <DeleteButton
-              label="delete"
-              onClick={() => {
-                deleteStratigraphy(profileInfo?.id).then(() => {
-                  onUpdated("deleteStratigraphy");
-                });
-              }}
-            />
-          </Popup>
+          <DeleteButton
+            label="delete"
+            onClick={() => {
+              showPrompt(t("deleteMessage"), [
+                {
+                  label: t("cancel"),
+                  action: null,
+                },
+                {
+                  label: t("delete"),
+                  icon: <TrashIcon />,
+                  variant: "contained",
+                  action: () => {
+                    deleteStratigraphy(profileInfo?.id).then(() => {
+                      onUpdated("deleteStratigraphy");
+                    });
+                  },
+                },
+              ]);
+            }}
+            sx={{ marginLeft: "5px" }}
+          />
         </div>
       )}
     </Styled.CheckBoxContainer>