Tweak styles to better work with themes

web/ui/react-app/src/App.scss

@@ -41,10 +41,6 @@ body.bootstrap-dark {
     overflow: hidden;
   }
 
-  button.execute-btn {
-    width: 84px;
-  }
-
   .alert.alert-danger {
     margin-bottom: 10px;
   }
@@ -136,15 +132,6 @@ body.bootstrap-dark {
     margin-left: 20px;
   }
 
-  .graph-controls .clear-time-btn,
-  .table-controls .clear-time-btn {
-    background: #fff;
-    border-left: none;
-    border-top: 1px solid #ced4da;
-    border-bottom: 1px solid #ced4da;
-    color: #495057;
-  }
-
   .graph-legend {
     margin: 15px 0 15px 55px;
     font-size: 0.75em;
@@ -279,7 +266,6 @@ body.bootstrap-dark {
   .query-stats {
     flex-grow: 1;
     font-size: 0.7rem;
-    color: #71808e;
   }
 
   // bootstrap-dark seems to break overflow on modals, making them unscrollable

web/ui/react-app/src/App.tsx

@@ -3,8 +3,6 @@ import Navigation from './Navbar';
 import { Container } from 'reactstrap';
 
 import './App.scss';
-import './themes/light.scss';
-import './themes/dark.scss';
 import { Router, Redirect } from '@reach/router';
 import useMedia from 'use-media';
 import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList } from './pages';

web/ui/react-app/src/Theme.tsx

@@ -4,38 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMoon, faSun, faAdjust } from '@fortawesome/free-solid-svg-icons';
 import { useTheme } from './contexts/ThemeContext';
 
-//const DarkTheme = lazy(() => import('./themes/dark'));
-//const LightTheme = lazy(() => import('./themes/light'));
-
 export const themeLocalStorageKey = 'user-prefers-color-scheme';
 
-/*
-const ThemeSpinner: FC = () => (
-  <div
-    style={{
-      zIndex: 2000,
-      backgroundColor: '#777',
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      width: '100vw',
-      height: '100vh',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexDirection: 'column',
-    }}
-  >
-    <FontAwesomeIcon
-      size="8x"
-      icon={faSpinner}
-      spin
-      style={{ transform: 'translate(-50%, -50%)', top: '50%', left: '50%', position: 'absolute' }}
-    />
-  </div>
-);
-*/
-
 export const Theme: FC = () => {
   const { theme } = useTheme();
 
@@ -45,11 +15,6 @@ export const Theme: FC = () => {
   }, [theme]);
 
   return null;
-  /*
-  Lazy loaded themes cause bootstrap css to load after intial render, which causes
-  problems with some components.
-  return <React.Suspense fallback={<ThemeSpinner />}>{theme === 'dark' ? <DarkTheme /> : <LightTheme />}</React.Suspense>;
-  */
 };
 
 export const ThemeToggle: FC = () => {

web/ui/react-app/src/contexts/ThemeContext.tsx

@@ -3,15 +3,17 @@ import React from 'react';
 export type themeName = 'light' | 'dark';
 export type themeSetting = themeName | 'auto';
 
-export interface themeCtx {
+export interface ThemeCtx {
   theme: themeName;
   userPreference: themeSetting;
   setTheme: (t: themeSetting) => void;
 }
 
-export const ThemeContext = React.createContext<themeCtx>({
+// defaults, will be overriden in App.tsx
+export const ThemeContext = React.createContext<ThemeCtx>({
   theme: 'light',
   userPreference: 'auto',
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   setTheme: (s: themeSetting) => {},
 });
 

web/ui/react-app/src/index.tsx

@@ -2,6 +2,8 @@ import './globals';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import './themes/light.scss';
+import './themes/dark.scss';
 import { isPresent } from './utils';
 
 // Declared/defined in public/index.html, value replaced by Prometheus when serving bundle.

web/ui/react-app/src/pages/graph/ExpressionInput.tsx

@@ -215,12 +215,10 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
                   value={value}
                 />
                 <InputGroupAddon addonType="append">
-                  <Button className="btn-light border" title="Open metrics explorer" onClick={this.openMetricsExplorer}>
+                  <Button title="Open metrics explorer" onClick={this.openMetricsExplorer}>
                     <FontAwesomeIcon icon={faGlobeEurope} />
                   </Button>
-                </InputGroupAddon>
-                <InputGroupAddon addonType="append">
-                  <Button className="execute-btn" color="primary" onClick={executeQuery}>
+                  <Button color="primary" onClick={executeQuery} style={{ width: 84 }}>
                     Execute
                   </Button>
                 </InputGroupAddon>

web/ui/react-app/src/pages/graph/QueryStatsView.tsx

@@ -11,7 +11,7 @@ const QueryStatsView: FC<QueryStats> = props => {
 
   return (
     <div className="query-stats">
-      <span className="float-right">
+      <span className="float-right text-secondary">
         Load time: {loadTime}ms &ensp; Resolution: {resolution}s &ensp; Result series: {resultSeries}
       </span>
     </div>

web/ui/react-app/src/pages/graph/TimeInput.tsx

@@ -120,7 +120,7 @@ class TimeInput extends Component<TimeInputProps> {
             that functionality is broken, so we create an external solution instead. */}
         {this.props.time && (
           <InputGroupAddon addonType="append">
-            <Button className="clear-time-btn" title="Clear time" onClick={this.clearTime}>
+            <Button outline color="secondary" className="clear-time-btn" title="Clear time" onClick={this.clearTime}>
               <FontAwesomeIcon icon={faTimes} fixedWidth />
             </Button>
           </InputGroupAddon>

web/ui/react-app/src/themes/shared.scss

@@ -1,5 +1,5 @@
 input[type='checkbox']:checked + label {
-  color: #286090;
+  color: $primary;
 }
 
 .tab-content {
@@ -27,3 +27,14 @@ input[type='checkbox']:checked + label {
   color: $dropdown-link-hover-color;
   background-color: $dropdown-link-hover-bg;
 }
+
+.graph-controls .clear-time-btn,
+.table-controls .clear-time-btn {
+  background-color: $input-bg;
+  border: $input-border-width solid $input-border-color;
+  border-left: 0;
+
+  &:hover {
+    color: darken($secondary, 10%);
+  }
+}