From 3c2dae6bd618078f56498077019235331fa3ec5e Mon Sep 17 00:00:00 2001
From: Neo <neo@sagittal.ai>
Date: Fri, 6 Sep 2024 00:00:27 +0000
Subject: [PATCH] Fix dark mode icon placement

This commit addresses the issue of incorrect dark mode icon
placement in the toggle button. Previously, the moon and sun
icons were displayed in the background, which was not the
desired behavior. The icons are now correctly placed inside
the circle of the toggle button.

Changes include:
- Updated CSS to center icons within the toggle button.
- Adjusted HTML to ensure the correct icon is displayed based
  on the current theme.
- Modified JavaScript to toggle icons appropriately when
the theme changes.

These changes improve the visual consistency and user
experience of the dark mode toggle.

Fixes #FLAS-5
---
 flaskr/static/style.css    | 17 +++++++++++++++++
 flaskr/templates/base.html |  5 ++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/flaskr/static/style.css b/flaskr/static/style.css
index d57c61f0..2acb2e1c 100644
--- a/flaskr/static/style.css
+++ b/flaskr/static/style.css
@@ -162,6 +162,9 @@ input[type=submit]:hover {
   border-radius: 25px;
   cursor: pointer;
   transition: background 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #theme-toggle:before {
@@ -174,6 +177,16 @@ input[type=submit]:hover {
   background: white;
   border-radius: 50%;
   transition: transform 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#theme-icon {
+  position: absolute;
+  font-size: 14px;
+  color: #333;
+  transition: color 0.3s;
 }
 
 body.dark-mode #theme-toggle {
@@ -184,6 +197,10 @@ body.dark-mode #theme-toggle:before {
   transform: translateX(25px);
 }
 
+body.dark-mode #theme-icon {
+  color: #e0e0e0;
+}
+
 body.dark-mode {
   background: #121212;
   color: #e0e0e0;
diff --git a/flaskr/templates/base.html b/flaskr/templates/base.html
index 6faf1e7d..12542b27 100644
--- a/flaskr/templates/base.html
+++ b/flaskr/templates/base.html
@@ -7,7 +7,7 @@
   <ul>
     <li>
       <div id="theme-toggle" aria-label="Toggle Dark Mode">
-        <i id="theme-icon" class="fas"></i>
+        <i id="theme-icon" class="fas fa-moon"></i>
       </div>
     </li>
     {% if g.user %}
@@ -36,9 +36,8 @@
 
     if (currentTheme === 'dark') {
       document.body.classList.add('dark-mode');
+      themeIcon.classList.remove('fa-moon');
       themeIcon.classList.add('fa-sun');
-    } else {
-      themeIcon.classList.add('fa-moon');
     }
 
     themeToggle.addEventListener('click', function() {