style pass

ui/component/claimListDiscover/view.jsx

@@ -508,10 +508,10 @@ function ClaimListDiscover(props: Props) {
       ) : (
         <div>
           {showHeader && (
-          <div className="section__header--actions">
+            <div className="section__header--actions">
-            {headerToUse}
+              {headerToUse}
-            {meta && <div className="section__actions--no-margin">{meta}</div>}
+              {meta && <div className="section__actions--no-margin">{meta}</div>}
-          </div>
+            </div>
           )}
           <ClaimList
             id={claimSearchCacheQuery}
@@ -527,7 +527,10 @@ function ClaimListDiscover(props: Props) {
             injectedItem={injectedItem}
             showHiddenByUser={showHiddenByUser}
           />
-          {loading && new Array(dynamicPageSize).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" type={type} />)}
+          {loading &&
+            new Array(dynamicPageSize)
+              .fill(1)
+              .map((x, i) => <ClaimPreview key={i} placeholder="loading" type={type} />)}
         </div>
       )}
     </React.Fragment>

ui/component/common/card.jsx

@@ -76,7 +76,15 @@ export default function Card(props: Props) {
             </div>
           </div>
           <div>
-            {titleActions && <div className="card__title-actions">{titleActions}</div>}
+            {titleActions && (
+              <div
+                className={classnames('card__title-actions', {
+                  'card__title-actions--small': smallTitle,
+                })}
+              >
+                {titleActions}
+              </div>
+            )}
             {expandable && (
               <div className="card__title-actions">
                 <Button

ui/component/recommendedContent/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimIsNsfw } from 'lbry-redux';
+import { makeSelectClaimIsNsfw, makeSelectClaimForUri } from 'lbry-redux';
 import { doFetchRecommendedContent } from 'redux/actions/search';
 import { makeSelectRecommendedContentForUri, selectIsSearching } from 'redux/selectors/search';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
@@ -12,6 +12,7 @@ const select = (state, props) => ({
   nextRecommendedUri: makeSelectNextUnplayedRecommended(props.uri)(state),
   isSearching: selectIsSearching(state),
   isAuthenticated: selectUserVerifiedEmail(state),
+  claim: makeSelectClaimForUri(props.uri)(state),
 });
 
 const perform = (dispatch) => ({

ui/component/recommendedContent/view.jsx

@@ -7,6 +7,10 @@ import Ads from 'web/component/ads';
 import Card from 'component/common/card';
 import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
 import Button from 'component/button';
+import classnames from 'classnames';
+
+const VIEW_ALL_RELATED = 'view_all_related';
+const VIEW_MORE_FROM = 'view_more_from';
 
 type Props = {
   uri: string,
@@ -16,6 +20,7 @@ type Props = {
   doFetchRecommendedContent: (string, boolean) => void,
   mature: boolean,
   isAuthenticated: boolean,
+  claim: ?StreamClaim,
 };
 
 export default function RecommendedContent(props: Props) {
@@ -27,9 +32,11 @@ export default function RecommendedContent(props: Props) {
     nextRecommendedUri,
     isSearching,
     isAuthenticated,
+    claim,
   } = props;
-  const [expanded, setExpanded] = React.useState(false);
+  const [viewMode, setViewMode] = React.useState(VIEW_ALL_RELATED);
-  const [allRelated, setAllRelated] = React.useState(true);
+  const signingChannel = claim && claim.signing_channel;
+  const channelName = signingChannel ? signingChannel.name : null;
   const isMobile = useIsMobile();
   const isMedium = useIsMediumScreen();
 
@@ -59,38 +66,30 @@ export default function RecommendedContent(props: Props) {
       smallTitle={!isMobile && !isMedium}
       className="file-page__recommended"
       title={__('Related')}
-      subtitle={
+      titleActions={
-        <div
+        signingChannel && (
-          className={classnames({
+          <div className="recommended-content__toggles">
-            'related_content-more--contracted': !expanded,
-            'related_content-more--expanded': expanded,
-          })}
-        >
-          <Button
-            button="alt"
-            label={__('All')}
-            onClick={() => {
-              setAllRelated(true);
-              setMoreFrom(false);
-              setTagList(false);
-            }}
-          />
-          {channelName && (
             <Button
-              button="alt"
+              className={classnames('button-toggle', {
-              label={__('More from %claim_name%', { claim_name: channelName })}
+                'button-toggle--active': viewMode === VIEW_ALL_RELATED,
-              onClick={() => {
+              })}
-                setAllRelated(false);
+              label={__('All')}
-                setMoreFrom(true);
+              onClick={() => setViewMode(VIEW_ALL_RELATED)}
-                setTagList(false);
-              }}
             />
-          )}
+
-        </div>
+            <Button
+              className={classnames('button-toggle', {
+                'button-toggle--active': viewMode === VIEW_MORE_FROM,
+              })}
+              label={__('More from %claim_name%', { claim_name: channelName })}
+              onClick={() => setViewMode(VIEW_MORE_FROM)}
+            />
+          </div>
+        )
       }
       body={
         <div>
-          {allRelated && (
+          {viewMode === VIEW_ALL_RELATED && (
             <ClaimList
               type="small"
               loading={isSearching}
@@ -110,9 +109,9 @@ export default function RecommendedContent(props: Props) {
               empty={__('No related content found')}
             />
           )}
-          {moreFrom && (
+          {viewMode === VIEW_MORE_FROM && signingChannel && (
             <ClaimListDiscover
-              hideAdvancedFilter={true}
+              hideAdvancedFilter
               tileLayout={false}
               showHeader={false}
               type="small"
@@ -120,7 +119,7 @@ export default function RecommendedContent(props: Props) {
               orderBy="new"
               pageSize={20}
               infiniteScroll={false}
-              hideFilters={true}
+              hideFilters
               channelIds={[signingChannel.claim_id]}
               loading={isSearching}
               hideMenu={isMobile}

ui/scss/component/_card.scss

@@ -208,6 +208,10 @@
   }
 }
 
+.card__title-actions--small {
+  padding: 0;
+}
+
 .card__title.card__title--deprecated {
   margin-bottom: var(--spacing-s);
 }
@@ -255,18 +259,6 @@
   color: var(--color-text-subtitle);
   margin: var(--spacing-s) 0;
   font-size: var(--font-body);
-
-  .button{
-    margin: calc(var(--spacing-xxs) / 2) calc(var(--spacing-xxs) / 2);
-    height: calc(var(--height-button) * 2 / 3);
-    padding: var(--spacing-s);
-    border-radius: var(--height-input);
-    font-size: var(--font-small);
-  }
-}
-
-.related_content-more {
-  margin: calc(var(--spacing-s) * -1) 0;
 }
 
 .card__body {

ui/scss/component/_search.scss

@@ -125,3 +125,10 @@
     margin-top: 0;
   }
 }
+
+.recommended-content__toggles {
+  button {
+    padding: 0 var(--spacing-xs);
+    height: 2rem;
+  }
+}