From 7596f5348cff08541e763384af399917fe0b5b0f Mon Sep 17 00:00:00 2001
From: Christoph Enne <christoph@enne.email>
Date: Sat, 10 Dec 2022 13:44:04 +0100
Subject: [PATCH] #27 update file picker appearance

---
 client/src/components/Boards/AddPopup.jsx     | 24 +++++++++----------
 .../components/Boards/AddPopup.module.scss    |  5 ++++
 client/src/locales/en/core.js                 |  2 +-
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Boards/AddPopup.jsx b/client/src/components/Boards/AddPopup.jsx
index 7ac4b9db..5556eb23 100755
--- a/client/src/components/Boards/AddPopup.jsx
+++ b/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')}
diff --git a/client/src/components/Boards/AddPopup.module.scss b/client/src/components/Boards/AddPopup.module.scss
index b2a6bb3a..30ef6b6f 100644
--- a/client/src/components/Boards/AddPopup.module.scss
+++ b/client/src/components/Boards/AddPopup.module.scss
@@ -2,4 +2,9 @@
   .field {
     margin-bottom: 8px;
   }
+
+  .menu {
+    margin: 0px 0px 4px;
+    width: 100%;
+  }
 }
diff --git a/client/src/locales/en/core.js b/client/src/locales/en/core.js
index b74adcf8..62b8b176 100644
--- a/client/src/locales/en/core.js
+++ b/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>',