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 @@ -7,4 +7,30 @@ color: var(--fg); font-weight: var(--semi-bold); line-height: var(--line-height-display); + padding-bottom: 55px; +} + +.content ul { + list-style-type: none; +} + +.content li { + color: var(--account-settings-label); + border-bottom: 1px solid var(--border-color); + padding: 24px 16px 16px; +} + +.logoutContainer { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--fg); +} + +.logoutLabel { + color: var(--account-settings-label); +} + +.username { + color: var(--fg); } 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); + if (!currentUserInfo || currentUserInfo.anonymous) { + return null; + } + const { username } = currentUserInfo; + return (

My Account

+
+ +
); } diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -111,4 +111,5 @@ --app-list-icon-read-only-color: var(--shades-black-60); --app-list-icon-enabled-color: var(--success-primary); --app-list-icon-disabled-color: var(--shades-white-80); + --account-settings-label: var(--shades-black-60); }