chore: theme toggle icon tiny improvements

Author: kamilmysliwiec

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>

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;
   }

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">

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,31 +42,40 @@
   padding-left: 15px;
   position: relative;
 
-  @include media(small) {
+  @include utils.media(small) {
     padding: 0;
     margin: 0;
   }
 
   .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 {

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() {