Styled the contextual header

Both the refactored and non-refactored contextual
headers were updated to match the design.

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss

@@ -19,7 +19,7 @@
 
   li.active {
     background-color: transparent;
-    box-shadow: none;
+    box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss`
   }
 }
 
@@ -137,6 +137,32 @@
   }
 }
 
+@mixin context-header {
+  @include gl-pl-2;
+  @include gl-py-2;
+  @include gl-mb-2;
+
+  .avatar-container {
+    flex: 0 0 $sidebar-avatar-size;
+    border-color: $t-gray-a-08;
+  }
+}
+
+@mixin top-level-item {
+  @include gl-px-4;
+  @include gl-py-3;
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-rounded-base;
+  @include gl-w-auto;
+  transition: padding $sidebar-transition-duration;
+  margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
+
+  &:hover {
+    background-color: $indigo-900-alpha-008;
+  }
+}
+
 //
 // PAGE-LAYOUT
 //
@@ -206,19 +232,7 @@
     }
 
     > a {
-      @include gl-mx-2;
-      @include gl-px-4;
-      @include gl-py-3;
-      @include gl-display-flex;
-      @include gl-align-items-center;
-      @include gl-rounded-base;
-      @include gl-w-auto;
-      transition: padding $sidebar-transition-duration;
-      margin-bottom: 1px;
-
-      &:hover {
-        background-color: $indigo-900-alpha-008;
-      }
+      @include top-level-item;
     }
 
     &.active {
@@ -250,11 +264,6 @@
     display: none;
   }
 
-  svg {
-    height: 16px;
-    width: 16px;
-  }
-
   @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
     &:not(.sidebar-expanded-mobile) {
       @include collapse-contextual-sidebar;
@@ -264,14 +273,28 @@
 }
 
 .nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
+  @include gl-h-full;
+  @include gl-w-full;
+  @include gl-overflow-auto;
+
+  > div.context-header {
+    @include gl-mt-2;
+
+    a {
+      @include top-level-item;
+      @include context-header;
+    }
+  }
 }
 
 .sidebar-top-level-items {
+  @include gl-mt-2;
   margin-bottom: 60px;
 
+  .context-header a {
+    @include context-header;
+  }
+
   > li {
     .badge.badge-pill {
       @include gl-rounded-lg;

app/assets/stylesheets/framework/variables.scss

@@ -573,6 +573,9 @@ $inactive-badge-background: rgba($black, 0.08);
 $sidebar-toggle-height: 60px;
 $sidebar-toggle-width: 40px;
 $sidebar-milestone-toggle-bottom-margin: 10px;
+$sidebar-avatar-size: 32px;
+$sidebar-top-item-lr-margin: 4px;
+$sidebar-top-item-tb-margin: 1px;
 
 /*
 * Buttons

app/views/layouts/nav/sidebar/_admin.html.haml

@@ -2,8 +2,8 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to admin_root_path, title: _('Admin Overview') do
-        %span.avatar-container.s40.settings-avatar
-          = sprite_icon('admin', size: 24)
+        %span.avatar-container.s32.settings-avatar
+          = sprite_icon('admin', size: 18)
         %span.sidebar-context-title
           = _('Admin Area')
     %ul.sidebar-top-level-items{ data: { qa_selector: 'admin_sidebar_overview_submenu_content' } }

app/views/layouts/nav/sidebar/_context_menu_body.html.haml

 = link_to group_path(@group), title: @group.name do
-  %span.avatar-container.rect-avatar.s40.group-avatar
-    = group_icon(@group, class: "avatar s40 avatar-tile")
+  %span.avatar-container.rect-avatar.s32.group-avatar
+    = group_icon(@group, class: "avatar s32 avatar-tile")
   %span.sidebar-context-title
     = @group.name

app/views/layouts/nav/sidebar/_profile.html.haml

@@ -2,8 +2,8 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do
-        %span.avatar-container.s40.settings-avatar
-          = image_tag avatar_icon_for_user(current_user, 40), class: "avatar s40 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
+        %span.avatar-container.s32.settings-avatar
+          = image_tag avatar_icon_for_user(current_user, 40), class: "avatar s32 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
         %span.sidebar-context-title= _('User Settings')
     %ul.sidebar-top-level-items
       = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do

app/views/shared/nav/_scope_menu_body.html.haml

 = link_to scope_menu.link, **scope_menu.container_html_options do
-  %span.avatar-container.rect-avatar.s40.project-avatar
-    = source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s40 avatar-tile', width: 40, height: 40)
+  %span.avatar-container.rect-avatar.s32.project-avatar
+    = source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s32 avatar-tile', width: 40, height: 40)
   %span.sidebar-context-title
     = scope_menu.title

ee/app/views/layouts/nav/sidebar/_security.html.haml

@@ -2,7 +2,7 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to security_dashboard_path, title: _('Security Dashboard'), id: 'logo' do
-        %span.avatar-container.s40.settings-avatar.rect-avatar
+        %span.avatar-container.s32.settings-avatar.rect-avatar
           = brand_header_logo
         %span.sidebar-context-title
           = _('Security')