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';
export default class PromoPanel extends React.PureComponent {
render() {
return (
<div className='promo-panel'>
<div className='wtf-panel promo-panel'>
<div className='promo-panel__container'>
<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 />
<FormattedMessage id='promo.gab_news' defaultMessage='Gab News' />
</a>
</div>
<div className='promo-panel-item'>
<a className='promo-panel-item__btn button button-alternative-2' href='https://gumroad.com/getongab'>
<Icon id='align-left' className='promo-panel-item__icon' fixedWidth />
<a className='promo-panel-item__btn' href='https://gumroad.com/getongab'>
<Icon id='dollar' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.store' defaultMessage='Store' />
</a>
</div>
<div className='promo-panel-item'>
<a className='promo-panel-item__btn button button-alternative-2' href='https://blog.gab.com/support-gab'>
<Icon id='align-left' className='promo-panel-item__icon' fixedWidth />
<a className='promo-panel-item__btn' href='https://blog.gab.com/support-gab'>
<Icon id='users' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.partners' defaultMessage='Affiliate Partners' />
</a>
</div>
<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 />
<FormattedMessage id='promo.gab_apps' defaultMessage='Gab Apps' />
</a>
......
......@@ -1649,31 +1649,37 @@ a.account__display-name {
.promo-panel {
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;
height: 42px;
line-height: 42px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
&:not(:first-of-type) {
margin-top: 20px;
&:last-of-type {
border-bottom: none;
}
&__icon {
margin-right: 12px;
}
&__message {
&__btn {
display: block;
font-size: 14px;
line-height: 16px;
margin-top: 6px;
text-align: left;
color: $primary-text-color;
text-decoration: none;
font-size: 15px;
padding: 0 20px;
&--dark {
color: $ui-secondary-color;
&:hover {
color: darken($primary-text-color, 14%);
span {
text-decoration: underline;
}
}
}
&__icon {
margin-right: 12px;
}
}
......
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