oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

Dark Mode (#182)

Browse Source 
* refactor CSS custom properties for dark mode

* dark mode style

* dark mode switching

* config tweaks
This commit is contained in:
Matthias Kretschmann 2020-10-30 21:28:20 +01:00 committed by GitHub
parent 2063f594f6
commit cf3f406547
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 275 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app.config.js
View File

@ -11,5 +11,12 @@ module.exports = {
'0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7', '0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7',
// Used for conversion display, can be whatever coingecko API supports // Used for conversion display, can be whatever coingecko API supports
// see: https://api.coingecko.com/api/v3/simple/supported_vs_currencies // 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'
}
} }

7
gatsby-config.js
View File

@ -82,6 +82,13 @@ module.exports = {
defer: true, defer: true,
cookieDomain: 'oceanprotocol.com' cookieDomain: 'oceanprotocol.com'
} }
},
{
resolve: 'gatsby-plugin-use-dark-mode',
options: {
...appConfig.darkModeConfig,
minify: true
}
} }
] ]
} }

31
package-lock.json generated
View File

@ -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": { "@vercel/node": {
"version": "1.8.4", "version": "1.8.4",
"resolved": "https://registry.npmjs.org/@vercel/node/-/node-1.8.4.tgz", "resolved": "https://registry.npmjs.org/@vercel/node/-/node-1.8.4.tgz",
@ -17798,6 +17803,15 @@
"babel-plugin-remove-graphql-queries": "^2.9.20" "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": { "gatsby-plugin-utils": {
"version": "0.2.40", "version": "0.2.40",
"resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-0.2.40.tgz", "resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-0.2.40.tgz",
@ -33495,6 +33509,15 @@
"ts-essentials": "^2.0.3" "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": { "use-isomorphic-layout-effect": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.0.0.tgz", "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-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": { "utf-8-validate": {
"version": "5.0.2", "version": "5.0.2",
"resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.2.tgz", "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.2.tgz",

2
package.json
View File

@ -48,6 +48,7 @@
"gatsby-plugin-remove-trailing-slashes": "^2.3.13", "gatsby-plugin-remove-trailing-slashes": "^2.3.13",
"gatsby-plugin-sharp": "^2.6.43", "gatsby-plugin-sharp": "^2.6.43",
"gatsby-plugin-svgr": "^2.0.2", "gatsby-plugin-svgr": "^2.0.2",
"gatsby-plugin-use-dark-mode": "^1.1.2",
"gatsby-plugin-webpack-size": "^1.0.0", "gatsby-plugin-webpack-size": "^1.0.0",
"gatsby-source-filesystem": "^2.3.37", "gatsby-source-filesystem": "^2.3.37",
"gatsby-source-graphql": "^2.7.6", "gatsby-source-graphql": "^2.7.6",
@ -76,6 +77,7 @@
"shortid": "^2.2.16", "shortid": "^2.2.16",
"slugify": "^1.4.5", "slugify": "^1.4.5",
"swr": "^0.3.6", "swr": "^0.3.6",
"use-dark-mode": "^2.3.1",
"yup": "^0.29.3" "yup": "^0.29.3"
}, },
"devDependencies": { "devDependencies": {

8
src/components/atoms/Box.module.css
View File

@ -1,9 +1,9 @@
.box { .box {
display: block; display: block;
background: var(--brand-white); background: var(--background-body);
border-radius: var(--border-radius); border-radius: var(--border-radius);
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 6px 17px 0 var(--box-shadow-color);
overflow: hidden; overflow: hidden;
padding: var(--spacer); padding: var(--spacer);
} }
@ -12,5 +12,5 @@ a.box:hover,
a.box:focus { a.box:focus {
outline: 0; outline: 0;
transform: translate3d(0, -0.1rem, 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);
} }

2
src/components/atoms/Button.module.css
View File

@ -46,7 +46,7 @@
.button:disabled { .button:disabled {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
background: var(--brand-grey-lighter); opacity: 0.25;
} }
.primary, .primary,

2
src/components/atoms/EtherscanLink.module.css
View File

@ -1,5 +1,5 @@
.link { .link {
color: var(--brand-grey); color: inherit;
} }
.link svg { .link svg {

28
src/components/atoms/Input/InputElement.module.css
View File

@ -2,11 +2,11 @@
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--brand-black); color: var(--font-color-heading);
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
box-shadow: none; box-shadow: none;
width: 100%; width: 100%;
background: var(--brand-white); background: var(--background-body);
padding: calc(var(--spacer) / 3); padding: calc(var(--spacer) / 3);
margin: 0; margin: 0;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -18,7 +18,7 @@
} }
.input:focus { .input:focus {
border-color: var(--brand-grey); border-color: var(--font-color-text);
box-shadow: none; box-shadow: none;
outline: 0; outline: 0;
} }
@ -63,12 +63,12 @@
background-image: linear-gradient( background-image: linear-gradient(
45deg, 45deg,
transparent 50%, 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( linear-gradient(
to right, to right,
var(--brand-grey-lighter) 1px, var(--border-color) 1px,
transparent 1px, transparent 1px,
transparent transparent
); );
@ -96,7 +96,7 @@
padding: 0; padding: 0;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--brand-grey); color: var(--font-color-text);
padding-left: 0.5rem; padding-left: 0.5rem;
} }
@ -126,13 +126,13 @@
.radio:checked, .radio:checked,
.checkbox:checked { .checkbox:checked {
border-color: var(--brand-pink); border-color: var(--color-primary);
background: var(--brand-pink); background: var(--color-primary);
} }
.radio:focus, .radio:focus,
.checkbox:focus { .checkbox:focus {
box-shadow: 0 0 0 var(--brand-pink); box-shadow: 0 0 0 var(--color-primary);
} }
.radio:checked::after, .radio:checked::after,
@ -183,7 +183,7 @@
.prefix, .prefix,
.postfix { .postfix {
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
height: 43px; height: 43px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -222,7 +222,7 @@ input[type='range']::-webkit-slider-thumb,
input[type='range']::-moz-range-thumb { input[type='range']::-moz-range-thumb {
appearance: none; appearance: none;
background: var(--brand-gradient); background: var(--brand-gradient);
border: 2px solid var(--brand-grey-lighter); border: 2px solid var(--border-color);
width: var(--font-size-large); width: var(--font-size-large);
height: var(--font-size-large); height: var(--font-size-large);
border-radius: 50%; border-radius: 50%;
@ -232,7 +232,7 @@ input[type='range']::-moz-range-thumb {
input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-moz-range-track { input[type='range']::-moz-range-track {
background: var(--brand-grey-lighter); background: var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
height: 0.3rem; height: 0.3rem;
border: none; border: none;

6
src/components/atoms/Input/Label.module.css
View File

@ -1,7 +1,7 @@
.label { .label {
color: var(--brand-grey); color: var(--font-color-text);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-family: var(--font-family-title); font-family: var(--font-family-heading);
line-height: 1.2; line-height: 1.2;
display: block; display: block;
margin-bottom: calc(var(--spacer) / 4); margin-bottom: calc(var(--spacer) / 4);
@ -10,7 +10,7 @@
.required:after { .required:after {
content: '*'; content: '*';
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--brand-grey-light); color: var(--color-secondary);
display: inline-block; display: inline-block;
margin-left: 0.1rem; margin-left: 0.1rem;
} }

2
src/components/atoms/Lists.module.css
View File

@ -1,7 +1,7 @@
.item { .item {
display: list-item; display: list-item;
margin-top: calc(var(--spacer) / 8); margin-top: calc(var(--spacer) / 8);
color: var(--brand-grey); color: var(--font-color-text);
list-style-position: inside; list-style-position: inside;
} }

2
src/components/atoms/Loader.module.css
View File

@ -16,7 +16,7 @@
.message { .message {
font-weight: var(--font-weight-base); font-weight: var(--font-weight-base);
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--brand-grey-light); color: var(--color-secondary);
display: block; display: block;
margin-left: calc(var(--spacer) / 4); margin-left: calc(var(--spacer) / 4);
} }

4
src/components/atoms/Logo.module.css
View File

@ -5,9 +5,9 @@
} }
.logo path { .logo path {
fill: var(--brand-black); fill: var(--font-color-heading);
} }
a > .logo:hover path { a > .logo:hover path {
fill: var(--brand-pink); fill: var(--color-primary);
} }

4
src/components/atoms/Modal.module.css
View File

@ -9,7 +9,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(255, 255, 255, 0.8); background: var(--background-body-transparent);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -67,7 +67,7 @@
top: calc(var(--spacer) / 4); top: calc(var(--spacer) / 4);
right: calc(var(--spacer) / 2); right: calc(var(--spacer) / 2);
font-size: var(--font-size-h2); font-size: var(--font-size-h2);
color: var(--brand-grey); color: var(--font-color-text);
} }
.close:hover, .close:hover,

2
src/components/atoms/Price/PriceUnit.module.css
View File

@ -2,7 +2,7 @@
display: inline-block; display: inline-block;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
font-size: var(--font-size-large); font-size: var(--font-size-large);
color: var(--brand-grey-dark); color: var(--font-color-text);
line-height: 1.2; line-height: 1.2;
} }

25
src/components/atoms/Table.module.css
View File

@ -2,21 +2,38 @@
background-color: transparent !important; 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'] { .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'] { .table + div [class*='rdt_Pagination'] {
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--brand-grey-light); color: var(--color-secondary);
background: none;
} }
.table + div [class*='rdt_Pagination'] svg { .table + div [class*='rdt_Pagination'] svg {
fill: var(--brand-grey-light); fill: var(--color-secondary);
} }
.table + div [class*='rdt_Pagination'] [disabled] svg { .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) { .table + div [class*='rdt_Pagination'] button:hover:not(:disabled) {

8
src/components/atoms/Tabs.module.css
View File

@ -1,6 +1,6 @@
.tabList { .tabList {
text-align: center; 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-top: calc(var(--spacer) / 2);
padding-bottom: calc(var(--spacer) / 2); padding-bottom: calc(var(--spacer) / 2);
} }
@ -13,12 +13,12 @@
font-size: var(--font-size-small); font-size: var(--font-size-small);
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; cursor: pointer;
color: var(--brand-grey-light); color: var(--color-secondary);
} }
.tab[aria-selected='true'] { .tab[aria-selected='true'] {
background: var(--brand-black); background: var(--font-color-heading);
color: var(--brand-white); color: var(--background-body);
} }
.tabContent { .tabContent {

2
src/components/atoms/Tags.module.css
View File

@ -13,7 +13,7 @@
margin-bottom: calc(var(--spacer) / 4); margin-bottom: calc(var(--spacer) / 4);
text-align: center; text-align: center;
border-radius: var(--border-radius); border-radius: var(--border-radius);
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;

4
src/components/atoms/Tooltip.module.css
View File

@ -16,7 +16,7 @@
display: inline-block; display: inline-block;
margin-bottom: -0.1rem; margin-bottom: -0.1rem;
margin-left: calc(var(--spacer) / 6); margin-left: calc(var(--spacer) / 6);
fill: var(--brand-grey-light); fill: var(--color-secondary);
} }
.arrow, .arrow,
@ -30,7 +30,7 @@
.arrow::before { .arrow::before {
content: ''; content: '';
transform: rotate(45deg); transform: rotate(45deg);
background: var(--brand-grey-lighter); background: var(--border-color);
} }
.content[data-placement*='top'] > .arrow { .content[data-placement*='top'] > .arrow {

4
src/components/molecules/AssetTitle.module.css
View File

@ -6,10 +6,10 @@
.title a { .title a {
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--brand-black); color: var(--font-color-heading);
} }
.title a:hover, .title a:hover,
.title a:focus { .title a:focus {
color: var(--brand-pink); color: var(--color-primary);
} }

2
src/components/molecules/FormFields/Datatoken/index.module.css
View File

@ -1,5 +1,5 @@
.datatoken { .datatoken {
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
padding: calc(var(--spacer) / 3); padding: calc(var(--spacer) / 3);
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }

6
src/components/molecules/FormFields/FilesInput/Info.module.css
View File

@ -1,8 +1,8 @@
.info { .info {
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2);
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
background-color: var(--brand-grey-dimmed); background-color: var(--background-highlight);
position: relative; position: relative;
} }
@ -35,6 +35,6 @@
right: 0; right: 0;
font-size: var(--font-size-h3); font-size: var(--font-size-h3);
cursor: pointer; cursor: pointer;
color: var(--brand-grey); color: var(--font-color-text);
background-color: transparent; background-color: transparent;
} }

