oceanprotocol
/
market
mirror of https://github.com/oceanprotocol/market.git
1
0
Fork 0
Code Releases Activity

Dark Mode (#182) 

* 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',
// 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'
}
}

7
gatsby-config.js
View File

@ -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
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": {
"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",

2
package.json
View File

@ -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": {

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

@ -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);
}

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

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

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

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

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

@ -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;

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

@ -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;
}

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

@ -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;
}

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

@ -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);
}

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

@ -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);
}

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

@ -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
src/components/atoms/Price/PriceUnit.module.css
View File

@ -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;
}

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

@ -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) {

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

@ -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 {

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

@ -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;

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

@ -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 {

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

@ -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);
}

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

@ -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);
}

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

@ -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;
}

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

@ -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);

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

@ -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 {

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

@ -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'))

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

@ -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
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 {
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,

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

@ -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>
}

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

@ -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);

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

@ -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;

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

@ -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%;
}

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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);
}

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

@ -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;

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

@ -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;

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

@ -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;
}

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

@ -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);

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

@ -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
src/components/organisms/AssetContent/Pricing/FormPricing/Fees.module.css
View File

@ -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);
}

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

@ -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);
}

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

@ -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;
}

4
src/global/_code.css
View File

@ -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;

6
src/global/_toast.css
View File

@ -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 {

22
src/global/_variables.css
View File

@ -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);
}

11
src/global/_web3modal.css
View File

@ -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 {

9
src/global/styles.css
View File

@ -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%;
}

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">
<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>

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 { 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 {

8
src/utils/wallet.ts
View File

@ -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 = {