Add sync yt button on channels page

ui/page/channels/view.jsx

@@ -55,15 +55,19 @@ export default function ChannelsPage(props: Props) {
 
   return (
     <Page className="channelsPage-wrapper">
-      {/* TODO: use variabled spacing */}
-      <h1 className="section__title" style={{ marginBottom: '15px' }}>
-        {__('Active channel')}
-      </h1>
+      <h1 className="section__title section__title--margin-bottom">{__('Active channel')}</h1>
       <ChannelSelector />
 
       <div className="card-stack">
         {hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
 
+        <Button
+          button="primary"
+          label={__('Sync YouTube Channel')}
+          icon={ICONS.YOUTUBE}
+          navigate={`/$/${PAGES.YOUTUBE_SYNC}`}
+        />
+
         {channelUrls && Boolean(channelUrls.length) && (
           <ClaimList
             showMemberBadge

ui/scss/component/_channel.scss

@@ -742,6 +742,14 @@ $actions-z-index: 2;
 }
 
 .channelsPage-wrapper {
+  .section__title {
+    margin-top: var(--spacing-m);
+  }
+  .section__title--margin-bottom {
+    margin-top: 0px;
+    margin-bottom: var(--spacing-m);
+  }
+
   .claim-preview__wrapper--channel {
     position: relative;
     border-radius: var(--border-radius);