From e3a55b0747de1022e29946abcbc681418401b287 Mon Sep 17 00:00:00 2001
From: Francisco De La Hoz <39561227+franciscodelahoz@users.noreply.github.com>
Date: Mon, 4 Nov 2024 06:42:47 -0500
Subject: [PATCH] feat: replace close button with SVG icon and update styling
 for consistency

---
 src/html/index.html            | 2 +-
 src/resources/close-button.svg | 3 +++
 src/styles/style.css           | 7 ++++++-
 3 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 src/resources/close-button.svg

diff --git a/src/html/index.html b/src/html/index.html
index 2d0a6e9..585d029 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -48,7 +48,7 @@
       </section>
     </main>
     <aside id="configuration-sidebar">
-      <button id="close-configurations-button" class="icon-button" aria-label="Close configurations">&#x2715;</button>
+      <button id="close-configurations-button" class="icon-button" aria-label="Close configurations"><%= require('../resources/close-button.svg') %></button>
       <div class="configuration-content">
         <section class="configuration-group">
           <h2 class="configuration-title">General Settings</h2>
diff --git a/src/resources/close-button.svg b/src/resources/close-button.svg
new file mode 100644
index 0000000..83cddb8
--- /dev/null
+++ b/src/resources/close-button.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#34ff66" viewBox="0 0 24 24">
+  <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/styles/style.css b/src/styles/style.css
index c5241e5..cf0404a 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -90,6 +90,8 @@ body {
   user-select: none;
   cursor: pointer;
   flex-grow: 10;
+  font-family: Verdana;
+  font-size: 0.83rem;
 }
 
 .default-button {
@@ -103,6 +105,7 @@ body {
   background-color: #222222;
   color: #34ff66;
   font-family: Verdana;
+  font-size: 0.83rem;
 }
 
 .default-button:hover {
@@ -143,8 +146,10 @@ body {
   padding-top: 3px;
   padding-bottom: 3px;
   padding-left: .5rem;
-  padding-right: 1.5rem;
+  padding-right: 2rem;
   text-overflow: ellipsis;
+  font-family: Verdana;
+  font-size: 0.76rem;
 }
 
 .default-select:focus {