fix: improve shell component ux (#1487)

ipfs · May 7, 2020 · eac930e · eac930e
1 parent 28c7b0c
commit eac930e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/src/components/shell/Shell.js b/src/components/shell/Shell.js
@@ -1,12 +1,14 @@
 import React from 'react'
+import classNames from 'classnames'
 
 const Shell = ({
   title = 'Shell',
-  children
+  children,
+  className
 }) => {
   return (
-    <div className='mw6 br1 overflow-hidden'>
-      <div className='f7 mb0 sans-serif ttu tracked charcoal pv1 pl2 bg-black-20'>Shell</div>
+    <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='bg-black-70 snow pa2 f7 lh-copy monospace nowrap overflow-x-auto'>
         {children}
       </div>

diff --git a/src/status/BandwidthStatsDisabled.js b/src/status/BandwidthStatsDisabled.js
@@ -17,8 +17,8 @@ const StatusNotConnected = ({ t }) => {
         </Trans>
       </p>
 
-      <Shell>
-        <code className='db'>$ ipfs config --json Swarm.DisableBandwidthMetrics false</code>
+      <Shell className='mw6'>
+        <code className='db'><b className='no-select'>$ </b>ipfs config --json Swarm.DisableBandwidthMetrics false</code>
       </Shell>
     </Box>
   )

diff --git a/src/status/StatusNotConnected.js b/src/status/StatusNotConnected.js
@@ -13,8 +13,8 @@ const StatusNotConnected = () => {
       <Trans i18nKey='StatusNotConnected.paragraph1'>
         <p className='mv3 lh-copy sans-serif'>Start an IPFS daemon in a terminal:</p>
       </Trans>
-      <Shell>
-        <code className='db'>$ ipfs daemon</code>
+      <Shell className='mw6'>
+        <code className='db'><b className='no-select'>$ </b>ipfs daemon</code>
         <code className='db'>Initializing daemon...</code>
         <code className='db'>API server listening on /ip4/127.0.0.1/tcp/5001</code>
       </Shell>

diff --git a/src/welcome/WelcomePage.js b/src/welcome/WelcomePage.js
@@ -73,16 +73,16 @@ const ConnectionStatus = ({ t, connected, sameOrigin }) => {
             <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>
-            <code className='db'>$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '[{addOrigin && `"${origin}", `}"{defaultDomains.join('", "')}"]'</code>
-            <code className='db'>$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "POST"]'</code>
+            <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>
         </div>
       )}
       <Trans i18nKey='notConnected.paragraph3'>
         <p>Start an IPFS daemon in a terminal:</p>
       </Trans>
       <Shell>
-        <code className='db'>$ ipfs daemon</code>
+        <code className='db'><b className='no-select'>$ </b>ipfs daemon</code>
         <code className='db'>Initializing daemon...</code>
         <code className='db'>API server listening on /ip4/127.0.0.1/tcp/5001</code>
       </Shell>