4
src/components/molecules/FormFields/Terms.module.css
View File

@ -2,8 +2,8 @@
composes: content from '../../templates/PageMarkdown.module.css'; composes: content from '../../templates/PageMarkdown.module.css';
padding: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2);
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
background-color: var(--brand-grey-dimmed); background-color: var(--background-highlight);
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin-bottom: calc(var(--spacer) / 2); margin-bottom: calc(var(--spacer) / 2);
font-size: var(--font-size-small); font-size: var(--font-size-small);

15
src/components/molecules/Menu.module.css
View File

@ -16,21 +16,10 @@
} }
.logoUnit svg { .logoUnit svg {
fill: var(--color-primary);
width: 4rem;
height: 4rem;
margin-left: -0.5rem; margin-left: -0.5rem;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.logoUnit path {
fill: var(--brand-black);
}
.logoUnit:hover path {
fill: var(--brand-pink);
}
.title { .title {
display: none; display: none;
} }
@ -73,7 +62,7 @@
display: block; display: block;
padding: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2);
text-transform: uppercase; text-transform: uppercase;
color: var(--brand-grey-light); color: var(--color-secondary);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
font-size: var(--font-size-base); font-size: var(--font-size-base);
position: relative; position: relative;
@ -95,7 +84,7 @@
.link[aria-current], .link[aria-current],
.link[aria-current]:hover, .link[aria-current]:hover,
.link[aria-current]:focus { .link[aria-current]:focus {
color: var(--brand-black); color: var(--font-color-heading);
} }
.link:last-child { .link:last-child {

2
src/components/molecules/Menu.tsx
View File

@ -4,10 +4,10 @@ import { useLocation } from '@reach/router'
import loadable from '@loadable/component' import loadable from '@loadable/component'
import styles from './Menu.module.css' import styles from './Menu.module.css'
import { useSiteMetadata } from '../../hooks/useSiteMetadata' import { useSiteMetadata } from '../../hooks/useSiteMetadata'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
import Container from '../atoms/Container' import Container from '../atoms/Container'
import UserPreferences from './UserPreferences' import UserPreferences from './UserPreferences'
import Badge from '../atoms/Badge' import Badge from '../atoms/Badge'
import Logo from '../atoms/Logo'
const Wallet = loadable(() => import('./Wallet')) const Wallet = loadable(() => import('./Wallet'))

2
src/components/molecules/Pagination.module.css
View File

@ -15,7 +15,7 @@
margin-top: -1px; margin-top: -1px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
min-width: 3.5rem; min-width: 3.5rem;
} }

41
src/components/molecules/UserPreferences/Theme.tsx Normal file
View File

@ -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 (
<li>
<Input
name="theme"
label="Theme"
help="Select your preferred theme."
type="select"
options={options}
value={value}
onChange={(e: ChangeEvent<HTMLSelectElement>) =>
setValue(e.target.value)
}
small
/>
</li>
)
}

18
src/components/molecules/UserPreferences/index.module.css
View File

@ -16,7 +16,7 @@
.preferences svg:last-child { .preferences svg:last-child {
width: 1em; width: 1em;
height: 1em; height: 1em;
fill: var(--brand-grey-lighter); fill: var(--border-color);
margin-left: calc(var(--spacer) / 4); margin-left: calc(var(--spacer) / 4);
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
} }
@ -32,20 +32,26 @@
.preferences:focus .icon, .preferences:focus .icon,
.preferences:active .icon, .preferences:active .icon,
.preferences[aria-expanded='true'] .icon { .preferences[aria-expanded='true'] .icon {
fill: var(--brand-grey); fill: var(--font-color-text);
} }
.preferencesDetails { .preferencesDetails {
padding: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2);
} }
.preferencesDetails li > div { .preferencesDetails li > div,
margin-bottom: 0; .preferencesDetails li p {
margin: 0;
}
.preferencesDetails li p {
margin-top: calc(var(--spacer) / 8);
} }
.preferencesDetails li { .preferencesDetails li {
border-bottom: 1px solid var(--brand-grey-lighter); padding-top: calc(var(--spacer) / 2);
margin-bottom: calc(var(--spacer) / 2); border-bottom: 1px solid var(--border-color);
padding-bottom: calc(var(--spacer) / 2);
} }
.preferencesDetails li:last-child, .preferencesDetails li:last-child,

7
src/components/molecules/UserPreferences/index.tsx
View File

