From d5256d2dc0dd515e2cb084f71bc75ffc61f5a2fd Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 8 Jul 2020 16:39:12 +0200 Subject: [PATCH] wallet UI & feedback refactor --- package-lock.json | 18 ++++++ package.json | 2 + src/components/atoms/Status.module.css | 10 ++-- src/components/molecules/Menu.module.css | 1 + src/components/molecules/Menu.tsx | 2 + .../Account.module.css} | 18 ++---- src/components/molecules/Wallet/Account.tsx | 29 +++++++++ .../molecules/Wallet/Details.module.css | 23 +++++++ src/components/molecules/Wallet/Details.tsx | 36 +++++++++++ .../Feedback.module.css} | 19 ++---- .../index.tsx => Wallet/Feedback.tsx} | 29 +++------ .../molecules/Wallet/index.module.css | 0 .../index.stories.tsx | 2 +- src/components/molecules/Wallet/index.tsx | 60 +++++++++++++++++++ .../molecules/Web3Feedback/Wallet.tsx | 38 ------------ src/components/organisms/Compute.tsx | 2 +- src/components/organisms/Consume.tsx | 2 +- src/components/pages/History.tsx | 2 +- src/components/pages/Publish.tsx | 2 +- src/global/_variables.css | 2 +- 20 files changed, 200 insertions(+), 97 deletions(-) rename src/components/molecules/{Web3Feedback/Wallet.module.css => Wallet/Account.module.css} (62%) create mode 100644 src/components/molecules/Wallet/Account.tsx create mode 100644 src/components/molecules/Wallet/Details.module.css create mode 100644 src/components/molecules/Wallet/Details.tsx rename src/components/molecules/{Web3Feedback/index.module.css => Wallet/Feedback.module.css} (56%) rename src/components/molecules/{Web3Feedback/index.tsx => Wallet/Feedback.tsx} (73%) create mode 100644 src/components/molecules/Wallet/index.module.css rename src/components/molecules/{Web3Feedback => Wallet}/index.stories.tsx (98%) create mode 100644 src/components/molecules/Wallet/index.tsx delete mode 100644 src/components/molecules/Web3Feedback/Wallet.tsx diff --git a/package-lock.json b/package-lock.json index 778d151aa..f41c18802 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6071,6 +6071,15 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "@types/loadable__component": { + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.10.0.tgz", + "integrity": "sha512-AaDP1VxV3p7CdPOtOTl3ALgQ6ES4AxJKO9UGj9vJonq/w2yERxwdzFiWNQFh9fEDXEzjxujBlM2RmSJtHV1/pA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/lodash": { "version": "4.14.157", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.157.tgz", @@ -28779,6 +28788,15 @@ "throttle-debounce": "^2.1.0" } }, + "react-spring": { + "version": "8.0.27", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", + "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", + "requires": { + "@babel/runtime": "^7.3.1", + "prop-types": "^15.5.8" + } + }, "react-syntax-highlighter": { "version": "12.2.1", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz", diff --git a/package.json b/package.json index 994535585..e9c3987be 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "react-paginate": "^6.3.2", "react-rating": "^2.0.5", "react-responsive-modal": "^5.0.2", + "react-spring": "^8.0.27", "react-toastify": "^6.0.8", "shortid": "^2.2.15", "slugify": "^1.4.4", @@ -78,6 +79,7 @@ "@testing-library/jest-dom": "^5.11.0", "@testing-library/react": "^10.4.4", "@types/jest": "^26.0.4", + "@types/loadable__component": "^5.10.0", "@types/node": "^14.0.19", "@types/numeral": "^0.0.28", "@types/react": "^16.9.41", diff --git a/src/components/atoms/Status.module.css b/src/components/atoms/Status.module.css index 34dfcbfba..6d22da38f 100644 --- a/src/components/atoms/Status.module.css +++ b/src/components/atoms/Status.module.css @@ -1,7 +1,7 @@ /* default: success, green circle */ .status { - width: var(--font-size-mini); - height: var(--font-size-mini); + width: var(--font-size-small); + height: var(--font-size-small); border-radius: 50%; display: inline-block; background: var(--brand-alert-green); @@ -14,9 +14,9 @@ background: none; width: 0; height: 0; - border-left: calc(var(--font-size-mini) / 1.7) solid transparent; - border-right: calc(var(--font-size-mini) / 1.7) solid transparent; - border-bottom: var(--font-size-mini) solid var(--brand-alert-orange); + border-left: calc(var(--font-size-small) / 1.7) solid transparent; + border-right: calc(var(--font-size-small) / 1.7) solid transparent; + border-bottom: var(--font-size-small) solid var(--brand-alert-yellow); } /* red square */ diff --git a/src/components/molecules/Menu.module.css b/src/components/molecules/Menu.module.css index fa10aff2a..50dd4df3c 100644 --- a/src/components/molecules/Menu.module.css +++ b/src/components/molecules/Menu.module.css @@ -1,6 +1,7 @@ .menu { } +.menu > div, .link { display: inline-block; color: var(--brand-grey); diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx index 363cbd4f0..15648f0bd 100644 --- a/src/components/molecules/Menu.tsx +++ b/src/components/molecules/Menu.tsx @@ -3,6 +3,7 @@ import { Link } from 'gatsby' import { useLocation } from '@reach/router' import styles from './Menu.module.css' import { useSiteMetadata } from '../../hooks/useSiteMetadata' +import Wallet from './Wallet' declare type MenuItem = { name: string @@ -29,6 +30,7 @@ export default function Menu() { return (