From e0261ae942f0580c9fa917f5f04b950d77115676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kamil=20My=C5=9Bliwiec?= <mail@kamilmysliwiec.com>
Date: Thu, 15 Aug 2024 10:58:58 +0200
Subject: [PATCH] chore: theme toggle icon tiny improvements

---
 .../social-wrapper.component.html             |  1 -
 .../social-wrapper.component.scss             |  7 +---
 src/app/homepage/header/header.component.html |  1 +
 .../theme-mode-toggle.component.scss          | 38 +++++++++++++++----
 .../theme-mode-toggle.component.ts            | 14 ++++---
 5 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/app/common/social-wrapper/social-wrapper.component.html b/src/app/common/social-wrapper/social-wrapper.component.html
index 0496a91386..f4191b3d8f 100644
--- a/src/app/common/social-wrapper/social-wrapper.component.html
+++ b/src/app/common/social-wrapper/social-wrapper.component.html
@@ -27,5 +27,4 @@
      rel="nofollow">
     <i class="fa-brands fa-discord"></i>
   </a>
-  <app-theme-mode-toggle></app-theme-mode-toggle>
 </div>
diff --git a/src/app/common/social-wrapper/social-wrapper.component.scss b/src/app/common/social-wrapper/social-wrapper.component.scss
index 104101aba2..8755dccb93 100644
--- a/src/app/common/social-wrapper/social-wrapper.component.scss
+++ b/src/app/common/social-wrapper/social-wrapper.component.scss
@@ -12,7 +12,6 @@
 .social-wrapper {
   @extend .center-top;
   float: right;
-  padding-right: 40px;
   position: relative;
   display: flex;
 
@@ -41,18 +40,16 @@
       color: var(--primary);
     }
   }
-  @include media(medium) {
-    padding-right: 20px;
-  }
+
   @include media(small) {
     top: 0;
     transform: none;
-    padding-right: 0;
 
     a {
       display: none;
     }
   }
+  
   @media print {
     display: none;
   }
diff --git a/src/app/homepage/header/header.component.html b/src/app/homepage/header/header.component.html
index 4785ca8759..3f8697e2f0 100644
--- a/src/app/homepage/header/header.component.html
+++ b/src/app/homepage/header/header.component.html
@@ -43,6 +43,7 @@
     </div>
   </button>
   <ng-content></ng-content>
+  <app-theme-mode-toggle></app-theme-mode-toggle>
   <app-social-wrapper></app-social-wrapper>
   <div class="menu-wrapper">
     <div class="search-wrapper" id="search">
diff --git a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss
index 2329339596..7015f8fd71 100644
--- a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss
+++ b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss
@@ -1,10 +1,23 @@
-@import '../../../../scss//utils.scss';
+@use '../../../../scss/utils';
 
 :host {
-  display: block;
-  display: flex;
+  @extend .center-top;
+  position: relative;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  float: right;
+  padding-right: 40px;
+
+  @include utils.media(medium) {
+    padding-right: 20px;
+  }
+
+  @include utils.media(small) {
+    position: absolute;
+    right: 20px;
+    padding-right: 0;
+  }
 }
 
 .theme-mode-toggle {
@@ -29,7 +42,7 @@
   padding-left: 15px;
   position: relative;
 
-  @include media(small) {
+  @include utils.media(small) {
     padding: 0;
     margin: 0;
   }
@@ -37,23 +50,32 @@
   .material-icons {
     font-size: 20px;
     cursor: pointer;
+    @include utils.text-gradient();
+
+    @include utils.media(small) {
+      background: #fff;
+    }
 
     &::before {
       content: '';
       position: absolute;
       background: #fff;
       opacity: 0.2;
-      left: 2px;
-      top: 0;
+      left: 0px;
+      top: 2px;
       bottom: 2px;
       width: 2px;
     }
 
     &:hover {
-      color: var(--primary);
+      background: #fff;
+
+      @include utils.media(small) {
+        @include utils.text-gradient();
+      }
     }  
 
-    @include media(small) {
+    @include utils.media(small) {
       font-size: 24px;
 
       &::before {
diff --git a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.ts b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.ts
index c7b4d6c062..36088c84d9 100644
--- a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.ts
+++ b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.ts
@@ -19,12 +19,14 @@ export class ThemeModeToggleComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    const userPrefersTheme =
-      this.mediaMatcher.matchMedia &&
-      this.mediaMatcher.matchMedia('(prefers-color-scheme: light)').matches;
-    // In case the user has used the toggle button, we prioritize it over the
-    // system settings
-    this.setThemeMode(this.getUserSettingsIsDarkMode() || userPrefersTheme);
+    // This is commented out because by default the theme mode is set to light (at least for now)
+    // const userPrefersTheme =
+    //   this.mediaMatcher.matchMedia &&
+    //   this.mediaMatcher.matchMedia('(prefers-color-scheme: light)').matches;
+    // this.setThemeMode(this.getUserSettingsIsDarkMode() || userPrefersTheme);
+
+    const isDarkMode = this.getUserSettingsIsDarkMode();
+    this.setThemeMode(isDarkMode);
   }
 
   toggleThemeMode() {