RefreshPicker: minor design update (#16774)

Fixes #16627

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -55,7 +55,7 @@ export class RefreshPicker extends PureComponent<Props> {
 
     const cssClasses = classNames({
       'refresh-picker': true,
-      'refresh-picker--refreshing': selectedValue.label !== offOption.label,
+      'refresh-picker--off': selectedValue.label === offOption.label,
     });
 
     return (

packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss

@@ -6,6 +6,10 @@
     display: flex;
   }
 
+  .navbar-button--refresh {
+    border-right: 0;
+  }
+
   .gf-form-input--form-dropdown {
     position: static;
   }
@@ -16,9 +20,13 @@
     width: 100%;
   }
 
-  &--refreshing {
+  .select-button-value {
+    color: $orange;
+  }
+
+  &--off {
     .select-button-value {
-      color: $orange;
+      display: none;
     }
   }
 

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -267,8 +267,8 @@ export class DashNav extends PureComponent<Props> {
 
         {!dashboard.timepicker.hidden && (
           <div className="navbar-buttons">
-            <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
             <div className="gf-timepicker-nav" ref={element => (this.timePickerEl = element)} />
+            <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
           </div>
         )}
       </div>