moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'refactor-promo-features-panels' into 'develop' 

Refactor promo and features panels

See merge request soapbox-pub/soapbox-fe!383
This commit is contained in:
Alex Gleason 2020-11-11 00:41:54 +00:00
parent bd8081537a d769ee7c90
commit 9d29e445cb
3 changed files with 33 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/soapbox/features/ui/components/features_panel.js
View File

@ -27,40 +27,31 @@ class FeaturesPanel extends React.PureComponent {
<div className='wtf-panel promo-panel'> <div className='wtf-panel promo-panel'>
<div className='promo-panel__container'> <div className='promo-panel__container'>
<div className='promo-panel-item'> <NavLink className='promo-panel-item' to='/settings/profile'>
<NavLink className='promo-panel-item__btn' to='/settings/profile'> <Icon id='user' className='promo-panel-item__icon' fixedWidth />
<Icon id='user' className='promo-panel-item__icon' fixedWidth /> {intl.formatMessage(messages.edit_profile)}
{intl.formatMessage(messages.edit_profile)} </NavLink>
</NavLink>
</div>
<div className='promo-panel-item'>
<NavLink className='promo-panel-item__btn' to='/bookmarks'>
<Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.bookmarks)}
</NavLink>
</div>
<div className='promo-panel-item'> <NavLink className='promo-panel-item' to='/bookmarks'>
<NavLink className='promo-panel-item__btn' to='/lists'> <Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
<Icon id='list' className='promo-panel-item__icon' fixedWidth /> {intl.formatMessage(messages.bookmarks)}
{intl.formatMessage(messages.lists)} </NavLink>
</NavLink>
</div>
<div className='promo-panel-item'> <NavLink className='promo-panel-item' to='/lists'>
<NavLink className='promo-panel-item__btn' to='/auth/edit'> <Icon id='list' className='promo-panel-item__icon' fixedWidth />
<Icon id='lock' className='promo-panel-item__icon' fixedWidth /> {intl.formatMessage(messages.lists)}
{intl.formatMessage(messages.security)} </NavLink>
</NavLink>
</div>
<div className='promo-panel-item'> <NavLink className='promo-panel-item' to='/auth/edit'>
<NavLink className='promo-panel-item__btn' to='/settings/preferences'> <Icon id='lock' className='promo-panel-item__icon' fixedWidth />
<Icon id='cog' className='promo-panel-item__icon' fixedWidth /> {intl.formatMessage(messages.security)}
{intl.formatMessage(messages.preferences)} </NavLink>
</NavLink>
</div> <NavLink className='promo-panel-item' to='/settings/preferences'>
<Icon id='cog' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.preferences)}
</NavLink>
</div> </div>
</div> </div>

10
app/soapbox/features/ui/components/promo_panel.js
View File

@ -23,12 +23,10 @@ class PromoPanel extends React.PureComponent {
<div className='wtf-panel promo-panel'> <div className='wtf-panel promo-panel'>
<div className='promo-panel__container'> <div className='promo-panel__container'>
{promoItems.map((item, i) => {promoItems.map((item, i) =>
(<div className='promo-panel-item' key={i}> (<a className='promo-panel-item' href={item.get('url')} target='_blank' key={i}>
<a className='promo-panel-item__btn' href={item.get('url')} target='_blank'> <Icon id={item.get('icon')} className='promo-panel-item__icon' fixedWidth />
<Icon id={item.get('icon')} className='promo-panel-item__icon' fixedWidth /> {item.get('text')}
{item.get('text')} </a>),
</a>
</div>),
)} )}
</div> </div>
</div> </div>

33
app/styles/components/promo-panel.scss
View File

@ -9,39 +9,22 @@
display: block; display: block;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
color: var(--primary-text-color);
border-bottom: 1px solid var(--brand-color--med); border-bottom: 1px solid var(--brand-color--med);
background: var(--foreground-color); background: var(--foreground-color);
text-decoration: none;
&--highlighted { font-size: 15px;
background-color: #30ce7d; padding: 0 20px;
border-radius: 10px;
font-weight: 600;
margin-bottom: 10px;
}
&--top-rounded {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
&:last-of-type { &:last-of-type {
border-bottom: 0; border-bottom: 0;
} }
&__btn { &:hover {
display: block; color: var(--primary-text-color--faint);
text-align: left;
color: var(--primary-text-color);
text-decoration: none;
font-size: 15px;
padding: 0 20px;
&:hover { span {
color: var(--primary-text-color--faint); text-decoration: underline;
span {
text-decoration: underline;
}
} }
} }