[form-builder] Improve FileInput uploaded state

sanity-io · Oct 6, 2020 · 554c0cb · 554c0cb
1 parent 7b514e4
commit 554c0cb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/FileInput/FileInput.tsx b/packages/@sanity/form-builder/src/inputs/FileInput/FileInput.tsx
@@ -22,6 +22,7 @@ import Snackbar from 'part:@sanity/components/snackbar/default'
 import {Path} from '../../typedefs/path'
 import {Observable} from 'rxjs'
 import ButtonGrid from 'part:@sanity/components/buttons/button-grid'
+import AnchorButton from 'part:@sanity/components/buttons/anchor'
 
 type FieldT = {
   name: string
@@ -168,10 +169,12 @@ export default class FileInput extends React.PureComponent<Props, FileInputState
           <FileIcon />
         </div>
         <div>
-          {assetDocument.originalFilename}{' '}
-          <a href={`${assetDocument.url}?dl`} download>
+          <div className={styles.fileLabel}>
+            {assetDocument.originalFilename}{' '}
+          </div>
+          <AnchorButton href={`${assetDocument.url}?dl`} inverted size="small">
             Download
-          </a>
+          </AnchorButton>
         </div>
       </div>
     )

diff --git a/packages/@sanity/form-builder/src/inputs/FileInput/styles/FileInput.css b/packages/@sanity/form-builder/src/inputs/FileInput/styles/FileInput.css
@@ -81,4 +81,12 @@
 .fileIcon {
   font-size: 3em;
   margin-right: var(--medium-padding);
+  display: flex;
+  align-items: center;
+}
+
+.fileLabel {
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  margin-bottom: var(--small-padding);
 }