feat: add OS icons to the Shells in the homepage

src/components/shell/Shell.js

@@ -4,11 +4,16 @@ import classNames from 'classnames'
 const Shell = ({
   title = 'Shell',
   children,
-  className
+  className,
+  Icon,
+  iconProps
 }) => {
   return (
     <div className={classNames('br1 overflow-hidden', className)}>
-      <div className='f7 mb0 sans-serif ttu tracked charcoal pv1 pl2 bg-black-20'>{ title }</div>
+      <div className='f7 mb0 sans-serif ttu tracked charcoal pv1 pl2 bg-black-20 flex items-center' style={{ height: 30 }}>
+        { Icon && <Icon { ...iconProps } />}
+        <span>{ title }</span>
+      </div>
       <div className='bg-black-70 snow pa2 f7 lh-copy monospace nowrap overflow-x-auto'>
         {children}
       </div>

src/icons/PowerShell.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const PowerShell = props => (
+  <svg viewBox='8 5 40 40' {...props}>
+    <path d="M22.4 36.2H11.8c-1.8 0-2.1-.4-1.7-2.2 1.4-6 2.8-11.9 4.1-17.9.4-1.6 1.1-2.3 2.8-2.3 7.1.1 14.2 0 21.3 0 1.8 0 2.1.4 1.7 2.2-1.3 5.8-2.6 11.7-3.9 17.5-.5 2.2-1.1 2.6-3.4 2.6-3.5.1-6.9.1-10.3.1z" fill="#2671be"/>
+    <path d="M25.4 24.5c-.2-.3-.5-.6-.8-.9-1.6-1.7-3.1-3.5-4.7-5.2-.7-.8-1-1.5-.1-2.3.9-.8 1.7-.7 2.5.2 2.2 2.5 4.4 4.9 6.7 7.3.8.9.6 1.5-.3 2.2-3.5 2.6-7.1 5.2-10.6 7.8-.8.6-1.5.7-2.2-.1-.7-1-.1-1.5.7-2.1 2.6-1.9 5.2-3.8 7.8-5.8.4-.3.9-.4 1-1.1z" fill="#fdfdfe"/>
+    <path d="M26.5 33.7h-2.9c-.8 0-1.2-.5-1.2-1.3s.4-1.3 1.1-1.3c2.1-.1 4.2 0 6.3 0 .7 0 1.2.4 1.1 1.1 0 .8-.4 1.4-1.3 1.5-.9.1-2 0-3.1 0z" fill="#fcfdfd"/>
+  </svg>
+)
+
+export default PowerShell

src/welcome/WelcomePage.js

@@ -7,6 +7,9 @@ import Button from '../components/button/Button'
 import AboutIpfs from '../components/about-ipfs/AboutIpfs'
 import Shell from '../components/shell/Shell.js'
 import ComponentLoader from '../loader/ComponentLoader.js'
+import PowerShellIcon from '../icons/PowerShell'
+import WindowsCmdIcon from '../icons/WindowsCmd'
+import LinuxIcon from '../icons/Linux'
 
 const WelcomePage = ({ t, doUpdateIpfsApiAddress, apiUrl, ipfsInitFailed, ipfsConnected, ipfsReady, ipfsApiAddress }) => {
   if (!ipfsInitFailed && !ipfsReady) {
@@ -72,15 +75,15 @@ const ConnectionStatus = ({ t, connected, sameOrigin }) => {
           <Trans i18nKey='notConnected.paragraph2'>
             <p>Make sure you <a className='link blue' href='https://github.com/ipfs-shipyard/ipfs-webui#configure-ipfs-api-cors-headers'>configure your IPFS API</a> to allow cross-origin (CORS) requests, running the commands below:</p>
           </Trans>
-          <Shell title="Unix & MacOS">
+          <Shell title="Unix & MacOS" Icon={ LinuxIcon } iconProps={ { height: 25, className: 'ml1 mr2' }}>
             <code className='db'><b className='no-select'>$ </b>ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '[{addOrigin && `"${origin}", `}"{defaultDomains.join('", "')}"]'</code>
             <code className='db'><b className='no-select'>$ </b>ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "POST"]'</code>
           </Shell>
-          <Shell title="Windows Powershell" className="mt4">
+          <Shell title="Windows Powershell" className="mt4" Icon={ PowerShellIcon } iconProps={ { height: 30, className: 'mh2' }}>
             <code className='db'><b className='no-select'>$ </b>ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '[{addOrigin && `\\"${origin}\\", `}\"{defaultDomains.join('\\", \\"')}\"]'</code>
             <code className='db'><b className='no-select'>$ </b>ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '[\"PUT\", \"POST\"]'</code>
           </Shell>
-          <Shell title="Windows CMD" className="mt4">
+          <Shell title="Windows CMD" className="mt4" Icon={ WindowsCmdIcon } iconProps={ { height: 20, className: 'ml2 mr3' }}>
             <code className='db'><b className='no-select'>$ </b>ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[{addOrigin && `"""${origin}""", `}"""{defaultDomains.join('""", """')}"""]"</code>
             <code className='db'><b className='no-select'>$ </b>ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods "["""PUT""", """POST"""]"</code>
           </Shell>