diff --git a/app/soapbox/features/ui/components/profile_dropdown.js b/app/soapbox/features/ui/components/profile_dropdown.js index c53533d7f..0836682ba 100644 --- a/app/soapbox/features/ui/components/profile_dropdown.js +++ b/app/soapbox/features/ui/components/profile_dropdown.js @@ -9,10 +9,11 @@ import { isStaff } from 'soapbox/utils/accounts'; import { defineMessages, injectIntl } from 'react-intl'; import { logOut, switchAccount } from 'soapbox/actions/auth'; import { List as ImmutableList } from 'immutable'; +import Avatar from 'soapbox/components/avatar'; +import DisplayName from 'soapbox/components/display_name'; const messages = defineMessages({ add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' }, - switch: { id: 'profile_dropdown.switch_account', defaultMessage: 'Switch to @{acct}' }, logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' }, }); @@ -76,6 +77,19 @@ class ProfileDropdown extends React.PureComponent { this.props.dispatch(fetchOwnAccounts()); } + renderAccount = account => { + return ( +
+
+
+
+ +
+
+
+ ); + } + render() { const { intl, account, otherAccounts } = this.props; const size = this.props.size || 16; @@ -83,7 +97,7 @@ class ProfileDropdown extends React.PureComponent { let menu = []; otherAccounts.forEach(account => { - menu.push({ text: intl.formatMessage(messages.switch, { acct: account.get('acct') }), action: this.handleSwitchAccount(account) }); + menu.push({ text: this.renderAccount(account), action: this.handleSwitchAccount(account) }); }); if (otherAccounts.size > 0) { diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss index 320a7cb94..4a101b5e4 100644 --- a/app/styles/components/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -70,6 +70,10 @@ outline: 0; color: #fff; background: var(--brand-color) !important; + + * { + color: #fff; + } } } @@ -79,6 +83,10 @@ height: 1px; background: var(--foreground-color); } + + &__item .account { + line-height: normal; + } } // end .dropdown-menu