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,34 @@ 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; +} + +.logoutContainer { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--fg); +} + +.logoutLabel { + color: var(--account-settings-label); +} + +.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 (

My Account

+
+ +
); } 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); }