fix: file import buttons size

ipfs · Jun 23, 2020 · 273c619 · 273c619
1 parent 20be963
commit 273c619
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/src/files/file-import-status/FileImportStatus.css b/src/files/file-import-status/FileImportStatus.css
@@ -17,15 +17,11 @@
 
 .fileImportStatusArrow {
     margin-left: auto;
-    width: 1rem;
-}
-
-.fileImportStatusIcons {
-    width: 100%;
+    width: 1.5rem;
 }
 
 .fileImportStatusCancel {
-    height: 3rem;
+    width: 2.9rem;
     margin-left: 0.5rem;
     margin-right: -1.2rem;
 }

diff --git a/src/files/file-import-status/FileImportStatus.js b/src/files/file-import-status/FileImportStatus.js
@@ -73,17 +73,21 @@ const FileImportStatus = ({ filesFinished, filesPending, filesErrors, doFilesCle
   return (
     <div className='fileImportStatus fixed bottom-1 w-100 flex justify-center' style={{ zIndex: 14, pointerEvents: 'none' }}>
       <div className="br1 dark-gray w-40 center ba b--light-gray bg-white" style={{ pointerEvents: 'auto' }}>
-        <div className="fileImportStatusButton pv2 ph3 relative flex items-center no-select pointer charcoal w-100" style={{ background: '#F0F6FA' }}>
-          { filesPending.length
-            ? t('filesImportStatus.importing', { count: filesPending.length })
-            : t('filesImportStatus.imported', { count: numberOfImportedFiles })
-          }
-          <button className='fileImportStatusArrow' onClick={() => setExpanded(!expanded)} aria-expanded={expanded} aria-label={ t('filesImportStatus.toggleDropdown') }>
-            <GlyphSmallArrows className='fileImportStatusIcons' fill="currentColor" opacity="0.7" aria-hidden="true"/>
-          </button>
-          <button className='fileImportStatusCancel' onClick={ handleImportStatusClose } aria-label={ t('filesImportStatus.closeDropdown') }>
-            <GlyphSmallCancel className='fileImportStatusIcons' fill="currentColor" opacity="0.7"/>
-          </button>
+        <div className="fileImportStatusButton pv2 ph3 relative flex items-center no-select pointer charcoal w-100 justify-between" style={{ background: '#F0F6FA' }}>
+          <span>
+            { filesPending.length
+              ? t('filesImportStatus.importing', { count: filesPending.length })
+              : t('filesImportStatus.imported', { count: numberOfImportedFiles })
+            }
+          </span>
+          <div class="flex items-center">
+            <button className='fileImportStatusArrow' onClick={() => setExpanded(!expanded)} aria-expanded={expanded} aria-label={ t('filesImportStatus.toggleDropdown') }>
+              <GlyphSmallArrows className='w-100' fill="currentColor" opacity="0.7" aria-hidden="true"/>
+            </button>
+            <button className='fileImportStatusCancel' onClick={ handleImportStatusClose } aria-label={ t('filesImportStatus.closeDropdown') }>
+              <GlyphSmallCancel className='w-100' fill="currentColor" opacity="0.7"/>
+            </button>
+          </div>
         </div>
         <ul className='fileImportStatusRow pa0 ma0' aria-hidden={!expanded}>
           { filesPending.map(file => File(file.data, t)) }