[BUG] Custom style injection overriding theming

[BSFishy]

What is the bug?
A custom style overrides base Oui styles, which causes inconsistent styling in other parts of Dashboards. The style in question:

anomaly-detection-dashboards-plugin/public/pages/AnomalyCharts/index.scss

Lines 14 to 17 in 6d2c2d3

	.euiSuperUpdateButton {
	background-color: transparent !important;
	color: #006bb4 !important;
	}

How can one reproduce the bug?
Steps to reproduce the behavior:

1. Start an instance of Dashboards with a custom theme that changes ouiPrimaryColor (@bsfishy/[email protected] on NPM does this)
2. Navigate to a dashboard
3. Notice the Refresh button in the top right doesn't look correct

What is the expected behavior?
The Refresh button styling isn't globally altered

What is your host/environment?

• OS: Windows 10
• Version: Latest (3.0.0)
• Plugins:
  • Observability
  • Reporting
  • Alerting
  • Anomaly Detection
  • Maps
  • Notifications
  • Security Analytics
  • Index Management
  • Snapshot Management
  • Security

Do you have any screenshots?

Do you have any additional context?
This can be fixed in 2 ways:

1. Rename the class to something namespaced to this plugin (i.e. .anom-det-superUpdateButton) and make the styles use OUI theme variables (i.e. $ouiPrimaryColor) and point super date picker to use the newly named class.

2. THE PREFERRED APPROACH is to tell super date picker to set the fill: false prop (default is true) for the super update button. This will get rid of this style entirely and do things "the OUI way". An example of this is here: https://codesandbox.io/s/elastic-boyd-kmcgdx (I'm also an OUI maintainer, so you can ping me for any additional concerns)