From c18db6e71090fcd144f04dc479c77cd6e15c4055 Mon Sep 17 00:00:00 2001
From: Aaron Steinfeld <aaron@traceable.ai>
Date: Thu, 28 Jan 2021 14:20:14 -0500
Subject: [PATCH] fix: leave time range refresh button blue in primary mode

---
 .../src/time-range/time-range.component.scss          | 11 +++--------
 .../components/src/time-range/time-range.component.ts |  4 ++++
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/projects/components/src/time-range/time-range.component.scss b/projects/components/src/time-range/time-range.component.scss
index 858306c84..28fa814ff 100644
--- a/projects/components/src/time-range/time-range.component.scss
+++ b/projects/components/src/time-range/time-range.component.scss
@@ -40,8 +40,9 @@
   }
 }
 
-:host {
-  .refresh {
+.refresh {
+  margin-left: 8px;
+  &:not(.emphasized) {
     ::ng-deep {
       button.button.solid {
         @include top-bar-dark-button-background;
@@ -50,11 +51,5 @@
         }
       }
     }
-
-    margin-left: 8px;
-    cursor: pointer;
-    height: 32px;
-    display: flex;
-    align-items: center;
   }
 }
diff --git a/projects/components/src/time-range/time-range.component.ts b/projects/components/src/time-range/time-range.component.ts
index 419af5b55..877fd1efe 100644
--- a/projects/components/src/time-range/time-range.component.ts
+++ b/projects/components/src/time-range/time-range.component.ts
@@ -56,6 +56,7 @@ import { PopoverRef } from '../popover/popover-ref';
       <ht-button
         *ngIf="this.getRefreshButtonData | htMemoize: timeRange | async as refreshButton"
         class="refresh"
+        [ngClass]="refreshButton.isEmphasized ? 'emphasized' : ''"
         [label]="refreshButton.text$ | async"
         icon="${IconType.Refresh}"
         size="${ButtonSize.Small}"
@@ -106,6 +107,7 @@ export class TimeRangeComponent {
         of({
           text$: of('Refresh'),
           role: ButtonRole.Secondary,
+          isEmphasized: false,
           onClick: () => this.onRefresh(timeRange)
         }),
         this.ngZone.runOutsideAngular(() =>
@@ -123,6 +125,7 @@ export class TimeRangeComponent {
                 map(duration => `Refresh - updated ${duration.toString()} ago`)
               ),
               role: ButtonRole.Primary,
+              isEmphasized: true,
               onClick: () => this.onRefresh(timeRange)
             }))
           )
@@ -141,5 +144,6 @@ export class TimeRangeComponent {
 interface RefreshButtonData {
   text$: Observable<string>;
   role: ButtonRole;
+  isEmphasized: boolean;
   onClick(): void;
 }