new list style for asset listing

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

@@ -29,6 +29,28 @@
     }
 }
 
+.assetList {
+    > a {
+        display: block;
+        color: $brand-grey-dark;
+        border-bottom: 1px solid $brand-grey-lighter;
+        padding-top: $spacer / 2;
+        padding-bottom: $spacer / 2;
+
+        &:hover,
+        &:focus {
+            color: $brand-pink;
+            transform: none;
+        }
+    }
+
+    h1 {
+        font-size: $font-size-base;
+        color: inherit;
+        margin: 0;
+    }
+}
+
 .assetFooter {
     border-top: 1px solid $brand-grey-lighter;
     padding-top: $spacer / 2;

client/src/components/molecules/Asset.tsx

@@ -2,11 +2,17 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import styles from './Asset.module.scss'
 
-const AssetLink = ({ asset }: { asset: any }) => {
+const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
     const { metadata } = asset.findServiceByType('Metadata')
     const { base } = metadata
 
-    return (
+    return list ? (
+        <article className={styles.assetList}>
+            <Link to={`/asset/${asset.id}`}>
+                <h1>{base.name}</h1>
+            </Link>
+        </article>
+    ) : (
         <article className={styles.asset}>
             <Link to={`/asset/${asset.id}`}>
                 <h1>{base.name}</h1>

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

@@ -5,25 +5,11 @@
     margin-bottom: $spacer;
 
     > div {
-        text-align: center;
-        margin-top: $spacer;
         margin-bottom: $spacer;
     }
 }
 
 .assets {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: $spacer;
-    max-width: 100%;
-
-    @media (min-width: $break-point--small) {
-        grid-template-columns: 2fr 2fr;
-    }
-
-    @media (min-width: $break-point--medium) {
-        grid-template-columns: 2fr 2fr 2fr;
-    }
 }
 
 .subTitle {
@@ -31,4 +17,5 @@
     color: $brand-grey-light;
     border-bottom: 1px solid $brand-grey-lighter;
     padding-bottom: $spacer / 2;
+    margin-bottom: 0;
 }

client/src/components/molecules/AssetsUser.tsx

@@ -51,8 +51,8 @@ export default class AssetsUser extends PureComponent {
                         {this.state.results
                             .filter(asset => !!asset)
                             .map((asset: any) => (
-                                <Asset key={asset.id} asset={asset} />
-                            ))}
+                            <Asset key={asset.id} asset={asset} list />
+                        ))}
                     </div>
                 ) : (
                     <div>