TimePicker: Should display in kiosk mode (#21816)

* Timepicker class fixed

* Missed arrow in dashboard title

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

@@ -158,7 +158,7 @@ export class UnthemedTimePicker extends PureComponent<Props, State> {
     const hasAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);
     const syncedTimePicker = timeSyncButton && isSynced;
     const timePickerIconClass = cx('fa fa-clock-o fa-fw', { ['icon-brand-gradient']: syncedTimePicker });
-    const timePickerButtonClass = cx('btn navbar-button navbar-button--zoom', {
+    const timePickerButtonClass = cx('btn navbar-button navbar-button--tight', {
       [`btn--radius-right-0 ${styles.noRightBorderStyle}`]: !!timeSyncButton,
       [`explore-active-button-glow ${styles.syncedTimePicker}`]: syncedTimePicker,
     });

packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
       >
         <button
           aria-label="TimePicker Open Button"
-          className="btn navbar-button navbar-button--zoom"
+          className="btn navbar-button navbar-button--tight"
           onClick={[Function]}
         >
           <i
@@ -342,7 +342,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
       >
         <button
           aria-label="TimePicker Open Button"
-          className="btn navbar-button navbar-button--zoom"
+          className="btn navbar-button navbar-button--tight"
           onClick={[Function]}
         >
           <i

public/sass/components/_view_states.scss

@@ -14,6 +14,7 @@
     }
 
     i.navbar-page-btn__folder-icon {
+      display: inline-block;
       opacity: inherit;
     }
   }