diff --git a/add-on/src/landing-pages/welcome/page.js b/add-on/src/landing-pages/welcome/page.js index c655ef9dd..0ea3ebade 100644 --- a/add-on/src/landing-pages/welcome/page.js +++ b/add-on/src/landing-pages/welcome/page.js @@ -8,15 +8,20 @@ const libp2pLogo = '../../../images/libp2p.svg' const multiformatsLogo = '../../../images/multiformats.svg' const ipldLogo = '../../../images/ipld.svg' +// Colors +const colorIpfsLogo = '#57cbd0' +const colorWhite = '#ffffff' + function createWelcomePage (i18n) { return function welcomePage (state, emit) { const isIpfsOnline = state.isIpfsOnline + const peerCount = state.peerCount return html`
${renderCompanionLogo()} - ${isIpfsOnline ? renderWelcome() : renderInstallSteps()} + ${isIpfsOnline ? renderWelcome(peerCount) : renderInstallSteps()}
@@ -37,28 +42,52 @@ const renderCompanionLogo = () => { const ipfsLogoWidth = 128 return html` -
+
IPFS Logo

IPFS Companion

` } -const renderWelcome = () => { +const renderWelcome = (peerCount) => { + const anchorClass = 'white link underline-under hover-aqua' + const copyClass = 'mv0 lh-copy f5' + const svgWidth = 80 + + const checkmarkSvg = () => html` + + + + + + + + + + + + + + ` + return html` -
-

You are ready to dive into distributed apps and sites built with IPFS!

- Learn More +
+
+ ${checkmarkSvg()} +

You are all set!

+
+

Right now your node is connected to ${peerCount} peers.

+

Discover what you can do with Companion and dive into the distributed web with IPFS!

` } const renderInstallSteps = () => { const copyClass = 'mv0 white f5 lh-copy' - const anchorClass = 'white link underline-under hover-yellow' + const anchorClass = 'white link underline-under hover-aqua' return html` -
+

Is your IPFS daemon running?

If you haven't installed IPFS please do so with these instructions.

Then make sure to have an IPFS daemon running in your terminal:

@@ -100,15 +129,15 @@ const renderVideos = () => { const videoHeight = 180 const overlayDiv = () => html` -
+
` const playSvg = () => html` - + - + diff --git a/add-on/src/landing-pages/welcome/store.js b/add-on/src/landing-pages/welcome/store.js index a485f5c75..d33bdfb46 100644 --- a/add-on/src/landing-pages/welcome/store.js +++ b/add-on/src/landing-pages/welcome/store.js @@ -4,15 +4,18 @@ function createWelcomePageStore (i18n, runtime) { return function welcomePageStore (state, emitter) { state.isIpfsOnline = null + state.peerCount = null const port = runtime.connect({ name: 'browser-action-port' }) const onMessage = (message) => { if (message.statusUpdate) { - const isIpfsOnline = message.statusUpdate.peerCount > -1 + const peerCount = message.statusUpdate.peerCount + const isIpfsOnline = peerCount > -1 - if (isIpfsOnline !== state.isIpfsOnline) { + if (isIpfsOnline !== state.isIpfsOnline || peerCount !== state.peerCount) { state.isIpfsOnline = isIpfsOnline + state.peerCount = peerCount emitter.emit('render') } }