chore: centered buttons

ipfs · Jun 9, 2020 · 707f81f · 707f81f
1 parent 5074350
commit 707f81f
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 40 deletions.
diff --git a/src/components/ask/AskToEnable.js b/src/components/ask/AskToEnable.js
@@ -13,8 +13,8 @@ const AskToEnable = ({ className, label, yesLabel, noLabel, onYes, onNo, details
         )}
       </span>
       <span className='dib'>
-        <Button className='ml3 mv1' bg={'bg-green'} onClick={onYes}>{yesLabel}</Button>
-        <Button className='ml3 mv1' color='charcoal' bg={'bg-snow-muted'} onClick={onNo}>{noLabel}</Button>
+        <Button className='ml3 mv1 tc' bg={'bg-green'} onClick={onYes}>{yesLabel}</Button>
+        <Button className='ml3 mv1 tc' color='charcoal' bg={'bg-snow-muted'} onClick={onNo}>{noLabel}</Button>
       </span>
     </div>
   )

diff --git a/src/components/language-selector/LanguageSelector.js b/src/components/language-selector/LanguageSelector.js
@@ -22,7 +22,7 @@ class LanguageSelector extends Component {
           <div className='ph4 flex items-center bg-white lh-copy charcoal f6 fw5' style={{ height: 40 }}>
             {getCurrentLanguage()}
           </div>
-          <Button minWidth={100} onClick={this.onLanguageEditOpen}>
+          <Button className="tc" minWidth={100} onClick={this.onLanguageEditOpen}>
             {t('actions.edit')}
           </Button>
         </div>

diff --git a/src/components/language-selector/language-modal/LanguageModal.js b/src/components/language-selector/language-modal/LanguageModal.js
@@ -22,7 +22,7 @@ const LanguageModal = ({ t, tReady, onLeave, link, className, ...props }) => {
           { localesList.map((lang) =>
             <button
               key={`lang-${lang}`}
-              className='pa2 w-33 flex nowrap bg-transparent bn outline-0 blue'
+              className='pa2 w-33 flex nowrap bg-transparent bn outline-0 blue justify-center'
               onClick={() => handleClick(lang)}>
               { getLanguage(lang) }
             </button>
@@ -35,7 +35,7 @@ const LanguageModal = ({ t, tReady, onLeave, link, className, ...props }) => {
       </ModalBody>
 
       <ModalActions>
-        <Button className='ma2' bg='bg-gray' onClick={onLeave}>{t('actions.close')}</Button>
+        <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('actions.close')}</Button>
       </ModalActions>
     </Modal>
   )

diff --git a/src/components/text-input-modal/TextInputModal.js b/src/components/text-input-modal/TextInputModal.js
@@ -114,8 +114,8 @@ class TextInputModal extends React.Component {
         </ModalBody>
 
         <ModalActions>
-          <Button className='ma2' bg='bg-gray' onClick={onCancel}>Cancel</Button>
-          <Button className='ma2' bg='bg-teal' disabled={this.isDisabled} onClick={this.onSubmit}>{submitText}</Button>
+          <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>Cancel</Button>
+          <Button className='ma2 tc' bg='bg-teal' disabled={this.isDisabled} onClick={this.onSubmit}>{submitText}</Button>
         </ModalActions>
       </Modal>
     )

diff --git a/src/files/context-menu/ContextMenu.js b/src/files/context-menu/ContextMenu.js
@@ -55,16 +55,22 @@ class ContextMenu extends React.Component {
           translateY={-translateY}
           open={this.props.isOpen}
           onDismiss={this.props.handleClick}>
-          { !isUpperDir && !isUnknown && isMfs && onDelete &&
-            <Option onClick={this.wrap('onDelete')}>
-              <StrokeTrash className='w2 mr2 fill-aqua' />
-              {t('actions.delete')}
+          { !isUpperDir && onShare &&
+            <Option onClick={this.wrap('onShare')}>
+              <StrokeShare className='w2 mr2 fill-aqua' />
+              {t('actions.share')}
             </Option>
           }
-          { !isUpperDir && !isUnknown && isMfs && onRename &&
-            <Option onClick={this.wrap('onRename')}>
-              <StrokePencil className='w2 mr2 fill-aqua' />
-              {t('actions.rename')}
+          <CopyToClipboard text={this.props.hash} onCopy={this.props.handleClick}>
+            <Option>
+              <StrokeCopy className='w2 mr2 fill-aqua' />
+              {t('actions.copyHash')}
+            </Option>
+          </CopyToClipboard>
+          { onInspect &&
+            <Option onClick={this.wrap('onInspect')}>
+              <StrokeIpld className='w2 mr2 fill-aqua' />
+              {t('actions.inspect')}
             </Option>
           }
           { !isUpperDir && !isUnknown && onDownload &&
@@ -73,26 +79,20 @@ class ContextMenu extends React.Component {
               {t('actions.download')}
             </Option>
           }
-          { onInspect &&
-            <Option onClick={this.wrap('onInspect')}>
-              <StrokeIpld className='w2 mr2 fill-aqua' />
-              {t('actions.inspect')}
-            </Option>
-          }
           <Option onClick={this.wrap(pinned ? 'onUnpin' : 'onPin')}>
             <StrokePin className='w2 mr2 fill-aqua' />
             { pinned ? t('actions.unpin') : t('actions.pin') }
           </Option>
-          <CopyToClipboard text={this.props.hash} onCopy={this.props.handleClick}>
-            <Option>
-              <StrokeCopy className='w2 mr2 fill-aqua' />
-              {t('actions.copyHash')}
+          { !isUpperDir && !isUnknown && isMfs && onRename &&
+            <Option onClick={this.wrap('onRename')}>
+              <StrokePencil className='w2 mr2 fill-aqua' />
+              {t('actions.rename')}
             </Option>
-          </CopyToClipboard>
-          { !isUpperDir && onShare &&
-            <Option onClick={this.wrap('onShare')}>
-              <StrokeShare className='w2 mr2 fill-aqua' />
-              {t('actions.share')}
+          }
+          { !isUpperDir && !isUnknown && isMfs && onDelete &&
+            <Option onClick={this.wrap('onDelete')}>
+              <StrokeTrash className='w2 mr2 fill-aqua' />
+              {t('actions.delete')}
             </Option>
           }
         </DropdownMenu>

diff --git a/src/files/explore-form/FilesExploreForm.js b/src/files/explore-form/FilesExploreForm.js
@@ -93,7 +93,7 @@ class FilesExploreForm extends React.Component {
             style={{ borderRadius: '0 3px 3px 0' }}
             onClick={this.onInspect}
             bg='bg-teal'
-            className='ExploreFormButton button-reset pv1 ph2 ba f7 fw4 white overflow-hidden' >
+            className='ExploreFormButton button-reset pv1 ph2 ba f7 fw4 white overflow-hidden tc' >
             <StrokeIpld style={{ height: 24 }} className='dib fill-current-color v-mid' />
             <span className='ml2'>{t('exploreForm.inspect')}</span>
           </Button>
@@ -103,7 +103,7 @@ class FilesExploreForm extends React.Component {
             style={{ borderRadius: '0' }}
             title={t('exploreForm.browse')}
             onClick={this.onBrowse}
-            className='ExploreFormButton button-reset pv1 ph2 ba f7 fw4 white bg-gray overflow-hidden' >
+            className='ExploreFormButton button-reset pv1 ph2 ba f7 fw4 white bg-gray overflow-hidden tc' >
             <StrokeFolder style={{ height: 24 }} className='dib fill-current-color v-mid' />
             <span className='ml2'>{t('exploreForm.browse')}</span>
           </Button>

diff --git a/src/files/header/Header.js b/src/files/header/Header.js
@@ -86,7 +86,7 @@ class Header extends React.Component {
                   <Button bg='bg-navy'
                     color='white'
                     fill='fill-aqua'
-                    className='f6 relative flex justify-center items-center'
+                    className='f6 relative flex justify-center items-center tc'
                     minWidth='100px'
                     disabled={!files || filesPathInfo.isRoot || files.type === 'unknown'}
                     onClick={this.handleContextMenu}>

diff --git a/src/files/modals/delete-modal/DeleteModal.js b/src/files/modals/delete-modal/DeleteModal.js
@@ -26,8 +26,8 @@ const DeleteModal = ({ t, tReady, onCancel, onDelete, folders, files, className,
       </ModalBody>
 
       <ModalActions>
-        <Button className='ma2' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
-        <Button className='ma2' bg='bg-red' onClick={onDelete}>{t('actions.delete')}</Button>
+        <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
+        <Button className='ma2 tc' bg='bg-red' onClick={onDelete}>{t('actions.delete')}</Button>
       </ModalActions>
     </Modal>
   )

diff --git a/src/files/modals/share-modal/ShareModal.js b/src/files/modals/share-modal/ShareModal.js
@@ -21,9 +21,9 @@ const ShareModal = ({ t, tReady, onLeave, link, className, ...props }) => (
     </ModalBody>
 
     <ModalActions>
-      <Button className='ma2' bg='bg-gray' onClick={onLeave}>{t('actions.close')}</Button>
+      <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('actions.close')}</Button>
       <CopyToClipboard text={link} onCopy={onLeave}>
-        <Button className='ma2'>{t('actions.copy')}</Button>
+        <Button className='ma2 tc'>{t('actions.copy')}</Button>
       </CopyToClipboard>
     </ModalActions>
   </Modal>

diff --git a/src/peers/AddConnection/AddConnection.js b/src/peers/AddConnection/AddConnection.js
@@ -43,7 +43,7 @@ class AddConnection extends React.Component {
 
     return (
       <div>
-        <Button onClick={this.toggleModal} className='f6 ph3' bg='bg-navy' color='white'>
+        <Button onClick={this.toggleModal} className='f6 ph3 tc' bg='bg-navy' color='white'>
           <span style={{ color: '#8CDDE6' }}>+</span> {t('addConnection')}
         </Button>
 

diff --git a/src/settings/SettingsPage.js b/src/settings/SettingsPage.js
@@ -68,6 +68,7 @@ export const SettingsPage = ({
               minWidth={100}
               height={40}
               bg='bg-charcoal'
+              className='tc'
               disabled={isSaving || (!hasLocalChanges && !hasExternalChanges)}
               onClick={onReset}>
               {t('reset')}
@@ -112,7 +113,7 @@ const SaveButton = ({ t, hasErrors, hasSaveFailed, hasSaveSucceded, isSaving, ha
     <Button
       minWidth={100}
       height={40}
-      className='mt2 mt0-l ml2-l'
+      className='mt2 mt0-l ml2-l tc'
       bg={bg}
       disabled={!hasLocalChanges || hasErrors}
       danger={hasSaveFailed || hasExternalChanges}

diff --git a/src/welcome/WelcomePage.js b/src/welcome/WelcomePage.js
@@ -135,7 +135,7 @@ class ApiAddressForm extends React.Component {
           onKeyPress={this.onKeyPress}
           value={this.state.value} />
         <div className='tr'>
-          <Button>{t('apiAddressForm.submitButton')}</Button>
+          <Button className="tc">{t('apiAddressForm.submitButton')}</Button>
         </div>
       </form>
     )