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 (
+ {'Logged in as '} + {username} +
+