feat: change complete event modal styling

EyeSeeTea · Nov 8, 2024 · a975ef4 · a975ef4
1 parent 69cd93b
commit a975ef4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/src/webapp/components/simple-modal/SimpleModal.tsx b/src/webapp/components/simple-modal/SimpleModal.tsx
@@ -12,10 +12,21 @@ type SimpleModalProps = {
     open: boolean;
     onClose: () => void;
     closeLabel?: string;
+    alignFooterButtons?: "start" | "center" | "end";
+    buttonDirection?: "row" | "column" | "row-reverse" | "column-reverse";
 };
 
 export const SimpleModal: React.FC<SimpleModalProps> = React.memo(
-    ({ children, footerButtons, closeLabel, open = false, onClose, title }) => {
+    ({
+        alignFooterButtons,
+        buttonDirection,
+        children,
+        footerButtons,
+        closeLabel,
+        open = false,
+        onClose,
+        title,
+    }) => {
         return (
             <Modal
                 aria-labelledby={`modal-${title}`}
@@ -31,7 +42,10 @@ export const SimpleModal: React.FC<SimpleModalProps> = React.memo(
                         <StyledCardContent>{children}</StyledCardContent>
                     </Content>
 
-                    <Footer>
+                    <Footer
+                        alignFooterButtons={alignFooterButtons}
+                        buttonDirection={buttonDirection}
+                    >
                         {footerButtons ?? null}
                         <Button variant="outlined" color="secondary" onClick={onClose}>
                             {closeLabel ? closeLabel : i18n.t("Close")}
@@ -56,10 +70,12 @@ const Title = styled.span`
     font-weight: 500;
 `;
 
-const Footer = styled.div`
+const Footer = styled.div<{ alignFooterButtons?: string; buttonDirection?: string }>`
     display: flex;
     margin-block-start: 16px;
     gap: 8px;
+    justify-content: ${props => props.alignFooterButtons};
+    flex-direction: ${props => props.buttonDirection};
 `;
 
 const StyledCard = styled(Card)`

diff --git a/src/webapp/pages/event-tracker/EventTrackerPage.tsx b/src/webapp/pages/event-tracker/EventTrackerPage.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from "react";
 import styled from "styled-components";
-import { Box, Button } from "@material-ui/core";
+import { Box, Button, useTheme } from "@material-ui/core";
 import { useParams } from "react-router-dom";
 import { AddCircleOutline, EditOutlined } from "@material-ui/icons";
 import i18n from "../../../utils/i18n";
@@ -59,6 +59,7 @@ export const EventTrackerPage: React.FC = React.memo(() => {
     const { lastAnalyticsRuntime } = useLastAnalyticsRuntime();
     const { overviewCards, isLoading: areOverviewCardsLoading } = useOverviewCards();
     const { dateRangeFilter } = useMapFilters();
+    const theme = useTheme();
 
     const goToRiskSummaryForm = useCallback(() => {
         goTo(RouteName.CREATE_FORM, {
@@ -218,12 +219,23 @@ export const EventTrackerPage: React.FC = React.memo(() => {
                 open={openCompleteModal}
                 onClose={onCloseCompleteModal}
                 title={i18n.t("Complete event")}
-                closeLabel={i18n.t("Cancel")}
+                closeLabel={i18n.t("Not now")}
                 footerButtons={
-                    <Button onClick={() => onCompleteClick()}>{i18n.t("Confirm")}</Button>
+                    <Button
+                        variant="contained"
+                        onClick={() => onCompleteClick()}
+                        style={{
+                            backgroundColor: theme.palette.error.main,
+                            color: theme.palette.common.white,
+                        }}
+                    >
+                        {i18n.t("Complete")}
+                    </Button>
                 }
+                alignFooterButtons="end"
+                buttonDirection="row-reverse"
             >
-                {i18n.t("Are you sure you want to complete this event?")}
+                {i18n.t("Are you sure you want to complete this Event? This cannot be undone.")}
             </SimpleModal>
         </Layout>
     );