diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css index a89624ece..6c55443d9 100644 --- a/web/settings/account-settings.css +++ b/web/settings/account-settings.css @@ -1,65 +1,61 @@ .container { padding: 40px; width: 456px; } .header { color: var(--fg); font-weight: var(--semi-bold); line-height: var(--line-height-display); padding-bottom: 55px; } -.content { - margin-top: 32px; -} - .content ul { list-style-type: none; } .content li { color: var(--account-settings-label); padding: 24px 16px 16px; display: flex; flex-direction: row; justify-content: space-between; } .content li:not(:last-child) { border-bottom: 1px solid var(--border-color); } .logoutContainer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); } .logoutLabel { color: var(--account-settings-label); } .username { color: var(--fg); } .buttonText { color: var(--account-button-color); line-height: var(--line-height-text); } .passwordContainer { display: flex; } .password { align-items: center; padding-right: 16px; } .editPasswordLink { color: var(--account-settings-label); cursor: pointer; } diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js index 2d7baa698..b7894da22 100644 --- a/web/settings/account-settings.react.js +++ b/web/settings/account-settings.react.js @@ -1,119 +1,110 @@ // @flow import * as React from 'react'; import { logOut, logOutActionTypes } from 'lib/actions/user-actions.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import { useStringForUser } from 'lib/hooks/ens-cache.js'; import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js'; import { accountHasPassword } from 'lib/shared/account-utils.js'; -import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils.js'; import css from './account-settings.css'; import PasswordChangeModal from './password-change-modal.js'; import BlockListModal from './relationship/block-list-modal.react.js'; import FriendListModal from './relationship/friend-list-modal.react.js'; -import Avatar from '../components/avatar.react.js'; import Button from '../components/button.react.js'; import { useSelector } from '../redux/redux-utils.js'; function AccountSettings(): React.Node { const sendLogoutRequest = useServerCall(logOut); const preRequestUserState = useSelector(preRequestUserStateSelector); const dispatchActionPromise = useDispatchActionPromise(); const logOutUser = React.useCallback( () => dispatchActionPromise( logOutActionTypes, sendLogoutRequest(preRequestUserState), ), [dispatchActionPromise, preRequestUserState, sendLogoutRequest], ); const { pushModal, popModal } = useModalContext(); const showPasswordChangeModal = React.useCallback( () => pushModal(), [pushModal], ); const openFriendList = React.useCallback( () => pushModal(), [popModal, pushModal], ); const openBlockList = React.useCallback( () => pushModal(), [popModal, pushModal], ); const isAccountWithPassword = useSelector(state => accountHasPassword(state.currentUserInfo), ); const currentUserInfo = useSelector(state => state.currentUserInfo); const stringForUser = useStringForUser(currentUserInfo); - - const avatarInfo = React.useMemo( - () => getAvatarForUser(currentUserInfo), - [currentUserInfo], - ); - if (!currentUserInfo || currentUserInfo.anonymous) { return null; } let changePasswordSection; if (isAccountWithPassword) { changePasswordSection = (
  • Password ******
  • ); } return (

    My Account

    -
    • {'Logged in as '} {stringForUser}

    • {changePasswordSection}
    • Friend List
    • Block List
    ); } export default AccountSettings;