Better non-clickable implementation

## Issue
- Adding `content__non-clickable` everywhere probably isn't the right way when we move forward to separating `all.scss`.
- Not intuitive -- easier to use if it's an attribute to `ClaimPreview`.

## Change
- Consolidate to a re-usable `non-clickable` class.
- Made Wallet Send search preview non-clickable as a temporary band aid until the channel-finder is consolidated.
- `listBlocked`: something is overriding the pointer, so non-clickable isn't working. Removed for now -- doesn't really matter.

ui/component/claimPreview/view.jsx

@@ -57,6 +57,7 @@ type Props = {
   nsfw: boolean,
   placeholder: string,
   type: string,
+  nonClickable?: boolean,
   banState: { blacklisted?: boolean, filtered?: boolean, muted?: boolean, blocked?: boolean },
   hasVisitedUri: boolean,
   blockedUris: Array<string>,
@@ -81,7 +82,7 @@ type Props = {
   isLivestreamActive: boolean,
   collectionId?: string,
   isCollectionMine: boolean,
-  disableNavigation?: boolean,
+  disableNavigation?: boolean, // DEPRECATED - use 'nonClickable'. Remove this when channel-finder is consolidated (#810)
   mediaDuration?: string,
   date?: any,
   indexInContainer?: number, // The index order of this component within 'containerId'.
@@ -117,6 +118,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     history,
     wrapperElement,
     type,
+    nonClickable,
     placeholder,
     // pending
     reflectingProgress,
@@ -345,6 +347,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
         'claim-preview__wrapper--small': type === 'small',
         'claim-preview__live': isLivestreamActive,
         'claim-preview__active': active,
+        'non-clickable': nonClickable,
       })}
     >
       <>

ui/component/reportContent/view.jsx

@@ -712,8 +712,8 @@ export default function ReportContent(props: Props) {
 
   function getClaimPreview(claim: StreamClaim) {
     return (
-      <div className="section content__non-clickable">
-        <ClaimPreview uri={claim.permanent_url} hideMenu hideActions type="small" />
+      <div className="section">
+        <ClaimPreview uri={claim.permanent_url} hideMenu hideActions nonClickable type="small" />
       </div>
     );
   }

ui/component/settingsRow/view.jsx

@@ -40,7 +40,7 @@ export default function SettingsRow(props: Props) {
         className={classnames('settings-row__value', {
           'settings-row__value--multirow': multirow,
           'settings-row__vertical-separator': useVerticalSeparator,
-          'content__non-clickable': disabled,
+          'non-clickable': disabled,
         })}
       >
         {children && children}

ui/component/walletSend/view.jsx

@@ -141,6 +141,7 @@ class WalletSend extends React.PureComponent<Props> {
                           showNullPlaceholder
                           hideMenu
                           hideRepostLabel
+                          nonClickable
                         />
                       </fieldset-section>
                     )}

ui/modal/modalBlockChannel/view.jsx

@@ -156,11 +156,7 @@ export default function ModalBlockChannel(props: Props) {
   }
 
   function getCommenterPreview(uri) {
-    return (
-      <div className="content__non-clickable">
-        <ClaimPreview uri={uri} hideMenu hideActions type="small" />
-      </div>
-    );
+    return <ClaimPreview uri={uri} hideMenu hideActions nonClickable type="small" />;
   }
 
   function getActiveChannelElem() {

ui/modal/modalHideRecommendation/view.jsx

@@ -27,11 +27,7 @@ export default function ModalHideRecommendation(props: Props) {
     <Modal isOpen type="card" onAborted={doHideModal}>
       <Card
         title={__('Not interested')}
-        body={
-          <div className="content__non-clickable">
-            <ClaimPreview uri={uri} hideMenu hideActions type="inline" properties={false} />
-          </div>
-        }
+        body={<ClaimPreview uri={uri} hideMenu hideActions nonClickable type="inline" properties={false} />}
         actions={
           <>
             <div className="section__checkbox">

ui/page/listBlocked/view.jsx

@@ -132,7 +132,7 @@ function ListBlocked(props: Props) {
                 <div className="block-list--delegator" key={delegatorUri}>
                   <label>{__('Blocked on behalf of:')}</label>
                   <ul className="section">
-                    <div className="content__non-clickable">
+                    <div>
                       <ClaimPreview uri={delegatorUri} hideMenu hideActions type="inline" properties={false} />
                       {moderatorTimeoutMap[uri] && getBanInfoElem(moderatorTimeoutMap[uri])}
                     </div>

ui/scss/all.scss

@@ -8,6 +8,7 @@
 @import 'init/base-theme';
 @import 'themes/light.scss';
 @import 'themes/dark.scss';
+@import 'common/non-clickable';
 @import 'component/ads';
 @import 'component/animation';
 @import 'component/badge';

ui/scss/common/_non-clickable.scss

@@ -0,0 +1,3 @@
+.non-clickable {
+  pointer-events: none;
+}