design: Fixes to make portal page design close to figma mockups (#5383)

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -1,13 +1,19 @@
 <template>
   <li class="sidebar-item">
     <div v-if="hasSubMenu" class="secondary-menu--wrap">
-      <span class="secondary-menu--title fs-small">
+      <span class="secondary-menu--header fs-small">
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
       <div v-if="isHelpCenterSidebar" class="submenu-icons">
-        <div class="submenu-icon" @click="onClickOpen">
+        <woot-button
+          size="tiny"
+          variant="clear"
+          color-scheme="secondary"
+          class="submenu-icon"
+          @click="onClickOpen"
+        >
           <fluent-icon icon="add" size="16" />
-        </div>
+        </woot-button>
       </div>
     </div>
     <router-link
@@ -214,13 +220,22 @@ export default {
 .secondary-menu--wrap {
   display: flex;
   justify-content: space-between;
+  margin-top: var(--space-small);
 }
 
+.secondary-menu--header {
+  color: var(--s-700);
+  display: flex;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--space-normal);
+  margin: var(--space-small) 0;
+  padding: 0 var(--space-small);
+}
 .secondary-menu--title {
   color: var(--s-600);
   display: flex;
-  font-weight: var(--font-weight-bold);
-  line-height: var(--space-two);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--space-normal);
   margin: var(--space-small) 0;
   padding: 0 var(--space-small);
 }
@@ -232,6 +247,7 @@ export default {
   padding: var(--space-small);
   font-weight: var(--font-weight-medium);
   border-radius: var(--border-radius-normal);
+  color: var(--s-700);
 
   &:hover {
     background: var(--s-25);
@@ -323,19 +339,14 @@ export default {
   align-items: center;
 
   .submenu-icon {
+    padding: 0;
     margin-left: var(--space-small);
-    color: var(--s-600);
-
-    &:hover {
-      cursor: pointer;
-      color: var(--w-500);
-    }
   }
 }
 
 .empty-text {
-  color: var(--s-600);
+  color: var(--s-500);
   font-size: var(--font-size-small);
-  margin: var(--space-smaller) 0;
+  margin: var(--space-smaller);
 }
 </style>

app/javascript/dashboard/components/ui/Label.vue

@@ -72,7 +72,9 @@ export default {
       return this.color || getContrastingTextColor(this.bgColor);
     },
     labelClass() {
-      return `label ${this.colorScheme} ${this.small ? 'small' : ''}`;
+      return `label ${this.colorScheme} ${this.variant} ${
+        this.small ? 'small' : ''
+      }`;
     },
     labelStyle() {
       if (this.bgColor) {
@@ -146,6 +148,9 @@ export default {
     a {
       color: var(--w-900);
     }
+    .label-color-dot {
+      background: var(--w-600);
+    }
   }
   &.secondary {
     background: var(--s-100);
@@ -154,6 +159,9 @@ export default {
     a {
       color: var(--s-900);
     }
+    .label-color-dot {
+      background: var(--s-600);
+    }
   }
   &.success {
     background: var(--g-100);
@@ -162,6 +170,9 @@ export default {
     a {
       color: var(--g-900);
     }
+    .label-color-dot {
+      background: var(--g-600);
+    }
   }
   &.alert {
     background: var(--r-100);
@@ -170,6 +181,9 @@ export default {
     a {
       color: var(--r-900);
     }
+    .label-color-dot {
+      background: var(--r-600);
+    }
   }
   &.warning {
     background: var(--y-100);
@@ -178,6 +192,15 @@ export default {
     a {
       color: var(--y-900);
     }
+    .label-color-dot {
+      background: var(--y-900);
+    }
+  }
+
+  &.smooth {
+    background: transparent;
+    border: 1px solid var(--s-75);
+    color: var(--s-800);
   }
 }