[8.6] [Controls] fix time slider play button display=fill property no…

…t being respected (#145417) (#145447)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Controls] fix time slider play button display=fill property not
being respected
(#145417)](#145417)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"[email protected]"},"sourceCommit":{"committedDate":"2022-11-16T20:19:53Z","message":"[Controls]
fix time slider play button display=fill property not being respected
(#145417)\n\nresolves
https://github.com/elastic/kibana/issues/145301\r\n\r\nSteps to
test\r\n* create new dashboard\r\n* Add time slider control\r\n* verify
play toggle button has primary color background\r\n\r\n<img
width=\"600\" alt=\"Screen Shot 2022-11-16 at 9 56 00
AM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png\">\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"de39dba2c49959293a970b271a588269ba11ed0e","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","release_note:skip","auto-backport","v8.6.0","v8.7.0"],"number":145417,"url":"https://github.com/elastic/kibana/pull/145417","mergeCommit":{"message":"[Controls]
fix time slider play button display=fill property not being respected
(#145417)\n\nresolves
https://github.com/elastic/kibana/issues/145301\r\n\r\nSteps to
test\r\n* create new dashboard\r\n* Add time slider control\r\n* verify
play toggle button has primary color background\r\n\r\n<img
width=\"600\" alt=\"Screen Shot 2022-11-16 at 9 56 00
AM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png\">\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"de39dba2c49959293a970b271a588269ba11ed0e"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145417","number":145417,"mergeCommit":{"message":"[Controls]
fix time slider play button display=fill property not being respected
(#145417)\n\nresolves
https://github.com/elastic/kibana/issues/145301\r\n\r\nSteps to
test\r\n* create new dashboard\r\n* Add time slider control\r\n* verify
play toggle button has primary color background\r\n\r\n<img
width=\"600\" alt=\"Screen Shot 2022-11-16 at 9 56 00
AM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png\">\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"de39dba2c49959293a970b271a588269ba11ed0e"}}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <[email protected]>

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%;

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"