new asset file style

client/src/routes/Details/AssetDetails.tsx

@@ -10,6 +10,13 @@ interface AssetDetailsProps {
 }
 
 export default class AssetDetails extends PureComponent<AssetDetailsProps> {
+    private datafilesLine = (files: any) => {
+        if (files.length === 1) {
+            return <span>{files.length} data file</span>
+        }
+        return <span>{files.length} data files</span>
+    }
+
     public render() {
         const { metadata, ddo } = this.props
         const { base } = metadata
@@ -32,18 +39,14 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                             />
                         </span>
 
-                        {base.categories ? (
+                        {base.categories && (
                             // TODO: Make this link to search for respective category
                             <Link to={`/search?q=${base.categories[0]}`}>
                                 {base.categories[0]}
                             </Link>
-                        ) : (
-                            <Link to={'/search?q='}>Fake Category</Link>
                         )}
 
-                        {base.files && (
-                            <span>{base.files.length} data files</span>
-                        )}
+                        {base.files && this.datafilesLine(base.files)}
                     </div>
                 </aside>
 

client/src/routes/Details/AssetFilesDetails.module.scss

@@ -18,16 +18,29 @@
 
 .file {
     display: inline-block;
-    border: .1rem solid $brand-grey-light;
+    background: $brand-grey;
     padding: $spacer $spacer / 2;
     text-align: left;
     margin-left: $spacer / 4;
     margin-right: $spacer / 4;
+    position: relative;
+    min-height: 100px;
+
+    &:before {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 0;
+        height: 0;
+        border-top: 1rem solid $body-background;
+        border-left: 1rem solid transparent;
+    }
 
     li {
         font-size: $font-size-small;
         font-weight: $font-weight-bold;
-        color: $brand-grey-light;
+        color: $brand-white;
 
         &:before {
             display: none;

client/src/styles/_variables.scss

@@ -18,6 +18,8 @@ $yellow: #eac146;
 
 $brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink);
 
+$body-background: darken($brand-white, 1%);
+
 // Fonts
 $font-family-base: 'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Helvetica, Arial, sans-serif;

client/src/styles/global.scss

@@ -29,7 +29,7 @@ body {
     font-family: $font-family-base;
     font-weight: $font-weight-base;
     line-height: $line-height;
-    background: darken($brand-white, 1%);
+    background: $body-background;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;