reorganize SidebarNav colors

apps/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -83,7 +83,7 @@ export const InAppNotificationDropdown = (): JSX.Element => {
 
   return (
     <Dropdown className="notification-wrapper grw-notification-dropdown" isOpen={isOpen} toggle={toggleDropdownHandler} direction="end">
-      <DropdownToggle className="px-3 nav-link border-0 bg-transparent" innerRef={buttonRef}>
+      <DropdownToggle className="px-3" color="primary" innerRef={buttonRef}>
         <i className="icon-bell" /> {badge}
       </DropdownToggle>
       <DropdownMenu end>

apps/app/src/components/Sidebar/SidebarNav.module.scss

@@ -51,13 +51,14 @@
   .btn {
     width: var.$grw-sidebar-nav-width;
     line-height: 1em;
+    border: 0;
     border-radius: 0;
     box-shadow: none !important;
 
     // icon opacity
     &:not(.active) {
       i {
-        opacity: 0.4;
+        opacity: 0.6;
       }
       &:hover,
       &:focus {
@@ -95,11 +96,33 @@
 }
 
 
-.grw-sidebar-nav {
-  background-color: var(--grw-highlight-100);
+.grw-sidebar-nav :global {
+  .btn-primary {
+    --bs-btn-bg: transparent !important;
+    --bs-btn-active-bg: transparent !important;
+  }
+}
+@include bs.color-mode(light) {
+  .grw-sidebar-nav :global {
+    background-color: var(--grw-highlight-100);
+
+    .btn-primary {
+      --bs-btn-color: var(--grw-primary-500);
+      --bs-btn-hover-color: var(--grw-primary-500);
+      --bs-btn-hover-bg: var(--grw-highlight-300);
+      --bs-btn-active-color: var(--grw-primary-500);
+    }
+  }
 }
 @include bs.color-mode(dark) {
-  .grw-sidebar-nav {
+  .grw-sidebar-nav :global {
     background-color: var(--grw-highlight-900);
+
+    .btn-primary {
+      --bs-btn-color: var(--grw-primary-400);
+      --bs-btn-hover-color: var(--grw-primary-400);
+      --bs-btn-hover-bg: var(--grw-highlight-700);
+      --bs-btn-active-color: var(--grw-primary-400);
+    }
   }
 }