#27 update file picker appearance

client/src/components/Boards/AddPopup.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Button, Form, Divider, Menu } from 'semantic-ui-react';
+import { Button, Form, Menu } from 'semantic-ui-react';
 import { withPopup } from '../../lib/popup';
 import { Input, Popup, FilePicker } from '../../lib/custom-ui';
 
@@ -74,7 +74,7 @@ const AddStep = React.memo(({ onCreate, onImport, onClose }) => {
             className={styles.field}
             onChange={handleFieldChange}
           />
-          <Divider />
+          <Menu secondary vertical className={styles.menu}>
             <FilePicker onSelect={handleFileSelect} accept=".json">
               <Menu.Item className={styles.menuItem}>
                 {selectedFile
@@ -84,7 +84,7 @@ const AddStep = React.memo(({ onCreate, onImport, onClose }) => {
                     })}
               </Menu.Item>
             </FilePicker>
-          <Divider />
+          </Menu>
           <Button
             positive
             content={selectedFile ? t('action.importTrelloBoard') : t('action.createBoard')}

client/src/components/Boards/AddPopup.module.scss

@@ -2,4 +2,9 @@
   .field {
     margin-bottom: 8px;
   }
+
+  .menu {
+    margin: 0px 0px 4px;
+    width: 100%;
+  }
 }

client/src/locales/en/core.js

@@ -143,7 +143,7 @@ export default {
       time: 'Time',
       timer: 'Timer',
       title: 'Title',
-      uploadTrelloFile_title: 'Import Trello JSON File',
+      uploadTrelloFile_title: 'Import Board from Trello',
       userActions_title: 'User Actions',
       userAddedThisCardToList: '<0>{{user}}</0><1> added this card to {{list}}</1>',
       userLeftNewCommentToCard: '{{user}} left a new comment «{{comment}}» to <2>{{card}}</2>',