From a770e0a8a93ccc4e128e92567fb042013ec4aee2 Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Tue, 3 May 2022 10:26:46 -0300
Subject: [PATCH] Add sync yt button on channels page

---
 ui/page/channels/view.jsx       | 12 ++++++++----
 ui/scss/component/_channel.scss |  8 ++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/page/channels/view.jsx b/ui/page/channels/view.jsx
index 24158f356..82e547afa 100644
--- a/ui/page/channels/view.jsx
+++ b/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
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index 4899f3a3a..abecffb97 100644
--- a/ui/scss/component/_channel.scss
+++ b/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);