Commit 389b189d authored by mgabdev's avatar mgabdev

Progress

parent 1c98dd28
......@@ -131,9 +131,11 @@ class Account extends ImmutablePureComponent {
</button>
</div>
<button className={[styles.default, styles.marginLeftAuto, styles.paddingVertical2PX, styles.cursorPointer].join(' ')}>
<Icon width='14px' height='14px' />
</button>
<div className={[styles.default, styles.marginLeftAuto].join(' ')}>
<button className={[styles.default, styles.circle, styles.backgroundSubtle2, styles.paddingVertical5PX, styles.paddingHorizontal5PX, styles.cursorPointer].join(' ')}>
<Icon id='close' width='8px' height='8px' />
</button>
</div>
</div>
</div>
......
const HomeIcon = ({
className = 'header-nav__item__icon',
width = '26px',
height = '26px',
viewBox = '0 0 48 48'
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
>
<g>
<path className='header-nav__item__icon__path' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
</g>
</svg>
)
export default HomeIcon
\ No newline at end of file
import GroupIcon from './group_icon';
import HomeIcon from './home_icon';
import NotificationsIcon from './notifications_icon';
import SearchIcon from './search_icon';
export {
GroupIcon,
HomeIcon,
NotificationsIcon,
SearchIcon,
}
\ No newline at end of file
const NotificationsIcon = ({
className = 'header-nav__item__icon',
width = '26px',
height = '26px',
viewBox = '0 0 48 48'
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
>
<g>
<path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
<path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
<path className='header-nav__item__icon__path' d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
</g>
</svg>
)
export default NotificationsIcon
\ No newline at end of file
const SearchIcon = ({
className = 'tabs-bar-icon',
width = '16px',
height = '16px',
viewBox = '0 0 48 48'
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
>
<g>
<path className='tabs-bar-icon__path' d='M 47.414062 44.585938 L 33.761719 30.9375 C 36.40625 27.671875 38 23.519531 38 19 C 38 8.523438 29.476562 0 19 0 C 8.523438 0 0 8.523438 0 19 C 0 29.476562 8.523438 38 19 38 C 23.519531 38 27.667969 36.40625 30.9375 33.765625 L 44.585938 47.414062 C 44.976562 47.804688 45.488281 48 46 48 C 46.511719 48 47.023438 47.804688 47.414062 47.414062 C 48.195312 46.632812 48.195312 45.367188 47.414062 44.585938 Z M 19 34 C 10.726562 34 4 27.273438 4 19 C 4 10.726562 10.726562 4 19 4 C 27.273438 4 34 10.726562 34 19 C 34 27.273438 27.273438 34 19 34 Z M 19 34'/>
</g>
</svg>
)
export default SearchIcon
\ No newline at end of file
......@@ -203,7 +203,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
<div className={[styles.default, styles.marginLeft5PX].join(' ')}>
<Textarea
inputRef={this.setTextbox}
className={[styles.default, styles.backgroundWhite, styles.lineHeight125, styles.resizeNone, styles.paddingVertical15PX, styles.outlineNone, styles.fontSize16PX, styles.text, styles.displayBlock].join(' ')}
className={[styles.default, styles.backgroundWhite, styles.lineHeight125, styles.resizeNone, styles.paddingVertical15PX, styles.outlineFocusBrand, styles.fontSize16PX, styles.text, styles.displayBlock].join(' ')}
disabled={disabled}
placeholder={placeholder}
autoFocus={autoFocus}
......
......@@ -21,7 +21,7 @@ export default class DisplayName extends ImmutablePureComponent {
</bdi>
{
account.get('is_verified') &&
<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Verified Account' />
<Icon id='verified' width='16px' height='16px' className={[styles.default]} title='Verified Account' />
/*<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='PRO' />
<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Donor' />
<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Investor' />*/
......
......@@ -4,17 +4,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
import { injectIntl, defineMessages } from 'react-intl'
import classNames from 'classnames/bind'
import Button from './button'
import Icon from './icon'
import { closeSidebar } from '../actions/sidebar'
import { me } from '../initial_state'
import { makeGetAccount } from '../selectors'
// import ProgressPanel from './progress_panel'
import GabLogo from './assets/gab_logo'
import {
GroupIcon,
HomeIcon,
NotificationsIcon,
} from './assets/tabs_bar_icon'
import Icon from './icon'
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
......@@ -110,32 +105,32 @@ class Header extends ImmutablePureComponent {
const menuItems = [
{
title: 'Home',
icon: <NotificationsIcon />,
icon: <Icon id='home' />,
to: '/',
},
{
title: 'Notifications',
icon: <NotificationsIcon />,
icon: <Icon id='notifications' />,
to: '/notifications',
},
{
title: 'Groups',
icon: <NotificationsIcon />,
icon: <Icon id='groups' />,
to: '/groups',
},
{
title: 'Lists',
icon: <NotificationsIcon />,
icon: <Icon id='lists' />,
to: '/lists',
},
{
title: 'Chat',
icon: <NotificationsIcon />,
icon: <Icon id='chat' />,
to: '/',
},
{
title: 'Profile',
icon: <NotificationsIcon />,
icon: <Icon id='profile' />,
to: '/',
},
]
......@@ -143,12 +138,12 @@ class Header extends ImmutablePureComponent {
const shortcutItems = [
{
title: 'Meme Group',
icon: <NotificationsIcon />,
icon: <Icon id='group' />,
to: '/',
},
{
title: 'Andrew',
icon: <NotificationsIcon />,
icon: <Icon id='user' />,
to: '/',
},
]
......@@ -156,22 +151,22 @@ class Header extends ImmutablePureComponent {
const exploreItems = [
{
title: 'Trends',
icon: <NotificationsIcon />,
icon: <Icon id='trends' />,
to: '/',
},
{
title: 'Dissenter',
icon: <NotificationsIcon />,
icon: <Icon id='dissenter' />,
to: '/',
},
{
title: 'Apps',
icon: <NotificationsIcon />,
icon: <Icon id='apps' />,
to: '/',
},
{
title: 'Shop',
icon: <NotificationsIcon />,
icon: <Icon id='shop' />,
to: '/',
},
]
......@@ -186,9 +181,6 @@ class Header extends ImmutablePureComponent {
<GabLogo />
</NavLink>
</h1>
<div>
{ /* profile card */}
</div>
<nav aria-label='Primary' role='navigation' className={[styles.default, styles.width100PC, styles.marginBottom15PX].join(' ')}>
<span className={[styles.default, styles.text, styles.colorSubtle, styles.displayBlock, styles.fontSize13PX, styles.paddingVertical5PX, styles.marginTop10PX, styles.paddingHorizontal10PX, styles.fontWeight500].join(' ')}>Menu</span>
{
......@@ -283,7 +275,7 @@ class HeaderMenuItem extends PureComponent {
>
<div className={containerClasses}>
<div className={[styles.default]}>
<NotificationsIcon className={iconClasses} width='16px' height='16px' />
<Icon className={iconClasses} width='16px' height='16px' />
</div>
<div className={[styles.default, styles.paddingHorizontal10PX, styles.textOverflowEllipsis, styles.overflowWrapBreakWord, styles.displayInline].join(' ')}>
<span className={textClasses}>{title}</span>
......
import classNames from 'classnames';
import CloseIcon from './svgs/close_icon'
import CommentIcon from './svgs/comment_icon'
import EllipsisIcon from './svgs/ellipsis_icon'
import GlobeIcon from './svgs/globe_icon'
import GroupIcon from './svgs/group_icon'
import HomeIcon from './svgs/home_icon'
import LikeIcon from './svgs/like_icon'
import NotificationsIcon from './svgs/notifications_icon'
import RepostIcon from './svgs/repost_icon'
import SearchIcon from './svgs/search_icon'
import ShareIcon from './svgs/share_icon'
import VerifiedIcon from './svgs/verified_icon'
export default class Icon extends PureComponent {
......@@ -7,35 +18,42 @@ export default class Icon extends PureComponent {
className: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
};
}
static defaultProps = {
width: '26px',
height: '26px',
};
render() {
const { id, ...options } = this.props
render () {
const { className, width, height } = this.props;
console.log("id:", id)
return (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox='0 0 48 48'
xmlSpace='preserve'
>
<g>
<path d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
<path d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
<path d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
</g>
</svg>
);
}
switch (id) {
case 'close':
return <CloseIcon {...options} />
case 'comment':
return <CommentIcon {...options} />
case 'ellipsis':
return <EllipsisIcon {...options} />
case 'globe':
return <GlobeIcon {...options} />
case 'group':
return <GroupIcon {...options} />
case 'home':
return <HomeIcon {...options} />
case 'like':
return <LikeIcon {...options} />
case 'notifications':
return <NotificationsIcon {...options} />
case 'repost':
return <RepostIcon {...options} />
case 'search':
return <SearchIcon {...options} />
case 'share':
return <ShareIcon {...options} />
case 'verified':
return <VerifiedIcon {...options} />
default:
return <NotificationsIcon {...options} />
}
}
}
This diff is collapsed.
const CloseIcon = ({
className = '',
width = '16px',
height = '16px',
viewBox = '0 0 24 24',
title = 'Close',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<path d="M 14.121094 12 L 23.558594 2.5625 C 24.144531 1.976562 24.144531 1.027344 23.558594 0.441406 C 22.972656 -0.144531 22.027344 -0.144531 21.4375 0.441406 L 12 9.878906 L 2.5625 0.441406 C 1.972656 -0.144531 1.027344 -0.144531 0.441406 0.441406 C -0.144531 1.027344 -0.144531 1.976562 0.441406 2.5625 L 9.878906 12 L 0.441406 21.4375 C -0.144531 22.023438 -0.144531 22.972656 0.441406 23.558594 C 0.730469 23.855469 1.117188 24 1.5 24 C 1.882812 24 2.269531 23.855469 2.5625 23.558594 L 12 14.121094 L 21.4375 23.558594 C 21.730469 23.855469 22.117188 24 22.5 24 C 22.882812 24 23.269531 23.855469 23.558594 23.558594 C 24.144531 22.972656 24.144531 22.023438 23.558594 21.4375 Z M 14.121094 12 "/>
</g>
</svg>
)
export default CloseIcon
\ No newline at end of file
const CommentIcon = ({
className = '',
width = '26px',
height = '26px',
viewBox = '0 0 48 48',
title = 'Comment',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<path d="M 34.511719 47 C 34.085938 47 33.664062 46.863281 33.324219 46.582031 L 20.855469 36.339844 L 4.492188 36.339844 C 2.027344 36.339844 0 34.273438 0 31.75 L 0 4.539062 C 0 2.03125 2.027344 0.0273438 4.492188 0.0273438 L 43.492188 0.0273438 C 45.984375 0.0273438 48 2.03125 48 4.539062 L 48 31.75 C 48 34.273438 45.984375 36.339844 43.492188 36.339844 L 36.367188 36.339844 L 36.367188 45.125 C 36.367188 45.851562 35.960938 46.511719 35.304688 46.820312 C 35.050781 46.941406 34.785156 47 34.511719 47 Z M 4.492188 3.769531 C 4.097656 3.769531 3.773438 4.097656 3.773438 4.539062 L 3.773438 31.75 C 3.773438 32.199219 4.101562 32.597656 4.492188 32.597656 L 21.523438 32.597656 C 21.960938 32.597656 22.375 32.738281 22.707031 33.015625 L 32.625 41.160156 L 32.625 34.449219 C 32.625 33.417969 33.476562 32.597656 34.511719 32.597656 L 43.492188 32.597656 C 43.894531 32.597656 44.253906 32.183594 44.253906 31.75 L 44.253906 4.539062 C 44.253906 4.109375 43.902344 3.769531 43.492188 3.769531 Z M 4.492188 3.769531" />
</g>
</svg>
)
export default CommentIcon
\ No newline at end of file
const EllipsisIcon = ({
className = '',
width = '16px',
height = '16px',
viewBox = '0 0 24 24',
title = 'Ellipsis',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<circle cx='5' cy='12' r='2' />
<circle cx='12' cy='12' r='2' />
<circle cx='19' cy='12' r='2' />
</g>
</svg>
)
export default EllipsisIcon
\ No newline at end of file
const GlobeIcon = ({
className = '',
width = '12px',
height = '12px',
viewBox = '0 0 28 28',
title = 'Globe',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<circle fill='none' stroke='#616770' stroke-width='1px' cx='14' cy='14' r='13.5' />
<path fill='#616770' d='M 16 5 L 18 4 L 20 5 L 22 5 L 23 4 C 24 5 25 6 25 7 L 25 7 L 22 8 L 20 7 L 19 6 L 16 6 L 14 7 L 15 11 L 18 12 L 20 12 L 21 13 L 21 14 L 22 16 L 23 18 L 23 20 L 26.4 21 C 20 27 12 29 6 25 C 1 21 0 14 1 8 L 2 11 L 3 12 L 5 13 L 4 14 L 4 15 L 5 17 L 7 17 L 7 22 L 8 24 L 9 25 L 9 22 L 11 21 L 11 20 L 13 18 L 14 15 L 12 15 L 10 13 L 7 13 L 6 11 L 5 13 L 5 11 L 4 10 L 4 8 L 7 8 L 9 7 L 11 4 L 12 4 L 13 2 L 10 2 L 10 1 C 12 0 16 0 18 1 L 18 2 L 16 2 L 15 4 Z M 16 5' />
{/*<path fill='#616770' d='M 14 27 C 21 28 28 21 28 14 C 28 6 21 0 14 0 C 8 0 3 3 1 8 L 0 8 L 1 8 C -1 15 1 24 8 26 C 10 27 12 28 14 27 Z M 24 21 L 24 20 L 24 18 C 24 18 24 18 24 18 L 22 14 L 22 13 C 22 12 22 12 22 12 L 20 11 C 20 11 20 11 20 11 L 18 12 L 15 10 L 15 8 L 16 7 L 18 7 L 19 8 C 19 8 19 8 19 8 L 22 8 C 22 8 22 8 23 8 L 25 7 C 27 12 27 17 24 21 Z M 23 4 L 22 5 L 20 4 L 18 4 C 18 4 18 4 18 4 L 16 4 L 16 4 L 16 3 L 18 3 C 18 3 18 3 18 3 L 20 2 C 21 2 22 3 23 4 Z M 8 1 L 10 2 C 10 2 10 2 10 2 L 12 3 L 12 3 L 11 4 C 10 4 10 4 10 4 L 9 6 L 7 7 L 4 8 C 3 8 3 8 3 8 L 3 10 C 3 10 3 10 3 10 L 4 11 L 4 12 L 2 10 L 2 8 C 3 5 5 3 8 1 Z M 7 17 L 5 16 L 4 15 L 4 14 L 6 12 L 7 13 C 7 13 7 14 7 14 L 10 14 L 11 16 C 11 16 11 16 12 16 L 13 16 L 13 17 L 11 19 C 11 19 11 19 11 20 L 11 21 L 9 22 C 9 22 9 22 9 22 L 9 24 L 8 24 L 7 22 L 7 17 C 7 17 7 17 7 17 Z M 1 10 L 1 11 C 1 11 1 11 2 11 L 4 13 L 3 13 C 3 13 3 13 3 14 L 3 15 C 3 15 3 15 3 15 L 4 17 C 4 17 4 17 5 17 L 7 18 L 7 22 C 7 22 7 22 7 22 L 7 24 C 8 25 8 25 8 25 L 9 25 C 9 25 9 25 9 25 C 10 25 10 25 10 25 L 10 23 L 11 21 C 12 21 12 21 12 21 L 12 20 L 13 18 C 13 18 13 18 13 18 L 14 15 C 14 15 14 15 14 15 C 14 15 14 15 14 15 L 12 15 L 11 13 C 11 13 10 13 10 13 L 7 13 L 6 11 C 6 11 6 11 6 11 C 6 11 6 11 6 11 L 5 11 L 5 11 C 5 11 5 10 5 10 L 4 10 L 4 9 L 7 8 C 7 8 7 8 7 8 L 10 7 C 10 7 10 7 10 7 L 11 5 L 12 4 C 12 4 12 4 13 4 L 13 2 C 13 2 13 2 13 2 C 13 2 13 2 13 2 L 10 1 L 9 1 C 12 0 16 0 18 1 L 18 2 L 16 2 C 16 2 15 2 15 2 L 14 4 C 14 4 14 4 15 5 C 15 5 15 5 15 5 L 16 5 C 16 5 16 5 16 5 L 18 5 L 19 5 C 19 5 19 5 19 5 L 22 6 C 22 6 22 6 22 5 L 23 5 C 24 5 24 6 25 7 L 22 7 L 20 7 L 19 6 C 19 6 19 6 19 6 L 16 6 C 16 6 16 6 16 6 L 14 7 C 14 7 14 7 14 8 L 14 11 C 14 11 15 11 15 11 L 18 13 C 18 13 18 13 18 13 L 20 12 L 21 13 L 21 14 C 21 15 21 15 21 15 L 23 18 L 23 20 C 23 20 23 20 23 20 L 24 21 C 20 27 11 28 6 24 C 1 21 0 15 1 10 Z M 1 10' /> */}
</g>
</svg>
)
export default GlobeIcon
......@@ -2,7 +2,8 @@ const GroupIcon = ({
className = 'header-nav__item__icon',
width = '26px',
height = '26px',
viewBox = '0 0 48 48'
viewBox = '0 0 48 48',
title = 'Group',
}) => (
<svg
className={className}
......@@ -14,6 +15,7 @@ const GroupIcon = ({
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<path className='header-nav__item__icon__path' d="M 41 25 L 37 25 C 37 26 37 27 37 28 L 37 42 C 37 43 37 43 37 44 L 43 44 C 46 44 48 42 48 40 L 48 32 C 48 28 44 25 41 25 Z M 41 25"/>
......
const HomeIcon = ({
className = '',
width = '26px',
height = '26px',
viewBox = '0 0 48 48',
title = 'Home',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<path className='' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
</g>
</svg>
)
export default HomeIcon
\ No newline at end of file
const LikeIcon = ({
className = '',
width = '26px',
height = '26px',
viewBox = '0 0 48 48',
title = 'Like',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<path d='M 44.75 26.832031 C 45.691406 25.410156 46.164062 23.839844 46.164062 22.128906 C 46.164062 20.148438 45.433594 18.425781 43.972656 16.964844 C 42.507812 15.503906 40.777344 14.773438 38.777344 14.773438 L 33.699219 14.773438 C 34.621094 12.867188 35.085938 11.019531 35.085938 9.234375 C 35.085938 6.980469 34.746094 5.195312 34.074219 3.867188 C 33.402344 2.539062 32.421875 1.5625 31.132812 0.9375 C 29.84375 0.3125 28.390625 0 26.773438 0 C 25.792969 0 24.929688 0.355469 24.179688 1.066406 C 23.351562 1.875 22.753906 2.914062 22.390625 4.183594 C 22.023438 5.453125 21.730469 6.667969 21.507812 7.832031 C 21.289062 8.996094 20.945312 9.820312 20.484375 10.300781 C 19.542969 11.320312 18.515625 12.550781 17.398438 13.992188 C 15.457031 16.511719 14.136719 18.003906 13.445312 18.464844 L 5.539062 18.464844 C 4.519531 18.464844 3.652344 18.828125 2.929688 19.546875 C 2.207031 20.269531 1.847656 21.140625 1.847656 22.160156 L 1.847656 40.625 C 1.847656 41.644531 2.207031 42.511719 2.929688 43.234375 C 3.652344 43.957031 4.519531 44.316406 5.539062 44.316406 L 13.847656 44.316406 C 14.273438 44.316406 15.597656 44.703125 17.832031 45.46875 C 20.195312 46.296875 22.277344 46.925781 24.078125 47.359375 C 25.875 47.792969 27.699219 48.011719 29.542969 48.011719 L 33.265625 48.011719 C 35.976562 48.011719 38.160156 47.234375 39.816406 45.6875 C 41.46875 44.136719 42.285156 42.027344 42.269531 39.355469 C 43.421875 37.871094 44 36.160156 44 34.21875 C 44 33.796875 43.96875 33.382812 43.914062 32.976562 C 44.644531 31.691406 45.007812 30.304688 45.007812 28.824219 C 45.007812 28.132812 44.921875 27.46875 44.75 26.832031 Z M 8.683594 40.074219 C 8.320312 40.441406 7.886719 40.625 7.386719 40.625 C 6.886719 40.625 6.453125 40.441406 6.089844 40.074219 C 5.722656 39.710938 5.539062 39.277344 5.539062 38.777344 C 5.539062 38.277344 5.722656 37.84375 6.089844 37.480469 C 6.453125 37.113281 6.886719 36.929688 7.386719 36.929688 C 7.886719 36.929688 8.320312 37.113281 8.683594 37.480469 C 9.050781 37.84375 9.234375 38.277344 9.234375 38.777344 C 9.234375 39.277344 9.050781 39.710938 8.683594 40.074219 Z M 41.851562 24.496094 C 41.4375 25.382812 40.921875 25.832031 40.308594 25.851562 C 40.59375 26.179688 40.835938 26.636719 41.027344 27.222656 C 41.21875 27.808594 41.316406 28.34375 41.316406 28.824219 C 41.316406 30.152344 40.808594 31.296875 39.789062 32.257812 C 40.132812 32.871094 40.308594 33.535156 40.308594 34.246094 C 40.308594 34.960938 40.140625 35.667969 39.800781 36.367188 C 39.464844 37.070312 39.007812 37.574219 38.433594 37.882812 C 38.527344 38.460938 38.574219 38.996094 38.574219 39.496094 C 38.574219 42.710938 36.730469 44.316406 33.035156 44.316406 L 29.546875 44.316406 C 27.027344 44.316406 23.738281 43.613281 19.679688 42.210938 C 19.582031 42.171875 19.304688 42.070312 18.839844 41.90625 C 18.378906 41.742188 18.039062 41.625 17.816406 41.546875 C 17.59375 41.46875 17.257812 41.359375 16.808594 41.214844 C 16.355469 41.070312 15.988281 40.964844 15.710938 40.898438 C 15.433594 40.828125 15.113281 40.765625 14.757812 40.710938 C 14.402344 40.652344 14.101562 40.625 13.851562 40.625 L 12.925781 40.625 L 12.925781 22.160156 L 13.851562 22.160156 C 14.15625 22.160156 14.5 22.074219 14.875 21.898438 C 15.25 21.726562 15.632812 21.46875 16.027344 21.121094 C 16.421875 20.773438 16.792969 20.433594 17.140625 20.097656 C 17.484375 19.757812 17.871094 19.335938 18.292969 18.828125 C 18.714844 18.316406 19.046875 17.910156 19.289062 17.601562 C 19.527344 17.292969 19.832031 16.898438 20.199219 16.417969 C 20.5625 15.9375 20.785156 15.648438 20.859375 15.550781 C 21.917969 14.246094 22.660156 13.371094 23.082031 12.925781 C 23.871094 12.101562 24.441406 11.046875 24.800781 9.769531 C 25.15625 8.488281 25.449219 7.28125 25.679688 6.148438 C 25.910156 5.011719 26.273438 4.195312 26.777344 3.695312 C 28.621094 3.695312 29.851562 4.144531 30.46875 5.050781 C 31.082031 5.953125 31.390625 7.347656 31.390625 9.234375 C 31.390625 10.367188 30.929688 11.910156 30.007812 13.863281 C 29.082031 15.816406 28.621094 17.351562 28.621094 18.464844 L 38.777344 18.464844 C 39.738281 18.464844 40.59375 18.835938 41.34375 19.578125 C 42.09375 20.316406 42.472656 21.179688 42.472656 22.160156 C 42.472656 22.832031 42.265625 23.609375 41.851562 24.496094 Z M 41.851562 24.496094' />
</g>
</svg>
)
export default LikeIcon
\ No newline at end of file
const NotificationsIcon = ({
className = '',
width = '26px',
height = '26px',
viewBox = '0 0 48 48',
title = 'Notifications',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<path className='' d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
<path className='' d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
<path className='' d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
</g>
</svg>
)
export default NotificationsIcon
\ No newline at end of file
const CloseIcon = ({
className = '',
width = '16px',
height = '16px',
viewBox = '0 0 48 48',
title = 'Close',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<path d="M 43.820312 8.179688 C 43.105469 7.859375 42.269531 7.984375 41.679688 8.5 L 38.960938 10.921875 C 35.230469 6.527344 29.761719 4 24 4 C 13.824219 3.992188 5.265625 11.621094 4.109375 21.730469 C 2.957031 31.835938 9.574219 41.203125 19.488281 43.488281 C 29.402344 45.773438 39.453125 40.253906 42.839844 30.660156 C 43.203125 29.617188 42.652344 28.472656 41.609375 28.109375 C 40.566406 27.746094 39.425781 28.296875 39.058594 29.339844 C 36.34375 37.011719 28.300781 41.421875 20.371094 39.589844 C 12.441406 37.753906 7.152344 30.257812 8.082031 22.175781 C 9.011719 14.089844 15.859375 7.988281 24 8 C 28.621094 8 33.011719 10.03125 36 13.558594 L 32.679688 16.5 C 32.054688 17.054688 31.839844 17.941406 32.140625 18.71875 C 32.4375 19.488281 33.175781 19.996094 34 20 L 43 20 C 44.105469 20 45 19.105469 45 18 L 45 10 C 45 9.214844 44.535156 8.503906 43.820312 8.179688 Z M 43.820312 8.179688 "/>
</g>
</svg>
)
export default CloseIcon
\ No newline at end of file
const SearchIcon = ({
className = '',
width = '16px',
height = '16px',
viewBox = '0 0 48 48',
title = 'Search',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<path className='' d='M 47.414062 44.585938 L 33.761719 30.9375 C 36.40625 27.671875 38 23.519531 38 19 C 38 8.523438 29.476562 0 19 0 C 8.523438 0 0 8.523438 0 19 C 0 29.476562 8.523438 38 19 38 C 23.519531 38 27.667969 36.40625 30.9375 33.765625 L 44.585938 47.414062 C 44.976562 47.804688 45.488281 48 46 48 C 46.511719 48 47.023438 47.804688 47.414062 47.414062 C 48.195312 46.632812 48.195312 45.367188 47.414062 44.585938 Z M 19 34 C 10.726562 34 4 27.273438 4 19 C 4 10.726562 10.726562 4 19 4 C 27.273438 4 34 10.726562 34 19 C 34 27.273438 27.273438 34 19 34 Z M 19 34'/>
</g>
</svg>
)
export default SearchIcon
\ No newline at end of file
const ShareIcon = ({
className = '',
width = '16px',
height = '16px',
viewBox = '0 0 24 24',
title = 'Share',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<circle cx="18" cy="5" r="3"/>
<circle cx="6" cy="12" r="3"/>
<circle cx="18" cy="19" r="3"/>
<line stroke='#666' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49" />
<line stroke='#666' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
</g>
</svg>
)
export default ShareIcon
\ No newline at end of file
const VerifiedIcon = ({
className = '',
width = '24px',
height = '24px',
viewBox = '0 0 24 24',
title = 'Verified Account',
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox={viewBox}
xmlSpace='preserve'
aria-label={title}
>
<g>
<path fill='#3E99ED' d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z' />
</g>
</svg>
)
export default VerifiedIcon
\ No newline at end of file
......@@ -9,13 +9,24 @@ export default class PageLayout extends PureComponent {
const { children, layout } = this.props
const right = layout.RIGHT || null
const headerRight = layout.HEADER_RIGHT || null
return (