From e1b84a2d249381543a5114e338900e07264adc85 Mon Sep 17 00:00:00 2001
From: Thanh Dat Do <dthanh421@gmail.com>
Date: Wed, 30 Oct 2024 13:11:29 +0700
Subject: [PATCH] Styling connection modal

---
 src/renderer/modals/ConnectionConfigModal.css | 58 ++++++++++++++++---
 src/renderer/modals/ConnectionConfigModal.tsx |  2 +-
 src/renderer/modals/Modal.css                 | 28 ++++++---
 src/renderer/modals/Modal.tsx                 |  2 +-
 4 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/src/renderer/modals/ConnectionConfigModal.css b/src/renderer/modals/ConnectionConfigModal.css
index dd12dd0..10b5f8f 100644
--- a/src/renderer/modals/ConnectionConfigModal.css
+++ b/src/renderer/modals/ConnectionConfigModal.css
@@ -1,26 +1,66 @@
 .ConnectionConfigModal-content {
   font-family: Arial, sans-serif;
+  padding: 24px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
-.ConnectionConfigModal-config-field {
+
+.ConnectionConfigModal-config-field:first-child {
   display: block;
-  padding: 2px 0 2px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: var(--window-head-color);
 }
+
 .ConnectionConfigModal-section .ConnectionConfigModal-config-field {
-  padding-left: 12px;
+  padding-left: 0;
 }
+
 .ConnectionConfigModal-config-field input {
-  margin-left: 4px;
-  border: none;
-  border-bottom: 1px solid var(--window-accent-color);
+  min-width: 200px;
+  display: block;
+  margin-top: 5px;
+  padding: 10px;
+  border: 1px solid var(--window-accent-color);
+  border-radius: 5px;
   outline: none;
   font-size: 16px;
+  transition: border-color 0.3s ease;
 }
-.ConnectionConfigModal-config-field input:focus{
+
+.ConnectionConfigModal-config-field input:focus {
   border-color: var(--window-head-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.ConnectionConfigModal-config-field-2 {
+  display: block;
+  margin-top: 10px;
+}
+
+.ConnectionConfigModal-section input {
+  font-size: 14px;
+}
+
+.ConnectionConfigModal-section .ConnectionConfigModal-config-field {
+  font-size: 14px;
+}
+
+.ConnectionConfigModal-section .ConnectionConfigModal-config-field::before {
+  content: '•';
+  color: #000;
+  margin-right: 8px;
 }
+
 .ConnectionConfigModal-section:not(:first-child) {
-  margin-top: 8px;
+  margin-top: 15px;
 }
+
 .ConnectionConfigModal-section-header {
-  padding: 4px 0 4px 0;
+  padding: 10px 0;
+  font-weight: bold;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 10px;
+  color: var(--window-head-color);
 }
diff --git a/src/renderer/modals/ConnectionConfigModal.tsx b/src/renderer/modals/ConnectionConfigModal.tsx
index ba8f89f..27c19fa 100644
--- a/src/renderer/modals/ConnectionConfigModal.tsx
+++ b/src/renderer/modals/ConnectionConfigModal.tsx
@@ -90,7 +90,7 @@ export default function ConnectionConfigModal({
         </label>
         <label
           htmlFor="ConnectionConfigModal-FieldStationNum"
-          className="ConnectionConfigModal-config-field"
+          className="ConnectionConfigModal-config-field ConnectionConfigModal-config-field-2"
         >
           Field Control Station Number:
           <input
diff --git a/src/renderer/modals/Modal.css b/src/renderer/modals/Modal.css
index 5ce64e5..0f43b03 100644
--- a/src/renderer/modals/Modal.css
+++ b/src/renderer/modals/Modal.css
@@ -7,34 +7,44 @@
   background-color: var(--body-color);
   border-radius: 10px;
   font-family: Arial, sans-serif;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
 }
+
 .Modal-active {
   display: block;
 }
+
 .Modal-title-bar {
-  white-space: nowrap;
-  padding: 10px 10px 10px 20px;
+  padding: 4px 18px;
   background-color: var(--window-head-color);
   border-radius: 10px 10px 0 0;
   color: var(--window-head-text-color);
   font-family: Tahoma, sans-serif;
-  height: 40px;
-  margin: auto 0 auto 0;
+  height: 50px;
   display: flex;
-  flex-direction: row;
+  justify-content: space-between;
   align-items: center;
 }
+
+.Modal-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
 .Modal-close-button {
-  position: absolute;
-  right: 10px;
+  margin-top: 2px;
+  margin-left: auto;
   background-color: transparent;
   border: none;
   color: var(--window-head-text-color);
   font-weight: bold;
   cursor: pointer;
-  width: 40px;
-  height: 40px;
+  font-size: 22px;
 }
+
 .Modal-content {
   padding: 20px;
+  max-height: 400px;
+  overflow-y: auto;
 }
diff --git a/src/renderer/modals/Modal.tsx b/src/renderer/modals/Modal.tsx
index df52b46..8778dfb 100644
--- a/src/renderer/modals/Modal.tsx
+++ b/src/renderer/modals/Modal.tsx
@@ -27,7 +27,7 @@ export default function Modal({
       <div className="Modal-title-bar">
         <span className="Modal-title">{modalTitle}</span>
         <button className="Modal-close-button" onClick={onClose} type="button">
-          X
+          &times;
         </button>
       </div>
       <div className={`Modal-content ${className}`}>{children}</div>