refactor: rearrange styles for sharing in app header

also updated select to actually take the size argument into account

Author: aaron-steinfeld

projects/assets-library/assets/styles/_interaction.scss

@@ -55,3 +55,27 @@
 
   @include list-hover;
 }
+
+@mixin top-bar-light-button-background {
+  background-color: white;
+
+  &:hover {
+    background-color: $gray-1;
+  }
+}
+
+@mixin top-bar-light-button-foreground {
+  @include body-1-medium($gray-8);
+}
+
+@mixin top-bar-dark-button-background {
+  background-color: $gray-6;
+
+  &:hover {
+    background-color: $gray-5;
+  }
+}
+
+@mixin top-bar-dark-button-foreground {
+  @include body-1-medium(white);
+}

projects/components/src/header/application/application-header.component.scss

@@ -45,12 +45,17 @@
     padding-left: 46px;
   }
 
-  .right-side {
+  .right-side-content {
     display: flex;
     margin-left: auto;
     align-items: center;
   }
 
+  .left-side-content {
+    display: flex;
+    align-items: center;
+  }
+
   .header-action {
     cursor: pointer;
     padding: 0 12px;

projects/components/src/header/application/application-header.component.ts

@@ -12,12 +12,16 @@ import { GLOBAL_HEADER_HEIGHT, NavigationService } from '@hypertrace/common';
           <ng-content select="[logo]"></ng-content>
         </div>
         <div class="divider"></div>
+        <div class="left-side-content">
+          <ng-content select="[left]"></ng-content>
+        </div>
         <div class="time-range">
           <ht-time-range></ht-time-range>
         </div>
       </div>
-      <div class="right-side">
+      <div class="right-side-content">
         <ng-content></ng-content>
+        <ng-content select="[right]"></ng-content>
       </div>
     </div>
   `

projects/components/src/select/select.component.scss

@@ -16,11 +16,16 @@
   align-items: center;
   border: 1px solid $color-border;
   border-radius: 6px;
-  height: 100%;
   width: 100%;
+  height: 34px;
+
+  &.small {
+    height: 32px;
+  }
 
   .select-container {
     width: 100%;
+    height: 100%;
   }
 
   &.disabled {
@@ -52,7 +57,7 @@
     align-items: center;
     padding: 0 8px;
     cursor: pointer;
-    height: 34px;
+    height: 100%;
 
     &.justify-left {
       justify-content: flex-start;
@@ -108,5 +113,9 @@
     &:hover {
       background: $gray-1;
     }
+
+    &.small {
+      height: 32px;
+    }
   }
 }

projects/components/src/select/select.component.ts

@@ -49,7 +49,12 @@ import { SelectSize } from './select-size';
         </ht-popover-trigger>
         <ht-popover-content>
           <div class="select-content">
-            <div *ngFor="let item of items" (click)="this.onSelectionChange(item)" class="select-option">
+            <div
+              *ngFor="let item of items"
+              (click)="this.onSelectionChange(item)"
+              class="select-option"
+              [ngClass]="this.size"
+            >
               <span class="label">{{ item.label }}</span>
               <ht-icon
                 class="status-icon"

projects/components/src/time-range/time-range.component.scss

@@ -1,24 +1,15 @@
 @import 'mixins';
 
-@mixin top-bar-button() {
-  // Custom styling for top bar different shades than normal buttons
-  background-color: $gray-6;
-  border-radius: 6px;
-
-  &:hover {
-    background-color: $gray-5;
-  }
-}
-
 .time-range {
   display: flex;
   align-items: center;
 }
 
 .time-range-selector {
-  @include top-bar-button();
+  @include top-bar-dark-button-background;
+  @include top-bar-dark-button-foreground;
   min-width: 200px;
-  color: white;
+  border-radius: 6px;
 }
 
 .trigger {
@@ -49,16 +40,21 @@
   }
 }
 
-.refresh {
-  ::ng-deep {
-    button.button.secondary {
-      @include top-bar-button();
+:host {
+  .refresh {
+    ::ng-deep {
+      button.button.solid {
+        @include top-bar-dark-button-background;
+        .label {
+          @include top-bar-dark-button-foreground;
+        }
+      }
     }
+
+    margin-left: 8px;
+    cursor: pointer;
+    height: 32px;
+    display: flex;
+    align-items: center;
   }
-  margin-left: 8px;
-  cursor: pointer;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  color: $gray-3;
 }