Updated promo panel styles

Added background, borders similar to other panels.

app/javascript/gabsocial/features/ui/components/promo_panel.js

@@ -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>

app/javascript/styles/gabsocial/components.scss

@@ -1649,32 +1649,38 @@ 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;
- }
+ &__btn {
+ display: block;
+ text-align: left;
+ color: $primary-text-color;
+ text-decoration: none;
+ font-size: 15px;
+ padding: 0 20px;
 
- &__message {
- display: block;
- font-size: 14px;
- line-height: 16px;
- margin-top: 6px;
- color: $primary-text-color;
+ &:hover {
+ color: darken($primary-text-color, 14%);
 
- &--dark {
- color: $ui-secondary-color;
- }
+ span {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__icon {
+ margin-right: 12px;
  }
- }
 }
 
 .drawer__pager {