@rpg-engine/long-bow 0.4.82 → 0.4.83

package/src/components/ConfirmModal.tsx

@@ -1,87 +1,87 @@
-import React from 'react';
-import styled from 'styled-components';
-import ModalPortal from './Abstractions/ModalPortal';
-import { Button, ButtonTypes } from './Button';
-import { DraggableContainer } from './DraggableContainer';
-
-interface IConfirmModalProps {
-  onConfirm: () => void;
-  onClose: () => void;
-  message?: string;
-}
-
-export const ConfirmModal: React.FC<IConfirmModalProps> = ({
-  onConfirm,
-  onClose,
-  message,
-}) => {
-  return (
-    <ModalPortal>
-      <Background />
-      <Container onPointerDown={onClose}>
-        <DraggableContainer width="auto" dragDisabled>
-          <Wrapper onPointerDown={e => e.stopPropagation()}>
-            <p>{message ?? 'Are you sure?'}</p>
-
-            <ButtonsWrapper>
-              <div className="cancel-button">
-                <Button
-                  buttonType={ButtonTypes.RPGUIButton}
-                  onPointerDown={onClose}
-                >
-                  No
-                </Button>
-              </div>
-              <Button
-                buttonType={ButtonTypes.RPGUIButton}
-                onPointerDown={onConfirm}
-              >
-                Yes
-              </Button>
-            </ButtonsWrapper>
-          </Wrapper>
-        </DraggableContainer>
-      </Container>
-    </ModalPortal>
-  );
-};
-
-const Background = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #000000;
-  opacity: 0.5;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-`;
-
-const Container = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1001;
-`;
-
-const Wrapper = styled.div`
-  p {
-    margin: 0;
-  }
-`;
-
-const ButtonsWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: 5px;
-  margin-top: 5px;
-
-  .cancel-button {
-    filter: grayscale(0.7);
-  }
-`;
+import React from 'react';
+import styled from 'styled-components';
+import ModalPortal from './Abstractions/ModalPortal';
+import { Button, ButtonTypes } from './Button';
+import { DraggableContainer } from './DraggableContainer';
+
+interface IConfirmModalProps {
+  onConfirm: () => void;
+  onClose: () => void;
+  message?: string;
+}
+
+export const ConfirmModal: React.FC<IConfirmModalProps> = ({
+  onConfirm,
+  onClose,
+  message,
+}) => {
+  return (
+    <ModalPortal>
+      <Background />
+      <Container onPointerDown={onClose}>
+        <DraggableContainer width="auto" dragDisabled>
+          <Wrapper onPointerDown={e => e.stopPropagation()}>
+            <p>{message ?? 'Are you sure?'}</p>
+
+            <ButtonsWrapper>
+              <div className="cancel-button">
+                <Button
+                  buttonType={ButtonTypes.RPGUIButton}
+                  onPointerDown={onClose}
+                >
+                  No
+                </Button>
+              </div>
+              <Button
+                buttonType={ButtonTypes.RPGUIButton}
+                onPointerDown={onConfirm}
+              >
+                Yes
+              </Button>
+            </ButtonsWrapper>
+          </Wrapper>
+        </DraggableContainer>
+      </Container>
+    </ModalPortal>
+  );
+};
+
+const Background = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0.5;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+`;
+
+const Container = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001;
+`;
+
+const Wrapper = styled.div`
+  p {
+    margin: 0;
+  }
+`;
+
+const ButtonsWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 5px;
+  margin-top: 5px;
+
+  .cancel-button {
+    filter: grayscale(0.7);
+  }
+`;