From 444907ae0fb3215f13862187de02c9dc51bf68ff Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 20 Oct 2019 03:23:38 +0200 Subject: [PATCH] fixes --- src/Layout.tsx | 4 +-- src/components/Add.tsx | 4 +-- src/components/Dropzone.module.css | 11 +++---- src/components/Dropzone.tsx | 4 +-- src/components/Info.module.css | 2 +- src/components/Loader.module.css | 48 ++++++++++++++++++++++++++++++ src/components/Loader.tsx | 15 ++++++++++ src/components/Spinner.module.css | 36 ---------------------- src/components/Spinner.tsx | 17 ----------- src/components/Status.module.css | 4 +-- src/pages/index.module.css | 2 +- src/styles/_variables.css | 4 ++- src/styles/global.css | 2 +- 13 files changed, 82 insertions(+), 71 deletions(-) create mode 100644 src/components/Loader.module.css create mode 100644 src/components/Loader.tsx delete mode 100644 src/components/Spinner.module.css delete mode 100644 src/components/Spinner.tsx diff --git a/src/Layout.tsx b/src/Layout.tsx index 77cb1d5..0fcf100 100644 --- a/src/Layout.tsx +++ b/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' }} /> diff --git a/src/components/Add.tsx b/src/components/Add.tsx index 4b9a51a..c8ae99b 100644 --- a/src/components/Add.tsx +++ b/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 (
{loading ? ( - + ) : fileHash ? ( {error}
) : ( - `Drag 'n' drop a file here, or click to select a file` + `Drag 'n' drop a file here, or click to select a file.` )} ) diff --git a/src/components/Info.module.css b/src/components/Info.module.css index a23c6d7..4dee194 100644 --- a/src/components/Info.module.css +++ b/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); diff --git a/src/components/Loader.module.css b/src/components/Loader.module.css new file mode 100644 index 0000000..aaf1cc8 --- /dev/null +++ b/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); + } +} diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx new file mode 100644 index 0000000..533f0b4 --- /dev/null +++ b/src/components/Loader.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import styles from './Loader.module.css' + +const Loader = ({ message }: { message?: string }) => ( +
+ {message && ( +
+ )} +
+) + +export default Loader diff --git a/src/components/Spinner.module.css b/src/components/Spinner.module.css deleted file mode 100644 index 2693ef2..0000000 --- a/src/components/Spinner.module.css +++ /dev/null @@ -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); - } -} diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx deleted file mode 100644 index 8ec4949..0000000 --- a/src/components/Spinner.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import styles from './Spinner.module.css' - -const Spinner = ({ message }: { message?: string }) => { - return ( -
- {message && ( -
- )} -
- ) -} - -export default Spinner diff --git a/src/components/Status.module.css b/src/components/Status.module.css index 1b0c79f..d9cf3ee 100644 --- a/src/components/Status.module.css +++ b/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); diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 4a40f59..74daf17 100644 --- a/src/pages/index.module.css +++ b/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; } diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 8094540..92728e9 100644 --- a/src/styles/_variables.css +++ b/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); } diff --git a/src/styles/global.css b/src/styles/global.css index ce4c8d9..57b7b4b 100644 --- a/src/styles/global.css +++ b/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); }