better naming of things

ui/component/claimPreview/view.jsx

@@ -15,8 +15,8 @@ import SubscribeButton from 'component/subscribeButton';
 import ChannelThumbnail from 'component/channelThumbnail';
 import BlockButton from 'component/blockButton';
 import useGetThumbnail from 'effects/use-get-thumbnail';
-import ClaimTitle from 'component/claimTitle';
-import ClaimSubtitle from 'component/claimSubtitle';
+import ClaimPreviewTitle from 'component/claimPreviewTitle';
+import ClaimPreviewSubtitle from 'component/ClaimPreviewSubtitle';
 
 type Props = {
   uri: string,
@@ -180,7 +180,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
       <li className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })} disabled>
         <div className="placeholder media__thumb" />
         <div className="placeholder__wrapper">
-          <div className="placeholder claim-preview-title" />
+          <div className="placeholder claim-preview__title" />
           <div className="placeholder media__subtitle" />
         </div>
       </li>
@@ -217,11 +217,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
       <div className="claim-preview__text">
         <div className="claim-preview-metadata">
           <div className="claim-preview-info">
-            <ClaimTitle uri={uri} />
+            <ClaimPreviewTitle uri={uri} />
             {!isChannel && <FileProperties uri={uri} />}
           </div>
 
-          <ClaimSubtitle uri={uri} type={type} />
+          <ClaimPreviewSubtitle uri={uri} type={type} />
         </div>
         <div className="claim-preview__actions">
           {!pending && (

ui/component/claimPreviewSubtitle/index.js

@@ -2,7 +2,7 @@ import * as PAGES from 'constants/pages';
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri, makeSelectClaimIsPending, doClearPublish, doPrepareEdit } from 'lbry-redux';
 import { push } from 'connected-react-router';
-import ClaimSubtitle from './view';
+import ClaimPreviewSubtitle from './view';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
@@ -20,4 +20,4 @@ const perform = dispatch => ({
 export default connect(
   select,
   perform
-)(ClaimSubtitle);
+)(ClaimPreviewSubtitle);

ui/component/claimPreviewSubtitle/view.jsx

@@ -13,7 +13,7 @@ type Props = {
   beginPublish: string => void,
 };
 
-function ClaimSubtitle(props: Props) {
+function ClaimPreviewSubtitle(props: Props) {
   const { pending, uri, claim, type, beginPublish } = props;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
 
@@ -49,4 +49,4 @@ function ClaimSubtitle(props: Props) {
   );
 }
 
-export default ClaimSubtitle;
+export default ClaimPreviewSubtitle;

ui/component/claimPreviewTitle/index.js

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri, makeSelectTitleForUri } from 'lbry-redux';
-import ClaimPreview from './view';
+import ClaimPreviewTitle from './view';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
   title: makeSelectTitleForUri(props.uri)(state),
 });
 
-export default connect(select)(ClaimPreview);
+export default connect(select)(ClaimPreviewTitle);

ui/component/claimPreviewTitle/view.jsx

@@ -8,14 +8,14 @@ type Props = {
   title: string,
 };
 
-function ClaimTitle(props: Props) {
+function ClaimPreviewTitle(props: Props) {
   const { title, claim } = props;
 
   return (
-    <div className="claim-preview-title">
+    <div className="claim-preview__title">
       {claim ? <TruncatedText text={title || claim.name} lines={2} /> : <span>{__('Nothing here')}</span>}
     </div>
   );
 }
 
-export default ClaimTitle;
+export default ClaimPreviewTitle;

ui/component/fileAuthor/view.jsx

@@ -12,7 +12,7 @@ function FileAuthor(props: Props) {
   return channelUri ? (
     <ClaimPreview uri={channelUri} type="inline" properties={false} hideBlock />
   ) : (
-    <div className="claim-preview--inline claim-preview-title">{__('Anonymous')}</div>
+    <div className="claim-preview--inline claim-preview__title">{__('Anonymous')}</div>
   );
 }
 

ui/component/floatingViewer/view.jsx

@@ -182,7 +182,7 @@ export default function FileViewer(props: Props) {
           )}
           {!inline && (
             <div className="draggable content__info">
-              <div className="claim-preview-title" title={title || uri}>
+              <div className="claim-preview__title" title={title || uri}>
                 {title || uri}
               </div>
               <UriIndicator link addTooltip={false} uri={uri} />

ui/component/previewLink/view.jsx

@@ -34,7 +34,7 @@ class PreviewLink extends React.PureComponent<Props> {
           <span style={thumbnailStyle} className={'preview-link__thumbnail media__thumb'} />
           <span className={'claim-preview-metadata'}>
             <span className={'claim-preview-info'}>
-              <span className={'claim-preview-title'}>
+              <span className={'claim-preview__title'}>
                 <TruncatedText text={title} lines={1} />
               </span>
             </span>

ui/component/webUploadList/internal/web-upload-item.jsx

@@ -16,7 +16,7 @@ export default function WebUploadItem(props: Props) {
       <FileThumbnail thumbnail={params.thumbnail_url} />
       <div className={'claim-preview-metadata'}>
         <div className="claim-preview-info">
-          <div className="claim-preview-title">{params.title}</div>
+          <div className="claim-preview__title">{params.title}</div>
           {xhr && (
             <div className="card__actions--inline">
               <Button

ui/scss/component/_claim-list.scss

@@ -173,7 +173,7 @@
   justify-content: space-between;
 }
 
-.claim-preview-title {
+.claim-preview__title {
   font-weight: var(--font-weight-bold);
   font-size: var(--font-body);
   margin-right: auto;

ui/scss/component/_placeholder.scss

@@ -9,7 +9,7 @@
 .placeholder {
   display: flex;
 
-  &.claim-preview-title {
+  &.claim-preview__title {
     width: 100%;
     height: 3rem;
   }