From 4f0c6030e125bf4dce40f5bd9d0356698e0a75bb Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Mon, 2 Aug 2021 12:03:55 -0300
Subject: [PATCH] Add back file download link

---
 ui/component/claimPreview/view.jsx     | 20 +++++++++-----------
 ui/component/claimPreviewTile/view.jsx | 21 +++++++++------------
 ui/scss/component/_claim-list.scss     |  6 ++++--
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx
index 0f1bd76ce..1ffb959f2 100644
--- a/ui/component/claimPreview/view.jsx
+++ b/ui/component/claimPreview/view.jsx
@@ -362,23 +362,21 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
               {!pending ? (
                 <NavLink aria-hidden tabIndex={-1} {...navLinkProps}>
                   <FileThumbnail thumbnail={thumbnailUrl}>
-                    {/* @if TARGET='app' */}
-                    {claim && !isCollection && (
-                      <div className="claim-preview__hover-actions">
+                    <div className="claim-preview__hover-actions">
+                      {isPlayable && (
+                        <FileWatchLaterLink focusable={false} uri={uri} />
+                      )}
+                      {/* @if TARGET='app' */}
+                      {claim && !isCollection && (
                         <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton hideDownloadStatus />
-                      </div>
-                    )}
-                    {/* @endif */}
+                      )}
+                      {/* @endif */}
+                    </div>
                     {!isLivestream && (
                       <div className="claim-preview__file-property-overlay">
                         <PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />
                       </div>
                     )}
-                    {isPlayable && (
-                      <div className="claim-preview__hover-actions">
-                        <FileWatchLaterLink focusable={false} uri={uri} />
-                      </div>
-                    )}
                   </FileThumbnail>
                 </NavLink>
               ) : (
diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
index d772241e8..72d279981 100644
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/ui/component/claimPreviewTile/view.jsx
@@ -208,19 +208,16 @@ function ClaimPreviewTile(props: Props) {
         <FileThumbnail thumbnail={thumbnailUrl} allowGifs>
           {!isChannel && (
             <React.Fragment>
-              {/* @if TARGET='app' */}
-              {isStream && (
-                <div className="claim-preview__hover-actions">
-                  <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />
-                </div>
-              )}
-              {/* @endif */}
-
-              {isPlayable && (
-                <div className="claim-preview__hover-actions">
+              <div className="claim-preview__hover-actions">
+                {isPlayable && (
                   <FileWatchLaterLink focusable={false} uri={uri} />
-                </div>
-              )}
+                )}
+                {/* @if TARGET='app' */}
+                {isStream && (
+                  <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />
+                )}
+                {/* @endif */}
+              </div>
 
               <div className="claim-preview__file-property-overlay">
                 <PreviewOverlayProperties uri={uri} properties={liveProperty || properties} />
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 3c98b821e..52e1c2b58 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -669,12 +669,13 @@
 
 .claim-preview__hover-actions {
   display: none;
-  position: absolute;
+  position: relative;
+  float: right;
   top: var(--spacing-xxs);
   right: var(--spacing-xxs);
 
   & > * {
-    color: var(--color-black);
+    color: var(--color-text);
     background-color: var(--color-black);
     border-radius: var(--border-radius);
     padding: var(--spacing-xxs);
@@ -685,6 +686,7 @@
   }
 
   .button--file-action {
+    display: block;
     margin: 0 0;
     padding: var(--spacing-xxs) var(--spacing-xxs);
     height: unset;