ipfs-shipyard · fsdiogo · Nov 29, 2018 · Nov 27, 2018 · Nov 28, 2018 · Nov 28, 2018
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -5,23 +5,35 @@
     "download": "Download Files"
   },
   "header": "Share by IPFS",
-  "footer": "Protocol Labs | Except as noted, content licensed CC-BY 3.0",
+  "footer": "© Protocol Labs | Except as <1>noted</1>, content licensed <3>CC-BY 3.0</3>",
   "info": {
-    "title": "InterPlanetary File System",
-    "description": "A peer-to-peer hypermedia protocol to make the web faster, safer, and more open.",
-    "labelAdding": "Adding files",
-    "copyAdding": "Each file is hashed based on its content, which means there are no duplications across the network.",
-    "labelNodes": "IPFS Nodes",
-    "copyNodes": "Each node stores only content it is interested in, and some information that helps figuring out who is storing what.",
-    "labelGetting": "Getting Files",
-    "copyGetting": "When looking up files, you're asking the network to find nodes storing the content behind a unique hash."
+    "add": {
+      "title": "Share files directly from your device",
+      "labelAdd": "Add your files",
+      "copyAdd": "Anyone you give the link to will be able to get the files. Don't add sensitive or copyrighted files.",
+      "labelSend": "Send the share link",
+      "copySend": "IPFS gives the files a unique fingerprint called a CID that is used to find them again on the network.",
+      "labelKeepPage": "Keep this page open",
+      "labelKeepDaemon": "Keep your IPFS daemon running",
+      "copyKeep": "You are sharing the content from your device. Your friends can help you co-host the content by also keeping the share link open in their browser."
+    },
+    "download": {
+      "title": "Get files directly from other devices",
+      "labelGet": "Get the files",
+      "copyGet": "You can download individual files or, if you want to keep the files structure, click on the download all button.",
+      "labelKeepPage": "Keep this page open",
+      "labelKeepDaemon": "Keep your IPFS daemon running",
+      "copyKeep": "Your can help co-host the content by also keeping this page open in the browser. This way you are sharing the content from your device.",
+      "labelSend": "Send the share link",
+      "copySend": "IPFS gives the files a unique fingerprint called a CID that is used to find them again on the network."
+    }
   },
   "box": {
     "missingDaemon": "Is your IPFS daemon running?",
     "runningDaemon": "You need a <1>running daemon</1> to add files to IPFS.",
     "configureDaemon": "Make sure you <1>configure your IPFS API</1> to allow cross-origin (CORS) requests:",
     "runDaemon": "Then, start an IPFS daemon in your terminal:",
-    "footNote": "If no other nodes pin your files and you stop serving them, they will disappear from the network.",
+    "footNote": "If you add more files after getting a share link, it will be updated. Don't forget to copy the latest to get the full files list.",
     "largeFilesWarning": "If you experience issues when downloading files larger than 1GB, please install <1>IPFS Desktop</1> or <3>IPFS Companion</3> for improved performance.",
     "viewOnGateway": "View on IPFS gateway"
   },

diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json
@@ -5,23 +5,35 @@
     "download": "Descarregar Ficheiros"
   },
   "header": "Partilhar por IPFS",
