fix: light dark toggle icon padding

nestjs · Aug 9, 2024 · 8d6df62 · 8d6df62
1 parent ac5d7dc
commit 8d6df62
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.html b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.html
@@ -1,4 +1,4 @@
-<button class="theme-mode-toggle" (click)="toggleThemeMode()">
-  <span class="material-icons" *ngIf="!isDarkMode"> light_mode </span>
-  <span class="material-icons" *ngIf="isDarkMode"> dark_mode </span>
+<button class="theme-mode-toggle">
+  <span class="material-icons" *ngIf="!isDarkMode" (click)="toggleThemeMode()"> light_mode </span>
+  <span class="material-icons" *ngIf="isDarkMode" (click)="toggleThemeMode()"> dark_mode </span>
 </button>
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
@@ -23,16 +23,13 @@
   align-items: center;
   justify-content: center;
   margin-left: 15px;
-  cursor: pointer;
   color: #fff;
   padding-left: 15px;
   position: relative;
-  &:hover {
-    color: var(--primary);
-  }
 
   .material-icons {
     font-size: 20px;
+    cursor: pointer;
 
     &::before {
       content: '';
@@ -44,5 +41,9 @@
       bottom: 0;
       width: 2px;
     }
+
+    &:hover {
+      color: var(--primary);
+    }  
   }
 }