Add side-nav hover-text and active-text styling to ft-icon-button

Author: kommunarr

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -22,24 +22,27 @@
     color: var(--primary-text-color);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
     }
 
     &:active {
       background-color: var(--side-nav-active-color);
+      color: var(--side-nav-active-text-color);
     }
   }
 
   &.base-no-default {
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: var(--side-nav-hover-color);
+      color: var(--side-nav-hover-text-color);
     }
 
     &:active {
       background-color: var(--side-nav-active-color);
+      color: var(--side-nav-active-text-color);
     }
   }
 
@@ -48,7 +51,7 @@
     color: var(--text-with-main-color);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: var(--primary-color-hover);
     }
 
@@ -62,7 +65,7 @@
     color: var(--text-with-accent-color);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: var(--accent-color-hover);
     }
 
@@ -71,7 +74,7 @@
     }
   }
 
-  &.favorite {
+  &.favorite, &.favorite:hover, &.favorite:focus-visible {
     color: var(--favorite-icon-color);
   }
 }
@@ -118,13 +121,15 @@
     white-space: nowrap;
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: var(--side-nav-hover-color);
+      color: var(--side-nav-hover-text-color);
       transition: background 0.2s ease-in;
     }
 
     &:active {
       background-color: var(--side-nav-active-color);
+      color: var(--side-nav-active-text-color);
       transition: background 0.1s ease-in;
     }
   }

src/renderer/themes.css

@@ -184,8 +184,6 @@
   --search-bar-color: #FFF0DD;
   --logo-icon: url("../../_icons/iconBlackSmall.png");
   --logo-text: url("../../_icons/textBlackSmall.png");
-  /* --logo-icon: url("../../_icons/iconPastelPinkLightSmall.png");
-  --logo-text: url("../../_icons/textPastelPinkLightSmall.png"); */
 }
 
 .hotPink {
@@ -216,6 +214,7 @@
   --primary-color-hover: #000000 !important;
   --primary-color-active: #000000 !important;
   --text-with-main-color: #FFFFFF !important;
+  --text-with-accent-color: #FFFFFF !important;
   --accent-color: #000000 !important;
   --accent-color-hover: #808080 !important;
   --accent-color-active: #6A739A !important;
@@ -225,9 +224,6 @@
   --accent-color-opacity2: rgba(0,0,0,0.12) !important;
   --accent-color-opacity3: rgba(255,255,255,0.16) !important;
   --accent-color-opacity4: rgba(255,255,255,0.24) !important;
-
-  /* --logo-icon: url("../../_icons/iconHotPinkLightSmall.png");
-  --logo-text: url("../../_icons/textHotPinkLightSmall.png"); */
 }
 
 /* Given that the Hot Pink theme does not need link underlining due to meeting