Merge pull request #10672 from growilabs/imprv/175972-new-sidebar-tool-appearance

imprv: New sidebar tool icon appearance

apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItem.tsx

@@ -86,7 +86,7 @@ export const PrimaryItem = (props: PrimaryItemProps): JSX.Element => {
       <button
         type="button"
         data-testid={`grw-sidebar-nav-primary-${labelForTestId}`}
-        className={`btn btn-primary ${indicatorClass}`}
+        className={`btn btn-primary m-1 rounded ${indicatorClass}`}
         onClick={itemClickedHandler}
         onMouseEnter={mouseEnteredHandler}
         id={labelForTestId}

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

@@ -2,43 +2,14 @@
 @use '../button-styles';
 @use '../variables' as sidebarVar;
 
+// == Sizes
 .grw-primary-items :global {
-  .btn {
-    @extend %btn-basis;
-
-    i {
-      opacity: 0.7;
-
-      &:hover,
-      &:focus {
-        opacity: 0.8;
-      }
-    }
-  }
-}
-
-// Add indicator
-.grw-primary-items :global {
-  $btn-height: sidebarVar.$grw-sidebar-button-height;
-  $btn-active-indicator-height: 34px;
 
   .btn {
-    &.active {
-      position: relative;
+    @extend %btn-basis;
 
-      // indicator
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: block;
-        width: 3px;
-        height: $btn-active-indicator-height;
-        content: '';
-        background-color: var(--bs-primary);
-        transform: translateY(#{($btn-height - $btn-active-indicator-height) * 0.5});
-      }
-    }
+    width: 40px;
+    height: 40px;
   }
 
   .badge :global {
@@ -51,14 +22,17 @@
 .grw-primary-items :global {
   .btn.btn-primary {
     @extend %btn-primary-color-vars;
+    --bs-btn-active-color: var(--grw-sidebar-nav-btn-active-color, var(--grw-primary-500));
   }
 }
 
 @include bs.color-mode(light) {
   .grw-primary-items :global {
     .btn-primary {
-      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-600));
-      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-300));
+      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-highlight-600));
+      --bs-btn-color-hover: var(--grw-sidebar-nav-btn-hover-color, var(--grw-highlight-700));
+      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-200));
+      --bs-btn-active-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-200));
     }
   }
 }
@@ -66,8 +40,10 @@
 @include bs.color-mode(dark) {
   .grw-primary-items :global {
     .btn-primary {
-      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-300));
-      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
+      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-highlight-600));
+      --bs-btn-color-hover: var(--grw-sidebar-nav-btn-hover-color, var(--grw-highlight-400));
+      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-900));
+      --bs-btn-active-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-900));
     }
   }
 }

apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItems.tsx

@@ -36,7 +36,7 @@ export const PrimaryItems = memo((props: Props) => {
   }
 
   return (
-    <div className={styles['grw-primary-items']}>
+    <div className={`${styles['grw-primary-items']} mt-1`}>
       <PrimaryItem
         sidebarMode={sidebarMode}
         contents={SidebarContentsType.TREE}

packages/preset-themes/src/styles/default.scss

@@ -27,7 +27,8 @@
 
   --grw-wiki-link-color-rgb: var(--grw-highlight-700-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-600-rgb);
-  --grw-sidebar-nav-btn-color: var(--grw-highlight-600);
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-500);
+  --grw-sidebar-nav-btn-hover-color: var(--grw-highlight-800);
 }
 
 :root[data-bs-theme='dark'] {
@@ -57,6 +58,6 @@
 
   --grw-wiki-link-color-rgb: var(--grw-highlight-600-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-400-rgb);
-  --grw-sidebar-nav-btn-color: rgba(var(--grw-highlight-400-rgb), 0.8);
-
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-700);
+  --grw-sidebar-nav-btn-hover-color: var(--grw-highlight-500);
 }

packages/preset-themes/src/styles/halloween.scss

@@ -38,6 +38,7 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb);
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-400);
 
   // change marker color
   --grw-marker-bg: var(--grw-marker-bg-red);

packages/preset-themes/src/styles/hufflepuff.scss

@@ -27,6 +27,7 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-800-rgb);
+  --grw-sidebar-nav-btn-active-color: var(--grw-primary-800);
 
   // change marker color
   --grw-marker-bg: var(--grw-marker-bg-cyan);
@@ -67,6 +68,7 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb);
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-600);
 
   // change marker color
   --grw-marker-bg: var(--grw-marker-bg-cyan);