Page MenuHomePhorge
Files F32613324

D9203.1767453477.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D9203.1767453477.diff
View Options

diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -14,6 +14,7 @@
} from 'lib/utils/action-utils.js';
import css from './account-settings.css';
+import AppearanceChangeModal from './appearance-change-modal.react.js';
import PasswordChangeModal from './password-change-modal.js';
import BlockListModal from './relationship/block-list-modal.react.js';
import FriendListModal from './relationship/friend-list-modal.react.js';
@@ -60,9 +61,10 @@
const staffCanSee = useStaffCanSee();
- const showAppearanceModal = React.useCallback(() => {
- // TODO
- }, []);
+ const showAppearanceModal = React.useCallback(
+ () => pushModal(<AppearanceChangeModal />),
+ [pushModal],
+ );
if (!currentUserInfo || currentUserInfo.anonymous) {
return null;
diff --git a/web/settings/appearance-change-modal.css b/web/settings/appearance-change-modal.css
new file mode 100644
--- /dev/null
+++ b/web/settings/appearance-change-modal.css
@@ -0,0 +1,27 @@
+.container {
+ padding: 16px 32px 24px;
+}
+
+.header {
+ font-size: var(--l-font-18);
+ color: var(--fg);
+ font-weight: var(--normal);
+}
+
+.buttonContainer {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 24px;
+}
+
+.button {
+ color: var(--fg);
+}
+
+.button:hover {
+ cursor: pointer;
+}
+
+.selectedButton {
+ border-bottom: 1px solid var(--fg);
+}
diff --git a/web/settings/appearance-change-modal.react.js b/web/settings/appearance-change-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/appearance-change-modal.react.js
@@ -0,0 +1,59 @@
+// @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');
+
+ const onClickLightModeButton = React.useCallback(
+ () => setSelectedMode('light'),
+ [],
+ );
+
+ const onClickDarkModeButton = React.useCallback(
+ () => setSelectedMode('dark'),
+ [],
+ );
+
+ 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;

File Metadata

Mime Type
text/plain
Expires
Sat, Jan 3, 3:17 PM (6 h, 12 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5889481
Default Alt Text
D9203.1767453477.diff (3 KB)

Event Timeline