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

@@ -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
+    <dialog id={modalID} class="modal modal-bottom sm:modal-middle">
-      id={MODAL.CONNECTIONS_SETTINGS}
-      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>
 

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
+    <dialog id={modalID} class="modal modal-bottom sm:modal-middle">
-      id={MODAL.CONNECTIONS_TABLE_DETAILS}
-      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>

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>
 

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
+    <dialog id={modalID} class="modal modal-bottom sm:modal-middle">
-      id={MODAL.PROXIES_SETTINGS}
-      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>