diff --git a/src/components/ClearCanvas.tsx b/src/components/ClearCanvas.tsx index abd22409..4f325df5 100644 --- a/src/components/ClearCanvas.tsx +++ b/src/components/ClearCanvas.tsx @@ -1,11 +1,10 @@ import { useState } from "react"; import { t } from "../i18n"; import { useIsMobile } from "./App"; -import { Dialog } from "./Dialog"; import { trash } from "./icons"; import { ToolButton } from "./ToolButton"; -import "./ClearCanvas.scss"; +import ConfirmDialog from "./ConfirmDialog"; const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => { const [showDialog, setShowDialog] = useState(false); @@ -26,39 +25,16 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => { /> {showDialog && ( - { + onConfirm(); + toggleDialog(); + }} + onCancel={toggleDialog} title={t("clearCanvasDialog.title")} - className="clear-canvas" - small={true} > - <> -

{t("alerts.clearReset")}

-
- { - onConfirm(); - toggleDialog(); - }} - data-testid="confirm-clear-canvas-button" - className="clear-canvas--confirm" - /> - -
- -
+

{t("alerts.clearReset")}

+ )} ); diff --git a/src/components/ClearCanvas.scss b/src/components/ConfirmDialog.scss similarity index 58% rename from src/components/ClearCanvas.scss rename to src/components/ConfirmDialog.scss index 3a74761f..d3987fcc 100644 --- a/src/components/ClearCanvas.scss +++ b/src/components/ConfirmDialog.scss @@ -1,22 +1,21 @@ @import "../css/variables.module"; .excalidraw { - .clear-canvas { + .confirm-dialog { &-buttons { display: flex; padding: 0.2rem 0; justify-content: flex-end; + } + .ToolIcon__icon { + min-width: 2.5rem; + width: auto; + font-size: 1rem; + } - .ToolIcon__icon { - min-width: 2.5rem; - width: auto; - font-size: 1rem; - } - - .ToolIcon_type_button { - margin-left: 1.5rem; - padding: 0 0.5rem; - } + .ToolIcon_type_button { + margin-left: 0.8rem; + padding: 0 0.5rem; } &__content { @@ -34,9 +33,5 @@ color: $oc-white; } } - - &--cancel.ToolIcon_type_button { - background-color: $oc-gray-2; - } } } diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx new file mode 100644 index 00000000..459787df --- /dev/null +++ b/src/components/ConfirmDialog.tsx @@ -0,0 +1,52 @@ +import { t } from "../i18n"; +import { Dialog, DialogProps } from "./Dialog"; +import { ToolButton } from "./ToolButton"; + +import "./ConfirmDialog.scss"; + +interface Props extends Omit { + onConfirm: () => void; + onCancel: () => void; + confirmText?: string; + cancelText?: string; +} +const ConfirmDialog = (props: Props) => { + const { + onConfirm, + onCancel, + children, + confirmText = t("buttons.confirm"), + cancelText = t("buttons.cancel"), + className = "", + ...rest + } = props; + return ( + + {children} +
+ + +
+
+ ); +}; +export default ConfirmDialog; diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 79cebf7e..022e1ae6 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -10,7 +10,7 @@ import { Island } from "./Island"; import { Modal } from "./Modal"; import { AppState } from "../types"; -export const Dialog = (props: { +export interface DialogProps { children: React.ReactNode; className?: string; small?: boolean; @@ -18,7 +18,8 @@ export const Dialog = (props: { title: React.ReactNode; autofocus?: boolean; theme?: AppState["theme"]; -}) => { +} +export const Dialog = (props: DialogProps) => { const [islandNode, setIslandNode] = useCallbackRefState(); const [lastActiveElement] = useState(document.activeElement); const { id } = useExcalidrawContainer(); diff --git a/src/locales/en.json b/src/locales/en.json index 4e2b24f3..3b7aa05b 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -135,7 +135,8 @@ "zenMode": "Zen mode", "exitZenMode": "Exit zen mode", "cancel": "Cancel", - "clear": "Clear" + "clear": "Clear", + "confirm": "Confirm" }, "alerts": { "clearReset": "This will clear the whole canvas. Are you sure?",