From cf3f406547dffc7773a1c9d5ef012d749b8fa644 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 30 Oct 2020 21:28:20 +0100 Subject: [PATCH] Dark Mode (#182) * refactor CSS custom properties for dark mode * dark mode style * dark mode switching * config tweaks --- app.config.js | 9 +++- gatsby-config.js | 7 +++ package-lock.json | 31 ++++++++++++ package.json | 2 + src/components/atoms/Box.module.css | 8 +-- src/components/atoms/Button.module.css | 2 +- src/components/atoms/EtherscanLink.module.css | 2 +- .../atoms/Input/InputElement.module.css | 28 +++++------ src/components/atoms/Input/Label.module.css | 6 +-- src/components/atoms/Lists.module.css | 2 +- src/components/atoms/Loader.module.css | 2 +- src/components/atoms/Logo.module.css | 4 +- src/components/atoms/Modal.module.css | 4 +- .../atoms/Price/PriceUnit.module.css | 2 +- src/components/atoms/Table.module.css | 25 ++++++++-- src/components/atoms/Tabs.module.css | 8 +-- src/components/atoms/Tags.module.css | 2 +- src/components/atoms/Tooltip.module.css | 4 +- .../molecules/AssetTitle.module.css | 4 +- .../FormFields/Datatoken/index.module.css | 2 +- .../FormFields/FilesInput/Info.module.css | 6 +-- .../molecules/FormFields/Terms.module.css | 4 +- src/components/molecules/Menu.module.css | 15 +----- src/components/molecules/Menu.tsx | 2 +- .../molecules/Pagination.module.css | 2 +- .../molecules/UserPreferences/Theme.tsx | 41 +++++++++++++++ .../UserPreferences/index.module.css | 18 ++++--- .../molecules/UserPreferences/index.tsx | 7 +++ .../molecules/Wallet/Account.module.css | 11 ++-- .../molecules/Wallet/Details.module.css | 2 +- .../molecules/Wallet/Feedback.module.css | 2 +- .../organisms/AssetActions/Compute.module.css | 2 +- .../AssetActions/Pool/Actions.module.css | 2 +- .../AssetActions/Pool/Add/index.module.css | 4 +- .../AssetActions/Pool/CoinSelect.module.css | 8 +-- .../AssetActions/Pool/Header.module.css | 2 +- .../AssetActions/Pool/Token.module.css | 2 +- .../AssetActions/Pool/TokenList.module.css | 6 +-- .../Pricing/FormPricing/Coin.module.css | 6 +-- .../Pricing/FormPricing/Dynamic.module.css | 4 +- .../Pricing/FormPricing/Fees.module.css | 4 +- .../Pricing/FormPricing/Price.module.css | 6 +-- .../pages/History/PoolShares.module.css | 2 +- src/global/_code.css | 4 +- src/global/_toast.css | 6 +-- src/global/_variables.css | 22 +++++++- src/global/_web3modal.css | 11 ++-- src/global/styles.css | 9 ++-- src/images/logo.svg | 50 +++++++++---------- src/providers/UserPreferences.tsx | 1 - src/utils/wallet.ts | 8 +-- 51 files changed, 275 insertions(+), 148 deletions(-) create mode 100644 src/components/molecules/UserPreferences/Theme.tsx diff --git a/app.config.js b/app.config.js index de7b87f30..6e13d96dc 100644 --- a/app.config.js +++ b/app.config.js @@ -11,5 +11,12 @@ module.exports = { '0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7', // Used for conversion display, can be whatever coingecko API supports // see: https://api.coingecko.com/api/v3/simple/supported_vs_currencies - currencies: ['EUR', 'USD', 'ETH', 'BTC'] + currencies: ['EUR', 'USD', 'ETH', 'BTC'], + + // Config for https://github.com/donavon/use-dark-mode + darkModeConfig: { + classNameDark: 'dark', + classNameLight: 'light', + storageKey: 'oceanDarkMode' + } } diff --git a/gatsby-config.js b/gatsby-config.js index c85c9e4e0..a98dcd013 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -82,6 +82,13 @@ module.exports = { defer: true, cookieDomain: 'oceanprotocol.com' } + }, + { + resolve: 'gatsby-plugin-use-dark-mode', + options: { + ...appConfig.darkModeConfig, + minify: true + } } ] } diff --git a/package-lock.json b/package-lock.json index 0c36df40c..8b38bf0cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7746,6 +7746,11 @@ } } }, + "@use-it/event-listener": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@use-it/event-listener/-/event-listener-0.1.5.tgz", + "integrity": "sha512-SWbhB0iFcoNL1BEldApGTqfB9aoGpU82iZUVTBtZaTFNrVKAGwuQTF15N9MzRvTgyuOASWf1pCKXbdVtKZgeRg==" + }, "@vercel/node": { "version": "1.8.4", "resolved": "https://registry.npmjs.org/@vercel/node/-/node-1.8.4.tgz", @@ -17798,6 +17803,15 @@ "babel-plugin-remove-graphql-queries": "^2.9.20" } }, + "gatsby-plugin-use-dark-mode": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/gatsby-plugin-use-dark-mode/-/gatsby-plugin-use-dark-mode-1.1.2.tgz", + "integrity": "sha512-qZEg4XmCgeq4M7ojxMUTFFj951QMGb95pWnxsSvb4nsTWTYSb0qeRE+hR/4rE5GIFnh/w9GrwuyMwStM7o7R6Q==", + "requires": { + "prop-types": "^15.7.2", + "terser": "^4.0.0" + } + }, "gatsby-plugin-utils": { "version": "0.2.40", "resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-0.2.40.tgz", @@ -33495,6 +33509,15 @@ "ts-essentials": "^2.0.3" } }, + "use-dark-mode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.1.tgz", + "integrity": "sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg==", + "requires": { + "@use-it/event-listener": "^0.1.2", + "use-persisted-state": "^0.3.0" + } + }, "use-isomorphic-layout-effect": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.0.0.tgz", @@ -33510,6 +33533,14 @@ "use-isomorphic-layout-effect": "^1.0.0" } }, + "use-persisted-state": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/use-persisted-state/-/use-persisted-state-0.3.0.tgz", + "integrity": "sha512-UlWEq0JYg7NbvcRBZ1g6Bwe4SEbYfr1wr/D5mrmfCzSxXSwsPRYygGLlsxHcW58Rf7gGwRPBT23sNVvyVn4WYg==", + "requires": { + "@use-it/event-listener": "^0.1.2" + } + }, "utf-8-validate": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.2.tgz", diff --git a/package.json b/package.json index 92866698a..c7285c4ea 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "gatsby-plugin-remove-trailing-slashes": "^2.3.13", "gatsby-plugin-sharp": "^2.6.43", "gatsby-plugin-svgr": "^2.0.2", + "gatsby-plugin-use-dark-mode": "^1.1.2", "gatsby-plugin-webpack-size": "^1.0.0", "gatsby-source-filesystem": "^2.3.37", "gatsby-source-graphql": "^2.7.6", @@ -76,6 +77,7 @@ "shortid": "^2.2.16", "slugify": "^1.4.5", "swr": "^0.3.6", + "use-dark-mode": "^2.3.1", "yup": "^0.29.3" }, "devDependencies": { diff --git a/src/components/atoms/Box.module.css b/src/components/atoms/Box.module.css index 4c447e9ed..f457c91ff 100644 --- a/src/components/atoms/Box.module.css +++ b/src/components/atoms/Box.module.css @@ -1,9 +1,9 @@ .box { display: block; - background: var(--brand-white); + background: var(--background-body); border-radius: var(--border-radius); - border: 1px solid var(--brand-grey-lighter); - box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05); + border: 1px solid var(--border-color); + box-shadow: 0 6px 17px 0 var(--box-shadow-color); overflow: hidden; padding: var(--spacer); } @@ -12,5 +12,5 @@ a.box:hover, a.box:focus { outline: 0; transform: translate3d(0, -0.1rem, 0); - box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.07); + box-shadow: 0 10px 25px 0 var(--box-shadow-color); } diff --git a/src/components/atoms/Button.module.css b/src/components/atoms/Button.module.css index c84caabd6..5e300945f 100644 --- a/src/components/atoms/Button.module.css +++ b/src/components/atoms/Button.module.css @@ -46,7 +46,7 @@ .button:disabled { cursor: not-allowed; pointer-events: none; - background: var(--brand-grey-lighter); + opacity: 0.25; } .primary, diff --git a/src/components/atoms/EtherscanLink.module.css b/src/components/atoms/EtherscanLink.module.css index 2e77d13cd..64b37ac1d 100644 --- a/src/components/atoms/EtherscanLink.module.css +++ b/src/components/atoms/EtherscanLink.module.css @@ -1,5 +1,5 @@ .link { - color: var(--brand-grey); + color: inherit; } .link svg { diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css index b1b3fea51..13902d1c2 100644 --- a/src/components/atoms/Input/InputElement.module.css +++ b/src/components/atoms/Input/InputElement.module.css @@ -2,11 +2,11 @@ font-size: var(--font-size-base); font-family: var(--font-family-base); font-weight: var(--font-weight-bold); - color: var(--brand-black); - border: 1px solid var(--brand-grey-lighter); + color: var(--font-color-heading); + border: 1px solid var(--border-color); box-shadow: none; width: 100%; - background: var(--brand-white); + background: var(--background-body); padding: calc(var(--spacer) / 3); margin: 0; border-radius: var(--border-radius); @@ -18,7 +18,7 @@ } .input:focus { - border-color: var(--brand-grey); + border-color: var(--font-color-text); box-shadow: none; outline: 0; } @@ -63,12 +63,12 @@ background-image: linear-gradient( 45deg, transparent 50%, - var(--brand-purple) 50% + var(--font-color-text) 50% ), - linear-gradient(135deg, var(--brand-grey) 50%, transparent 50%), + linear-gradient(135deg, var(--font-color-text) 50%, transparent 50%), linear-gradient( to right, - var(--brand-grey-lighter) 1px, + var(--border-color) 1px, transparent 1px, transparent ); @@ -96,7 +96,7 @@ padding: 0; font-weight: var(--font-weight-bold); font-size: var(--font-size-small); - color: var(--brand-grey); + color: var(--font-color-text); padding-left: 0.5rem; } @@ -126,13 +126,13 @@ .radio:checked, .checkbox:checked { - border-color: var(--brand-pink); - background: var(--brand-pink); + border-color: var(--color-primary); + background: var(--color-primary); } .radio:focus, .checkbox:focus { - box-shadow: 0 0 0 var(--brand-pink); + box-shadow: 0 0 0 var(--color-primary); } .radio:checked::after, @@ -183,7 +183,7 @@ .prefix, .postfix { - border: 1px solid var(--brand-grey-lighter); + border: 1px solid var(--border-color); height: 43px; display: flex; align-items: center; @@ -222,7 +222,7 @@ input[type='range']::-webkit-slider-thumb, input[type='range']::-moz-range-thumb { appearance: none; background: var(--brand-gradient); - border: 2px solid var(--brand-grey-lighter); + border: 2px solid var(--border-color); width: var(--font-size-large); height: var(--font-size-large); border-radius: 50%; @@ -232,7 +232,7 @@ input[type='range']::-moz-range-thumb { input[type='range']::-webkit-slider-runnable-track, input[type='range']::-moz-range-track { - background: var(--brand-grey-lighter); + background: var(--border-color); border-radius: var(--border-radius); height: 0.3rem; border: none; diff --git a/src/components/atoms/Input/Label.module.css b/src/components/atoms/Input/Label.module.css index 03114c82f..0eb0382ae 100644 --- a/src/components/atoms/Input/Label.module.css +++ b/src/components/atoms/Input/Label.module.css @@ -1,7 +1,7 @@ .label { - color: var(--brand-grey); + color: var(--font-color-text); font-size: var(--font-size-base); - font-family: var(--font-family-title); + font-family: var(--font-family-heading); line-height: 1.2; display: block; margin-bottom: calc(var(--spacer) / 4); @@ -10,7 +10,7 @@ .required:after { content: '*'; font-size: var(--font-size-base); - color: var(--brand-grey-light); + color: var(--color-secondary); display: inline-block; margin-left: 0.1rem; } diff --git a/src/components/atoms/Lists.module.css b/src/components/atoms/Lists.module.css index 87332dca2..1ae912739 100644 --- a/src/components/atoms/Lists.module.css +++ b/src/components/atoms/Lists.module.css @@ -1,7 +1,7 @@ .item { display: list-item; margin-top: calc(var(--spacer) / 8); - color: var(--brand-grey); + color: var(--font-color-text); list-style-position: inside; } diff --git a/src/components/atoms/Loader.module.css b/src/components/atoms/Loader.module.css index a678a7811..3c6c27056 100644 --- a/src/components/atoms/Loader.module.css +++ b/src/components/atoms/Loader.module.css @@ -16,7 +16,7 @@ .message { font-weight: var(--font-weight-base); font-size: var(--font-size-small); - color: var(--brand-grey-light); + color: var(--color-secondary); display: block; margin-left: calc(var(--spacer) / 4); } diff --git a/src/components/atoms/Logo.module.css b/src/components/atoms/Logo.module.css index c45215760..f86104cce 100644 --- a/src/components/atoms/Logo.module.css +++ b/src/components/atoms/Logo.module.css @@ -5,9 +5,9 @@ } .logo path { - fill: var(--brand-black); + fill: var(--font-color-heading); } a > .logo:hover path { - fill: var(--brand-pink); + fill: var(--color-primary); } diff --git a/src/components/atoms/Modal.module.css b/src/components/atoms/Modal.module.css index 42404f38b..f11b3a587 100644 --- a/src/components/atoms/Modal.module.css +++ b/src/components/atoms/Modal.module.css @@ -9,7 +9,7 @@ left: 0; right: 0; bottom: 0; - background: rgba(255, 255, 255, 0.8); + background: var(--background-body-transparent); backdrop-filter: blur(3px); overflow-x: hidden; overflow-y: auto; @@ -67,7 +67,7 @@ top: calc(var(--spacer) / 4); right: calc(var(--spacer) / 2); font-size: var(--font-size-h2); - color: var(--brand-grey); + color: var(--font-color-text); } .close:hover, diff --git a/src/components/atoms/Price/PriceUnit.module.css b/src/components/atoms/Price/PriceUnit.module.css index 5211d991a..72aa7e255 100644 --- a/src/components/atoms/Price/PriceUnit.module.css +++ b/src/components/atoms/Price/PriceUnit.module.css @@ -2,7 +2,7 @@ display: inline-block; font-weight: var(--font-weight-bold); font-size: var(--font-size-large); - color: var(--brand-grey-dark); + color: var(--font-color-text); line-height: 1.2; } diff --git a/src/components/atoms/Table.module.css b/src/components/atoms/Table.module.css index dbbd0d34b..e67114932 100644 --- a/src/components/atoms/Table.module.css +++ b/src/components/atoms/Table.module.css @@ -2,21 +2,38 @@ background-color: transparent !important; } +.table [role='table'], +.table [role='row'] { + color: var(--font-color-text); + font-size: var(--font-size-small); +} + +.table [class~='rdt_TableCol'] { + border-bottom: 1px solid var(--border-color); +} + .table [role='columnheader'] { - font-weight: var(--font-weight-bold); + text-transform: uppercase; + color: var(--color-secondary); + font-size: var(--font-size-small); +} + +.table [role='row']:not(:last-of-type) { + border-color: var(--border-color); } .table + div [class*='rdt_Pagination'] { font-size: var(--font-size-small); - color: var(--brand-grey-light); + color: var(--color-secondary); + background: none; } .table + div [class*='rdt_Pagination'] svg { - fill: var(--brand-grey-light); + fill: var(--color-secondary); } .table + div [class*='rdt_Pagination'] [disabled] svg { - fill: var(--brand-grey-lighter); + fill: var(--background-highlight); } .table + div [class*='rdt_Pagination'] button:hover:not(:disabled) { diff --git a/src/components/atoms/Tabs.module.css b/src/components/atoms/Tabs.module.css index cc5215d74..bcd8c55a6 100644 --- a/src/components/atoms/Tabs.module.css +++ b/src/components/atoms/Tabs.module.css @@ -1,6 +1,6 @@ .tabList { text-align: center; - border-bottom: 1px solid var(--brand-grey-lighter); + border-bottom: 1px solid var(--border-color); padding-top: calc(var(--spacer) / 2); padding-bottom: calc(var(--spacer) / 2); } @@ -13,12 +13,12 @@ font-size: var(--font-size-small); text-transform: uppercase; cursor: pointer; - color: var(--brand-grey-light); + color: var(--color-secondary); } .tab[aria-selected='true'] { - background: var(--brand-black); - color: var(--brand-white); + background: var(--font-color-heading); + color: var(--background-body); } .tabContent { diff --git a/src/components/atoms/Tags.module.css b/src/components/atoms/Tags.module.css index 5ba88e004..4424ed27d 100644 --- a/src/components/atoms/Tags.module.css +++ b/src/components/atoms/Tags.module.css @@ -13,7 +13,7 @@ margin-bottom: calc(var(--spacer) / 4); text-align: center; border-radius: var(--border-radius); - border: 1px solid var(--brand-grey-lighter); + border: 1px solid var(--border-color); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/components/atoms/Tooltip.module.css b/src/components/atoms/Tooltip.module.css index 1494a296e..ba87d2708 100644 --- a/src/components/atoms/Tooltip.module.css +++ b/src/components/atoms/Tooltip.module.css @@ -16,7 +16,7 @@ display: inline-block; margin-bottom: -0.1rem; margin-left: calc(var(--spacer) / 6); - fill: var(--brand-grey-light); + fill: var(--color-secondary); } .arrow, @@ -30,7 +30,7 @@ .arrow::before { content: ''; transform: rotate(45deg); - background: var(--brand-grey-lighter); + background: var(--border-color); } .content[data-placement*='top'] > .arrow { diff --git a/src/components/molecules/AssetTitle.module.css b/src/components/molecules/AssetTitle.module.css index a61e192e8..04e3dd386 100644 --- a/src/components/molecules/AssetTitle.module.css +++ b/src/components/molecules/AssetTitle.module.css @@ -6,10 +6,10 @@ .title a { font-size: var(--font-size-base); - color: var(--brand-black); + color: var(--font-color-heading); } .title a:hover, .title a:focus { - color: var(--brand-pink); + color: var(--color-primary); } diff --git a/src/components/molecules/FormFields/Datatoken/index.module.css b/src/components/molecules/FormFields/Datatoken/index.module.css index c7a28ce38..a2e87d61b 100644 --- a/src/components/molecules/FormFields/Datatoken/index.module.css +++ b/src/components/molecules/FormFields/Datatoken/index.module.css @@ -1,5 +1,5 @@ .datatoken { - border: 1px solid var(--brand-grey-lighter); + border: 1px solid var(--border-color); padding: calc(var(--spacer) / 3); border-radius: var(--border-radius); } diff --git a/src/components/molecules/FormFields/FilesInput/Info.module.css b/src/components/molecules/FormFields/FilesInput/Info.module.css index 5546ba117..4831bb2d7 100644 --- a/src/components/molecules/FormFields/FilesInput/Info.module.css +++ b/src/components/molecules/FormFields/FilesInput/Info.module.css @@ -1,8 +1,8 @@ .info { border-radius: var(--border-radius); padding: calc(var(--spacer) / 2); - border: 1px solid var(--brand-grey-lighter); - background-color: var(--brand-grey-dimmed); + border: 1px solid var(--border-color); + background-color: var(--background-highlight); position: relative; } @@ -35,6 +35,6 @@ right: 0; font-size: var(--font-size-h3); cursor: pointer; - color: var(--brand-grey); + color: var(--font-color-text); background-color: transparent; } diff --git a/src/components/molecules/FormFields/Terms.module.css b/src/components/molecules/FormFields/Terms.module.css index 23c9d01df..745e157e1 100644 --- a/src/components/molecules/FormFields/Terms.module.css +++ b/src/components/molecules/FormFields/Terms.module.css @@ -2,8 +2,8 @@ composes: content from '../../templates/PageMarkdown.module.css'; padding: calc(var(--spacer) / 2); - border: 1px solid var(--brand-grey-lighter); - background-color: var(--brand-grey-dimmed); + border: 1px solid var(--border-color); + background-color: var(--background-highlight); border-radius: var(--border-radius); margin-bottom: calc(var(--spacer) / 2); font-size: var(--font-size-small); diff --git a/src/components/molecules/Menu.module.css b/src/components/molecules/Menu.module.css index b117cc6ba..9f1880304 100644 --- a/src/components/molecules/Menu.module.css +++ b/src/components/molecules/Menu.module.css @@ -16,21 +16,10 @@ } .logoUnit svg { - fill: var(--color-primary); - width: 4rem; - height: 4rem; margin-left: -0.5rem; margin-right: 0.5rem; } -.logoUnit path { - fill: var(--brand-black); -} - -.logoUnit:hover path { - fill: var(--brand-pink); -} - .title { display: none; } @@ -73,7 +62,7 @@ display: block; padding: calc(var(--spacer) / 2); text-transform: uppercase; - color: var(--brand-grey-light); + color: var(--color-secondary); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); position: relative; @@ -95,7 +84,7 @@ .link[aria-current], .link[aria-current]:hover, .link[aria-current]:focus { - color: var(--brand-black); + color: var(--font-color-heading); } .link:last-child { diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx index 8bb1272ca..f257b5121 100644 --- a/src/components/molecules/Menu.tsx +++ b/src/components/molecules/Menu.tsx @@ -4,10 +4,10 @@ import { useLocation } from '@reach/router' import loadable from '@loadable/component' import styles from './Menu.module.css' import { useSiteMetadata } from '../../hooks/useSiteMetadata' -import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg' import Container from '../atoms/Container' import UserPreferences from './UserPreferences' import Badge from '../atoms/Badge' +import Logo from '../atoms/Logo' const Wallet = loadable(() => import('./Wallet')) diff --git a/src/components/molecules/Pagination.module.css b/src/components/molecules/Pagination.module.css index 47efdc81a..99662e2f1 100644 --- a/src/components/molecules/Pagination.module.css +++ b/src/components/molecules/Pagination.module.css @@ -15,7 +15,7 @@ margin-top: -1px; display: inline-block; cursor: pointer; - border: 1px solid var(--brand-grey-lighter); + border: 1px solid var(--border-color); min-width: 3.5rem; } diff --git a/src/components/molecules/UserPreferences/Theme.tsx b/src/components/molecules/UserPreferences/Theme.tsx new file mode 100644 index 000000000..039d4ddef --- /dev/null +++ b/src/components/molecules/UserPreferences/Theme.tsx @@ -0,0 +1,41 @@ +import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react' +import { DarkMode } from 'use-dark-mode' +import Input from '../../atoms/Input' + +const options = ['Light', 'Dark'] + +export default function Theme({ + darkMode +}: { + darkMode: DarkMode +}): ReactElement { + const initialValue = darkMode.value ? options[2] : options[1] + const [value, setValue] = useState(initialValue) + + useEffect(() => { + switch (value) { + case 'Light': + darkMode.disable() + return + case 'Dark': + darkMode.enable() + } + }, [value, darkMode]) + + return ( +
  • + ) => + setValue(e.target.value) + } + small + /> +
    • + ) +} diff --git a/src/components/molecules/UserPreferences/index.module.css b/src/components/molecules/UserPreferences/index.module.css index 781b45d25..dba596f4c 100644 --- a/src/components/molecules/UserPreferences/index.module.css +++ b/src/components/molecules/UserPreferences/index.module.css @@ -16,7 +16,7 @@ .preferences svg:last-child { width: 1em; height: 1em; - fill: var(--brand-grey-lighter); + fill: var(--border-color); margin-left: calc(var(--spacer) / 4); transition: transform 0.2s ease-out; } @@ -32,20 +32,26 @@ .preferences:focus .icon, .preferences:active .icon, .preferences[aria-expanded='true'] .icon { - fill: var(--brand-grey); + fill: var(--font-color-text); } .preferencesDetails { padding: calc(var(--spacer) / 2); } -.preferencesDetails li > div { - margin-bottom: 0; +.preferencesDetails li > div, +.preferencesDetails li p { + margin: 0; +} + +.preferencesDetails li p { + margin-top: calc(var(--spacer) / 8); } .preferencesDetails li { - border-bottom: 1px solid var(--brand-grey-lighter); - margin-bottom: calc(var(--spacer) / 2); + padding-top: calc(var(--spacer) / 2); + border-bottom: 1px solid var(--border-color); + padding-bottom: calc(var(--spacer) / 2); } .preferencesDetails li:last-child, diff --git a/src/components/molecules/UserPreferences/index.tsx b/src/components/molecules/UserPreferences/index.tsx index ed6923851..e16576bad 100644 --- a/src/components/molecules/UserPreferences/index.tsx +++ b/src/components/molecules/UserPreferences/index.tsx @@ -5,13 +5,20 @@ import styles from './index.module.css' import Currency from './Currency' import Debug from './Debug' import { ReactComponent as Caret } from '../../../images/caret.svg' +import useDarkMode from 'use-dark-mode' +import Theme from './Theme' +import { darkModeConfig } from '../../../../app.config' export default function UserPreferences(): ReactElement { + // Calling this here because is not mounted on first load + const darkMode = useDarkMode(false, darkModeConfig) + return ( + } diff --git a/src/components/molecules/Wallet/Account.module.css b/src/components/molecules/Wallet/Account.module.css index 0ee537bf4..38b11cc38 100644 --- a/src/components/molecules/Wallet/Account.module.css +++ b/src/components/molecules/Wallet/Account.module.css @@ -3,7 +3,7 @@ font-weight: var(--font-weight-bold); font-size: var(--font-size-small); text-transform: uppercase; - border: 1px solid var(--brand-grey-lighter); + border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: calc(var(--spacer) / 4); white-space: nowrap; @@ -15,18 +15,17 @@ .button, .address { - color: var(--brand-grey); + color: var(--font-color-text); } .button:hover, .button:focus { transform: none; outline: 0; - border-color: var(--brand-grey-light); } .button.initial { - color: var(--brand-pink); + color: var(--color-primary); } .blockies { @@ -41,14 +40,14 @@ .address { text-transform: none; - border-right: 1px solid var(--brand-grey-lighter); + border-right: 1px solid var(--border-color); padding-right: calc(var(--spacer) / 4); } .button svg { width: 1em; height: 1em; - fill: var(--brand-grey-lighter); + fill: var(--border-color); display: inline-block; vertical-align: middle; margin-left: calc(var(--spacer) / 4); diff --git a/src/components/molecules/Wallet/Details.module.css b/src/components/molecules/Wallet/Details.module.css index a80d30bfe..6998987d1 100644 --- a/src/components/molecules/Wallet/Details.module.css +++ b/src/components/molecules/Wallet/Details.module.css @@ -24,7 +24,7 @@ } .actions { - border-top: 1px solid var(--brand-grey-lighter); + border-top: 1px solid var(--border-color); margin-top: calc(var(--spacer) / 2); padding-top: calc(var(--spacer) / 2); display: flex; diff --git a/src/components/molecules/Wallet/Feedback.module.css b/src/components/molecules/Wallet/Feedback.module.css index 964c94b73..ce11665c6 100644 --- a/src/components/molecules/Wallet/Feedback.module.css +++ b/src/components/molecules/Wallet/Feedback.module.css @@ -3,7 +3,7 @@ padding-left: var(--spacer); padding-top: calc(var(--spacer) / 1.5); margin-top: var(--spacer); - border-top: 1px solid var(--brand-grey-lighter); + border-top: 1px solid var(--border-color); position: relative; width: 100%; } diff --git a/src/components/organisms/AssetActions/Compute.module.css b/src/components/organisms/AssetActions/Compute.module.css index 9aa24ed30..0dfc017df 100644 --- a/src/components/organisms/AssetActions/Compute.module.css +++ b/src/components/organisms/AssetActions/Compute.module.css @@ -3,7 +3,7 @@ align-items: center; width: auto; margin-bottom: var(--spacer); - border-bottom: 1px solid var(--brand-grey-lighter); + border-bottom: 1px solid var(--border-color); margin-top: -1rem; margin-left: -2rem; margin-right: -2rem; diff --git a/src/components/organisms/AssetActions/Pool/Actions.module.css b/src/components/organisms/AssetActions/Pool/Actions.module.css index 0ff65942f..eb71c2e5f 100644 --- a/src/components/organisms/AssetActions/Pool/Actions.module.css +++ b/src/components/organisms/AssetActions/Pool/Actions.module.css @@ -5,7 +5,7 @@ padding-right: var(--spacer); margin-top: calc(var(--spacer) / 4); padding-top: calc(var(--spacer) / 1.5); - border-top: 1px solid var(--brand-grey-lighter); + border-top: 1px solid var(--border-color); text-align: center; display: flex; justify-content: center; diff --git a/src/components/organisms/AssetActions/Pool/Add/index.module.css b/src/components/organisms/AssetActions/Pool/Add/index.module.css index 8d65015b2..1d0aa3df8 100644 --- a/src/components/organisms/AssetActions/Pool/Add/index.module.css +++ b/src/components/organisms/AssetActions/Pool/Add/index.module.css @@ -1,9 +1,9 @@ .addInput { margin: 0 auto calc(var(--spacer) / 1.5) auto; - background: var(--brand-grey-dimmed); + background: var(--background-highlight); padding: var(--spacer) calc(var(--spacer) * 2.5) calc(var(--spacer) * 1.2) calc(var(--spacer) * 2.5); - border-bottom: 1px solid var(--brand-grey-lighter); + border-bottom: 1px solid var(--border-color); margin-top: -2rem; margin-left: -2rem; margin-right: -2rem; diff --git a/src/components/organisms/AssetActions/Pool/CoinSelect.module.css b/src/components/organisms/AssetActions/Pool/CoinSelect.module.css index 2bdb18282..eef309e79 100644 --- a/src/components/organisms/AssetActions/Pool/CoinSelect.module.css +++ b/src/components/organisms/AssetActions/Pool/CoinSelect.module.css @@ -5,7 +5,7 @@ border: none; margin-left: -0.5rem; margin-right: -0.5rem; - background-color: var(--brand-grey-dimmed); + background-color: var(--background-highlight); width: auto; padding: 0 1.25rem 0 0.25rem; height: 41px; @@ -15,12 +15,12 @@ background-image: linear-gradient( 45deg, transparent 50%, - var(--brand-purple) 50% + var(--font-color-text) 50% ), - linear-gradient(135deg, var(--brand-grey) 50%, transparent 50%); + linear-gradient(135deg, var(--font-color-text) 50%, transparent 50%); background-position: calc(100% - 14px) 1.2rem, calc(100% - 9px) 1.2rem, 100% 0; } .option { - color: var(--brand-grey-dark); + color: var(--font-color-heading); } diff --git a/src/components/organisms/AssetActions/Pool/Header.module.css b/src/components/organisms/AssetActions/Pool/Header.module.css index c45bc9edc..a23bd412a 100644 --- a/src/components/organisms/AssetActions/Pool/Header.module.css +++ b/src/components/organisms/AssetActions/Pool/Header.module.css @@ -3,7 +3,7 @@ justify-content: center; margin-bottom: var(--spacer); padding-bottom: calc(var(--spacer) / 2); - border-bottom: 1px solid var(--brand-grey-lighter); + border-bottom: 1px solid var(--border-color); margin-top: -1rem; margin-left: -2rem; margin-right: -2rem; diff --git a/src/components/organisms/AssetActions/Pool/Token.module.css b/src/components/organisms/AssetActions/Pool/Token.module.css index 5ed46e562..53ab0165e 100644 --- a/src/components/organisms/AssetActions/Pool/Token.module.css +++ b/src/components/organisms/AssetActions/Pool/Token.module.css @@ -12,7 +12,7 @@ .icon { display: inline-block; - border: 1px solid var(--brand-grey-lighter); + border: 1px solid var(--border-color); border-radius: 50%; padding: 0.3rem; vertical-align: middle; diff --git a/src/components/organisms/AssetActions/Pool/TokenList.module.css b/src/components/organisms/AssetActions/Pool/TokenList.module.css index a52fccef1..c6cd80508 100644 --- a/src/components/organisms/AssetActions/Pool/TokenList.module.css +++ b/src/components/organisms/AssetActions/Pool/TokenList.module.css @@ -3,11 +3,11 @@ margin-right: -2rem; padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2) var(--spacer); - border-top: 1px solid var(--brand-grey-lighter); + border-top: 1px solid var(--border-color); } .tokenlist.highlight { - background: var(--brand-grey-dimmed); + background: var(--background-highlight); } .tokens { @@ -41,6 +41,6 @@ .totalLiquidity strong { font-size: var(--font-size-base); - color: var(--brand-grey-dark); + color: var(--font-color-heading); line-height: 1; } diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.module.css index 87c823108..66a33b2b6 100644 --- a/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.module.css +++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.module.css @@ -1,10 +1,10 @@ .coin { padding: var(--spacer) calc(var(--spacer) / 2); - border-top: 1px solid var(--brand-grey-lighter); + border-top: 1px solid var(--border-color); } .coin:last-child { - border-left: 1px solid var(--brand-grey-lighter); + border-left: 1px solid var(--border-color); } .icon { @@ -15,7 +15,7 @@ display: flex; align-items: center; justify-content: center; - border: 1px solid var(--brand-grey-lighter); + border: 1px solid var(--border-color); border-radius: 50%; background-color: var(--brand-white); margin-bottom: calc(var(--spacer) / 2); diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css index c04ac6ee3..ad3009fb7 100644 --- a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css +++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css @@ -12,7 +12,7 @@ .balance { text-align: center; font-size: var(--font-size-small) !important; - border: 1px solid var(--brand-grey-lighter); + border: 1px solid var(--border-color); border-right: 0; margin-right: -3px; height: 35px; @@ -39,7 +39,7 @@ margin-left: -2rem; margin-right: -2rem; - border-bottom: 1px solid var(--brand-grey-lighter); + border-bottom: 1px solid var(--border-color); background: var(--brand-grey-dimmed); } diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.module.css index b743c2582..8ac5167f2 100644 --- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.module.css +++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.module.css @@ -4,12 +4,12 @@ grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin-left: -2rem; margin-right: -2rem; - border-bottom: 1px solid var(--brand-grey-lighter); + border-bottom: 1px solid var(--border-color); padding: var(--spacer) var(--spacer) calc(var(--spacer) / 2) var(--spacer); justify-content: center; text-align: center; - border-bottom: 1px solid var(--brand-grey-lighter); + border-bottom: 1px solid var(--border-color); background: var(--brand-grey-dimmed); } diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css index b16d478d0..bff53ef6f 100644 --- a/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css +++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css @@ -14,8 +14,8 @@ margin-right: -2rem; padding-top: var(--spacer); background: var(--brand-grey-dimmed); - border-top: 1px solid var(--brand-grey-lighter); - border-bottom: 1px solid var(--brand-grey-lighter); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); } .grid { @@ -53,5 +53,5 @@ margin-top: -1rem; padding-top: calc(var(--spacer) / 3); padding-bottom: calc(var(--spacer) / 3); - border-top: 1px solid var(--brand-grey-lighter); + border-top: 1px solid var(--border-color); } diff --git a/src/components/pages/History/PoolShares.module.css b/src/components/pages/History/PoolShares.module.css index 8b57f2b92..cd9d72bc3 100644 --- a/src/components/pages/History/PoolShares.module.css +++ b/src/components/pages/History/PoolShares.module.css @@ -8,6 +8,6 @@ .totalLiquidity strong { font-size: var(--font-size-base); - color: var(--brand-grey-dark); + color: var(--font-color-text); line-height: 1; } diff --git a/src/global/_code.css b/src/global/_code.css index 0eb5aa623..40366ae23 100644 --- a/src/global/_code.css +++ b/src/global/_code.css @@ -1,7 +1,7 @@ code { font-family: var(--font-family-monospace); font-size: var(--font-size-small); - color: var(--brand-grey); + color: var(--font-color-text); text-shadow: none; } @@ -15,7 +15,7 @@ pre { display: block; margin: calc(var(--spacer) / 2) 0; padding: calc(var(--spacer) / 2); - background-color: var(--brand-grey-dimmed) !important; + background-color: var(--background-highlight) !important; border-radius: var(--border-radius); overflow: auto; -webkit-overflow-scrolling: touch; diff --git a/src/global/_toast.css b/src/global/_toast.css index a484fbe15..51e55a1a1 100644 --- a/src/global/_toast.css +++ b/src/global/_toast.css @@ -5,10 +5,10 @@ div.Toastify__toast { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); border-radius: var(--border-radius); - box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 6px 15px 0 var(--box-shadow-color); padding: calc(var(--spacer) / 2) var(--spacer); - background: var(--brand-white); - color: var(--brand-grey); + background: var(--background-body); + color: var(--font-color-text); } div.Toastify__toast--error { diff --git a/src/global/_variables.css b/src/global/_variables.css index e5cabdef1..1f4d53acf 100644 --- a/src/global/_variables.css +++ b/src/global/_variables.css @@ -5,6 +5,7 @@ --brand-purple: #7b1173; --brand-violet: #e000cf; + --brand-grey-darker: #201f1f; --brand-grey-dark: #303030; --brand-grey: #41474e; --brand-grey-light: #8b98a9; @@ -21,9 +22,18 @@ --color-primary: #ff4092; --color-secondary: #8b98a9; + /* Only use these vars for most color referencing for easy light/dark mode */ + --font-color-text: #41474e; + --font-color-heading: #141414; + --background-body: #fff; + --background-body-transparent: rgba(255, 255, 255, 0.8); + --background-highlight: #f7f7f7; + --border-color: #e2e2e2; + --box-shadow-color: rgba(0, 0, 0, 0.05); + --font-family-base: 'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; - --font-family-title: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont, + --font-family-heading: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, 'Courier New', monospace; @@ -56,3 +66,13 @@ --break-point--large: 1140px; --break-point--huge: 1400px; } + +.dark { + --font-color-text: #e2e2e2; + --font-color-heading: #f7f7f7; + --background-body: #141414; + --background-body-transparent: rgba(20, 20, 20, 0.9); + --background-highlight: #201f1f; + --border-color: #303030; + --box-shadow-color: rgba(0, 0, 0, 0.2); +} diff --git a/src/global/_web3modal.css b/src/global/_web3modal.css index 9e91802b5..05b35b126 100644 --- a/src/global/_web3modal.css +++ b/src/global/_web3modal.css @@ -1,5 +1,6 @@ -div.web3modal-modal-lightbox { - background: rgba(255, 255, 255, 0.8); +div.web3modal-modal-lightbox, +div.walletconnect-qrcode__base { + background: var(--background-body-transparent); backdrop-filter: blur(3px); overflow-x: hidden; overflow-y: auto; @@ -12,8 +13,8 @@ div.web3modal-modal-card { padding: var(--spacer); margin: var(--spacer) auto; max-width: var(--break-point--small); - border: 1px solid var(--brand-grey-lighter); - box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05); + border: 1px solid var(--border-color); + box-shadow: 0 6px 15px 0 var(--box-shadow-color); animation: moveUp 0.2s ease-out backwards; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } @@ -39,7 +40,7 @@ div.web3modal-provider-wrapper:hover div.web3modal-provider-icon { div.web3modal-provider-name { font-size: var(--font-size-large); font-weight: var(--font-weight-bold); - font-family: var(--font-family-title); + font-family: var(--font-family-heading); } div.web3modal-provider-description { diff --git a/src/global/styles.css b/src/global/styles.css index b372381f2..4d04b70e4 100644 --- a/src/global/styles.css +++ b/src/global/styles.css @@ -24,7 +24,7 @@ html { } */ body { - color: var(--brand-grey); + color: var(--font-color-text); font-size: var(--font-size-base); font-family: var(--font-family-base); font-weight: var(--font-weight-base); @@ -33,6 +33,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; + background: var(--background-body); } a { @@ -55,8 +56,8 @@ h2, h3, h4, h5 { - font-family: var(--font-family-title); - color: var(--brand-black); + font-family: var(--font-family-heading); + color: var(--font-color-heading); line-height: 1.2; font-weight: var(--font-weight-bold); margin-top: 0; @@ -145,7 +146,7 @@ table td { border: 0; margin: 0; padding: calc(var(--spacer) / 2); - border-bottom: 1px solid var(--brand-grey-lighter); + border-bottom: 1px solid var(--border-color); text-align: left; font-size: 90%; } diff --git a/src/images/logo.svg b/src/images/logo.svg index c5099c095..8464f77a3 100644 --- a/src/images/logo.svg +++ b/src/images/logo.svg @@ -1,26 +1,26 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/providers/UserPreferences.tsx b/src/providers/UserPreferences.tsx index 2a267c8f4..f03ab9720 100644 --- a/src/providers/UserPreferences.tsx +++ b/src/providers/UserPreferences.tsx @@ -9,7 +9,6 @@ import React, { import { Logger } from '@oceanprotocol/lib' import { LogLevel } from '@oceanprotocol/lib/dist/node/utils/Logger' import { useOcean } from '@oceanprotocol/react' -import { getNetworkName } from '../utils/wallet' import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper' interface UserPreferencesValue { diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts index 93060d26e..09a0ae791 100644 --- a/src/utils/wallet.ts +++ b/src/utils/wallet.ts @@ -3,11 +3,11 @@ import { infuraProjectId, network } from '../../app.config' // import Torus from '@toruslabs/torus-embed' const web3ModalTheme = { - background: 'var(--brand-white)', - main: 'var(--brand-black)', + background: 'var(--background-body)', + main: 'var(--font-color-heading)', secondary: 'var(--brand-grey-light)', - border: 'var(--brand-grey-lighter)', - hover: 'var(--brand-grey-dimmed)' + border: 'var(--border-color)', + hover: 'var(--background-highlight)' } const providerOptions = {