Files styling

client/src/components/molecules/Asset.module.scss

@@ -37,6 +37,7 @@
         padding-bottom: $spacer / 2;
         display: flex;
         justify-content: space-between;
+        align-items: center;
 
         &:hover,
         &:focus {

client/src/routes/Publish/Files/Item.module.scss

@@ -1,9 +1,9 @@
 @import '../../../styles/variables';
 
 .linkUrl {
-    font-size: $font-size-mini;
+    font-size: $font-size-small;
     display: block;
-    font-family: $font-family-base;
+    margin-bottom: $spacer / 8;
 
     // TODO: truncate long urls with ellipsis
 }
@@ -23,7 +23,7 @@
     display: inline-block;
     vertical-align: middle;
     position: absolute;
-    top: $spacer / 4;
+    top: $spacer / 8;
     right: 0;
     transition: .2s ease-out;
 
@@ -35,10 +35,9 @@
 
 .details {
     font-size: $font-size-mini;
-    font-size: .85rem;
-    color: #6e7e93;
+    color: $brand-grey-light;
 
     span {
-        padding-right: .5rem;
+        padding-right: $spacer;
     }
 }

client/src/routes/Publish/Files/Item.tsx

@@ -4,14 +4,19 @@ import filesize from 'filesize'
 
 const Item = ({ item, removeItem }: { item: any; removeItem: any }) => (
     <li>
-        <a href={item.url}>{item.url}</a>
+        <a href={item.url} className={styles.linkUrl}>
+            {item.url}
+        </a>
         <div className={styles.details}>
-            <span>url: {item.found ? 'confirmed' : 'unconfirmed'}</span>
+            <span>URL {item.found ? 'confirmed' : ' not confirmed'}</span>
             <span>
-                size:
-                {item.found && item.size ? filesize(item.size) : 'unknown'}
+                {item.found && item.size ? filesize(item.size) : 'unknown size'}
+            </span>
+            <span>
+                {item.found && item.type
+                    ? item.type.split('/')[1]
+                    : 'unknown type'}
             </span>
-            <span>type: {item.found && item.type ? item.type : 'unknown'}</span>
         </div>
         <button
             type="button"