@ -5,13 +5,20 @@ import styles from './index.module.css'
import Currency from './Currency' import Currency from './Currency'
import Debug from './Debug' import Debug from './Debug'
import { ReactComponent as Caret } from '../../../images/caret.svg' 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 { export default function UserPreferences(): ReactElement {
// Calling this here because <Theme /> is not mounted on first load
const darkMode = useDarkMode(false, darkModeConfig)
return ( return (
<Tooltip <Tooltip
content={ content={
<ul className={styles.preferencesDetails}> <ul className={styles.preferencesDetails}>
<Currency /> <Currency />
<Theme darkMode={darkMode} />
<Debug /> <Debug />
</ul> </ul>
} }

11
src/components/molecules/Wallet/Account.module.css
View File

@ -3,7 +3,7 @@
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
font-size: var(--font-size-small); font-size: var(--font-size-small);
text-transform: uppercase; text-transform: uppercase;
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: calc(var(--spacer) / 4); padding: calc(var(--spacer) / 4);
white-space: nowrap; white-space: nowrap;
@ -15,18 +15,17 @@
.button, .button,
.address { .address {
color: var(--brand-grey); color: var(--font-color-text);
} }
.button:hover, .button:hover,
.button:focus { .button:focus {
transform: none; transform: none;
outline: 0; outline: 0;
border-color: var(--brand-grey-light);
} }
.button.initial { .button.initial {
color: var(--brand-pink); color: var(--color-primary);
} }
.blockies { .blockies {
@ -41,14 +40,14 @@
.address { .address {
text-transform: none; text-transform: none;
border-right: 1px solid var(--brand-grey-lighter); border-right: 1px solid var(--border-color);
padding-right: calc(var(--spacer) / 4); padding-right: calc(var(--spacer) / 4);
} }
.button svg { .button svg {
width: 1em; width: 1em;
height: 1em; height: 1em;
fill: var(--brand-grey-lighter); fill: var(--border-color);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: calc(var(--spacer) / 4); margin-left: calc(var(--spacer) / 4);

2
src/components/molecules/Wallet/Details.module.css
View File

@ -24,7 +24,7 @@
} }
.actions { .actions {
border-top: 1px solid var(--brand-grey-lighter); border-top: 1px solid var(--border-color);
margin-top: calc(var(--spacer) / 2); margin-top: calc(var(--spacer) / 2);
padding-top: calc(var(--spacer) / 2); padding-top: calc(var(--spacer) / 2);
display: flex; display: flex;

2
src/components/molecules/Wallet/Feedback.module.css
View File

@ -3,7 +3,7 @@
padding-left: var(--spacer); padding-left: var(--spacer);
padding-top: calc(var(--spacer) / 1.5); padding-top: calc(var(--spacer) / 1.5);
margin-top: var(--spacer); margin-top: var(--spacer);
border-top: 1px solid var(--brand-grey-lighter); border-top: 1px solid var(--border-color);
position: relative; position: relative;
width: 100%; width: 100%;
} }

2
src/components/organisms/AssetActions/Compute.module.css
View File

@ -3,7 +3,7 @@
align-items: center; align-items: center;
width: auto; width: auto;
margin-bottom: var(--spacer); margin-bottom: var(--spacer);
border-bottom: 1px solid var(--brand-grey-lighter); border-bottom: 1px solid var(--border-color);
margin-top: -1rem; margin-top: -1rem;
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;

2
src/components/organisms/AssetActions/Pool/Actions.module.css
View File

@ -5,7 +5,7 @@
padding-right: var(--spacer); padding-right: var(--spacer);
margin-top: calc(var(--spacer) / 4); margin-top: calc(var(--spacer) / 4);
padding-top: calc(var(--spacer) / 1.5); 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; text-align: center;
display: flex; display: flex;
justify-content: center; justify-content: center;

4
src/components/organisms/AssetActions/Pool/Add/index.module.css
View File

@ -1,9 +1,9 @@
.addInput { .addInput {
margin: 0 auto calc(var(--spacer) / 1.5) auto; 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) padding: var(--spacer) calc(var(--spacer) * 2.5) calc(var(--spacer) * 1.2)
calc(var(--spacer) * 2.5); calc(var(--spacer) * 2.5);
border-bottom: 1px solid var(--brand-grey-lighter); border-bottom: 1px solid var(--border-color);
margin-top: -2rem; margin-top: -2rem;
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;

8
src/components/organisms/AssetActions/Pool/CoinSelect.module.css
View File

@ -5,7 +5,7 @@
border: none; border: none;
margin-left: -0.5rem; margin-left: -0.5rem;
margin-right: -0.5rem; margin-right: -0.5rem;
background-color: var(--brand-grey-dimmed); background-color: var(--background-highlight);
width: auto; width: auto;
padding: 0 1.25rem 0 0.25rem; padding: 0 1.25rem 0 0.25rem;
height: 41px; height: 41px;
@ -15,12 +15,12 @@
background-image: linear-gradient( background-image: linear-gradient(
45deg, 45deg,
transparent 50%, 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; background-position: calc(100% - 14px) 1.2rem, calc(100% - 9px) 1.2rem, 100% 0;
} }
.option { .option {
color: var(--brand-grey-dark); color: var(--font-color-heading);
} }

2
src/components/organisms/AssetActions/Pool/Header.module.css
View File

@ -3,7 +3,7 @@
justify-content: center; justify-content: center;
margin-bottom: var(--spacer); margin-bottom: var(--spacer);
padding-bottom: calc(var(--spacer) / 2); 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-top: -1rem;
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;

2
src/components/organisms/AssetActions/Pool/Token.module.css
View File

@ -12,7 +12,7 @@
.icon { .icon {
display: inline-block; display: inline-block;
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
border-radius: 50%; border-radius: 50%;
padding: 0.3rem; padding: 0.3rem;
vertical-align: middle; vertical-align: middle;

6
src/components/organisms/AssetActions/Pool/TokenList.module.css
View File

@ -3,11 +3,11 @@
margin-right: -2rem; margin-right: -2rem;
padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2) padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2)
var(--spacer); var(--spacer);
border-top: 1px solid var(--brand-grey-lighter); border-top: 1px solid var(--border-color);
} }
.tokenlist.highlight { .tokenlist.highlight {
background: var(--brand-grey-dimmed); background: var(--background-highlight);
} }
.tokens { .tokens {
@ -41,6 +41,6 @@
.totalLiquidity strong { .totalLiquidity strong {
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--brand-grey-dark); color: var(--font-color-heading);
line-height: 1; line-height: 1;
} }

6
src/components/organisms/AssetContent/Pricing/FormPricing/Coin.module.css
View File

@ -1,10 +1,10 @@
.coin { .coin {
padding: var(--spacer) calc(var(--spacer) / 2); 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 { .coin:last-child {
border-left: 1px solid var(--brand-grey-lighter); border-left: 1px solid var(--border-color);
} }
.icon { .icon {
@ -15,7 +15,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--brand-white); background-color: var(--brand-white);
margin-bottom: calc(var(--spacer) / 2); margin-bottom: calc(var(--spacer) / 2);

4
src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css
View File

@ -12,7 +12,7 @@
.balance { .balance {
text-align: center; text-align: center;
font-size: var(--font-size-small) !important; font-size: var(--font-size-small) !important;
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
border-right: 0; border-right: 0;
margin-right: -3px; margin-right: -3px;
height: 35px; height: 35px;
@ -39,7 +39,7 @@
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;
border-bottom: 1px solid var(--brand-grey-lighter); border-bottom: 1px solid var(--border-color);
background: var(--brand-grey-dimmed); background: var(--brand-grey-dimmed);
} }

4
src/components/organisms/AssetContent/Pricing/FormPricing/Fees.module.css
View File

@ -4,12 +4,12 @@
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
margin-left: -2rem; margin-left: -2rem;
margin-right: -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); padding: var(--spacer) var(--spacer) calc(var(--spacer) / 2) var(--spacer);
justify-content: center; justify-content: center;
text-align: center; text-align: center;
border-bottom: 1px solid var(--brand-grey-lighter); border-bottom: 1px solid var(--border-color);
background: var(--brand-grey-dimmed); background: var(--brand-grey-dimmed);
} }

6
src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css
View File

@ -14,8 +14,8 @@
margin-right: -2rem; margin-right: -2rem;
padding-top: var(--spacer); padding-top: var(--spacer);
background: var(--brand-grey-dimmed); background: var(--brand-grey-dimmed);
border-top: 1px solid var(--brand-grey-lighter); border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--brand-grey-lighter); border-bottom: 1px solid var(--border-color);
} }
.grid { .grid {
@ -53,5 +53,5 @@
margin-top: -1rem; margin-top: -1rem;
padding-top: calc(var(--spacer) / 3); padding-top: calc(var(--spacer) / 3);
padding-bottom: 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);
} }

2
src/components/pages/History/PoolShares.module.css
View File

@ -8,6 +8,6 @@
.totalLiquidity strong { .totalLiquidity strong {
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--brand-grey-dark); color: var(--font-color-text);
line-height: 1; line-height: 1;
} }

4
src/global/_code.css
View File

@ -1,7 +1,7 @@
code { code {
font-family: var(--font-family-monospace); font-family: var(--font-family-monospace);
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--brand-grey); color: var(--font-color-text);
text-shadow: none; text-shadow: none;
} }
@ -15,7 +15,7 @@ pre {
display: block; display: block;
margin: calc(var(--spacer) / 2) 0; margin: calc(var(--spacer) / 2) 0;
padding: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2);
background-color: var(--brand-grey-dimmed) !important; background-color: var(--background-highlight) !important;
border-radius: var(--border-radius); border-radius: var(--border-radius);
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