-  "footer": "Protocol Labs | Exceto onde anotado, conteúdo licenciado CC-BY 3.0",
+  "footer": "© Protocol Labs | Exceto onde <1>anotado</1>, conteúdo licenciado por <3>CC-BY 3.0</3>",
   "info": {
-    "title": "InterPlanetary File System",
-    "description": "Um protocolo peer-to-peer de hypermedia para tornar a web mais rápida, segura, e mais aberta.",
-    "labelAdding": "Adicionar ficheiros",
-    "copyAdding": "O conteúdo de cada ficheiro é passado por uma função unidirecional (hash), o que significa que não há duplicados na rede.",
-    "labelNodes": "Nós de IPFS",
-    "copyNodes": "Cada nó só guarda conteúdo que lhe interessa, e alguma informação que ajuda a perceber quem guarda o quê.",
-    "labelGetting": "Obter Ficheiros",
-    "copyGetting": "Ao procurar ficheiros, estás a pedir à rede que encontre nós que tenham o conteúdo atrás de uma hash única."
+    "add": {
+      "title": "Partilha ficheiros directamente do teu dispositivo",
+      "labelAdd": "Adiciona os teus ficheiros",
+      "copyAdd": "Qualquer pessoa com quem partilhes o link poderá adecer aos ficheiros. Não partilhes conteúdo sensível nem ficheiros com direitos de autor.",
+      "labelSend": "Envia o link de partilha",
+      "copySend": "O IPFS dá aos ficheiros uma impressão digital única chamada CID que é usada para os encontrar novamente na rede.",
+      "labelKeepPage": "Mantém esta página aberta",
+      "labelKeepDaemon": "Mantém o teu daemon IPFS a correr",
+      "copyKeep": "Estás a partilhar conteúdo a partir do teu dispositivo. Os teus amigos podem ajudar a partilhar o conteúdo ao manter o link de partilha aberto no seu browser."
+    },
+    "download": {
+      "title": "Recebe ficheiros directamente de outros dispositivos",
+      "labelGet": "Recebe os ficheiros",
+      "copyGet": "Podes descarregar ficheiros individualmente ou, se quiseres manter a estrutura dos mesmos, clica no botão de descarregar todos.",
+      "labelKeepPage": "Mantém esta página aberta",
+      "labelKeepDaemon": "Mantém o teu daemon IPFS a correr",
+      "copyKeep": "Your can help co-host the content by also keeping this page open in the browser. This way you are sharing the content from your device.",
+      "labelSend": "Envia o link de partilha",
+      "copySend": "O IPFS dá aos ficheiros uma impressão digital única chamada CID que é usada para os encontrar novamente na rede."
+    }
   },
   "box": {
     "missingDaemon": "O teu IPFS daemon está correr?",
     "runningDaemon": "Precisas de um <1>daemon a correr</1> para adicionares ficheiros ao IPFS.",
     "configureDaemon": "Certifica-te que <1>configuras a tua IPFS API</1> para aceitar pedidos cross-origin (CORS):",
     "runDaemon": "Depois, corre um IPFS daemon no terminal:",
-    "footNote": "Se outros nós não servirem os ficheiros e tu parares de os servir, eles vão desaparecer da rede.",
+    "footNote": "Se adicionares mais ficheiros depois de teres o link, ele será atualizado. Não te esqueças de copiar o mais recente para incluir a lista completa de ficheiros.",
     "largeFilesWarning": "Se tiveres problemas a descarregar ficheiros maiores que 1GB, instala o <1>IPFS Desktop</1> ou <3>IPFS Companion</3> para uma melhor experiência.",
     "viewOnGateway": "Ver no IPFS gateway"
   },

diff --git a/src/components/footer/Footer.js b/src/components/footer/Footer.js
@@ -1,14 +1,25 @@
 import React from 'react'
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
 import plLogoText from '../../media/logos/protocol-labs-text.svg'
 
-const Footer = ({ t }) => (
-  <div className='flex items-center justify-between pa4' style={{height: '100px'}}>
-    <div className='f7 white'>&copy; {t('footer')}</div>
-    <a href='https://protocol.ai' target='_blank' rel='noopener noreferrer'>
-      <img src={plLogoText} height='50px' alt='Protocol Labs' />
-    </a>
-  </div>
-)
+const Footer = () => {
+  const anchorClass = 'link aqua'
+  const anchorStyle = { outline: 'none' }
+
+  return (
+    <div className='flex items-center justify-between pa4' style={{height: '100px'}}>
+      <div className='f7 white'>
+        <Trans i18nKey='footer'>
+          © Protocol Labs | Except as
+          <a className={anchorClass} style={anchorStyle} href='https://protocol.ai/legal/' target='_blank' rel='noopener noreferrer'>noted</a>, content licensed
+          <a className={anchorClass} style={anchorStyle} href='https://creativecommons.org/licenses/by/3.0/' target='_blank' rel='noopener noreferrer'>CC-BY 3.0</a>
+        </Trans>
+      </div>
+      <a href='https://protocol.ai' target='_blank' rel='noopener noreferrer'>
+        <img src={plLogoText} height='50px' alt='Protocol Labs' />
+      </a>
+    </div>
+  )
+}
 
 export default translate()(Footer)
