more styling

src/components/Add.module.css

@@ -6,9 +6,3 @@
   word-wrap: break-word;
   word-break: break-all;
 }
-
-.error {
-  font-size: var(--font-size-small);
-  color: var(--red);
-  margin-top: var(--spacer);
-}

src/components/Add.tsx

@@ -94,10 +94,8 @@ export default function Add() {
             multiple={false}
             handleOnDrop={handleOnDrop}
             disabled={!isIpfsReady}
+            error={error || ipfsError}
           />
-          {(error || ipfsError) && (
-            <div className={styles.error}>{error || ipfsError}</div>
-          )}
         </>
       )}
     </div>

src/components/Dropzone.module.css

@@ -6,6 +6,7 @@
   padding: calc(var(--spacer) * 2) var(--spacer);
   transition: 0.2s ease-out;
   cursor: pointer;
+  text-align: center;
 }
 
 .dropzone:hover,
@@ -22,10 +23,15 @@
 
 .disabled {
   composes: dropzone;
-  opacity: 0.3;
+  border-color: var(--brand-grey-dark);
   pointer-events: none;
 }
 
+.error {
+  font-size: var(--font-size-small);
+  color: var(--red);
+}
+
 .dropzone p {
   text-align: center;
   margin-bottom: 0;

src/components/Dropzone.tsx

@@ -5,11 +5,13 @@ import styles from './Dropzone.module.css'
 export default function Dropzone({
   handleOnDrop,
   disabled,
-  multiple
+  multiple,
+  error
 }: {
   handleOnDrop(files: File[]): void
   disabled?: boolean
   multiple?: boolean
+  error?: string
 }) {
   const onDrop = useCallback(acceptedFiles => handleOnDrop(acceptedFiles), [
     handleOnDrop
@@ -33,14 +35,15 @@ export default function Dropzone({
       })}
     >
       <input {...getInputProps({ multiple })} />
-      <p>
+      {isDragActive && !isDragReject ? (
-        {isDragActive && !isDragReject
+        `Drop it like it's hot!`
-          ? `Drop it like it's hot!`
+      ) : multiple ? (
-          : multiple
+        `Drag 'n' drop some files here, or click to select files`
-          ? `Drag 'n' drop some files here, or click to select files`
+      ) : error ? (
-          : `Drag 'n' drop a file here, or click to select a file`}
+        <div className={styles.error}>{error}</div>
-        {}
+      ) : (
-      </p>
+        `Drag 'n' drop a file here, or click to select a file`
+      )}
     </div>
   )
 }

src/components/Info.module.css

@@ -2,7 +2,6 @@
 
 .info {
   font-size: var(--font-size-small);
-  text-align: left;
   opacity: 0.8;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -12,7 +11,7 @@
 .info h2 {
   font-size: var(--font-size-base);
   color: var(--brand-grey-light);
-  margin-top: var(--spacer);
+  margin-top: calc(var(--spacer) * 2);
 }
 
 .info code {

src/hooks/use-ipfs-api.tsx

@@ -10,6 +10,12 @@ export interface IpfsConfig {
   port: string
 }
 
+function parseHTML(str: string) {
+  const tmp = document.implementation.createHTMLDocument()
+  tmp.body.innerHTML = str
+  return tmp.body.children
+}
+
 export default function useIpfsApi(config: IpfsConfig) {
   const [isIpfsReady, setIpfsReady] = useState(Boolean(ipfs))
   const [ipfsError, setIpfsError] = useState('')
@@ -24,7 +30,16 @@ export default function useIpfsApi(config: IpfsConfig) {
         const version = await ipfs.version()
         ipfsVersion = version.version
       } catch (error) {
-        setIpfsError(`IPFS connection error: ${error.message}`)
+        let { message } = error
+
+        if (!error.status) {
+          const htmlData = parseHTML(error)
+          message = htmlData.item(0)
+          message = message.textContent
+        }
+
+        setIpfsError(`IPFS connection error: ${message}`)
+        setIpfsReady(false)
         return
       }
       setIpfsReady(Boolean(await ipfs.id()))

src/pages/index.module.css

@@ -2,25 +2,32 @@
 
 .grid {
   display: grid;
-  gap: calc(var(--spacer) * 3);
+  gap: calc(var(--spacer) * 2);
   max-width: 40rem;
   margin-top: calc(var(--spacer) * 2) auto var(--spacer) auto;
 }
 
+@media screen and (min-width: 640px) {
+  .grid > div:first-child {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    padding: calc(var(--spacer) * 2);
+    border-radius: var(--border-radius);
+    border-top: 1px solid var(--brand-black);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+}
+
 @media screen and (min-width: 1140px) {
   .grid {
     max-width: 70rem;
     text-align: left;
     grid-template-columns: 2fr 1fr;
   }
-
-  .grid > aside {
-    margin-top: calc(var(--spacer) * var(--line-height));
-  }
 }
 
 .header {
   margin-bottom: calc(var(--spacer) * 2);
+  text-align: center;
 }
 
 .header svg {
@@ -29,6 +36,10 @@
 }
 
 @media screen and (min-width: 1140px) {
+  .header {
+    text-align: left;
+  }
+
   .header svg {
     margin-left: 0;
     margin-right: 0;

src/styles/global.css

@@ -9,7 +9,6 @@
 html,
 body {
   width: 100%;
-  height: 100%;
   margin: 0;
   padding: 0;
 }
@@ -28,8 +27,6 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
-  margin: 0;
-  text-align: center;
 }
 
 @media screen and (min-width: 640px) {