ui/component/common/file-list.jsx

@@ -1,8 +1,5 @@
 // @flow
 import React from 'react';
-import * as ICONS from 'constants/icons';
-import Icon from 'component/common/icon';
-import classnames from 'classnames';
 import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
 
 type Props = {
@@ -10,6 +7,19 @@ type Props = {
   onChange: (WebFile | void) => void,
 };
 
+type RadioProps = {
+  id: string,
+  label: string,
+};
+
+// Same as FormField type="radio" but it works with reakit:
+const ForwardedRadio = React.forwardRef((props: RadioProps, ref) => (
+  <span className="radio">
+    <input {...props} type="radio" ref={ref} />
+    <label htmlFor={props.id}>{props.label}</label>
+  </span>
+));
+
 function FileList(props: Props) {
   const { files, onChange } = props;
   const radio = useRadioState();
@@ -53,17 +63,8 @@ function FileList(props: Props) {
   return (
     <div className={'file-list'}>
       <RadioGroup {...radio} aria-label="files">
-        {files.map((entry, index) => {
-          const item = radio.stops[index];
-          const selected = item && item.id === radio.currentId;
-
-          return (
-            <label key={entry.name} className={classnames(selected && 'selected')}>
-              <Radio {...radio} value={entry.name} />
-              <Icon size={18} selected={selected} icon={selected ? ICONS.COMPLETED : ICONS.CIRCLE} />
-              <span>{entry.name}</span>
-            </label>
-          );
+        {files.map(({ name }) => {
+          return <Radio key={name} {...radio} value={name} label={name} as={ForwardedRadio} />;
         })}
       </RadioGroup>
     </div>

ui/component/fileDrop/view.jsx

@@ -117,7 +117,7 @@ function FileDrop(props: Props) {
     <div className={classnames('file-drop', show && 'file-drop--show')}>
       <div className={classnames('card', 'file-drop__area')}>
         <Icon size={64} icon={ICONS.PUBLISH} className={'main-icon'} />
-        <p>{`Drop here to publish!`} </p>
+        <p>{__(`Drop here to publish!`)} </p>
         {files && files.length === 1 && <FileList files={files} onChange={handleFileChange} />}
       </div>
     </div>

ui/scss/component/_file-list.scss

@@ -1,38 +1,6 @@
 .file-list {
-  max-height: 200px;
-  overflow: auto;
   width: 100%;
-
-  fieldset {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    background: var(--color-menu-background);
-
-    label {
-      margin: 0;
-      color: inherit;
-      display: flex;
-      align-items: center;
-      padding: var(--spacing-miniscule) var(--spacing-small);
-
-      &.selected {
-        background-color: rgba(10, 10, 10, 0.1);
-        box-shadow: inset 0 0 0 3px var(--color-focus);
-      }
-
-      .icon {
-        margin-right: var(--spacing-small);
-        opacity: 0.64;
-      }
-    }
-
-    input {
-      width: 0;
-      height: 0;
-      margin: 0;
-      padding: 0;
-      opacity: 0;
-    }
-  }
+  overflow: auto;
+  max-height: 220px;
+  padding: var(--spacing-small);
 }