From 8157e543e5c06c0db2679702775c25e0e3172c92 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Tue, 20 Aug 2019 16:36:07 -0400
Subject: [PATCH] Updated promo panel styles

Added background, borders similar to other panels.
---
 .../features/ui/components/promo_panel.js     | 14 +++---
 .../styles/gabsocial/components.scss          | 44 +++++++++++--------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/app/javascript/gabsocial/features/ui/components/promo_panel.js b/app/javascript/gabsocial/features/ui/components/promo_panel.js
index 3ceba5db..659f52fa 100644
--- a/app/javascript/gabsocial/features/ui/components/promo_panel.js
+++ b/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>
diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss
index a7037c9a..e0ab2299 100644
--- a/app/javascript/styles/gabsocial/components.scss
+++ b/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;
+	}
+
+	&__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 {
-	  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 {