Conversation
to demonstrate problems
the solution feels too complicated
had to rename $teal, $white (maybe $black), because they are standard color names and so the lookup got confused
ayan4m1
requested review from
a team and
ayan4m1
and removed request for
a team
Codecov Report
@@ Coverage Diff @@
## master #70 +/- ##
=======================================
Coverage 78.89% 78.89%
=======================================
Files 87 87
Lines 1668 1668
=======================================
Hits 1316 1316
Misses 352 352 Continue to review full report at Codecov.
|
to be able to work with the colors better
missing: dropdown options
…earing in output css
* rearrange scattered rules * remove unnecessasry theming rules * remove transition to be in accordance with text inputs
(cherry picked from commit 51c0d65)
src/components/App/App.js
Outdated
| }); | ||
|
|
||
| export default withRouter(connect(null, mapDispatchToProps)(App)); | ||
| export default withTheme(withRouter(connect(null, mapDispatchToProps)(App))); |
src/reducers/theme.test.js
Outdated
| it('reduces TOGGLE_DARK_MODE action', () => { | ||
| const action = actions.toggleDarkMode(); | ||
|
|
||
| expect(reducer({}, action)).toEqual({ name }); |
There was a problem hiding this comment.
It would improve this test if it also tested that the theme is set to dark if toggleDarkMode is called again.
src/components/App/App.test.js
Outdated
| const store = mockStore({ application: initialState }); | ||
| const store = mockStore({ | ||
| application: initialApplicationState, | ||
| theme: initialThemeState |
There was a problem hiding this comment.
Is there any specific reason for theme to live outside application?
There was a problem hiding this comment.
As we now don't have a theme component anymore, not really. I moved all theme-related redux code into application now, i.e. including the selectors/reducers/actions. The only issue is that the only place where the toggleDarkMode() action is used, on the user settings page, all application actions are imported. I don't know if that's an issue though (if it gets optimized away or if it would be better to only import one action or move the action to a different file).
| <Row className="text-center"> | ||
| <Col md="12" className="align-self-center"> | ||
| Toggle Dark Mode | ||
| <ToggleButton |
3 participants
Adds a ToggleButton to user settings to toggle Dark Mode.
Can easily be refactored for more themes.
Still to do:
add persistency of the setting (save in db or localStorage?)e.g. lighter-blue, light-blue become blue-lighter and blue-light
gray("200")et al."fixed" by instead adding global transition when changing color theme
Other things: