[Controls] fix time slider play button display=fill property not bein…

…g respected (#145417) resolves #145301 Steps to test * create new dashboard * Add time slider control * verify play toggle button has primary color background <img width="600" alt="Screen Shot 2022-11-16 at 9 56 00 AM" src="https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png"> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Nov 16, 2022 · de39dba · de39dba
1 parent 6936644
commit de39dba
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/src/plugins/controls/public/time_slider/components/index.scss b/src/plugins/controls/public/time_slider/components/index.scss
@@ -15,6 +15,10 @@
   min-width: $euiSizeXXL * 15;
 }
 
+.timeSlider-playToggle {
+  background-color: $euiColorPrimary !important;
+}
+
 .timeSlider__anchor {
   text-decoration: none;
   width: 100%;

diff --git a/src/plugins/controls/public/time_slider/components/time_slider_prepend.tsx b/src/plugins/controls/public/time_slider/components/time_slider_prepend.tsx
@@ -85,6 +85,7 @@ export const TimeSliderPrepend: FC<Props> = (props: Props) => {
       />
       {props.waitForControlOutputConsumersToLoad$ === undefined ? null : (
         <EuiButtonIcon
+          className="timeSlider-playToggle"
           onClick={isPaused ? onPlay : onPause}
           iconType={isPaused ? 'playFilled' : 'pause'}
           size="s"