src/renderer/component/categoryList/index.js

@@ -4,15 +4,20 @@ import {
   makeSelectClaimsInChannelForCurrentPage,
   makeSelectFetchingChannelClaims,
 } from 'lbry-redux';
+import { selectShowNsfw } from 'redux/selectors/settings';
 import CategoryList from './view';
 
 const select = (state, props) => ({
   channelClaims: makeSelectClaimsInChannelForCurrentPage(props.categoryLink)(state),
   fetching: makeSelectFetchingChannelClaims(props.categoryLink)(state),
+  obscureNsfw: !selectShowNsfw(state),
 });
 
 const perform = dispatch => ({
   fetchChannel: channel => dispatch(doFetchClaimsByChannel(channel)),
 });
 
-export default connect(select, perform)(CategoryList);
+export default connect(
+  select,
+  perform
+)(CategoryList);

src/renderer/component/categoryList/view.jsx

@@ -1,11 +1,11 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { normalizeURI } from 'lbry-redux';
 import ToolTip from 'component/common/tooltip';
 import FileCard from 'component/fileCard';
 import Button from 'component/button';
 import * as icons from 'constants/icons';
-import Claim from 'types/claim';
+import type { Claim } from 'types/claim';
 
 type Props = {
   category: string,
@@ -14,6 +14,7 @@ type Props = {
   fetching: boolean,
   channelClaims: Array<Claim>,
   fetchChannel: string => void,
+  obscureNsfw: boolean,
 };
 
 type State = {
@@ -206,11 +207,12 @@ class CategoryList extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { category, categoryLink, names, channelClaims } = this.props;
+    const { category, categoryLink, names, channelClaims, obscureNsfw } = this.props;
     const { canScrollNext, canScrollPrevious } = this.state;
 
-    // The lint was throwing an error saying we should use <button> instead of <a>
-    // We are using buttons, needs more exploration
+    const isCommunityTopBids = category.match(/^community/i);
+    const showScrollButtons = isCommunityTopBids ? !obscureNsfw : true;
+
     return (
       <div className="card-row">
         <div className="card-row__header">
@@ -220,8 +222,7 @@ class CategoryList extends React.PureComponent<Props, State> {
             ) : (
               category
             )}
-            {category &&
-              category.match(/^community/i) && (
+            {isCommunityTopBids && (
               <ToolTip
                 label={__("What's this?")}
                 body={__(
@@ -230,6 +231,7 @@ class CategoryList extends React.PureComponent<Props, State> {
               />
             )}
           </div>
+          {showScrollButtons && (
             <div className="card-row__scroll-btns">
               <Button
                 className="btn--arrow"
@@ -244,21 +246,31 @@ class CategoryList extends React.PureComponent<Props, State> {
                 icon={icons.ARROW_RIGHT}
               />
             </div>
+          )}
         </div>
+        {obscureNsfw && isCommunityTopBids ? (
+          <div className="card__content help">
+            {__(
+              'The community top bids section is only visible if you allow mature content in the app. You can change your content viewing preferences'
+            )}{' '}
+            <Button button="link" navigate="/settings" label={__('here')} />.
+          </div>
+        ) : (
           <div
+            className="card-row__scrollhouse"
             ref={ref => {
               this.rowItems = ref;
             }}
-          className="card-row__scrollhouse"
           >
             {names && names.map(name => <FileCard key={name} uri={normalizeURI(name)} />)}
 
-          {channelClaims && channelClaims.length
-            ? channelClaims.map(claim => (
+            {channelClaims &&
+              channelClaims.length &&
+              channelClaims.map(claim => (
                 <FileCard key={claim.claim_id} uri={`lbry://${claim.name}#${claim.claim_id}`} />
-              ))
-            : null}
+              ))}
           </div>
+        )}
       </div>
     );
   }

src/renderer/scss/component/_card.scss

@@ -21,7 +21,6 @@
 }
 
 .card--small {
-  width: var(--card-small-width);
   white-space: normal;
 
   .card__media {
@@ -273,7 +272,6 @@
 .card-row {
   white-space: nowrap;
   width: 100%;
-  min-width: var(--card-small-width);
   padding-top: $spacing-vertical;
 
   &:first-of-type {
@@ -283,6 +281,14 @@
   &:last-of-type {
     padding-bottom: $spacing-vertical * 2/3;
   }
+
+  // This is only for the text that is displayed when a user has nsfw hidden
+  // It is not used anywhere else in the app and is needed due to the css related to
+  // the content that scrolls off the edge of the screen
+  .card__content.help {
+    padding: 0 $spacing-width;
+    white-space: normal;
+  }
 }
 
 .card-row__header {