#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,17 +74,17 @@ const AddStep = React.memo(({ onCreate, onImport, onClose }) => {
             className={styles.field}
             onChange={handleFieldChange}
           />
-          <Divider />
-          <FilePicker onSelect={handleFileSelect} accept=".json">
-            <Menu.Item className={styles.menuItem}>
-              {selectedFile
-                ? selectedFile.name
-                : t('common.uploadTrelloFile', {
-                    context: 'title',
-                  })}
-            </Menu.Item>
-          </FilePicker>
-          <Divider />
+          <Menu secondary vertical className={styles.menu}>
+            <FilePicker onSelect={handleFileSelect} accept=".json">
+              <Menu.Item className={styles.menuItem}>
+                {selectedFile
+                  ? selectedFile.name
+                  : t('common.uploadTrelloFile', {
+                      context: 'title',
+                    })}
+              </Menu.Item>
+            </FilePicker>
+          </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>',