Use upload icon for email import

withspectrum · Feb 11, 2019 · 0eb9d07 · 0eb9d07
1 parent fe6162e
commit 0eb9d07
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 7 deletions.
diff --git a/src/components/emailInvitationForm/index.js b/src/components/emailInvitationForm/index.js
@@ -11,13 +11,15 @@ import { Button } from '../buttons';
 import { Error } from '../formElements';
 import { SectionCardFooter } from 'src/components/settingsViews/style';
 import { withCurrentUser } from 'src/components/withCurrentUser';
+import MediaInput from 'src/components/mediaInput';
 import {
   EmailInviteForm,
   EmailInviteInput,
   AddRow,
   RemoveRow,
   CustomMessageToggle,
   CustomMessageTextAreaStyles,
+  FileUploadWrapper,
 } from './style';
 
 type Props = {
@@ -369,7 +371,15 @@ class EmailInvitationForm extends React.Component<Props, State> {
         )}
 
         <SectionCardFooter>
-          <input type="file" accept=".json" onChange={this.handleFile} />
+          <FileUploadWrapper>
+            <MediaInput
+              multiple={false}
+              accept=".json"
+              glyph="upload"
+              tipText="Import emails from .json file"
+              onChange={this.handleFile}
+            />
+          </FileUploadWrapper>
           <Button
             loading={isLoading}
             onClick={this.sendInvitations}

diff --git a/src/components/emailInvitationForm/style.js b/src/components/emailInvitationForm/style.js
@@ -86,6 +86,10 @@ export const CustomMessageToggle = styled.h4`
   }
 `;
 
+export const FileUploadWrapper = styled.div`
+  margin-right: 16px;
+`;
+
 export const CustomMessageTextAreaStyles = {
   width: '100%',
   borderRadius: '8px',

diff --git a/src/components/mediaInput/index.js b/src/components/mediaInput/index.js
@@ -6,7 +6,9 @@ export default ({
   onChange,
   accept = '.png, .jpg, .jpeg, .gif, .mp4',
   multiple = false,
-  tipLocation,
+  tipLocation = 'top-right',
+  tipText = 'Upload photo',
+  glyph = 'photo',
 }) => (
   <MediaLabel>
     <MediaInput
@@ -15,10 +17,6 @@ export default ({
       multiple={multiple}
       onChange={onChange}
     />
-    <Icon
-      glyph="photo"
-      tipLocation={tipLocation ? tipLocation : 'top-right'}
-      tipText="Upload photo"
-    />
+    <Icon glyph={glyph} tipLocation={tipLocation} tipText={tipText} />
   </MediaLabel>
 );
diff --git a/upload.svg b/upload.svg
diff --git a/users-emails.json b/users-emails.json
@@ -0,0 +1 @@
+["hi@bryn.io", "hi@brianlovin.com", "hi@mxstbr.com"]
diff --git a/users-with-names.json b/users-with-names.json
@@ -0,0 +1,5 @@
+[
+  { "email": "arnold@schwarzenegger.at", "name": "Arnold" },
+  { "email": "elon@musk.com", "name": "Elon" },
+  { "email": "notanemail", "name": "Wrong" }
+]