Feat/pinning settings modal (#1539)

Author: rafaelramalho19

public/locales/en/settings.json

@@ -16,10 +16,15 @@
     "translationProjectIntro": "Add or improve translations and make IPFS better for everyone!",
     "translationProjectLink": "Join the IPFS Translation Project"
   },
+  "pinningModal": {
+    "title": "Select a pinning service provider.",
+    "description": "Don’t see your pinning service provider? <1>Add a custom one.<1>"
+  },
   "actions": {
     "addService": "Add Service",
     "edit": "Change",
-    "close": "Close"
+    "close": "Close",
+    "cancel": "Cancel"
   },
   "edit": "Edit",
   "visitService": "Visit service",

src/bundles/pinning.js

@@ -27,5 +27,18 @@ export default {
       autoUpload: 'PINS_ONLY',
       addedAt: new Date(1592491648691)
     }
+  ]),
+
+  selectAvailablePinningServices: () => ([
+    {
+      name: 'Pinata',
+      icon: 'https://ipfs.io/ipfs/QmVYXV4urQNDzZpddW4zZ9PGvcAbF38BnKWSgch3aNeViW?filename=pinata.svg'
+    }, {
+      name: 'Infura',
+      icon: 'https://ipfs.io/ipfs/QmTt6KeaNXyaaUBWn2zEG8RiMfPPPeMesXqnFWqqC5o6yc?filename=infura.png'
+    }, {
+      name: 'Eternum',
+      icon: 'https://ipfs.io/ipfs/QmSrqJeuYrYDmSgAy3SeAyTsYMksNPfK5CSN91xk6BBnF9?filename=eternum.png'
+    }
   ])
 }

src/components/language-selector/language-modal/LanguageModal.js

