From 737f1b018975f3e13a566c0dd744e1d1f545421f Mon Sep 17 00:00:00 2001
From: Alpha <61853980+AlphaGHX@users.noreply.github.com>
Date: Tue, 19 Sep 2023 00:35:58 +0800
Subject: [PATCH] feat: add a close button to the modal (#239)

* feat: add a close button to the modal

* fix: replace modal close icon
---
 src/components/ConnectionsSettingsModal.tsx   | 21 ++++++++++++----
 .../ConnectionsTableDetailsModal.tsx          | 24 +++++++++++++++----
 src/components/LogsSettingsModal.tsx          | 23 +++++++++++++++---
 src/components/ProxiesSettingsModal.tsx       | 24 +++++++++++++++----
 4 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/src/components/ConnectionsSettingsModal.tsx b/src/components/ConnectionsSettingsModal.tsx
index ab0e686..bfaf205 100644
--- a/src/components/ConnectionsSettingsModal.tsx
+++ b/src/components/ConnectionsSettingsModal.tsx
@@ -109,6 +109,7 @@ export const ConnectionsSettingsModal = (props: {
   onOrderChange: (value: ConnectionsTableColumnOrder) => void
   onVisibleChange: (value: ConnectionsTableColumnVisibility) => void
 }) => {
+  const modalID = MODAL.CONNECTIONS_SETTINGS
   const [t] = useI18n()
   const [activeKey, setActiveKey] =
     createSignal<CONNECTIONS_TABLE_ACCESSOR_KEY | null>(null)
@@ -175,14 +176,26 @@ export const ConnectionsSettingsModal = (props: {
   }
 
   return (
-    <dialog
-      id={MODAL.CONNECTIONS_SETTINGS}
-      class="modal modal-bottom sm:modal-middle"
-    >
+    <dialog id={modalID} class="modal modal-bottom sm:modal-middle">
       <div
         class="modal-box flex flex-col gap-4"
         onContextMenu={(e) => e.preventDefault()}
       >
+        <div class="sticky top-0 z-50 flex items-center justify-end">
+          <Button
+            class="btn-circle btn-sm"
+            onClick={() => {
+              const modal = document.querySelector(
+                `#${modalID}`,
+              ) as HTMLDialogElement | null
+
+              modal?.close()
+            }}
+          >
+            <IconX size={20} />
+          </Button>
+        </div>
+
         <div>
           <ConfigTitle withDivider>{t('tableSize')}</ConfigTitle>
 
diff --git a/src/components/ConnectionsTableDetailsModal.tsx b/src/components/ConnectionsTableDetailsModal.tsx
index c1c9cfe..6da77bd 100644
--- a/src/components/ConnectionsTableDetailsModal.tsx
+++ b/src/components/ConnectionsTableDetailsModal.tsx
@@ -1,16 +1,32 @@
+import { IconX } from '@tabler/icons-solidjs'
 import { Component, Show } from 'solid-js'
 import { MODAL } from '~/constants'
 import { allConnections } from '~/signals'
+import { Button } from './Button'
 
 export const ConnectionsTableDetailsModal: Component<{
   selectedConnectionID?: string
 }> = (props) => {
+  const modalID = MODAL.CONNECTIONS_TABLE_DETAILS
+
   return (
-    <dialog
-      id={MODAL.CONNECTIONS_TABLE_DETAILS}
-      class="modal modal-bottom sm:modal-middle"
-    >
+    <dialog id={modalID} class="modal modal-bottom sm:modal-middle">
       <div class="modal-box">
+        <div class="sticky top-0 z-50 flex items-center justify-end">
+          <Button
+            class="btn-circle btn-sm"
+            onClick={() => {
+              const modal = document.querySelector(
+                `#${modalID}`,
+              ) as HTMLDialogElement | null
+
+              modal?.close()
+            }}
+          >
+            <IconX size={20} />
+          </Button>
+        </div>
+
         <Show when={props.selectedConnectionID}>
           <pre>
             <code>
diff --git a/src/components/LogsSettingsModal.tsx b/src/components/LogsSettingsModal.tsx
index a7e6a1b..65281a6 100644
--- a/src/components/LogsSettingsModal.tsx
+++ b/src/components/LogsSettingsModal.tsx
@@ -1,9 +1,10 @@
 import { useI18n } from '@solid-primitives/i18n'
+import { IconX } from '@tabler/icons-solidjs'
 import { For } from 'solid-js'
-import { ConfigTitle } from '~/components'
+import { Button, ConfigTitle } from '~/components'
 import {
-  LOG_LEVEL,
   LOGS_TABLE_MAX_ROWS_LIST,
+  LOG_LEVEL,
   MODAL,
   TAILWINDCSS_SIZE,
 } from '~/constants'
@@ -17,11 +18,27 @@ import {
 } from '~/signals'
 
 export const LogsSettingsModal = () => {
+  const modalID = MODAL.LOGS_SETTINGS
   const [t] = useI18n()
 
   return (
-    <dialog id={MODAL.LOGS_SETTINGS} class="modal modal-bottom sm:modal-middle">
+    <dialog id={modalID} class="modal modal-bottom sm:modal-middle">
       <div class="modal-box flex flex-col gap-4">
+        <div class="sticky top-0 z-50 flex items-center justify-end">
+          <Button
+            class="btn-circle btn-sm"
+            onClick={() => {
+              const modal = document.querySelector(
+                `#${modalID}`,
+              ) as HTMLDialogElement | null
+
+              modal?.close()
+            }}
+          >
+            <IconX size={20} />
+          </Button>
+        </div>
+
         <div>
           <ConfigTitle withDivider>{t('tableSize')}</ConfigTitle>
 
diff --git a/src/components/ProxiesSettingsModal.tsx b/src/components/ProxiesSettingsModal.tsx
index b1ab556..1be375d 100644
--- a/src/components/ProxiesSettingsModal.tsx
+++ b/src/components/ProxiesSettingsModal.tsx
@@ -1,6 +1,7 @@
 import { useI18n } from '@solid-primitives/i18n'
+import { IconX } from '@tabler/icons-solidjs'
 import { For } from 'solid-js'
-import { ConfigTitle } from '~/components'
+import { Button, ConfigTitle } from '~/components'
 import { MODAL, PROXIES_ORDERING_TYPE, PROXIES_PREVIEW_TYPE } from '~/constants'
 import {
   autoCloseConns,
@@ -18,14 +19,27 @@ import {
 } from '~/signals'
 
 export const ProxiesSettingsModal = () => {
+  const modalID = MODAL.PROXIES_SETTINGS
   const [t] = useI18n()
 
   return (
-    <dialog
-      id={MODAL.PROXIES_SETTINGS}
-      class="modal modal-bottom sm:modal-middle"
-    >
+    <dialog id={modalID} class="modal modal-bottom sm:modal-middle">
       <div class="modal-box flex flex-col gap-4">
+        <div class="sticky top-0 z-50 flex items-center justify-end">
+          <Button
+            class="btn-circle btn-sm"
+            onClick={() => {
+              const modal = document.querySelector(
+                `#${modalID}`,
+              ) as HTMLDialogElement | null
+
+              modal?.close()
+            }}
+          >
+            <IconX size={20} />
+          </Button>
+        </div>
+
         <div>
           <ConfigTitle withDivider>{t('autoCloseConns')}</ConfigTitle>