From 6d6f97e3c2a298658ee4199a02da27147abef041 Mon Sep 17 00:00:00 2001
From: Puyodead1 <puyodead@proton.me>
Date: Mon, 11 Dec 2023 01:35:22 -0500
Subject: [PATCH] Modals: add back close button

---
 src/components/modals/ModalComponents.tsx | 24 +++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/modals/ModalComponents.tsx b/src/components/modals/ModalComponents.tsx
index 895b1a6..caa260d 100644
--- a/src/components/modals/ModalComponents.tsx
+++ b/src/components/modals/ModalComponents.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import styled, { css } from "styled-components";
 import Button, { Props as ButtonProps } from "../Button";
+import Icon from "../Icon";
 import { animationFadeIn, animationFadeOut, animationZoomIn, animationZoomOut } from "../common/animations";
 
 export type ModalAction = Omit<React.HTMLAttributes<HTMLButtonElement>, "as"> &
@@ -158,6 +159,22 @@ export const InputContainer = styled.div`
 	flex-direction: column;
 `;
 
+/**
+ * Wrapper for modal close button
+ */
+export const ModalCloseWrapper = styled.div`
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 10px;
+	cursor: pointer;
+	color: var(--text-disabled);
+
+	&:hover {
+		color: var(--text);
+	}
+`;
+
 export function Modal(props: ModalProps) {
 	const [closing, setClosing] = useState(false);
 
@@ -187,6 +204,13 @@ export function Modal(props: ModalProps) {
 	return createPortal(
 		<ModalBase closing={closing} onClick={() => !props.nonDismissable && closeModal()}>
 			<ModalWrapper {...props} onClick={(e) => e.stopPropagation()} actions={false}>
+				<div style={{ position: "relative" }}>
+					{!props.nonDismissable && (
+						<ModalCloseWrapper onClick={closeModal}>
+							<Icon icon="mdiClose" size={1} />
+						</ModalCloseWrapper>
+					)}
+				</div>
 				{(props.title || props.description) && (
 					<ModalHeader>
 						{props.title && <ModalHeaderText>{props.title}</ModalHeaderText>}