Merge pull request #12922 from influxdata/variables/style-polish

Variables/style polish

ui/src/dashboards/components/variablesControlBar/DraggableDropdown.tsx

@@ -82,7 +82,7 @@ class Dropdown extends React.Component<
 
     return connectDragSource(
       connectDropTarget(
-        <div style={{display: 'inline-block'}}>
+        <div className="variable-dropdown--container">
           <div className={className}>
             {/* TODO: Add variable description to title attribute when it is ready */}
             <div className="variable-dropdown--label">

ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss

@@ -21,7 +21,11 @@ $variables-control-bar--gutter: $ix-marg-a;
   }
 
   .variable-dropdown {
-    margin: 0 $variables-control-bar--gutter / 2;
+    margin-right: $variables-control-bar--gutter / 2;
+  }
+
+  .variable-dropdown--container {
+    padding-bottom: 5px;
   }
 
   .variables-spinner-container {
@@ -29,7 +33,6 @@ $variables-control-bar--gutter: $ix-marg-a;
   }
 }
 
-
 .variables-control-bar--empty {
   background-color: $g3-castle;
   border-radius: $radius;
@@ -40,3 +43,8 @@ $variables-control-bar--gutter: $ix-marg-a;
 .variables-control-bar > .techno-spinner {
   margin-left: 10px;
 }
+
+.variables-control-bar.presentation-mode {
+  padding: 8px 0px 0px 8px;
+  min-height: 0px;
+}

ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx

@@ -4,6 +4,7 @@ import {connect} from 'react-redux'
 import {isEmpty} from 'lodash'
 import {DragDropContext} from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
+import classnames from 'classnames'
 
 // Components
 import {
@@ -43,6 +44,7 @@ interface StateProps {
   variables: Variable[]
   valuesStatus: RemoteDataState
   variablesStatus: RemoteDataState
+  inPresentationMode: boolean
 }
 
 interface DispatchProps {
@@ -71,7 +73,11 @@ class VariablesControlBar extends PureComponent<Props, State> {
 
   render() {
     return (
-      <div className="variables-control-bar">
+      <div
+        className={classnames('variables-control-bar', {
+          'presentation-mode': this.props.inPresentationMode,
+        })}
+      >
         <SpinnerContainer
           loading={this.state.initialLoading}
           spinnerComponent={<TechnoSpinner diameterPixels={50} />}
@@ -143,7 +149,13 @@ const mstp = (state: AppState, props: OwnProps): StateProps => {
   const valuesStatus = getDashboardValuesStatus(state, props.dashboardID)
   const variablesStatus = getDashboardVariablesStatus(state)
 
-  return {variables, valuesStatus, variablesStatus}
+  const {
+    app: {
+      ephemeral: {inPresentationMode},
+    },
+  } = state
+
+  return {variables, valuesStatus, variablesStatus, inPresentationMode}
 }
 
 export default DragDropContext(HTML5Backend)(