From 477b6deb29bf5ea6dd6adba62205cd10fcf9c36d Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Fri, 7 Dec 2018 14:36:45 +0300 Subject: Chat spinner and styling --- vnext/src/components/Avatar.js | 2 +- vnext/src/components/Contact.js | 4 ++-- vnext/src/components/Contacts.js | 24 +++++++++--------------- vnext/src/components/Settings.js | 4 ++-- vnext/src/components/Spinner.js | 16 ++++++++++++++++ 5 files changed, 30 insertions(+), 20 deletions(-) (limited to 'vnext') diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js index 4c3ac0b6..002badde 100644 --- a/vnext/src/components/Avatar.js +++ b/vnext/src/components/Avatar.js @@ -8,7 +8,7 @@ import Icon from './Icon'; const Avatar = React.memo(props => { return ( -
+
{ props.user.uname ? diff --git a/vnext/src/components/Contact.js b/vnext/src/components/Contact.js index 4b8901a8..dd68d338 100644 --- a/vnext/src/components/Contact.js +++ b/vnext/src/components/Contact.js @@ -3,9 +3,9 @@ import { UserType } from './Types'; import Avatar from './Avatar'; -const Contact = React.memo(({ user, ...rest }) => { +const Contact = React.memo(({ user, style, ...rest }) => { return ( - + {user.unreadCount && {user.unreadCount}}
{user.lastMessageText}
diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js index 84a6ec9f..bdbc5a01 100644 --- a/vnext/src/components/Contacts.js +++ b/vnext/src/components/Contacts.js @@ -4,6 +4,7 @@ import { getChats } from '../api'; import Contact from './Contact.js'; +import { ChatSpinner } from './Spinner'; export default class Contacts extends React.Component { constructor(props) { @@ -28,17 +29,13 @@ export default class Contacts extends React.Component { render() { const { pms } = this.state; return ( -
-
-
    - { - pms && pms.map((chat) => -
  • - -
  • - ) - } -
+
+
+ { + pms.length ? pms.map((chat) => + + ) : <> + }
); @@ -51,17 +48,14 @@ const wrapperStyle = { }; const chatListStyle = { - boxSizing: 'border-box', - padding: '0 20px', display: 'flex', - alignItems: 'center', flexDirection: 'column', width: '100%' }; const chatTitleStyle = { width: '100%', - padding: '3px 6px', + padding: '12px', textAlign: 'left', background: '#fff', color: '#222', diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js index 14c81e38..06550194 100644 --- a/vnext/src/components/Settings.js +++ b/vnext/src/components/Settings.js @@ -68,7 +68,7 @@ export default class Settings extends React.Component { render() { const { me } = this.state; return ( -
+

Settings

Changing your avatar @@ -231,7 +231,7 @@ export default class Settings extends React.Component { }
-
+
); } } diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js index a11426df..fffa2c80 100644 --- a/vnext/src/components/Spinner.js +++ b/vnext/src/components/Spinner.js @@ -20,3 +20,19 @@ export default function Spinner(props) {
); } + +export function ChatSpinner(props) { + return ( + + + + + + ); +} -- cgit v1.2.3