Commit 3570ada5 authored by mgabdev's avatar mgabdev

Styled AutosuggestAccount and AutosuggestEmoji

• Styled:
- AutosuggestAccount and AutosuggestEmoji
parent 218a55c8
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { makeGetAccount } from '../selectors';
import Avatar from './avatar';
import DisplayName from './display_name';
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { makeGetAccount } from '../selectors'
import Avatar from './avatar'
import DisplayName from './display_name'
const makeMapStateToProps = () => {
const getAccount = makeGetAccount();
const getAccount = makeGetAccount()
const mapStateToProps = (state, { id }) => ({
account: getAccount(state, id),
});
})
return mapStateToProps;
};
return mapStateToProps
}
export default
@connect(makeMapStateToProps)
......@@ -23,16 +23,19 @@ class AutosuggestAccount extends ImmutablePureComponent {
}
render () {
const { account } = this.props;
const { account } = this.props
return (
<div className='autosuggest-account' title={account.get('acct')}>
<div className='autosuggest-account__icon'>
<Avatar account={account} size={18} />
<div
className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.bgPrimary, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
title={account.get('acct')}
>
<Avatar account={account} size={26} />
<div className={_s.ml10}>
<DisplayName account={account} noRelationship noHover />
</div>
<DisplayName account={account} noRelationship noHover />
</div>
);
)
}
}
import unicodeMapping from './emoji/emoji_unicode_mapping_light'
import Text from './text'
const assetHost = process.env.CDN_HOST || ''
// .autosuggest-emoji {
// display: flex;
// justify-items: center;
// align-content: flex-start;
// flex-direction: row;
// @include text-sizing(14px, 400, 18px);
// img {
// display: block;
// margin-right: 8px;
// @include size(16px);
// }
// }
// .emojione {
// font-size: inherit;
// vertical-align: middle;
// object-fit: contain;
// margin: -.2ex .15em .2ex;
// @include size(16px);
// img {
// width: auto;
// }
// }
export default class AutosuggestEmoji extends PureComponent {
static propTypes = {
......@@ -52,9 +24,11 @@ export default class AutosuggestEmoji extends PureComponent {
}
return (
<div className='autosuggest-emoji'>
<div className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.bgPrimary, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<img className='emojione' src={url} alt={emoji.native || emoji.colons} />
{emoji.colons}
<Text className={_s.ml10}>
{emoji.colons}
</Text>
</div>
)
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment