diff --git a/app/soapbox/features/chats/components/chat_list.js b/app/soapbox/features/chats/components/chat_list.js
index daac2a07c..34808fa80 100644
--- a/app/soapbox/features/chats/components/chat_list.js
+++ b/app/soapbox/features/chats/components/chat_list.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { fetchChats } from 'soapbox/actions/chats';
-import Account from 'soapbox/components/account';
+import ChatListAccount from './chat_list_account';
const mapStateToProps = state => ({
chats: state.get('chats'),
@@ -23,6 +23,10 @@ class ChatList extends ImmutablePureComponent {
this.props.dispatch(fetchChats());
}
+ handleClickChat = () => {
+ // TODO: Open or focus chat panel
+ }
+
render() {
const { chats } = this.props;
@@ -34,7 +38,10 @@ class ChatList extends ImmutablePureComponent {
{chats.toList().map(chat => (
))}
diff --git a/app/soapbox/features/chats/components/chat_list_account.js b/app/soapbox/features/chats/components/chat_list_account.js
new file mode 100644
index 000000000..9864e854e
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat_list_account.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import Avatar from '../../../components/avatar';
+import DisplayName from '../../../components/display_name';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+export default class ChatListAccount extends ImmutablePureComponent {
+
+ static propTypes = {
+ account: ImmutablePropTypes.map.isRequired,
+ onClick: PropTypes.func,
+ };
+
+ handleClick = () => {
+ this.props.onClick(this.props.account);
+ }
+
+ render() {
+ const { account } = this.props;
+ if (!account) return null;
+
+ return (
+
+ );
+ }
+
+}
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 4b0980850..d9bbe2283 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -327,9 +327,10 @@
.account {
padding: 10px;
+ position: relative;
&:not(:last-of-type) {
- border-bottom: 1px solid var(--brand-color--med);
+ border-bottom: 1px solid var(--brand-color--med);
}
&.compact {
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 53119ffc4..88dad067e 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -228,4 +228,8 @@ noscript {
left: 0;
position: absolute;
z-index: 9999;
+ background: transparent;
+ border: 0;
+ margin: 0;
+ padding: 0;
}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 7cd165b17..ae95038a4 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -16,7 +16,6 @@
&__content {
background: var(--foreground-color);
- padding: 10px;
}
&__actions {