diff --git a/src/components/info/Info.js b/src/components/info/Info.js
@@ -1,40 +1,122 @@
 import React from 'react'
+import { connect } from 'redux-bundler-react'
 import { translate } from 'react-i18next'
 
 // Static
-import addImg from '../../media/images/add.svg'
+import DownloadIcon from '../../media/icons/StrokeDownload'
+import ShareIcon from '../../media/icons/StrokeShare'
+import CubeIcon from '../../media/icons/StrokeCube'
 
-const Info = ({ t, imgHeigth = 110 }) => {
-  const labelClass = 'mv3 white montserrat'
-  const copyClass = 'f6 gray lh-copy'
-  const copyStyle = { flexBasis: '100%' }
+const Info = ({ t, imgHeight = 70, isDownload, ipfsProvider }) => {
+  const iconContainerClass = 'mr3 fill-aqua'
+  const labelClass = 'mb3 white montserrat'
+  const numberClass = 'mr2 aqua'
+  const descriptionClass = 'f6 gray lh-copy'
 
+  const isUsingDaemon = ipfsProvider === 'window.ipfs' || ipfsProvider === 'js-ipfs-api'
+
+  // Info for the Download page
+  if (isDownload) {
+    return (
+      <div className='pa4 pr5-l w-100 w-two-thirds-l mw7-l self-start order-1-l'>
+        <div className='mb5 f2 white montserrat'>{t('info.download.title')}</div>
+
+        <div className='flex flex-column'>
+          <div className='pa3 flex'>
+            <div className={iconContainerClass}>
+              <DownloadIcon height={imgHeight} style={{ marginTop: '-11px' }} alt='Download' />
+            </div>
+            <div>
+              <div className={labelClass}>
+                <span className={numberClass}>1.</span>
+                {t('info.download.labelGet')}
+              </div>
+              <div className={descriptionClass}>{t('info.download.copyGet')}</div>
+            </div>
+          </div>
+
+          <div className='pa3 flex'>
+            <div className={iconContainerClass}>
+              <CubeIcon height={imgHeight} style={{ marginTop: '-3px' }} alt='Cube' />
+            </div>
+            <div>
+              <div className={labelClass}>
+                <span className={numberClass}>2.</span>
+                { isUsingDaemon ? t('info.download.labelKeepDaemon') : t('info.download.labelKeepPage') }
+              </div>
+              <div className={descriptionClass}>{t('info.download.copyKeep')}</div>
+            </div>
+          </div>
+
+          <div className='pa3 mv2 flex'>
+            <div className={iconContainerClass}>
+              <ShareIcon height={imgHeight} style={{ marginTop: '-13px' }} alt='Share' />
+            </div>
+            <div>
+              <div className={labelClass}>
+                <span className={numberClass}>3.</span>
+                {t('info.download.labelSend')}
+              </div>
+              <div className={descriptionClass}>{t('info.download.copySend')}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Info for the Add page
   return (
     <div className='pa4 pr5-l w-100 w-two-thirds-l mw7-l self-start order-1-l'>
-      <div className='mb3 f2 white montserrat'>{t('info.title')}</div>
-      <div className='mb5 f5 gray lh-copy'>{t('info.description')}</div>
-
-      <div className='flex'>
-        <div className='pa3 tc' style={copyStyle}>
-          <img src={addImg} height={imgHeigth} alt='Add' />
-          <div className={labelClass}>{t('info.labelAdding')}</div>
-          <div className={copyClass}>{t('info.copyAdding')}</div>
+      <div className='mb5 f2 white montserrat'>{t('info.add.title')}</div>
+
+      <div className='flex flex-column'>
+        <div className='pa3 flex'>
+          <div className={iconContainerClass}>
+            <DownloadIcon height={imgHeight} style={{ marginTop: '-11px' }} alt='Download' />
+          </div>
+          <div>
+            <div className={labelClass}>
+              <span className={numberClass}>1.</span>
+              {t('info.add.labelAdd')}
+            </div>
+            <div className={descriptionClass}>{t('info.add.copyAdd')}</div>
+          </div>
         </div>
 
-        <div className='pa3 tc' style={copyStyle}>
-          <img src={addImg} height={imgHeigth} alt='Add' />
-          <div className={labelClass}>{t('info.labelNodes')}</div>
-          <div className={copyClass}>{t('info.copyNodes')}</div>
+        <div className='pa3 mv2 flex'>
+          <div className={iconContainerClass}>
+            <ShareIcon height={imgHeight} style={{ marginTop: '-13px' }} alt='Share' />
+          </div>
+          <div>
+            <div className={labelClass}>
+              <span className={numberClass}>2.</span>
+              {t('info.add.labelSend')}
+            </div>
+            <div className={descriptionClass}>{t('info.add.copySend')}</div>
+          </div>
         </div>
 
-        <div className='pa3 tc' style={copyStyle}>
-          <img src={addImg} height={imgHeigth} alt='Add' />
-          <div className={labelClass}>{t('info.labelGetting')}</div>
-          <div className={copyClass}>{t('info.copyGetting')}</div>
+        <div className='pa3 flex'>
+          <div className={iconContainerClass}>
+            <CubeIcon height={imgHeight} style={{ marginTop: '-3px' }} alt='Cube' />
+          </div>
+          <div>
+            <div className={labelClass}>
+              <span className={numberClass}>3.</span>
+              {isUsingDaemon ? t('info.add.labelKeepDaemon') : t('info.add.labelKeepPage')}
+            </div>
+            <div className={descriptionClass}>{t('info.add.copyKeep')}</div>
+          </div>
         </div>
       </div>
     </div>
   )
 }
 
-export default translate()(Info)
+export const TranslatedInfo = translate()(Info)
+
+export default connect(
+  'selectIpfsProvider',
+  TranslatedInfo
+)
diff --git a/src/components/info/Info.stories.js b/src/components/info/Info.stories.js
@@ -2,13 +2,18 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { checkA11y } from '@storybook/addon-a11y'
 import i18n from '../../i18n-decorator'
-import Info from './Info'
+import { TranslatedInfo as Info } from './Info'
 
 storiesOf('Info', module)
   .addDecorator(checkA11y)
   .addDecorator(i18n)
-  .add('Default', () => (
+  .add('Add', () => (
     <div className='bg-navy sans-serif'>
       <Info />
     </div>
   ))
+  .add('Download', () => (
+    <div className='bg-navy sans-serif'>
+      <Info isDownload />
+    </div>
+  ))
diff --git a/src/page/Page.js b/src/page/Page.js
@@ -48,13 +48,17 @@ class Page extends React.Component {
     const { currentPage, ipfsInitFailed, shareLink, files, hasExceededMaxSize, isLoading, t } = this.props
     const isDownload = currentPage === PAGES.download
     let content
+    let info
 
     if (isDownload) {
       content = <BoxDownload files={files} showSizeWarning={hasExceededMaxSize} shareLink={shareLink} isLoading={isLoading} />
+      info = <Info isDownload />
     } else if (ipfsInitFailed) {
       content = <BoxNotAvailable />
+      info = isDownload ? <Info isDownload /> : <Info />
     } else {
       content = <BoxAdd files={files} shareLink={shareLink} isLoading={isLoading} />
+      info = <Info />
     }
 
     return (
@@ -65,7 +69,7 @@ class Page extends React.Component {
 
         <div className='flex flex-column flex-row-l justify-center items-center'>
           { content }
-          <Info />
+          { info }
         </div>
       </div>
     )