mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
Dark Mode (#182)
* refactor CSS custom properties for dark mode * dark mode style * dark mode switching * config tweaks
This commit is contained in:
GitHub
parent
2063f594f6
commit
cf3f406547
@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,6 +82,13 @@ module.exports = {
|
||||
defer: true,
|
||||
cookieDomain: 'oceanprotocol.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-use-dark-mode',
|
||||
options: {
|
||||
...appConfig.darkModeConfig,
|
||||
minify: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
31
package-lock.json
generated
31
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
.button:disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
background: var(--brand-grey-lighter);
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.primary,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.link {
|
||||
color: var(--brand-grey);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.link svg {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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'))
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
41
src/components/molecules/UserPreferences/Theme.tsx
Normal file
41
src/components/molecules/UserPreferences/Theme.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@ -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,
|
||||
|
||||
@ -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 <Theme /> is not mounted on first load
|
||||
const darkMode = useDarkMode(false, darkModeConfig)
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
content={
|
||||
<ul className={styles.preferencesDetails}>
|
||||
<Currency />
|
||||
<Theme darkMode={darkMode} />
|
||||
<Debug />
|
||||
</ul>
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
<svg width="394" height="399" viewBox="0 0 394 399" fill="none" 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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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"/>
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.2 KiB |
@ -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 {
|
||||
|
||||
@ -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 = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user