add experimental fileTile styles

ui/js/component/fileTile/view.jsx

@@ -126,7 +126,6 @@ class FileTile extends React.PureComponent {
                   {" "}
                   {showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
                 </span>
-                <div className="meta">{uri}</div>
                 <h3>
                   <TruncatedText lines={1}>{title}</TruncatedText>
                 </h3>
@@ -137,6 +136,13 @@ class FileTile extends React.PureComponent {
                     {description}
                   </TruncatedText>
                 </div>}
+              <div className="card__content card__subtext">
+                <span className="meta">
+                  <Icon icon={icons.FILE} />
+                  <span className="meta-uri">{uri}</span>
+                </span>
+              </div>
+
             </div>
           </div>
         </div>

ui/js/constants/icons.js

@@ -1,2 +1,3 @@
 export const FEATURED = "rocket";
 export const LOCAL = "folder";
+export const FILE = "file";

ui/scss/component/_file-tile.scss

@@ -19,4 +19,18 @@ $height-file-tile: $spacing-vertical * 6;
   .card__title-primary {
     margin-top: 0;
   }
+  .meta {
+    background: var(--color-canvas);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+    display: inline-block;
+    padding: 8px;
+    max-width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .meta-uri {
+      margin: 0 8px;
+    }
+  }
 }