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,7 +34,6 @@ 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}>
@@ -42,10 +41,9 @@ class PinnedHostPicker extends React.PureComponent {
           </div>
         ))}
       </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);
+}