Page MenuHomePhorge

D3321.1765237500.diff
No OneTemporary

Size
1 KB
Referenced Files
None
Subscribers
None

D3321.1765237500.diff

diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -8,3 +8,23 @@
font-weight: var(--semi-bold);
line-height: var(--line-height-display);
}
+
+.content {
+ margin-top: 55px;
+}
+
+.content ul {
+ list-style-type: none;
+}
+
+.content li {
+ color: var(--account-settings-label);
+ border-bottom: 1px solid var(--border-color);
+ padding: 16px;
+ margin-bottom: 8px;
+}
+
+.username {
+ color: var(--fg);
+ word-break: break-word;
+}
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
@@ -2,12 +2,29 @@
import * as React from 'react';
+import { useSelector } from '../redux/redux-utils';
import css from './account-settings.css';
function AccountSettings(): React.Node {
+ const currentUserInfo = useSelector(state => state.currentUserInfo);
+ const username =
+ currentUserInfo && !currentUserInfo.anonymous
+ ? currentUserInfo.username
+ : undefined;
+
return (
<div className={css.container}>
<h4 className={css.header}>My Account</h4>
+ <div className={css.content}>
+ <ul>
+ <li>
+ <p>
+ {'Logged in as '}
+ <span className={css.username}>{username}</span>
+ </p>
+ </li>
+ </ul>
+ </div>
</div>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -107,4 +107,5 @@
--thread-menu-color-hover: var(--shades-white-100);
--thread-menu-color-dangerous: var(--error-primary);
--thread-menu-color-dangerous-hover: var(--error-light-50);
+ --account-settings-label: var(--shades-black-60);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 8, 11:45 PM (4 h, 19 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5851491
Default Alt Text
D3321.1765237500.diff (1 KB)

Event Timeline