@@ -16,7 +16,7 @@ const LanguageModal = ({ t, tReady, onLeave, link, className, ...props }) => {
 
   return (
     <Modal {...props} className={className} onCancel={onLeave} style={{ maxWidth: '40em' }}>
-      <ModalBody icon={SpeakerIcon}>
+      <ModalBody Icon={SpeakerIcon}>
         <p className='charcoal w-80 center'>{t('languageModal.description')}</p>
         <div className='pa2 flex flex-wrap'>
           { localesList.map((lang) =>
@@ -34,7 +34,7 @@ const LanguageModal = ({ t, tReady, onLeave, link, className, ...props }) => {
         </p>
       </ModalBody>
 
-      <ModalActions>
+      <ModalActions justify="center">
         <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('actions.close')}</Button>
       </ModalActions>
     </Modal>

src/components/modal/Modal.js

@@ -18,26 +18,22 @@ ModalActions.defaultProps = {
   className: ''
 }
 
-export const ModalBody = ({ className, icon, title, children, ...props }) => {
-  icon = React.createElement(icon, {
-    className: 'fill-gray w3'
-  })
-
-  return (
-    <div className={`ph2 pv3 tc ${className}`} {...props}>
+export const ModalBody = ({ className, Icon, title, children, ...props }) => (
+  <div className={`ph2 pv3 tc ${className}`} {...props}>
+    { Icon && (
       <div className='center bg-snow br-100 flex justify-center items-center' style={{ width: '80px', height: '80px' }}>
-        {icon}
+        {<Icon className='fill-gray w3'/>}
       </div>
+    )}
 
-      <p className='charcoal-muted fw5'>{title}</p>
+    <p className='charcoal-muted fw5'>{title}</p>
 
-      {children}
-    </div>
-  )
-}
+    {children}
+  </div>
+)
 
 ModalBody.propTypes = {
-  icon: PropTypes.func.isRequired,
+  Icon: PropTypes.func,
   title: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node

src/components/pinning-manager/PinningManager.js

@@ -104,15 +104,15 @@ const ServiceCell = ({ rowData }) => {
 }
 
 const SizeCell = ({ rowData }) => (
-  <p className={ !rowData.totalSize && 'gray'}>{ !rowData.totalSize ? 'N/A' : filesize(rowData.totalSize || 0, {
+  <p className={ !rowData.totalSize ? 'gray' : ''}>{ !rowData.totalSize ? 'N/A' : filesize(rowData.totalSize || 0, {
     round: rowData.totalSize >= 1000000000 ? 1 : 0, spacer: ''
   })}</p>
 )
-const BandwidthCell = ({ rowData }) => (<div className={!rowData.bandwidthUsed && 'gray'}>{rowData.bandwidthUsed || 'N/A'}</div>)
-const AutoUploadCell = ({ autoUpload, type, t }) => (
+const BandwidthCell = ({ rowData }) => (<div className={!rowData.bandwidthUsed ? 'gray' : ''}>{rowData.bandwidthUsed || 'N/A'}</div>)
+const AutoUploadCell = ({ autoUpload, t }) => (
   <div className="flex justify-between items-center">
-    <div className={!autoUpload && 'gray'}>{ autoUpload ? t('autoUploadKeys.' + autoUpload) : 'N/A' }</div>
-    { type !== 'LOCAL' && (<OptionsCell t={t}/>) }
+    <div className={!autoUpload ? 'gray' : ''}>{ autoUpload ? t('autoUploadKeys.' + autoUpload) : 'N/A' }</div>
+    <OptionsCell t={t}/>
   </div>
 )
 

src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.css

@@ -0,0 +1,11 @@
+.pinningManagerModalContainer {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    grid-template-rows: repeat(2, auto);
+    justify-content: center;
+}
+
+.pinningManagerModalItem {
+    padding-right: 64px;
+    margin-right: 20px;
+}

src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js

@@ -1,54 +1,50 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import i18n, { localesList } from '../../../i18n'
-import { getLanguage } from '../../../lib/i18n'
+import { connect } from 'redux-bundler-react'
+import { withTranslation, Trans } from 'react-i18next'
+import './PinningManagerModal.css'
 
 // Components
 import { Modal, ModalBody, ModalActions } from '../../modal/Modal'
-import SpeakerIcon from '../../../icons/StrokeSpeaker'
 import Button from '../../button/Button'
 
-const LanguageModal = ({ t, tReady, onLeave, link, className, ...props }) => {
-  const handleClick = (lang) => {
-    i18n.changeLanguage(lang)
-    onLeave()
-  }
-
+const PinningManagerModal = ({ t, onLeave, className, availablePinningServices, ...props }) => {
   return (
-    <Modal {...props} className={className} onCancel={onLeave} style={{ maxWidth: '40em' }}>
-      <ModalBody icon={SpeakerIcon}>
-        <p className='charcoal w-80 center'>{t('languageModal.description')}</p>
-        <div className='pa2 flex flex-wrap'>
-          { localesList.map((lang) =>
-            <button
-              key={`lang-${lang}`}
-              className='pa2 w-33 flex nowrap bg-transparent bn outline-0 blue justify-center'
-              onClick={() => handleClick(lang)}>
-              { getLanguage(lang) }
+    <Modal {...props} className={className} onCancel={onLeave} style={{ maxWidth: '34em' }}>
+      <ModalBody>
+        <p>{ t('pinningModal.title') }</p>
+        <div className='pa2 pinningManagerModalContainer'>
+          { availablePinningServices.map(({ icon, name }) => (
+            <button className="flex items-center pinningManagerModalItem pa1 hoverable-button">
+              <img className="mr3" src={icon} alt={name} width={42} height={42} style={{ objectFit: 'contain' }} />
+              <p>{ name }</p>
             </button>
-          )}
+          ))}
         </div>
-        <p className='lh-copy charcoal f6'>
-          {t('languageModal.translationProjectIntro')}<br/>
-          <a href="https://www.transifex.com/ipfs/public/" rel="noopener noreferrer" target="_blank" className="link blue">{t('languageModal.translationProjectLink')}</a>
+        <p>
+          <Trans i18nKey="pinningModal.description" t={t}>
+          Don’t see your pinning service provider? <a href={/* TODO: add action for custom add */ '/'}>Add a custom one.</a>
+          </Trans>
         </p>
       </ModalBody>
 
-      <ModalActions>
-        <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('actions.close')}</Button>
+      <ModalActions justify="center">
+        <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('actions.cancel')}</Button>
       </ModalActions>
     </Modal>
   )
 }
 
-LanguageModal.propTypes = {
-  onLeave: PropTypes.func.isRequired,
+PinningManagerModal.propTypes = {
   t: PropTypes.func.isRequired,
-  tReady: PropTypes.bool
+  onLeave: PropTypes.func.isRequired
 }
 
-LanguageModal.defaultProps = {
+PinningManagerModal.defaultProps = {
   className: ''
 }
 
-export default LanguageModal
+export default connect(
+  'selectAvailablePinningServices',
+  withTranslation('settings')(PinningManagerModal)
+)

src/reset.css

@@ -24,3 +24,7 @@ button.button-inside-focus:focus {
 button.button-inside-focus:focus > *:first-child {
     outline: 1px solid #bbb;
 }
+
+button.hoverable-button:hover {
+    background: #E8E9ED
+}