feat: Added close button for settings

src/components/CloseButton/CloseButton.css

@@ -0,0 +1,10 @@
+.closeButton {
+  position: absolute;
+  top: 0.5em;
+  right: 1em;
+  padding: 0.5em;
+  cursor: pointer;
+  color: white;
+  font-size: 1.5rem;
+  z-index: 1000;
+}

src/components/CloseButton/CloseButton.tsx

@@ -0,0 +1,13 @@
+import './CloseButton.css';
+
+type CloseButtonProps = {
+  onClick: () => void;
+};
+
+const CloseButton = ({ onClick }: CloseButtonProps) => (
+  <div className="closeButton" onClick={onClick}>
+    ✕
+  </div>
+);
+
+export default CloseButton;

src/components/GridView/DetailsView.tsx

@@ -5,6 +5,7 @@ import DetailsAuthor from './Author';
 import { useMemo } from 'react';
 import uniq from 'lodash/uniq';
 import useNav from '../../utils/useNav';
+import CloseButton from '../CloseButton/CloseButton';
 
 type DetailsViewProps = {
   images: NostrImage[];
@@ -23,14 +24,7 @@ const DetailsView = ({ images, activeImageIdx, setActiveImageIdx }: DetailsViewP
 
   return (
     <div className="details">
-      <div
-        className="closeButton"
-        onClick={() => {
-          setActiveImageIdx(undefined);
-        }}
-      >
-        ✕
-      </div>
+      <CloseButton onClick={() => setActiveImageIdx(undefined)}></CloseButton>
       <div className="details-contents">
         <img className="detail-image" src={currentImage?.url}></img>
         <div className="detail-description">

src/components/Settings.tsx

@@ -1,6 +1,7 @@
 import { FormEvent, useState } from 'react';
 import './Settings.css';
 import useNav, { Settings } from '../utils/useNav';
+import CloseButton from './CloseButton/CloseButton';
 
 type SettingsProps = {
   onClose: () => void;
@@ -31,6 +32,7 @@ const SettingsDialog = ({ onClose, settings }: SettingsProps) => {
   return (
     <div className="settings" onClick={e => e.stopPropagation()}>
       <h2>Settings</h2>
+      <CloseButton onClick={onClose}></CloseButton>
 
       <div className="settings-content">
         <label htmlFor="tags">Tags (Comma separated):</label>