Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a dark theme #8604

Merged
merged 19 commits into from
Apr 15, 2021
Merged

Add a dark theme #8604

merged 19 commits into from
Apr 15, 2021

Commits on Apr 15, 2021

  1. Upgrade bootstrap and reactstrap to the latest version 

    Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    884245e View commit details
    Browse the repository at this point in the history

  2. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    93bbffe View commit details
    Browse the repository at this point in the history

  3. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    99cd0d2 View commit details
    Browse the repository at this point in the history

  4. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    b76cb5e View commit details
    Browse the repository at this point in the history

  5. Add a dark theme for CollapsibleAlertPanel 

    Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    2b6ec2c View commit details
    Browse the repository at this point in the history

  6. Add a dark theme for RulesContent 

    Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    1835a70 View commit details
    Browse the repository at this point in the history

  7. Add a dark theme for Config 

    Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    a2cb466 View commit details
    Browse the repository at this point in the history

  8. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    a33c6d4 View commit details
    Browse the repository at this point in the history

  9. Add a dark theme for QueryStatsView 

    Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    4e22eb1 View commit details
    Browse the repository at this point in the history

  10. Add a dark theme for MetricsExplorer 

    Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    12cff37 View commit details
    Browse the repository at this point in the history

  11. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    7f3e6e7 View commit details
    Browse the repository at this point in the history

  12. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    54535bb View commit details
    Browse the repository at this point in the history

  13. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    110d818 View commit details
    Browse the repository at this point in the history

  14. Add a dark theme for /graph page tabs 

    Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    54b8cf0 View commit details
    Browse the repository at this point in the history

  15. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    19b5330 View commit details
    Browse the repository at this point in the history

  16. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    2dc3893 View commit details
    Browse the repository at this point in the history

  17. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    be3cf97 View commit details
    Browse the repository at this point in the history

  18. 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>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    5324821 View commit details
    Browse the repository at this point in the history

  19. Move codicon font to app.scss 

    This needs to be applied globally, not per theme.

Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
    @prymitive
    prymitive committed Apr 15, 2021
    Configuration menu
    Copy the full SHA
    11f290e View commit details
    Browse the repository at this point in the history