Implemented visual indication for deleted accounts [deploy dev]

packages/app/components/auth/chooseAccount/AccountSwitcher.tsx

@@ -36,12 +36,13 @@ const AccountSwitcher: ComponentType<Props> = ({ accounts, onAccountClick }) =>
                 <div
                     className={clsx(styles.item, {
                         [styles.inactiveItem]: selectedAccount && selectedAccount !== account.id,
+                        [styles.deletedAccount]: account.isDeleted,
                     })}
                     key={account.id}
                     data-e2e-account-id={account.id}
                     onClick={onAccountClickCallback(account)}
                 >
-                    <PseudoAvatar index={index} className={styles.accountIcon} />
+                    <PseudoAvatar index={index} deleted={account.isDeleted} className={styles.accountAvatar} />
                     <div className={styles.accountInfo}>
                         <div className={styles.accountUsername}>{account.username}</div>
                         <div className={styles.accountEmail}>{account.email}</div>

packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx

@@ -4,6 +4,7 @@ import { FormattedMessage as Message } from 'react-intl';
 
 import { connect } from 'app/functions';
 import BaseAuthBody from 'app/components/auth/BaseAuthBody';
+import { getSortedAccounts } from 'app/components/accounts/reducer';
 import type { Account } from 'app/components/accounts';
 
 import AccountSwitcher from './AccountSwitcher';
@@ -15,7 +16,7 @@ import styles from './chooseAccount.scss';
 // So to provide accounts list to the component, I'll create connected version of
 // the composes with already provided accounts list
 const ConnectedAccountSwitcher = connect((state) => ({
-    accounts: state.accounts.available,
+    accounts: getSortedAccounts(state),
 }))(AccountSwitcher);
 
 export default class ChooseAccountBody extends BaseAuthBody {

packages/app/components/auth/chooseAccount/accountSwitcher.scss

@@ -35,7 +35,7 @@ $border: 1px solid lighter($black);
     pointer-events: none;
 }
 
-.accountIcon {
+.accountAvatar {
     font-size: 35px;
     margin-right: 15px;
 }
@@ -56,12 +56,20 @@ $border: 1px solid lighter($black);
     @extend %overflowText;
     font-family: $font-family-title;
     color: #fff;
+
+    .deletedAccount & {
+        color: #aaa;
+    }
 }
 
 .accountEmail {
     @extend %overflowText;
-    color: #666;
+    color: #999;
     font-size: 12px;
+
+    .deletedAccount & {
+        color: #666;
+    }
 }
 
 .nextIcon {