From eea806c63b8261dfea8d16fd442a224df1ea7e82 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 10 Feb 2025 20:12:20 -0500
Subject: [PATCH] change menu icons to svg

---
 _includes/header.html                 |  6 +++---
 _includes/icons/moon.svg              |  1 +
 _includes/icons/sun.svg               |  1 +
 _includes/language-picker-mobile.html |  2 +-
 css/dark-theme.css                    | 17 -----------------
 css/style.css                         |  4 ++--
 6 files changed, 8 insertions(+), 23 deletions(-)
 create mode 100644 _includes/icons/moon.svg
 create mode 100644 _includes/icons/sun.svg

diff --git a/_includes/header.html b/_includes/header.html
index 64e92a3dec..2f41961945 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -242,9 +242,9 @@
     </ul>
   </div>
   <div class="header-right">
-    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-      <span class="sun-icon hidden-light"></span>
+    <div id="theme-icon-container" class="theme-toggle default-theme button" title="toggle darkmode">
+      <span class="hidden-dark">{% include icons/moon.svg %}</span>
+      <span class="hidden-light">{% include icons/sun.svg %}</span>
     </div>
     {% include language-picker.html %}
     {% include language-picker-mobile.html %}
diff --git a/_includes/icons/moon.svg b/_includes/icons/moon.svg
new file mode 100644
index 0000000000..6a9a40d902
--- /dev/null
+++ b/_includes/icons/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
\ No newline at end of file
diff --git a/_includes/icons/sun.svg b/_includes/icons/sun.svg
new file mode 100644
index 0000000000..7c767a4693
--- /dev/null
+++ b/_includes/icons/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
diff --git a/_includes/language-picker-mobile.html b/_includes/language-picker-mobile.html
index 1ebedc3b76..2644fd85c3 100644
--- a/_includes/language-picker-mobile.html
+++ b/_includes/language-picker-mobile.html
@@ -1,6 +1,6 @@
 <div id="mobile-menu">
   <div id="language-picker-button" class="button">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" width="24" height="24" style="margin-top: 5px;">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
       <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
     </svg>
   </div>
diff --git a/css/dark-theme.css b/css/dark-theme.css
index cded8e8355..c28dda9020 100644
--- a/css/dark-theme.css
+++ b/css/dark-theme.css
@@ -23,23 +23,6 @@
   --dark_border: #ddd;
   --link: #259dff;
 }
-#theme-icon-container {
-  position: relative;
-  color: black;
-}
-#theme-icon-container i {
-  cursor: pointer;
-  line-height: 30px;
-}
-
-.sun-icon {
-  background-image: url(/images/sun-icon.png);
-  background-size: 100%;
-  background-repeat: no-repeat;
-  width: 27px;
-  height: 27px;
-  cursor: pointer;
-}
 
 html .hidden-dark {
   display: block;
diff --git a/css/style.css b/css/style.css
index 0a8cf8b921..146741cb37 100644
--- a/css/style.css
+++ b/css/style.css
@@ -548,8 +548,8 @@ html[xmlns] .clearfix {
 }
 
 .button {
-  display: block;
-  padding: 3px 5px;
+  display: flex;
+  justify-content: center;
   border-radius: 3px;
   cursor: pointer;
   color: var(--box-fg);