6
src/global/_toast.css
View File

@ -5,10 +5,10 @@ div.Toastify__toast {
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
border-radius: var(--border-radius); 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); padding: calc(var(--spacer) / 2) var(--spacer);
background: var(--brand-white); background: var(--background-body);
color: var(--brand-grey); color: var(--font-color-text);
} }
div.Toastify__toast--error { div.Toastify__toast--error {

22
src/global/_variables.css
View File

@ -5,6 +5,7 @@
--brand-purple: #7b1173; --brand-purple: #7b1173;
--brand-violet: #e000cf; --brand-violet: #e000cf;
--brand-grey-darker: #201f1f;
--brand-grey-dark: #303030; --brand-grey-dark: #303030;
--brand-grey: #41474e; --brand-grey: #41474e;
--brand-grey-light: #8b98a9; --brand-grey-light: #8b98a9;
@ -21,9 +22,18 @@
--color-primary: #ff4092; --color-primary: #ff4092;
--color-secondary: #8b98a9; --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, --font-family-base: 'Sharp Sans', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif; '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; 'Segoe UI', Helvetica, Arial, sans-serif;
--font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, --font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
'Courier New', monospace; 'Courier New', monospace;
@ -56,3 +66,13 @@
--break-point--large: 1140px; --break-point--large: 1140px;
--break-point--huge: 1400px; --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);
}

11
src/global/_web3modal.css
View File

