From 00c0bb3c4771d1548183ec0516af7e60e375da0f Mon Sep 17 00:00:00 2001
From: Oli Evans <oli@tableflip.io>
Date: Wed, 24 Apr 2019 11:40:34 +0100
Subject: [PATCH 1/2] fix: improve color contrast on buttons

make the add buttons bg-navy and highligh the plus symbol in aquaish

WIP on #1004

License: MIT
Signed-off-by: Oli Evans <oli@tableflip.io>
---
 src/files/FilesPage.js                   | 53 +++++++++++++-----------
 src/files/file-input/FileInput.js        |  9 +---
 src/peers/AddConnection/AddConnection.js |  4 +-
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index b5968d57d..643784f92 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -231,31 +231,34 @@ class FilesPage extends React.Component {
               <Breadcrumbs path={files.path} onClick={doFilesNavigateTo} />
 
               { files.type === 'directory'
-                ? <div className='ml-auto flex items-center'>
-                  <Button
-                    className='mr3 f6 pointer'
-                    color='charcoal-muted'
-                    bg='bg-transparent'
-                    onClick={() => this.showNewFolderModal()}>
-                    <FolderIcon viewBox='10 15 80 80' height='20px' className='fill-charcoal-muted w2 v-mid' />
-                    <span className='fw3'>{t('newFolder')}</span>
-                  </Button>
-                  <FileInput
-                    onAddFiles={this.add}
-                    onAddByPath={this.addByPath}
-                    addProgress={writeFilesProgress} />
-                </div>
-                : <div className='ml-auto' style={{ width: '1.5rem' }}> {/* to render correctly in Firefox */}
-                  <ContextMenu
-                    handleClick={this.handleContextMenuClick}
-                    isOpen={this.state.isContextMenuOpen}
-                    onShare={() => this.showShareModal(files.extra)}
-                    onDelete={() => this.showDeleteModal(files.extra)}
-                    onRename={() => this.showRenameModal(files.extra)}
-                    onInspect={() => this.inspect(files.extra)}
-                    onDownload={() => this.download(files.extra)}
-                    hash={files.stats.hash} />
-                </div> }
+                ? (
+                  <div className='ml-auto flex items-center'>
+                    <Button
+                      className='mr3 f6 pointer'
+                      color='charcoal-muted'
+                      bg='bg-transparent'
+                      onClick={() => this.showNewFolderModal()}>
+                      <FolderIcon viewBox='10 15 80 80' height='20px' className='fill-charcoal-muted w2 v-mid' />
+                      <span className='fw3'>{t('newFolder')}</span>
+                    </Button>
+                    <FileInput
+                      onAddFiles={this.add}
+                      onAddByPath={this.addByPath}
+                      addProgress={writeFilesProgress} />
+                  </div>
+                ) : (
+                  <div className='ml-auto' style={{ width: '1.5rem' }}> {/* to render correctly in Firefox */}
+                    <ContextMenu
+                      handleClick={this.handleContextMenuClick}
+                      isOpen={this.state.isContextMenuOpen}
+                      onShare={() => this.showShareModal(files.extra)}
+                      onDelete={() => this.showDeleteModal(files.extra)}
+                      onRename={() => this.showRenameModal(files.extra)}
+                      onInspect={() => this.inspect(files.extra)}
+                      onDownload={() => this.download(files.extra)}
+                      hash={files.stats.hash} />
+                  </div>
+                )}
             </div>
 
             { isRoot && isCompanion && <CompanionInfo /> }
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index dd63e2811..77ffaf44d 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -14,17 +14,12 @@ import ByPathModal from './ByPathModal'
 
 const AddButton = translate('files')(({ progress = null, t, tReady, i18n, lng, ...props }) => {
   const sending = progress !== null
-  const cls = classnames({
-    'bg-grey light-grey': sending,
-    'pointer bg-green white': !sending
-  }, ['f6 relative'])
 
   return (
-    <Button disabled={sending} className={cls} minWidth='120px' {...props}>
+    <Button bg='bg-navy' color='white' disabled={sending} className='f6 relative' minWidth='100px' {...props}>
       <div className='absolute top-0 left-0 1 pa2 w-100 z-2'>
-        { sending ? `${progress.toFixed(0)}%` : `+ ${t('addToIPFS')}` }
+        { sending ? `${progress.toFixed(0)}%` : (<span><span style={{ color: '#8CDDE6' }}>+</span> {t('addToIPFS')}</span>) }
       </div>&nbsp;
-
       { sending &&
         <div className='transition-all absolute top-0 br1 left-0 h-100 z-1' style={{ width: `${progress}%`, background: 'rgba(0,0,0,0.1)' }} /> }
     </Button>
diff --git a/src/peers/AddConnection/AddConnection.js b/src/peers/AddConnection/AddConnection.js
index 14cebc0f9..feac827ee 100644
--- a/src/peers/AddConnection/AddConnection.js
+++ b/src/peers/AddConnection/AddConnection.js
@@ -43,7 +43,9 @@ class AddConnection extends React.Component {
 
     return (
       <div>
-        <Button onClick={this.toggleModal} minWidth='160px' className='pointer bg-green white f6'>+ {t('addConnection')}</Button>
+        <Button onClick={this.toggleModal} className='f6 ph3' bg='bg-navy' color='white'>
+          <span style={{ color: '#8CDDE6' }}>+</span> {t('addConnection')}
+        </Button>
 
         <Overlay show={open} onLeave={this.toggleModal}>
           <TextInputModal

From 1a5ffe081a5913424fa8216e2241d4ab5c71c9e6 Mon Sep 17 00:00:00 2001
From: Oli Evans <oli@tableflip.io>
Date: Wed, 24 Apr 2019 11:44:53 +0100
Subject: [PATCH 2/2] chore: fix lint error

License: MIT
Signed-off-by: Oli Evans <oli@tableflip.io>
---
 src/files/file-input/FileInput.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 77ffaf44d..6792abc17 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
 import { translate } from 'react-i18next'
 // Icons
 import DocumentIcon from '../../icons/StrokeDocument'