From 2ddfde14801a75acdbddbd1f21d6b8177cf672eb Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 16 Mar 2021 11:45:14 -0400
Subject: [PATCH] use button-toggle group for page title

---
 static/app-strings.json            |  1 +
 ui/page/fileListPublished/view.jsx | 56 ++++++++++++++++--------------
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 9e5e45318..b15edaa63 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1261,6 +1261,7 @@
   "Unmute": "Unmute",
   "Manage notifications": "Manage notifications",
   "Uploads": "Uploads",
+  "All uploads": "All uploads",
   "Advanced settings": "Advanced settings",
   "Browse": "Browse",
   "Automatic transcoding": "Automatic transcoding",
diff --git a/ui/page/fileListPublished/view.jsx b/ui/page/fileListPublished/view.jsx
index d5971f281..c87ea8634 100644
--- a/ui/page/fileListPublished/view.jsx
+++ b/ui/page/fileListPublished/view.jsx
@@ -68,7 +68,35 @@ function FileListPublished(props: Props) {
         {!!(urls && urls.length) && (
           <>
             <ClaimList
-              header={<h1 className="section__title">{__('Uploads')}</h1>}
+              header={
+                <span>
+                  <Button
+                    button="alt"
+                    label={__('All')}
+                    aria-label={__('All uploads')}
+                    onClick={() => setFilterBy(FILTER_ALL)}
+                    className={classnames(`button-toggle`, {
+                      'button-toggle--active': filterBy === FILTER_ALL,
+                    })}
+                  />
+                  <Button
+                    button="alt"
+                    label={__('Uploads')}
+                    onClick={() => setFilterBy(FILTER_UPLOADS)}
+                    className={classnames(`button-toggle`, {
+                      'button-toggle--active': filterBy === FILTER_UPLOADS,
+                    })}
+                  />
+                  <Button
+                    button="alt"
+                    label={__('Reposts')}
+                    onClick={() => setFilterBy(FILTER_REPOSTS)}
+                    className={classnames(`button-toggle`, {
+                      'button-toggle--active': filterBy === FILTER_REPOSTS,
+                    })}
+                  />
+                </span>
+              }
               headerAltControls={
                 <div className="card__actions--inline">
                   {fetching && <Spinner type="small" />}
@@ -87,32 +115,6 @@ function FileListPublished(props: Props) {
                     navigate={`/$/${PAGES.UPLOAD}`}
                     onClick={() => clearPublish()}
                   />
-                  <span>
-                    <Button
-                      button="alt"
-                      label={__('All')}
-                      onClick={() => setFilterBy(FILTER_ALL)}
-                      className={classnames(`button-toggle`, {
-                        'button-toggle--active': filterBy === FILTER_ALL,
-                      })}
-                    />
-                    <Button
-                      button="alt"
-                      label={__('Uploads')}
-                      onClick={() => setFilterBy(FILTER_UPLOADS)}
-                      className={classnames(`button-toggle`, {
-                        'button-toggle--active': filterBy === FILTER_UPLOADS,
-                      })}
-                    />
-                    <Button
-                      button="alt"
-                      label={__('Reposts')}
-                      onClick={() => setFilterBy(FILTER_REPOSTS)}
-                      className={classnames(`button-toggle`, {
-                        'button-toggle--active': filterBy === FILTER_REPOSTS,
-                      })}
-                    />
-                  </span>
                 </div>
               }
               persistedStorageKey="claim-list-published"