move icons/time on file tiles to thumbnail

ui/component/claimPreviewTile/view.jsx

@@ -148,15 +148,18 @@ function ClaimPreviewTile(props: Props) {
       })}
     >
       <NavLink {...navLinkProps}>
-        <FileThumbnail thumbnail={thumbnailUrl} />
+        <FileThumbnail thumbnail={thumbnailUrl}>
+          {!isChannel && (
+            <div className="claim-tile__file-properties">
+              <FileProperties uri={uri} small />
+            </div>
+          )}
+        </FileThumbnail>
       </NavLink>
       <NavLink {...navLinkProps}>
-        <div className="claim-tile__title-and-properties">
-          <h2 className="claim-tile__title">
-            <TruncatedText text={title || (claim && claim.name)} lines={2} />
-          </h2>
-          {!isChannel && <FileProperties uri={uri} small />}
-        </div>
+        <h2 className="claim-tile__title">
+          <TruncatedText text={title || (claim && claim.name)} lines={2} />
+        </h2>
       </NavLink>
       <div className="claim-tile__info">
         {isChannel ? (

ui/component/fileThumbnail/view.jsx

@@ -1,23 +1,24 @@
 // @flow
+import type { Node } from 'react';
 import React from 'react';
 // import FreezeframeWrapper from './FreezeframeWrapper';
 import Placeholder from './placeholder.png';
 
 type Props = {
   thumbnail: ?string, // externally sourced image
+  children?: Node,
 };
 
 const className = 'media__thumb';
 
 class CardMedia extends React.PureComponent<Props> {
   render() {
-    const { thumbnail } = this.props;
+    const { thumbnail, children } = this.props;
 
     // Disabling temporarily to see if people complain
     // if (thumbnail && thumbnail.endsWith('gif')) {
     //   return <FreezeframeWrapper src={thumbnail} className={className} />;
     // }
-
     let url;
     // @if TARGET='web'
     // Pass image urls through a compression proxy
@@ -32,7 +33,11 @@ class CardMedia extends React.PureComponent<Props> {
     url = thumbnail || Placeholder;
     // @endif
 
-    return <div style={{ backgroundImage: `url('${url.replace(/'/g, "\\'")}')` }} className={className} />;
+    return (
+      <div style={{ backgroundImage: `url('${url.replace(/'/g, "\\'")}')` }} className={className}>
+        {children}
+      </div>
+    );
   }
 }
 

ui/scss/component/_claim-list.scss

@@ -332,14 +332,9 @@
   }
 }
 
-.claim-preview--channel {
-  .media__thumb {
-    padding-top: 10%;
-  }
-}
-
 .claim-tile__title {
   margin-bottom: 0;
+  margin: var(--spacing-small);
   font-weight: 600;
   font-size: var(--font-small);
   color: var(--color-text);
@@ -384,9 +379,16 @@
   font-size: var(--font-body);
 }
 
-.claim-tile__title-and-properties {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin: var(--spacing-small);
+.claim-tile__file-properties {
+  position: absolute;
+  bottom: var(--spacing-miniscule);
+  right: var(--spacing-miniscule);
+  background-color: var(--color-black);
+  color: var(--color-white);
+  padding: 0.2rem;
+  border-radius: var(--border-radius);
+
+  .file-properties {
+    color: var(--color-white);
+  }
 }

ui/scss/component/_file-properties.scss

@@ -4,7 +4,7 @@
   align-items: center;
   font-size: var(--font-small);
   color: var(--color-text-help);
-  margin-left: var(--spacing-xsmall);
+  margin-left: var(--spacing-small);
 
   & > *:not(:last-child) {
     margin-right: var(--spacing-small);
@@ -18,6 +18,7 @@
 .file-properties--small {
   font-size: var(--font-xsmall);
   line-height: 1.2;
+  margin-left: 0;
 
   & > *:not(:last-child) {
     margin-right: var(--spacing-miniscule);

ui/scss/component/_media.scss

@@ -3,6 +3,7 @@
 
 .media__thumb {
   @include thumbnail;
+  position: relative;
   border-radius: var(--card-radius);
   object-fit: cover;
   background-color: var(--color-placeholder-background);