fixes

src/Layout.tsx

@@ -26,14 +26,12 @@ export default function Layout({
           url,
           title,
           description,
-          images: [{ url: `${url}/share.png` }],
           // eslint-disable-next-line @typescript-eslint/camelcase
           site_name: title
         }}
         twitter={{
           handle: '@kremalicious',
-          site: '@kremalicious',
-          cardType: 'summary_large_image'
+          site: '@kremalicious'
         }}
       />
 

src/components/Add.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { ipfsNodeUri, ipfsGateway } from '../../site.config'
 import Dropzone from './Dropzone'
 import styles from './Add.module.css'
-import Spinner from './Spinner'
+import Loader from './Loader'
 import useIpfsApi, { IpfsConfig } from '../hooks/use-ipfs-api'
 
 export function formatBytes(a: number, b: number) {
@@ -79,7 +79,7 @@ export default function Add() {
   return (
     <div className={styles.add}>
       {loading ? (
-        <Spinner message={message} />
+        <Loader message={message} />
       ) : fileHash ? (
         <a
           target="_blank"

src/components/Dropzone.module.css

@@ -1,7 +1,7 @@
 @import '../styles/_variables.css';
 
 :root {
-  --border-color: var(--brand-grey-light);
+  --border-color: var(--brand-grey-dimmed);
 }
 
 :global(.dark) {
@@ -9,18 +9,19 @@
 }
 
 .dropzone {
-  border: 0.1rem dashed var(--border-color);
-  border-radius: calc(var(--border-radius) * 2);
+  border: 0.4rem dashed var(--border-color);
+  border-radius: var(--border-radius);
   padding: calc(var(--spacer) * 2) var(--spacer);
   transition: 0.2s ease-out;
   cursor: pointer;
   text-align: center;
-  opacity: 0.75;
+  color: var(--brand-grey-light);
 }
 
 .dropzone:hover,
 .dropzone:focus,
 .dropzone:active {
+  border-color: var(--brand-cyan);
   outline: 0;
 }
 
@@ -31,7 +32,7 @@
 
 .disabled {
   composes: dropzone;
-  border-color: var(--brand-grey-light);
+  opacity: 0.3;
   pointer-events: none;
 }
 

src/components/Dropzone.tsx

@@ -38,11 +38,11 @@ export default function Dropzone({
       {isDragActive && !isDragReject ? (
         `Drop it like it's hot!`
       ) : multiple ? (
-        `Drag 'n' drop some files here, or click to select files`
+        `Drag 'n' drop some files here, or click to select files.`
       ) : error ? (
         <div className={styles.error}>{error}</div>
       ) : (
-        `Drag 'n' drop a file here, or click to select a file`
+        `Drag 'n' drop a file here, or click to select a file.`
       )}
     </div>
   )

src/components/Info.module.css

@@ -9,7 +9,7 @@
 }
 
 .info h2 {
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-small);
   color: var(--color-text);
   margin-top: calc(var(--spacer) * 2);
   margin-left: var(--spacer);

src/components/Loader.module.css

@@ -0,0 +1,48 @@
+@import '../styles/_variables.css';
+
+.loader {
+  position: relative;
+  text-align: center;
+  margin-top: calc(var(--spacer) * 4);
+  margin-bottom: calc(var(--spacer) / 2);
+  line-height: 1.3;
+}
+
+.loader:before,
+.loader:after {
+  --size: 1.75rem;
+
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-top: calc(var(--size) * -1);
+  margin-left: calc(var(--size) / -2);
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  background-color: var(--brand-cyan);
+  opacity: 0.6;
+
+  animation: loader 1.5s infinite var(--easing);
+}
+
+.loader:after {
+  animation-delay: -0.75s;
+}
+
+.loaderMessage {
+  color: var(--brand-grey);
+  padding-top: calc(var(--spacer) / 4);
+}
+
+@keyframes loader {
+  0%,
+  100% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+}

src/components/Loader.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styles from './Loader.module.css'
+
+const Loader = ({ message }: { message?: string }) => (
+  <div className={styles.loader}>
+    {message && (
+      <div
+        className={styles.loaderMessage}
+        dangerouslySetInnerHTML={{ __html: message }}
+      />
+    )}
+  </div>
+)
+
+export default Loader

src/components/Spinner.module.css

@@ -1,36 +0,0 @@
-@import '../styles/_variables.css';
-
-.spinner {
-  position: relative;
-  text-align: center;
-  margin-top: calc(var(--spacer) * 4);
-  margin-bottom: calc(var(--spacer) / 2);
-  line-height: 1.3;
-}
-
-.spinner:before {
-  content: '';
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  margin-top: -20px;
-  margin-left: -10px;
-  border-radius: 50%;
-  border: 2px solid var(--brand-main);
-  border-top-color: var(--brand-cyan);
-  animation: spinner 0.6s linear infinite;
-}
-
-.spinnerMessage {
-  color: var(--brand-grey);
-  padding-top: calc(var(--spacer) / 4);
-}
-
-@keyframes spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}

src/components/Spinner.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import styles from './Spinner.module.css'
-
-const Spinner = ({ message }: { message?: string }) => {
-  return (
-    <div className={styles.spinner}>
-      {message && (
-        <div
-          className={styles.spinnerMessage}
-          dangerouslySetInnerHTML={{ __html: message }}
-        />
-      )}
-    </div>
-  )
-}
-
-export default Spinner

src/components/Status.module.css

@@ -2,8 +2,8 @@
 
 /* default: red square */
 .status {
-  width: var(--font-size-mini);
-  height: var(--font-size-mini);
+  width: 0.5rem;
+  height: 0.5rem;
   display: inline-block;
   background: #ff4136;
   margin-right: calc(var(--spacer) / 8);

src/pages/index.module.css

@@ -2,7 +2,7 @@
 
 .header {
   margin-top: 10vh;
-  margin-bottom: calc(var(--spacer) * 2);
+  margin-bottom: calc(var(--spacer) * 3);
   text-align: center;
 }
 

src/styles/_variables.css

@@ -6,7 +6,7 @@
 
   --brand-grey: #4e5d63;
   --brand-grey-light: #70858e;
-  /* --brand-grey-dimmed: lighten($brand-grey, 50%); */
+  --brand-grey-dimmed: #abb6bb;
 
   --font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
     Helvetica, Arial, sans-serif;
@@ -48,6 +48,7 @@
   --color-text: var(--brand-grey);
   --color-headings: var(--brand-main);
   --selection-background-color: var(--brand-main);
+  --link-underline-color: var(--brand-grey-dimmed);
 }
 
 :global(.dark) {
@@ -55,4 +56,5 @@
   --color-text: var(--brand-grey-light);
   --color-headings: var(--brand-main-light);
   --selection-background: var(--brand-main-light);
+  --link-underline-color: var(--brand-grey);
 }

src/styles/global.css

@@ -39,7 +39,7 @@ body {
 }
 
 a {
-  text-decoration: none;
+  text-decoration: underline var(--link-underline-color);
   color: var(--brand-cyan);
   transition: 0.2s ease-out var(--easing);
 }