@ -1,5 +1,6 @@
div.web3modal-modal-lightbox { div.web3modal-modal-lightbox,
background: rgba(255, 255, 255, 0.8); div.walletconnect-qrcode__base {
background: var(--background-body-transparent);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -12,8 +13,8 @@ div.web3modal-modal-card {
padding: var(--spacer); padding: var(--spacer);
margin: var(--spacer) auto; margin: var(--spacer) auto;
max-width: var(--break-point--small); max-width: var(--break-point--small);
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--border-color);
box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 6px 15px 0 var(--box-shadow-color);
animation: moveUp 0.2s ease-out backwards; animation: moveUp 0.2s ease-out backwards;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 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 { div.web3modal-provider-name {
font-size: var(--font-size-large); font-size: var(--font-size-large);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
font-family: var(--font-family-title); font-family: var(--font-family-heading);
} }
div.web3modal-provider-description { div.web3modal-provider-description {

9
src/global/styles.css
View File

@ -24,7 +24,7 @@ html {
} */ } */
body { body {
color: var(--brand-grey); color: var(--font-color-text);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-weight: var(--font-weight-base); font-weight: var(--font-weight-base);
@ -33,6 +33,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
position: relative; position: relative;
background: var(--background-body);
} }
a { a {
@ -55,8 +56,8 @@ h2,
h3, h3,
h4, h4,
h5 { h5 {
font-family: var(--font-family-title); font-family: var(--font-family-heading);
color: var(--brand-black); color: var(--font-color-heading);
line-height: 1.2; line-height: 1.2;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
margin-top: 0; margin-top: 0;
@ -145,7 +146,7 @@ table td {
border: 0; border: 0;
margin: 0; margin: 0;
padding: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2);
border-bottom: 1px solid var(--brand-grey-lighter); border-bottom: 1px solid var(--border-color);
text-align: left; text-align: left;
font-size: 90%; font-size: 90%;
} }

50
src/images/logo.svg
View File

@ -1,26 +1,26 @@
<svg width="394" height="399" viewBox="0 0 394 399" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="394" height="399" viewBox="0 0 394 399" xmlns="http://www.w3.org/2000/svg">
<path d="M196.742 57.2631C212.525 57.2631 225.33 44.4482 225.33 28.6321C225.33 12.82 212.525 0 196.742 0C180.944 0 168.139 12.82 168.139 28.6321C168.139 44.4482 180.944 57.2631 196.742 57.2631Z" fill="#141414"/> <path d="M196.742 57.2631C212.525 57.2631 225.33 44.4482 225.33 28.6321C225.33 12.82 212.525 0 196.742 0C180.944 0 168.139 12.82 168.139 28.6321C168.139 44.4482 180.944 57.2631 196.742 57.2631Z" />
<path d="M29.167 213.019C40.8609 213.019 50.3274 203.527 50.3274 191.826C50.3274 180.125 40.8609 170.644 29.167 170.644C17.4833 170.644 8.00663 180.125 8.00663 191.826C8.00663 203.527 17.4833 213.019 29.167 213.019Z" fill="#141414"/> <path d="M29.167 213.019C40.8609 213.019 50.3274 203.527 50.3274 191.826C50.3274 180.125 40.8609 170.644 29.167 170.644C17.4833 170.644 8.00663 180.125 8.00663 191.826C8.00663 203.527 17.4833 213.019 29.167 213.019Z" />
<path d="M365.451 213.019C377.129 213.019 386.606 203.527 386.606 191.826C386.606 180.125 377.129 170.644 365.451 170.644C353.762 170.644 344.285 180.125 344.285 191.826C344.285 203.527 353.762 213.019 365.451 213.019Z" fill="#141414"/> <path d="M365.451 213.019C377.129 213.019 386.606 203.527 386.606 191.826C386.606 180.125 377.129 170.644 365.451 170.644C353.762 170.644 344.285 180.125 344.285 191.826C344.285 203.527 353.762 213.019 365.451 213.019Z" />
<path d="M218.467 275.433C218.467 287.132 208.991 296.623 197.309 296.623C185.622 296.623 176.146 287.132 176.146 275.433C176.146 263.733 185.622 254.248 197.309 254.248C208.991 254.248 218.467 263.733 218.467 275.433Z" fill="#141414"/> <path d="M218.467 275.433C218.467 287.132 208.991 296.623 197.309 296.623C185.622 296.623 176.146 287.132 176.146 275.433C176.146 263.733 185.622 254.248 197.309 254.248C208.991 254.248 218.467 263.733 218.467 275.433Z" />
<path d="M112.662 255.393C124.355 255.393 133.825 245.902 133.825 234.206C133.825 222.5 124.355 213.019 112.662 213.019C100.975 213.019 91.5044 222.5 91.5044 234.206C91.5044 245.902 100.975 255.393 112.662 255.393Z" fill="#141414"/> <path d="M112.662 255.393C124.355 255.393 133.825 245.902 133.825 234.206C133.825 222.5 124.355 213.019 112.662 213.019C100.975 213.019 91.5044 222.5 91.5044 234.206C91.5044 245.902 100.975 255.393 112.662 255.393Z" />
<path d="M301.965 234.206C301.965 245.902 292.489 255.393 280.807 255.393C269.114 255.393 259.644 245.902 259.644 234.206C259.644 222.5 269.114 213.019 280.807 213.019C292.489 213.019 301.965 222.5 301.965 234.206Z" fill="#141414"/> <path d="M301.965 234.206C301.965 245.902 292.489 255.393 280.807 255.393C269.114 255.393 259.644 245.902 259.644 234.206C259.644 222.5 269.114 213.019 280.807 213.019C292.489 213.019 301.965 222.5 301.965 234.206Z" />
<path d="M29.1748 270.282C37.0689 270.282 43.4646 263.864 43.4646 255.971C43.4646 248.058 37.0689 241.65 29.1748 241.65C21.2703 241.65 14.8695 248.058 14.8695 255.971C14.8695 263.864 21.2703 270.282 29.1748 270.282Z" fill="#141414"/> <path d="M29.1748 270.282C37.0689 270.282 43.4646 263.864 43.4646 255.971C43.4646 248.058 37.0689 241.65 29.1748 241.65C21.2703 241.65 14.8695 248.058 14.8695 255.971C14.8695 263.864 21.2703 270.282 29.1748 270.282Z" />
<path d="M379.743 255.971C379.743 263.864 373.338 270.282 365.446 270.282C357.548 270.282 351.148 263.864 351.148 255.971C351.148 248.058 357.548 241.65 365.446 241.65C373.338 241.65 379.743 248.058 379.743 255.971Z" fill="#141414"/> <path d="M379.743 255.971C379.743 263.864 373.338 270.282 365.446 270.282C357.548 270.282 351.148 263.864 351.148 255.971C351.148 248.058 357.548 241.65 365.446 241.65C373.338 241.65 379.743 248.058 379.743 255.971Z" />
<path d="M197.312 355.031C205.196 355.031 211.604 348.613 211.604 340.705C211.604 332.802 205.196 326.4 197.312 326.4C189.422 326.4 183.009 332.802 183.009 340.705C183.009 348.613 189.422 355.031 197.312 355.031Z" fill="#141414"/> <path d="M197.312 355.031C205.196 355.031 211.604 348.613 211.604 340.705C211.604 332.802 205.196 326.4 197.312 326.4C189.422 326.4 183.009 332.802 183.009 340.705C183.009 348.613 189.422 355.031 197.312 355.031Z" />
<path d="M126.962 298.346C126.962 306.251 120.563 312.656 112.67 312.656C104.772 312.656 98.3672 306.251 98.3672 298.346C98.3672 290.435 104.772 284.025 112.67 284.025C120.563 284.025 126.962 290.435 126.962 298.346Z" fill="#141414"/> <path d="M126.962 298.346C126.962 306.251 120.563 312.656 112.67 312.656C104.772 312.656 98.3672 306.251 98.3672 298.346C98.3672 290.435 104.772 284.025 112.67 284.025C120.563 284.025 126.962 290.435 126.962 298.346Z" />
<path d="M280.812 312.656C288.693 312.656 295.102 306.251 295.102 298.346C295.102 290.435 288.693 284.025 280.812 284.025C272.91 284.025 266.507 290.435 266.507 298.346C266.507 306.251 272.91 312.656 280.812 312.656Z" fill="#141414"/> <path d="M280.812 312.656C288.693 312.656 295.102 306.251 295.102 298.346C295.102 290.435 288.693 284.025 280.812 284.025C272.91 284.025 266.507 290.435 266.507 298.346C266.507 306.251 272.91 312.656 280.812 312.656Z" />
<path d="M36.6018 306.35C36.6018 310.469 33.2752 313.802 29.1697 313.802C25.0588 313.802 21.7323 310.469 21.7323 306.35C21.7323 302.241 25.0588 298.913 29.1697 298.913C33.2752 298.913 36.6018 302.241 36.6018 306.35Z" fill="#141414"/> <path d="M36.6018 306.35C36.6018 310.469 33.2752 313.802 29.1697 313.802C25.0588 313.802 21.7323 310.469 21.7323 306.35C21.7323 302.241 25.0588 298.913 29.1697 298.913C33.2752 298.913 36.6018 302.241 36.6018 306.35Z" />
<path d="M365.448 313.802C369.546 313.802 372.88 310.469 372.88 306.35C372.88 302.241 369.546 298.913 365.448 298.913C361.335 298.913 358.011 302.241 358.011 306.35C358.011 310.469 361.335 313.802 365.448 313.802Z" fill="#141414"/> <path d="M365.448 313.802C369.546 313.802 372.88 310.469 372.88 306.35C372.88 302.241 369.546 298.913 365.448 298.913C361.335 298.913 358.011 302.241 358.011 306.35C358.011 310.469 361.335 313.802 365.448 313.802Z" />
<path d="M204.741 391.102C204.741 395.214 201.407 398.551 197.309 398.551C193.201 398.551 189.872 395.214 189.872 391.102C189.872 386.989 193.201 383.663 197.309 383.663C201.407 383.663 204.741 386.989 204.741 391.102Z" fill="#141414"/> <path d="M204.741 391.102C204.741 395.214 201.407 398.551 197.309 398.551C193.201 398.551 189.872 395.214 189.872 391.102C189.872 386.989 193.201 383.663 197.309 383.663C201.407 383.663 204.741 386.989 204.741 391.102Z" />
<path d="M112.662 356.176C116.768 356.176 120.1 352.839 120.1 348.732C120.1 344.615 116.768 341.288 112.662 341.288C108.562 341.288 105.23 344.615 105.23 348.732C105.23 352.839 108.562 356.176 112.662 356.176Z" fill="#141414"/> <path d="M112.662 356.176C116.768 356.176 120.1 352.839 120.1 348.732C120.1 344.615 116.768 341.288 112.662 341.288C108.562 341.288 105.23 344.615 105.23 348.732C105.23 352.839 108.562 356.176 112.662 356.176Z" />
<path d="M288.239 348.732C288.239 352.839 284.905 356.176 280.807 356.176C276.688 356.176 273.369 352.839 273.369 348.732C273.369 344.615 276.688 341.288 280.807 341.288C284.905 341.288 288.239 344.615 288.239 348.732Z" fill="#141414"/> <path d="M288.239 348.732C288.239 352.839 284.905 356.176 280.807 356.176C276.688 356.176 273.369 352.839 273.369 348.732C273.369 344.615 276.688 341.288 280.807 341.288C284.905 341.288 288.239 344.615 288.239 348.732Z" />
<path d="M225.33 113.381C225.33 129.195 212.525 142.012 196.742 142.012C180.944 142.012 168.139 129.195 168.139 113.381C168.139 97.572 180.944 84.7494 196.742 84.7494C212.525 84.7494 225.33 97.572 225.33 113.381Z" fill="#141414"/> <path d="M225.33 113.381C225.33 129.195 212.525 142.012 196.742 142.012C180.944 142.012 168.139 129.195 168.139 113.381C168.139 97.572 180.944 84.7494 196.742 84.7494C212.525 84.7494 225.33 97.572 225.33 113.381Z" />
<path d="M196.742 225.617C212.525 225.617 225.33 212.797 225.33 196.99C225.33 181.173 212.525 168.353 196.742 168.353C180.944 168.353 168.139 181.173 168.139 196.99C168.139 212.797 180.944 225.617 196.742 225.617Z" fill="#141414"/> <path d="M196.742 225.617C212.525 225.617 225.33 212.797 225.33 196.99C225.33 181.173 212.525 168.353 196.742 168.353C180.944 168.353 168.139 181.173 168.139 196.99C168.139 212.797 180.944 225.617 196.742 225.617Z" />
<path d="M393.469 113.381C393.469 129.195 380.667 142.012 364.876 142.012C349.081 142.012 336.279 129.195 336.279 113.381C336.279 97.572 349.081 84.7494 364.876 84.7494C380.667 84.7494 393.469 97.572 393.469 113.381Z" fill="#141414"/> <path d="M393.469 113.381C393.469 129.195 380.667 142.012 364.876 142.012C349.081 142.012 336.279 129.195 336.279 113.381C336.279 97.572 349.081 84.7494 364.876 84.7494C380.667 84.7494 393.469 97.572 393.469 113.381Z" />
<path d="M28.5977 142.012C44.3907 142.012 57.1903 129.195 57.1903 113.381C57.1903 97.572 44.3907 84.7494 28.5977 84.7494C12.8046 84.7494 0 97.572 0 113.381C0 129.195 12.8046 142.012 28.5977 142.012Z" fill="#141414"/> <path d="M28.5977 142.012C44.3907 142.012 57.1903 129.195 57.1903 113.381C57.1903 97.572 44.3907 84.7494 28.5977 84.7494C12.8046 84.7494 0 97.572 0 113.381C0 129.195 12.8046 142.012 28.5977 142.012Z" />
<path d="M141.832 71.0062C141.832 86.818 129.031 99.6378 113.237 99.6378C97.4422 99.6378 84.6416 86.818 84.6416 71.0062C84.6416 55.1842 97.4422 42.3747 113.237 42.3747C129.031 42.3747 141.832 55.1842 141.832 71.0062Z" fill="#141414"/> <path d="M141.832 71.0062C141.832 86.818 129.031 99.6378 113.237 99.6378C97.4422 99.6378 84.6416 86.818 84.6416 71.0062C84.6416 55.1842 97.4422 42.3747 113.237 42.3747C129.031 42.3747 141.832 55.1842 141.832 71.0062Z" />
<path d="M113.237 183.242C129.031 183.242 141.832 170.421 141.832 154.608C141.832 138.8 129.031 125.979 113.237 125.979C97.4422 125.979 84.6416 138.8 84.6416 154.608C84.6416 170.421 97.4422 183.242 113.237 183.242Z" fill="#141414"/> <path d="M113.237 183.242C129.031 183.242 141.832 170.421 141.832 154.608C141.832 138.8 129.031 125.979 113.237 125.979C97.4422 125.979 84.6416 138.8 84.6416 154.608C84.6416 170.421 97.4422 183.242 113.237 183.242Z" />
<path d="M309.971 71.0062C309.971 86.818 297.167 99.6378 281.373 99.6378C265.58 99.6378 252.781 86.818 252.781 71.0062C252.781 55.1842 265.58 42.3747 281.373 42.3747C297.167 42.3747 309.971 55.1842 309.971 71.0062Z" fill="#141414"/> <path d="M309.971 71.0062C309.971 86.818 297.167 99.6378 281.373 99.6378C265.58 99.6378 252.781 86.818 252.781 71.0062C252.781 55.1842 265.58 42.3747 281.373 42.3747C297.167 42.3747 309.971 55.1842 309.971 71.0062Z" />
<path d="M281.373 183.242C297.167 183.242 309.971 170.421 309.971 154.608C309.971 138.8 297.167 125.979 281.373 125.979C265.58 125.979 252.781 138.8 252.781 154.608C252.781 170.421 265.58 183.242 281.373 183.242Z" fill="#141414"/> <path d="M281.373 183.242C297.167 183.242 309.971 170.421 309.971 154.608C309.971 138.8 297.167 125.979 281.373 125.979C265.58 125.979 252.781 138.8 252.781 154.608C252.781 170.421 265.58 183.242 281.373 183.242Z" />
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

1
src/providers/UserPreferences.tsx
View File

@ -9,7 +9,6 @@ import React, {
import { Logger } from '@oceanprotocol/lib' import { Logger } from '@oceanprotocol/lib'
import { LogLevel } from '@oceanprotocol/lib/dist/node/utils/Logger' import { LogLevel } from '@oceanprotocol/lib/dist/node/utils/Logger'
import { useOcean } from '@oceanprotocol/react' import { useOcean } from '@oceanprotocol/react'
import { getNetworkName } from '../utils/wallet'
import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper' import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
interface UserPreferencesValue { interface UserPreferencesValue {

8
src/utils/wallet.ts
View File

@ -3,11 +3,11 @@ import { infuraProjectId, network } from '../../app.config'
// import Torus from '@toruslabs/torus-embed' // import Torus from '@toruslabs/torus-embed'
const web3ModalTheme = { const web3ModalTheme = {
background: 'var(--brand-white)', background: 'var(--background-body)',
main: 'var(--brand-black)', main: 'var(--font-color-heading)',
secondary: 'var(--brand-grey-light)', secondary: 'var(--brand-grey-light)',
border: 'var(--brand-grey-lighter)', border: 'var(--border-color)',
hover: 'var(--brand-grey-dimmed)' hover: 'var(--background-highlight)'
} }
const providerOptions = { const providerOptions = {