From 8b0b9d259cd1f426340fdac8d38a6b041eb3b736 Mon Sep 17 00:00:00 2001
From: Neo <neo@sagittal.ai>
Date: Fri, 6 Sep 2024 00:07:57 +0000
Subject: [PATCH] Fix icon placement in toggle

This commit addresses the issue where the icon was incorrectly
placed in the center of the toggle's background. The icon should
be positioned inside the circle part that moves with the toggle.
This change ensures that the icon moves along with the toggle,
providing a more intuitive and visually consistent user
experience.
---
 flaskr/static/style.css | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/flaskr/static/style.css b/flaskr/static/style.css
index 2acb2e1c..1846afb0 100644
--- a/flaskr/static/style.css
+++ b/flaskr/static/style.css
@@ -168,7 +168,9 @@ input[type=submit]:hover {
 }
 
 #theme-toggle:before {
-  content: '';
+  content: '\f186'; /* FontAwesome Unicode for moon */
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
   position: absolute;
   top: 2px;
   left: 2px;
@@ -176,17 +178,12 @@ input[type=submit]:hover {
   height: 21px;
   background: white;
   border-radius: 50%;
-  transition: transform 0.3s;
+  transition: transform 0.3s, content 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 {
@@ -195,9 +192,7 @@ body.dark-mode #theme-toggle {
 
 body.dark-mode #theme-toggle:before {
   transform: translateX(25px);
-}
-
-body.dark-mode #theme-icon {
+  content: '\f185'; /* FontAwesome Unicode for sun */
   color: #e0e0e0;
 }