-
Notifications
You must be signed in to change notification settings - Fork 9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Upgrade bootstrap and reactstrap to the latest version
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add SASS support
node-sass is needed for cra to handle SCSS files instead of pure CSS.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme
This adds a dark theme and UI controls to switch between themes.
Dark theme will require some CSS changes that will follow in future commits.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a margin to Prometheus brand
There is no space between 'Prometheus' brand text and the toggle button when using mobile device.
This adds a margin to the button that's only rendered on mobile
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for CollapsibleAlertPanel
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for RulesContent
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for Config
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Use bootstrap classes for margins
We can override margins via bootstrap css classes instead of loading custom css module.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for QueryStatsView
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for MetricsExplorer
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for 'Clear time' button
This button had some custom css based on light bootstrap theme so it needs to be adjusted for dark theme.
This change re-uses bootstrap styles used for input components instead of copying color values
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add dark theme for Graph panel input
This makes the whole input group look consistent in dark mode as the old styles were made to blend it with the default bootstrap theme.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for CME expression input
This change splits current CME theme into 3:
1 - base theme used for both light and dark mode
2 - light mode specific theme that overrides base
3 - dark mode specific theme that overrides base
To make it all work we also need to move theme to dynamic config, so when theme value
in ThemeContext changes CME input will apply a new theme.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for /graph page tabs
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Fix metrics explorer modal scroll
bootstrap-dark breaks scrolling on the metrics modal, so we need an extra rule to fix that.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Move App.css rules to themes/_shared.scss
This completes splitting styles into light and dark theme.
It also fixes some small issues with themes as now all styles from App.css are applied correctly.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Move html{} styles to a dedicated file
html block is root document so styles for it cannot be nested under theme classes.
Move it out and add a bit of documentation to explain what which file does.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Fix reboot styles overriding other FontAwesome classes
Both bootstrap themes we use import reboot classes (https://getbootstrap.com/docs/4.6/content/reboot/) which has the side effect of overriding other classes. We need reboot to be applied as defaults for the browser, so it needs to be moved out of theme class selectors. But because reboot requires scss variables we need to feed it something, for that we use the default light theme, so it gets imported there and browser will use style of the default theme to reset default (unthemed) styles.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Move codicon font to app.scss
This needs to be applied globally, not per theme.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>- Loading branch information
Showing
28 changed files
with
1,014 additions
and
170 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React, { FC, useEffect } from 'react'; | ||
| import { Form, Button, ButtonGroup } from 'reactstrap'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { faMoon, faSun, faAdjust } from '@fortawesome/free-solid-svg-icons'; | ||
| import { useTheme } from './contexts/ThemeContext'; | ||
|
|
||
| export const themeLocalStorageKey = 'user-prefers-color-scheme'; | ||
|
|
||
| export const Theme: FC = () => { | ||
| const { theme } = useTheme(); | ||
|
|
||
| useEffect(() => { | ||
| document.body.classList.toggle('bootstrap-dark', theme === 'dark'); | ||
| document.body.classList.toggle('bootstrap', theme === 'light'); | ||
| }, [theme]); | ||
|
|
||
| return null; | ||
| }; | ||
|
|
||
| export const ThemeToggle: FC = () => { | ||
| const { userPreference, setTheme } = useTheme(); | ||
|
|
||
| return ( | ||
| <Form className="ml-auto" inline> | ||
| <ButtonGroup size="sm"> | ||
| <Button | ||
| color="secondary" | ||
| title="Use light theme" | ||
| active={userPreference === 'light'} | ||
| onClick={() => setTheme('light')} | ||
| > | ||
| <FontAwesomeIcon icon={faSun} className={userPreference === 'light' ? 'text-white' : 'text-dark'} /> | ||
| </Button> | ||
| <Button color="secondary" title="Use dark theme" active={userPreference === 'dark'} onClick={() => setTheme('dark')}> | ||
| <FontAwesomeIcon icon={faMoon} className={userPreference === 'dark' ? 'text-white' : 'text-dark'} /> | ||
| </Button> | ||
| <Button | ||
| color="secondary" | ||
| title="Use browser-preferred theme" | ||
| active={userPreference === 'auto'} | ||
| onClick={() => setTheme('auto')} | ||
| > | ||
| <FontAwesomeIcon icon={faAdjust} className={userPreference === 'auto' ? 'text-white' : 'text-dark'} /> | ||
| </Button> | ||
| </ButtonGroup> | ||
| </Form> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from 'react'; | ||
|
|
||
| export type themeName = 'light' | 'dark'; | ||
| export type themeSetting = themeName | 'auto'; | ||
|
|
||
| export interface ThemeCtx { | ||
| theme: themeName; | ||
| userPreference: themeSetting; | ||
| setTheme: (t: themeSetting) => void; | ||
| } | ||
|
|
||
| // 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) => {}, | ||
| }); | ||
|
|
||
| export const useTheme = () => { | ||
| return React.useContext(ThemeContext); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.