Page MenuHomePhabricator
Files F3359797

D9554.diff
No OneTemporary
Actions

D9554.diff
View Options

diff --git a/web/settings/appearance-change-modal.react.js b/web/settings/appearance-change-modal.react.js
--- a/web/settings/appearance-change-modal.react.js
+++ b/web/settings/appearance-change-modal.react.js
@@ -4,56 +4,70 @@
import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { useUpdateThemePreference } from 'lib/hooks/theme.js';
import css from './appearance-change-modal.css';
import Modal from '../modals/modal.react.js';
+import { useSelector } from '../redux/redux-utils.js';
function AppearanceChangeModal(): React.Node {
- const { popModal } = useModalContext();
+ const globalThemeInfo = useSelector(state => state.globalThemeInfo);
+ const updateThemePreference = useUpdateThemePreference();
- const [selectedMode, setSelectedMode] = React.useState('dark');
+ const { popModal } = useModalContext();
const onClickLightModeButton = React.useCallback(
- () => setSelectedMode('light'),
- [],
+ () => updateThemePreference('light'),
+ [updateThemePreference],
);
const onClickDarkModeButton = React.useCallback(
- () => setSelectedMode('dark'),
- [],
+ () => updateThemePreference('dark'),
+ [updateThemePreference],
);
const lightModeButtonClassName = classNames({
[css.button]: true,
- [css.selectedButton]: selectedMode === 'light',
+ [css.selectedButton]: globalThemeInfo.preference === 'light',
});
const darkModeButtonClassName = classNames({
[css.button]: true,
- [css.selectedButton]: selectedMode === 'dark',
+ [css.selectedButton]: globalThemeInfo.preference === '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
+ const appearanceChangeModal = React.useMemo(
+ () => (
+ <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>
- </div>
- </Modal>
+ </Modal>
+ ),
+ [
+ darkModeButtonClassName,
+ lightModeButtonClassName,
+ onClickDarkModeButton,
+ onClickLightModeButton,
+ popModal,
+ ],
);
+
+ return appearanceChangeModal;
}
export default AppearanceChangeModal;

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 10:56 AM (21 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2579408
Default Alt Text
D9554.diff (3 KB)

Event Timeline