asset files & fixed metadata tweaks

client/src/components/templates/Asset/AssetDetails.module.scss

@@ -62,16 +62,20 @@
     }
 }
 
-.meta {
-    border-top: 1px solid $brand-grey-lighter;
-    border-bottom: 1px solid $brand-grey-lighter;
-    padding-top: $spacer;
-    padding-bottom: $spacer;
+.metaFixed {
+    border: 1px solid $brand-grey-lighter;
+    padding: $spacer;
+    border-radius: $border-radius;
     margin-top: $spacer;
-    margin-bottom: $spacer;
-    list-style: none;
-    padding-left: 0;
+    margin-bottom: $spacer * $line-height;
     font-size: $font-size-small;
+    position: relative;
+
+    ul {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+    }
 
     li {
         width: 100%;
@@ -79,7 +83,7 @@
 
         @media (min-width: $break-point--small) {
             display: flex;
-            margin-bottom: 0;
+            margin-bottom: $spacer / 3;
         }
 
         &:before {
@@ -88,6 +92,17 @@
     }
 }
 
+.metaFixedTitle {
+    font-size: $font-size-small;
+    margin: 0;
+    font-family: $font-family-base;
+    font-weight: $font-weight-base;
+    color: $brand-grey-light;
+    position: absolute;
+    bottom: $spacer / 4;
+    right: $spacer / 4;
+}
+
 .metaLabel {
     display: block;
 
@@ -104,10 +119,15 @@
         overflow-wrap: break-word;
     }
 
+    /* stylelint-disable declaration-no-important */
     code {
-        display: inline;
+        display: block;
+        padding: 0 !important;
+        background: none !important;
     }
 
+    /* stylelint-enable declaration-no-important */
+
     @media (min-width: $break-point--small) {
         width: 70%;
     }

client/src/components/templates/Asset/AssetDetails.tsx

@@ -60,18 +60,29 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                     />
                 )}
 
-                <ul className={styles.meta}>
+                <div className={styles.metaFixed}>
+                    <h2
+                        className={styles.metaFixedTitle}
+                        title="This metadata can not be changed because it is used to generate the checksums for the DDO, and to encrypt the file urls."
+                    >
+                        Fixed Metadata
+                    </h2>
+                    <ul>
                         <li>
                             <span className={styles.metaLabel}>
                                 <strong>Author</strong>
                             </span>
-                        <span className={styles.metaValue}>{base.author}</span>
+                            <span className={styles.metaValue}>
+                                {base.author}
+                            </span>
                         </li>
                         <li>
                             <span className={styles.metaLabel}>
                                 <strong>License</strong>
                             </span>
-                        <span className={styles.metaValue}>{base.license}</span>
+                            <span className={styles.metaValue}>
+                                {base.license}
+                            </span>
                         </li>
                         <li>
                             <span className={styles.metaLabel}>
@@ -82,6 +93,7 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                             </span>
                         </li>
                     </ul>
+                </div>
 
                 <AssetFilesDetails
                     files={base.files ? base.files : []}

client/src/components/templates/Asset/AssetFile.module.scss

@@ -25,13 +25,16 @@
 
 .file {
     display: inline-block;
-    background: $brand-grey;
+    background: $brand-grey-dark
+        url('../../../../node_modules/@oceanprotocol/art/jellyfish/jellyfish-grid.svg')
+        no-repeat -1rem 4.5rem;
+    background-size: 100%;
     padding: $spacer $spacer / 2;
     margin-bottom: $spacer / 2;
     text-align: left;
     position: relative;
-    height: 8rem;
-    width: 6rem;
+    height: 8.5rem;
+    width: 6.5rem;
 
     &:before {
         content: '';