Refactor promo and features panels

app/soapbox/features/ui/components/features_panel.js

@@ -27,40 +27,31 @@ class FeaturesPanel extends React.PureComponent {
       <div className='wtf-panel promo-panel'>
         <div className='promo-panel__container'>
 
-          <div className='promo-panel-item'>
-            <NavLink className='promo-panel-item__btn' to='/settings/profile'>
-              <Icon id='user' className='promo-panel-item__icon' fixedWidth />
-              {intl.formatMessage(messages.edit_profile)}
-            </NavLink>
-          </div>
-
-          <div className='promo-panel-item'>
-            <NavLink className='promo-panel-item__btn' to='/bookmarks'>
-              <Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
-              {intl.formatMessage(messages.bookmarks)}
-            </NavLink>
-          </div>
-
-          <div className='promo-panel-item'>
-            <NavLink className='promo-panel-item__btn' to='/lists'>
-              <Icon id='list' className='promo-panel-item__icon' fixedWidth />
-              {intl.formatMessage(messages.lists)}
-            </NavLink>
-          </div>
-
-          <div className='promo-panel-item'>
-            <NavLink className='promo-panel-item__btn' to='/auth/edit'>
-              <Icon id='lock' className='promo-panel-item__icon' fixedWidth />
-              {intl.formatMessage(messages.security)}
-            </NavLink>
-          </div>
-
-          <div className='promo-panel-item'>
-            <NavLink className='promo-panel-item__btn' to='/settings/preferences'>
-              <Icon id='cog' className='promo-panel-item__icon' fixedWidth />
-              {intl.formatMessage(messages.preferences)}
-            </NavLink>
-          </div>
+          <NavLink className='promo-panel-item' to='/settings/profile'>
+            <Icon id='user' className='promo-panel-item__icon' fixedWidth />
+            {intl.formatMessage(messages.edit_profile)}
+          </NavLink>
+
+
+          <NavLink className='promo-panel-item' to='/bookmarks'>
+            <Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
+            {intl.formatMessage(messages.bookmarks)}
+          </NavLink>
+
+          <NavLink className='promo-panel-item' to='/lists'>
+            <Icon id='list' className='promo-panel-item__icon' fixedWidth />
+            {intl.formatMessage(messages.lists)}
+          </NavLink>
+
+          <NavLink className='promo-panel-item' to='/auth/edit'>
+            <Icon id='lock' className='promo-panel-item__icon' fixedWidth />
+            {intl.formatMessage(messages.security)}
+          </NavLink>
+
+          <NavLink className='promo-panel-item' to='/settings/preferences'>
+            <Icon id='cog' className='promo-panel-item__icon' fixedWidth />
+            {intl.formatMessage(messages.preferences)}
+          </NavLink>
 
         </div>
       </div>

app/soapbox/features/ui/components/promo_panel.js

@@ -23,12 +23,10 @@ class PromoPanel extends React.PureComponent {
       <div className='wtf-panel promo-panel'>
         <div className='promo-panel__container'>
           {promoItems.map((item, i) =>
-            (<div className='promo-panel-item' key={i}>
-              <a className='promo-panel-item__btn' href={item.get('url')} target='_blank'>
-                <Icon id={item.get('icon')} className='promo-panel-item__icon' fixedWidth />
-                {item.get('text')}
-              </a>
-            </div>),
+            (<a className='promo-panel-item' href={item.get('url')} target='_blank' key={i}>
+              <Icon id={item.get('icon')} className='promo-panel-item__icon' fixedWidth />
+              {item.get('text')}
+            </a>),
           )}
         </div>
       </div>

app/styles/components/promo-panel.scss

@@ -9,39 +9,22 @@
   display: block;
   height: 42px;
   line-height: 42px;
+  color: var(--primary-text-color);
   border-bottom: 1px solid var(--brand-color--med);
   background: var(--foreground-color);
-
-  &--highlighted {
-    background-color: #30ce7d;
-    border-radius: 10px;
-    font-weight: 600;
-    margin-bottom: 10px;
-  }
-
-  &--top-rounded {
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-  }
+  text-decoration: none;
+  font-size: 15px;
+  padding: 0 20px;
 
   &:last-of-type {
     border-bottom: 0;
   }
 
-  &__btn {
-    display: block;
-    text-align: left;
-    color: var(--primary-text-color);
-    text-decoration: none;
-    font-size: 15px;
-    padding: 0 20px;
-
-    &:hover {
-      color: var(--primary-text-color--faint);
+  &:hover {
+    color: var(--primary-text-color--faint);
 
-      span {
-        text-decoration: underline;
-      }
+    span {
+      text-decoration: underline;
     }
   }