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,33 @@ 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); +} 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 (
+ {'Logged in as '} + {username} +
+