move youtube badge to 'channel about' section

static/app-strings.json

@@ -742,7 +742,7 @@
   "There was an error reposting this claim. Please try again later.": "There was an error reposting this claim. Please try again later.",
   "Claim ID": "Claim ID",
   "Official YouTube Creator": "Official YouTube Creator",
-  "Official YouTube Creator - Last checked %time_ago%": "Official YouTube Creator - Last checked %time_ago%",
+  "Last checked %time_ago%": "Last checked %time_ago%",
   "Install Now": "Install Now",
   "Invite Link": "Invite Link",
   "Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%. You can use invites just like affiliate links.": "Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%. You can use invites just like affiliate links.",

ui/component/channelAbout/view.jsx

@@ -7,6 +7,7 @@ import CreditAmount from 'component/common/credit-amount';
 import Button from 'component/button';
 import * as PAGES from 'constants/pages';
 import DateTime from 'component/dateTime';
+import YoutubeBadge from 'component/youtubeBadge';
 
 type Props = {
   claim: ChannelClaim,
@@ -27,6 +28,7 @@ const formatEmail = (email: string) => {
 
 function ChannelAbout(props: Props) {
   const { claim, uri, description, email, website } = props;
+  const claimId = claim && claim.claim_id;
 
   return (
     <div className="card">
@@ -97,6 +99,8 @@ function ChannelAbout(props: Props) {
               />
             )}
           </div>
+
+          <YoutubeBadge channelClaimId={claimId} />
         </Fragment>
       </section>
     </div>

ui/component/youtubeBadge/view.jsx

@@ -1,18 +1,14 @@
 // @flow
-import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import DateTime from 'component/dateTime';
-import Icon from 'component/common/icon';
 import { Lbryio } from 'lbryinc';
 
 type Props = {
   channelClaimId: string,
-  includeSyncDate: boolean,
 };
 
 export default function YoutubeBadge(props: Props) {
-  const { channelClaimId, includeSyncDate = true } = props;
+  const { channelClaimId } = props;
-
   const [isVerified, setIsVerified] = React.useState();
   const [lastYtSyncDate, setLastYtSyncDate] = React.useState();
 
@@ -34,15 +30,15 @@ export default function YoutubeBadge(props: Props) {
   }, [channelClaimId]);
 
   if (isVerified) {
-    const str =
-      includeSyncDate && lastYtSyncDate
-        ? __('Official YouTube Creator - Last checked %time_ago%', { time_ago: DateTime.getTimeAgoStr(lastYtSyncDate) })
-        : __('Official YouTube Creator');
     return (
-      <div className="media__uri--right--yt-badge">
+      <>
-        <Icon icon={ICONS.VALIDATED} size={12} />
+        <label>{__('Official YouTube Creator')}</label>
-        {str}
+        <div className="media__info-text">
-      </div>
+          <div className="media__info-text media__info-text--constrained">
+            {lastYtSyncDate && __('Last checked %time_ago%', { time_ago: DateTime.getTimeAgoStr(lastYtSyncDate) })}
+          </div>
+        </div>
+      </>
     );
   } else {
     return null;

ui/page/channel/view.jsx

@@ -20,7 +20,6 @@ import ChannelEdit from 'component/channelEdit';
 import classnames from 'classnames';
 import HelpLink from 'component/common/help-link';
 import ClaimSupportButton from 'component/claimSupportButton';
-import YoutubeBadge from 'component/youtubeBadge';
 
 export const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@@ -144,7 +143,6 @@ function ChannelPage(props: Props) {
 
   return (
     <Page noFooter>
-      <YoutubeBadge channelClaimId={claimId} />
       <header className="channel-cover">
         <div className="channel__quick-actions">
           {isMyYouTubeChannel && (