random-mirrors
/
gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated promo panel styles 

Added background, borders similar to other panels.
This commit is contained in:
mgabdev 2019-08-20 16:36:07 -04:00
parent 241368b804
commit 8157e543e5
2 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/javascript/gabsocial/features/ui/components/promo_panel.js
View File

@ -5,31 +5,31 @@ import Icon from 'gabsocial/components/icon';
export default class PromoPanel extends React.PureComponent { export default class PromoPanel extends React.PureComponent {
render() { render() {
return ( return (
<div className='promo-panel'> <div className='wtf-panel promo-panel'>
<div className='promo-panel__container'> <div className='promo-panel__container'>
<div className='promo-panel-item'> <div className='promo-panel-item'>
<a className='promo-panel-item__btn button button-alternative-2' href='https://blog.gab.com'> <a className='promo-panel-item__btn' href='https://blog.gab.com'>
<Icon id='align-left' className='promo-panel-item__icon' fixedWidth /> <Icon id='align-left' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.gab_news' defaultMessage='Gab News' /> <FormattedMessage id='promo.gab_news' defaultMessage='Gab News' />
</a> </a>
</div> </div>
<div className='promo-panel-item'> <div className='promo-panel-item'>
<a className='promo-panel-item__btn button button-alternative-2' href='https://gumroad.com/getongab'> <a className='promo-panel-item__btn' href='https://gumroad.com/getongab'>
<Icon id='align-left' className='promo-panel-item__icon' fixedWidth /> <Icon id='dollar' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.store' defaultMessage='Store' /> <FormattedMessage id='promo.store' defaultMessage='Store' />
</a> </a>
</div> </div>
<div className='promo-panel-item'> <div className='promo-panel-item'>
<a className='promo-panel-item__btn button button-alternative-2' href='https://blog.gab.com/support-gab'> <a className='promo-panel-item__btn' href='https://blog.gab.com/support-gab'>
<Icon id='align-left' className='promo-panel-item__icon' fixedWidth /> <Icon id='users' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.partners' defaultMessage='Affiliate Partners' /> <FormattedMessage id='promo.partners' defaultMessage='Affiliate Partners' />
</a> </a>
</div> </div>
<div className='promo-panel-item'> <div className='promo-panel-item'>
<a className='promo-panel-item__btn button button-alternative-2' href='https://apps.gab.com'> <a className='promo-panel-item__btn' href='https://apps.gab.com'>
<Icon id='th' className='promo-panel-item__icon' fixedWidth /> <Icon id='th' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.gab_apps' defaultMessage='Gab Apps' /> <FormattedMessage id='promo.gab_apps' defaultMessage='Gab Apps' />
</a> </a>

44
app/javascript/styles/gabsocial/components.scss
View File

@ -1649,32 +1649,38 @@ a.account__display-name {
.promo-panel { .promo-panel {
margin-top: 10px; margin-top: 10px;
padding: 10px 10px 20px 10px; }
border-bottom: 1px solid lighten($ui-base-color, 4%);
.promo-panel-item { .promo-panel-item {
display: block; display: block;
height: 42px;
line-height: 42px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
&:not(:first-of-type) { &:last-of-type {
margin-top: 20px; border-bottom: none;
}
&__btn {
display: block;
text-align: left;
color: $primary-text-color;
text-decoration: none;
font-size: 15px;
padding: 0 20px;
&:hover {
color: darken($primary-text-color, 14%);
span {
text-decoration: underline;
}
}
} }
&__icon { &__icon {
margin-right: 12px; margin-right: 12px;
} }
&__message {
display: block;
font-size: 14px;
line-height: 16px;
margin-top: 6px;
color: $primary-text-color;
&--dark {
color: $ui-secondary-color;
}
}
}
} }
.drawer__pager { .drawer__pager {