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>
ipfs · Apr 24, 2019 · 00c0bb3 · 00c0bb3
1 parent 50b5535
commit 00c0bb3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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