Theme: Fixes to time picker calendar & variable dropdowns & more (#33407)

* More theme fixes

* more updates

* Fixed alerts in explore

public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx

@@ -36,7 +36,7 @@ export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, da
 
   return (
     <div className={styles.wrapper}>
-      <TabsBar className={styles.tabBar} hideBorder>
+      <TabsBar className={styles.tabBar}>
         {tabs.map((tab) => {
           return (
             <Tab

public/app/features/explore/ErrorContainer.tsx

@@ -1,7 +1,8 @@
 import React, { FunctionComponent } from 'react';
 import { DataQueryError } from '@grafana/data';
-import { Icon } from '@grafana/ui';
+import { Alert, useTheme2 } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
+import { css } from '@emotion/css';
 
 export interface ErrorContainerProps {
   queryError?: DataQueryError;
@@ -9,22 +10,20 @@ export interface ErrorContainerProps {
 
 export const ErrorContainer: FunctionComponent<ErrorContainerProps> = (props) => {
   const { queryError } = props;
+  const theme = useTheme2();
   const showError = queryError ? true : false;
   const duration = showError ? 100 : 10;
-  const message = queryError?.message || queryError?.data?.message || 'Unknown error';
+  const title = queryError ? 'Query error' : 'Unknown error';
+  const message = queryError?.message || queryError?.data?.message || null;
+  const alertWithTopMargin = css`
+    margin-top: ${theme.spacing(2)};
+  `;
 
   return (
     <FadeIn in={showError} duration={duration}>
-      <div className="alert-container">
-        <div className="alert-error alert">
-          <div className="alert-icon">
-            <Icon name="exclamation-triangle" />
-          </div>
-          <div className="alert-body">
-            <div className="alert-title">{message}</div>
-          </div>
-        </div>
-      </div>
+      <Alert severity="error" title={title} className={alertWithTopMargin}>
+        {message}
+      </Alert>
     </FadeIn>
   );
 };

public/app/features/explore/Explore.tsx

@@ -335,8 +335,8 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                 onClickRichHistoryButton={this.toggleShowRichHistory}
                 onClickQueryInspectorButton={this.toggleShowQueryInspector}
               />
+              <ResponseErrorContainer exploreId={exploreId} />
             </div>
-            <ResponseErrorContainer exploreId={exploreId} />
             <AutoSizer onResize={this.onResize} disableHeight>
               {({ width }) => {
                 if (width === 0) {

public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap

@@ -5,29 +5,12 @@ exports[`ErrorContainer should render component 1`] = `
   duration={100}
   in={true}
 >
-  <div
-    className="alert-container"
+  <Alert
+    className="css-x7g5ai"
+    severity="error"
+    title="Query error"
   >
-    <div
-      className="alert-error alert"
-    >
-      <div
-        className="alert-icon"
-      >
-        <Icon
-          name="exclamation-triangle"
-        />
-      </div>
-      <div
-        className="alert-body"
-      >
-        <div
-          className="alert-title"
-        >
-          Error message
-        </div>
-      </div>
-    </div>
-  </div>
+    Error message
+  </Alert>
 </FadeIn>
 `;

public/app/features/explore/__snapshots__/Explore.test.tsx.snap

@@ -27,10 +27,10 @@ exports[`Explore should render component 1`] = `
         queryInspectorButtonActive={false}
         richHistoryButtonActive={false}
       />
+      <ResponseErrorContainer
+        exploreId="left"
+      />
     </div>
-    <ResponseErrorContainer
-      exploreId="left"
-    />
     <AutoSizer
       disableHeight={true}
       disableWidth={false}