asset type icons

src/@images/algorithm.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.56946 0.51192C1.29989 0.197426 0.826414 0.161005 0.51192 0.430571C0.197426 0.700138 0.161005 1.17361 0.430571 1.48811L3.01221 4.50001L0.430571 7.51192C0.161005 7.82641 0.197426 8.29989 0.51192 8.56946C0.826414 8.83902 1.29989 8.8026 1.56946 8.48811L4.56946 4.98811C4.8102 4.70724 4.8102 4.29279 4.56946 4.01192L1.56946 0.51192ZM9.00001 4.25001C8.5858 4.25001 8.25001 4.5858 8.25001 5.00001C8.25001 5.41423 8.5858 5.75001 9.00001 5.75001H14C14.4142 5.75001 14.75 5.41423 14.75 5.00001C14.75 4.5858 14.4142 4.25001 14 4.25001H9.00001Z" />
+</svg>

src/@images/dataset.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="12" viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84593 0.356445H0V3.21453H2.84593V0.356445ZM2.84593 4.64355H0V7.50164H2.84593V4.64355ZM0 9H2.84593V11.8581H0V9ZM8.5377 0.356445H5.69177V3.21453H8.5377V0.356445ZM5.69177 4.64355H8.5377V7.50164H5.69177V4.64355ZM8.5377 9H5.69177V11.8581H8.5377V9ZM11.3837 0.356445H14.2296V3.21453H11.3837V0.356445ZM14.2296 4.64355H11.3837V7.50164H14.2296V4.64355ZM11.3837 9H14.2296V11.8581H11.3837V9Z" />
+</svg>

src/components/@shared/Form/FormFields/Datatoken/index.module.css

@@ -1,7 +1,7 @@
 .datatoken {
   display: grid;
-  gap: calc(var(--spacer) / 2);
-  grid-template-columns: 1fr 4fr;
+  gap: var(--spacer);
+  grid-template-columns: 1fr 11fr;
   margin-bottom: var(--spacer);
   align-items: center;
 }
@@ -16,7 +16,8 @@
   width: 128px;
   height: 128px;
   padding: var(--spacer);
-  background: var(--brand-black);
+  background: var(--background-body);
+  border: 1px solid var(--border-color);
   fill: var(--brand-violet);
   border-radius: 50%;
 }

src/components/@shared/Form/FormFields/Nft/index.module.css

@@ -1,7 +1,7 @@
 .nft {
   display: grid;
-  gap: calc(var(--spacer) / 2);
-  grid-template-columns: 1fr 4fr;
+  gap: var(--spacer);
+  grid-template-columns: 1fr 11fr;
   margin-bottom: var(--spacer);
   align-items: center;
 }
@@ -13,6 +13,9 @@
 }
 
 .image {
+  display: block;
+  width: 128px;
+  height: 128px;
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
 }

src/components/@shared/Form/FormFields/Nft/index.tsx

@@ -17,12 +17,10 @@ export default function Nft(props: InputProps): ReactElement {
 
   return (
     <div className={styles.nft}>
-      <img
-        src="//placekitten.com/g/128/128"
-        className={styles.image}
-        width="128"
-        height="128"
-      />
+      <figure className={styles.image}>
+        <img src="//placekitten.com/g/128/128" width="128" height="128" />
+      </figure>
+
       <div className={styles.token}>
         <strong>{field?.value?.name}</strong> —{' '}
         <strong>{field?.value?.symbol}</strong>

src/components/@shared/Form/Input/index.module.css

@@ -1,5 +1,5 @@
 .field {
-  margin-bottom: var(--spacer);
+  margin-bottom: calc(var(--spacer) * var(--line-height));
   position: relative;
 }
 

src/components/Publish/Metadata/index.tsx

@@ -1,9 +1,12 @@
+import { BoxSelectionOption } from '@shared/Form/FormFields/BoxSelection'
 import Input from '@shared/Form/Input'
 import { Field, useFormikContext } from 'formik'
 import React, { ReactElement } from 'react'
 import content from '../../../../content/publish/form.json'
 import { FormPublishData } from '../_types'
 import { getFieldContent } from '../_utils'
+import IconDataset from '@images/dataset.svg'
+import IconAlgorithm from '@images/algorithm.svg'
 
 const assetTypeOptionsTitles = getFieldContent(
   'type',
@@ -26,16 +29,18 @@ export default function MetadataFields(): ReactElement {
 
   // BoxSelection component is not a Formik component
   // so we need to handle checked state manually.
-  const assetTypeOptions = [
+  const assetTypeOptions: BoxSelectionOption[] = [
     {
       name: assetTypeOptionsTitles[0].toLowerCase(),
       title: assetTypeOptionsTitles[0],
-      checked: values.metadata.type === assetTypeOptionsTitles[0].toLowerCase()
+      checked: values.metadata.type === assetTypeOptionsTitles[0].toLowerCase(),
+      icon: <IconDataset />
     },
     {
       name: assetTypeOptionsTitles[1].toLowerCase(),
       title: assetTypeOptionsTitles[1],
-      checked: values.metadata.type === assetTypeOptionsTitles[1].toLowerCase()
+      checked: values.metadata.type === assetTypeOptionsTitles[1].toLowerCase(),
+      icon: <IconAlgorithm />
     }
   ]
 
@@ -61,6 +66,7 @@ export default function MetadataFields(): ReactElement {
         {...getFieldContent('description', content.metadata.fields)}
         component={Input}
         name="metadata.description"
+        rows={7}
       />
       <Field
         {...getFieldContent('author', content.metadata.fields)}

src/components/Publish/Services/index.tsx

@@ -12,19 +12,6 @@ const accessTypeOptionsTitles = getFieldContent(
   content.services.fields
 ).options
 
-const accessTypeOptions = [
-  {
-    name: accessTypeOptionsTitles[0].toLowerCase(),
-    title: accessTypeOptionsTitles[0],
-    icon: <IconDownload />
-  },
-  {
-    name: accessTypeOptionsTitles[1].toLowerCase(),
-    title: accessTypeOptionsTitles[1],
-    icon: <IconCompute />
-  }
-]
-
 export default function ServicesFields(): ReactElement {
   // connect with Form state, use for conditional field rendering
   const { values, setFieldValue } = useFormikContext<FormPublishData>()