Commit 8157e543 authored by mgabdev's avatar mgabdev

Updated promo panel styles

Added background, borders similar to other panels.
parent 241368b8
...@@ -5,31 +5,31 @@ import Icon from 'gabsocial/components/icon'; ...@@ -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>
......
...@@ -1649,32 +1649,38 @@ a.account__display-name { ...@@ -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;
} }
&__icon { &__btn {
margin-right: 12px; display: block;
} text-align: left;
color: $primary-text-color;
text-decoration: none;
font-size: 15px;
padding: 0 20px;
&__message { &:hover {
display: block; color: darken($primary-text-color, 14%);
font-size: 14px;
line-height: 16px;
margin-top: 6px;
color: $primary-text-color;
&--dark { span {
color: $ui-secondary-color; text-decoration: underline;
} }
}
}
&__icon {
margin-right: 12px;
} }
}
} }
.drawer__pager { .drawer__pager {
......
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