[web] introduce AppearanceChangeModal
ClosedPublic
Actions

Authored by ginsu on Sep 14 2023, 9:05 AM.

Details

Reviewers

atul
inka
rohan

Commits

rCOMM57caceed7b27: [web] introduce AppearanceChangeModal

Summary

This diff introduces the AppearanceChangeModal component which will be used to toggle between light and dark mode for web.

Again I want to reiterate that the designs/UI here is not finalized. @ted still needs to do an official design pass for this, but since we are only showing this internally at the moment, I prioritized getting something "quick and dirty" out so @ted and I can start testing asap with the intention that we will polish this up down the line

Test Plan

Please see screenshot below

Screenshot 2023-09-14 at 12.05.28 PM.png (2×3 px, 819 KB)

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.Sep 14 2023, 9:05 AM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptSep 14 2023, 9:05 AM

ginsu edited the summary of this revision. (Show Details)Sep 14 2023, 9:07 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, inka, rohan.

ginsu attached a referenced file: F759465: Screenshot 2023-09-14 at 12.05.28 PM.png. (Show Details)

ginsu added a subscriber: • ted.

ginsu added inline comments.Sep 14 2023, 9:10 AM

web/settings/appearance-change-modal.react.js
14 ↗	(On Diff #31143)	This is temporary and will be replaced when I introduce the global theme redux states

Harbormaster completed remote builds in B22634: Diff 31143.Sep 14 2023, 9:23 AM

ginsu requested review of this revision.Sep 14 2023, 9:23 AM

atul requested changes to this revision.Sep 17 2023, 3:04 PM

atul added inline comments.

web/settings/appearance-change-modal.react.js
38 ↗	(On Diff #31143)	useCallback
44 ↗	(On Diff #31143)	useCallback

This revision now requires changes to proceed.Sep 17 2023, 3:04 PM

address @atul's feedback

ginsu added inline comments.Sep 18 2023, 3:22 PM

web/settings/appearance-change-modal.react.js
14 ↗	(On Diff #31237)	This is temporary and will be replaced when I introduce the global theme redux states
16–24 ↗	(On Diff #31237)	I'm aware that this is not a very elegant solution here. Again want to reiterate that this is supposed to be "quick + dirty" and I anticipate that this is going to be updated after this experience goes through a design pass