Fediverse timeline: column transparency fixes

app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js

@@ -16,7 +16,7 @@ const mapStateToProps = state => {
   };
 };
 
-class PinnedHostPicker extends React.PureComponent {
+class PinnedHostsPicker extends React.PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
@@ -34,18 +34,16 @@ class PinnedHostPicker extends React.PureComponent {
     if (!pinnedHosts || pinnedHosts.isEmpty()) return null;
 
     return (
-      <div>
-        <div className='pinned-hosts-picker'>
-          {pinnedHosts.map(host => (
-            <div className={classNames('pinned-host', { 'active': host === activeHost })} key={host}>
-              <Link to={`/timeline/${host}`}>{host}</Link>
-            </div>
-          ))}
-        </div>
+      <div className='pinned-hosts-picker'>
+        {pinnedHosts.map(host => (
+          <div className={classNames('pinned-host', { 'active': host === activeHost })} key={host}>
+            <Link to={`/timeline/${host}`}>{host}</Link>
+          </div>
+        ))}
       </div>
     );
   }
 
 }
 
-export default connect(mapStateToProps)(PinnedHostPicker);
+export default connect(mapStateToProps)(PinnedHostsPicker);

app/styles/components/accordion.scss

@@ -1,5 +1,5 @@
 .explanation-box {
-  margin: 5px 20px;
+  padding: 5px 20px;
 }
 
 .accordion {

app/styles/components/columns.scss

@@ -902,3 +902,7 @@
     border-top-right-radius: 0;
   }
 }
+
+.column .explanation-box {
+  background: var(--foreground-color);
+}