Differential D9203 Diff 31237 web/settings/appearance-change-modal.react.js

Changeset View

Standalone View

web/settings/appearance-change-modal.react.js

This file was added.

				// @flow

				import classNames from 'classnames';
				import * as React from 'react';

				import { useModalContext } from 'lib/components/modal-provider.react.js';

				import css from './appearance-change-modal.css';
				import Modal from '../modals/modal.react.js';

				function AppearanceChangeModal(): React.Node {
				const { popModal } = useModalContext();

				const [selectedMode, setSelectedMode] = React.useState('dark');
				ginsuAuthorUnsubmitted Done Inline Actions This is temporary and will be replaced when I introduce the global theme redux states ginsu: This is temporary and will be replaced when I introduce the global theme redux states

				const onClickLightModeButton = React.useCallback(
				() => setSelectedMode('light'),
				[],
				);

				const onClickDarkModeButton = React.useCallback(
				() => setSelectedMode('dark'),
				[],
				);
				ginsuAuthorUnsubmitted Done Inline Actions 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 ginsu: I'm aware that this is not a very elegant solution here. Again want to reiterate that this is…

				const lightModeButtonClassName = classNames({
				[css.button]: true,
				[css.selectedButton]: selectedMode === 'light',
				});

				const darkModeButtonClassName = classNames({
				[css.button]: true,
				[css.selectedButton]: selectedMode === 'dark',
				});

				return (
				<Modal name="Appearance" onClose={popModal}>
				<div className={css.container}>
				<h1 className={css.header}>App theme</h1>
				<div className={css.buttonContainer}>
				<div
				className={lightModeButtonClassName}
				onClick={onClickLightModeButton}
				>
				Light
				</div>
				<div
				className={darkModeButtonClassName}
				onClick={onClickDarkModeButton}
				>
				Dark
				</div>
				</div>
				</div>
				</Modal>
				);
				}

				export default AppearanceChangeModal;