oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-11-16 02:04:54 +01:00
Code Releases Activity

init and replace global styles based on ocean's web site color palette

Browse Source
This commit is contained in:
maxieprotocol 2020-05-11 17:31:42 +02:00
parent ebd5ba9495
commit 7d0e33ea41
29 changed files with 128 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
package-lock.json generated
View File

@ -3037,6 +3037,11 @@
"whatwg-url": "^8.0.0" "whatwg-url": "^8.0.0"
} }
}, },
"@oceanprotocol/typographies": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@oceanprotocol/typographies/-/typographies-0.1.0.tgz",
"integrity": "sha512-kMsZsqvzpz9KzVbVZzllwhPoIC3zbqsdRrClagZL/C2PHzgLrKGC1kYn3gPt0RMIFg9ZjrwieKaxlgIK9i9zzg=="
},
"@reach/router": { "@reach/router": {
"version": "1.3.3", "version": "1.3.3",
"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.3.tgz", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.3.tgz",
@ -4321,7 +4326,7 @@
"resolved": "https://registry.npmjs.org/web3/-/web3-0.20.7.tgz", "resolved": "https://registry.npmjs.org/web3/-/web3-0.20.7.tgz",
"integrity": "sha512-VU6/DSUX93d1fCzBz7WP/SGCQizO1rKZi4Px9j/3yRyfssHyFcZamMw2/sj4E8TlfMXONvZLoforR8B4bRoyTQ==", "integrity": "sha512-VU6/DSUX93d1fCzBz7WP/SGCQizO1rKZi4Px9j/3yRyfssHyFcZamMw2/sj4E8TlfMXONvZLoforR8B4bRoyTQ==",
"requires": { "requires": {
"bignumber.js": "git+https://github.com/frozeman/bignumber.js-nolookahead.git", "bignumber.js": "git+https://github.com/frozeman/bignumber.js-nolookahead.git#57692b3ecfc98bbdd6b3a516cb2353652ea49934",
"crypto-js": "^3.1.4", "crypto-js": "^3.1.4",
"utf8": "^2.1.1", "utf8": "^2.1.1",
"xhr2-cookies": "^1.1.0", "xhr2-cookies": "^1.1.0",
@ -7885,8 +7890,7 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -7904,13 +7908,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -7923,18 +7925,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -8037,8 +8036,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.4", "version": "2.0.4",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -8048,7 +8046,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -8061,20 +8058,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.9.0", "version": "2.9.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -8091,7 +8085,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -8172,8 +8165,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -8183,7 +8175,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -8259,8 +8250,7 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -8290,7 +8280,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -8308,7 +8297,6 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -8347,13 +8335,11 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.1.1", "version": "3.1.1",
"bundled": true, "bundled": true
"optional": true
} }
} }
}, },
@ -10962,7 +10948,7 @@
"resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-1.4.2.tgz", "resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-1.4.2.tgz",
"integrity": "sha1-jZWCAsftuq6Dlwf7pvCf8ydgYhA=", "integrity": "sha1-jZWCAsftuq6Dlwf7pvCf8ydgYhA=",
"requires": { "requires": {
"ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git", "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#1cfbb13862f90f0b391d8a699544d5fe4dfb8c7b",
"ethereumjs-util": "^5.1.1" "ethereumjs-util": "^5.1.1"
}, },
"dependencies": { "dependencies": {
@ -15123,8 +15109,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -15145,14 +15130,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -15167,20 +15150,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -15297,8 +15277,7 @@
"inherits": { "inherits": {
"version": "2.0.4", "version": "2.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -15310,7 +15289,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -15325,7 +15303,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -15333,14 +15310,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.9.0", "version": "2.9.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -15359,7 +15334,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -15449,8 +15423,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -15462,7 +15435,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -15548,8 +15520,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -15585,7 +15556,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -15605,7 +15575,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -15649,14 +15618,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.1.1", "version": "3.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },

1
package.json
View File

@ -19,6 +19,7 @@
}, },
"dependencies": { "dependencies": {
"@oceanprotocol/squid": "2.0.0-beta.4", "@oceanprotocol/squid": "2.0.0-beta.4",
"@oceanprotocol/typographies": "^0.1.0",
"axios": "^0.19.2", "axios": "^0.19.2",
"date-fns": "^2.11.0", "date-fns": "^2.11.0",
"dotenv": "^8.2.0", "dotenv": "^8.2.0",

18
src/components/atoms/Alert.module.css
View File

@ -10,7 +10,7 @@
.alert, .alert,
.title { .title {
color: var(--color-white); color: var(--brand-white);
} }
.title { .title {
@ -25,21 +25,21 @@
/* States */ /* States */
.error { .error {
border-color: var(--color-danger); border-color: var(--red);
color: var(--color-danger); color: var(--red);
} }
.success { .success {
border-color: var(--color-success); border-color: var(--green);
color: var(--color-success); color: var(--green);
} }
.info { .info {
border-color: var(--color-info); border-color: var(--yellow);
color: var(--color-info); color: var(--yellow);
} }
.warning { .warning {
border-color: var(--color-warning); border-color: var(--orange);
color: var(--color-warning); color: var(--orange);
} }

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

@ -1,15 +1,15 @@
.box { .box {
background: var(--color-white); background: var(--brand-white);
padding: var(--spacer); padding: var(--spacer);
border-radius: var(--border-radius); border-radius: var(--border-radius);
border: 1px solid var(--color-grey-light); border: 1px solid var(--brand-grey-light);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
} }
a.box:hover, a.box:hover,
a.box:focus { a.box:focus {
outline: 0; outline: 0;
border-color: var(--color-grey); border-color: var(--brand-grey);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0);
} }

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

@ -11,22 +11,22 @@
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: 0.2s ease-out; transition: 0.2s ease-out;
color: var(--color-white); color: var(--brand-white);
background: var(--color-secondary); background: var(--color-secondary);
user-select: none; user-select: none;
} }
.button:hover, .button:hover,
.button:focus { .button:focus {
color: var(--color-dark); color: var(--brand-grey-dark);
background: transparent; background: transparent;
text-decoration: none; text-decoration: none;
} }
.button:active { .button:active {
color: var(--color-white); color: var(--brand-white);
background: var(--color-dark); background: var(--brand-grey-dark);
border-color: var(--color-dark); border-color: var(--brand-grey-dark);
transition: none; transition: none;
} }

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

@ -11,7 +11,7 @@
.file li { .file li {
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--color-white); color: var(--brand-white);
} }
.file li.empty { .file li.empty {

4
src/components/atoms/FormWidgets/TermsWidget.module.css
View File

@ -1,7 +1,7 @@
.terms { .terms {
padding: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2);
border: 1px solid var(--color-grey-light); border: 1px solid var(--brand-grey-light);
background-color: var(--color-grey-dimmed); background-color: var(--brand-grey-lighter);
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);

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

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

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

@ -1,13 +1,13 @@
.loaderWrap { .loaderWrap {
display: inline-block; display: inline-block;
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--color-grey); color: var(--brand-grey);
} }
.loader, .loader,
.loader:before, .loader:before,
.loader:after { .loader:after {
background: var(--color-grey); background: var(--brand-grey);
border-radius: var(--border-radius); border-radius: var(--border-radius);
animation: load1 0.7s infinite ease-in-out; animation: load1 0.7s infinite ease-in-out;
font-size: var(--font-size-base); font-size: var(--font-size-base);

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

@ -1,7 +1,7 @@
.price { .price {
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(--color-dark); color: var(--brand-grey-dark);
} }
.price span { .price span {

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

@ -28,7 +28,7 @@
.star svg { .star svg {
fill: none; fill: none;
stroke: var(--color-grey); stroke: var(--brand-grey);
} }
.full { .full {
@ -44,7 +44,7 @@
display: inline-block; display: inline-block;
font-size: var(--font-size-small); font-size: var(--font-size-small);
padding-left: 5px; padding-left: 5px;
color: var(--color-grey); color: var(--brand-grey);
} }
.readonly { .readonly {

6
src/components/atoms/Status.module.css
View File

@ -4,7 +4,7 @@
height: var(--font-size-small); height: var(--font-size-small);
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
background: var(--color-success); background: var(--green);
} }
/* yellow triangle */ /* yellow triangle */
@ -16,13 +16,13 @@
height: 0; height: 0;
border-left: calc(var(--font-size-small) / 1.7) solid transparent; border-left: calc(var(--font-size-small) / 1.7) solid transparent;
border-right: calc(var(--font-size-small) / 1.7) solid transparent; border-right: calc(var(--font-size-small) / 1.7) solid transparent;
border-bottom: var(--font-size-small) solid var(--color-warning); border-bottom: var(--font-size-small) solid var(--orange);
} }
/* red square */ /* red square */
.error { .error {
composes: status; composes: status;
border-radius: 0; border-radius: 0;
background: var(--color-danger); background: var(--red);
text-transform: capitalize; text-transform: capitalize;
} }

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

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

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

@ -7,7 +7,7 @@
composes: box from '../atoms/Box.module.css'; composes: box from '../atoms/Box.module.css';
font-size: var(--font-size-small); font-size: var(--font-size-small);
height: 100%; height: 100%;
color: var(--color-dark); color: var(--brand-grey-dark);
/* for sticking footer to bottom */ /* for sticking footer to bottom */
display: flex; display: flex;
@ -38,7 +38,7 @@
color: var(--color-secondary); color: var(--color-secondary);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
margin-top: calc(var(--spacer) / 1.5); margin-top: calc(var(--spacer) / 1.5);
border-top: 1px solid var(--color-grey-light); border-top: 1px solid var(--brand-grey-light);
padding-top: calc(var(--spacer) / 3); padding-top: calc(var(--spacer) / 3);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

14
src/components/molecules/Form/FieldTemplate.module.css
View File

@ -10,11 +10,11 @@
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
/* font-weight: var(--font-weight-bold); */ /* font-weight: var(--font-weight-bold); */
color: var(--color-dark); color: var(--brand-grey-dark);
border: 1px solid var(--color-grey-light); border: 1px solid var(--brand-grey-light);
box-shadow: none; box-shadow: none;
width: 100%; width: 100%;
background: var(--color-white); background: var(--brand-white);
padding: calc(var(--spacer) / 3); padding: calc(var(--spacer) / 3);
margin: 0; margin: 0;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -46,7 +46,7 @@
.input[disabled], .input[disabled],
.row input[readonly], .row input[readonly],
.row input[disabled] { .row input[disabled] {
background-color: var(--color-grey-light); background-color: var(--brand-grey-light);
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
@ -68,8 +68,8 @@
linear-gradient(135deg, var(--color-secondary) 50%, transparent 50%), linear-gradient(135deg, var(--color-secondary) 50%, transparent 50%),
linear-gradient( linear-gradient(
to right, to right,
var(--color-grey-light) 0px, var(--brand-grey-light) 0px,
var(--color-white) 1.5px var(--brand-white) 1.5px
); );
background-position: calc(100% - 18px) calc(1rem + 5px), background-position: calc(100% - 18px) calc(1rem + 5px),
calc(100% - 13px) calc(1rem + 5px), 100% 0; calc(100% - 13px) calc(1rem + 5px), 100% 0;
@ -87,7 +87,7 @@
} }
.row :global(.field-radio-group) { .row :global(.field-radio-group) {
border: 1px solid var(--color-grey-light); border: 1px solid var(--brand-grey-light);
padding: calc(var(--spacer) / 3); padding: calc(var(--spacer) / 3);
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }

2
src/components/molecules/Form/FileField/Info.module.css
View File

@ -1,7 +1,7 @@
.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(--color-grey-light); border: 1px solid var(--brand-grey-light);
} }
.url { .url {

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

@ -11,7 +11,7 @@
.link:hover, .link:hover,
.link:focus, .link:focus,
.link:active { .link:active {
color: var(--color-dark); color: var(--brand-grey-dark);
} }
.link.active { .link.active {

6
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(--color-grey-light); border: 1px solid var(--brand-grey-light);
min-width: 3.5rem; min-width: 3.5rem;
} }
@ -40,7 +40,7 @@ li:last-child .number {
.number:hover { .number:hover {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-white); color: var(--brand-white);
} }
.current, .current,
@ -59,7 +59,7 @@ li:last-child .number {
.current:hover, .current:hover,
.current:focus, .current:focus,
.current:active { .current:active {
color: var(--color-grey); color: var(--brand-grey);
} }
.next { .next {

6
src/components/molecules/PublishForm/PublishForm.module.css
View File

@ -1,9 +1,9 @@
.error { .error {
background-color: var(--color-danger); background-color: var(--red);
} }
.success { .success {
background-color: var(--color-success); background-color: var(--green);
} }
.info { .info {
background-color: var(--color-info); background-color: var(--yellow);
} }

6
src/components/molecules/SearchBar.module.css
View File

@ -13,15 +13,15 @@
margin-top: -1px; margin-top: -1px;
width: 100%; width: 100%;
border-width: 1px; border-width: 1px;
background-color: var(--color-grey-light); background-color: var(--brand-grey-light);
border-color: var(--color-grey-light); border-color: var(--brand-grey-light);
color: var(--color-secondary); color: var(--color-secondary);
} }
.inputGroup button:hover, .inputGroup button:hover,
.inputGroup button:focus, .inputGroup button:focus,
.inputGroup .input:focus + button { .inputGroup .input:focus + button {
color: var(--color-white); color: var(--brand-white);
} }
.inputGroup button:hover, .inputGroup button:hover,

2
src/components/organisms/Consume.module.css
View File

@ -38,5 +38,5 @@
width: 100%; width: 100%;
margin-top: calc(var(--spacer) / 1.5); margin-top: calc(var(--spacer) / 1.5);
padding-top: calc(var(--spacer) / 1.5); padding-top: calc(var(--spacer) / 1.5);
border-top: 1px solid var(--color-grey-light); border-top: 1px solid var(--brand-grey-light);
} }

4
src/components/organisms/Footer.module.css
View File

@ -1,6 +1,6 @@
.footer { .footer {
background-color: var(--color-dark); background-color: var(--brand-grey-dark);
color: var(--color-grey-light); color: var(--brand-grey-light);
font-size: var(--font-size-small); font-size: var(--font-size-small);
text-align: center; text-align: center;
} }

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

@ -1,5 +1,5 @@
.header { .header {
background-color: var(--color-white); background-color: var(--brand-white);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
} }

2
src/components/templates/AssetDetails/MetaFull.module.css
View File

@ -3,7 +3,7 @@
font-size: var(--font-size-small); font-size: var(--font-size-small);
padding: var(--spacer); padding: var(--spacer);
border-radius: var(--border-radius); border-radius: var(--border-radius);
border: 1px solid var(--color-grey-light); border: 1px solid var(--brand-grey-light);
display: grid; display: grid;
gap: var(--spacer); gap: var(--spacer);
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;

4
src/components/templates/AssetDetails/RatingAction.module.css
View File

@ -17,9 +17,9 @@
} }
.success { .success {
background-color: var(--color-success); background-color: var(--green);
} }
.error { .error {
background-color: var(--color-danger); background-color: var(--red);
} }

1
src/pages/_app.tsx
View File

@ -9,6 +9,7 @@ import { title, description, url } from '../../site.config'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
// this is the place to import global css // this is the place to import global css
import '@oceanprotocol/typographies/css/ocean-typo.css'
import 'react-toastify/dist/ReactToastify.css' import 'react-toastify/dist/ReactToastify.css'
import '../styles/global.css' import '../styles/global.css'
import '../components/atoms/NProgress.css' import '../components/atoms/NProgress.css'

46
src/styles/_variables.css
View File

@ -1,31 +1,42 @@
:root { :root {
--color-primary: #ca2935; --color-primary: #ffffff;
--color-secondary: #666; --color-secondary: #141414;
--color-dark: #333;
--color-grey: #bbb;
--color-grey-light: #ddd;
--color-grey-dimmed: #fafafa;
--color-white: #fff;
--color-success: #a5ce58; --brand-grey: #41474e;
--color-danger: #ca2935; --brand-grey-light: #8b98a9;
--color-warning: #fab32b; --brand-grey-dark: #303030;
--color-info: #3d5d7c; --brand-grey-lighter: #e2e2e2;
--font-family-base: 'Montserrat', -apple-system, BlinkMacSystemFont, --brand-white: #ffffff;
--brand-black: #141414;
--brand-pink: #ff4092;
--brand-purple: #7b1173;
--brand-violet: #e000cf;
--brand-blue: #11597b;
--green: #5fb359;
--red: #d80606;
--orange: #b35f36;
--yellow: #eac146;
--font-family-base: 'Sharp Sans', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif; 'Segoe UI', Helvetica, Arial, sans-serif;
--font-family-title: 'Montserrat', -apple-system, BlinkMacSystemFont, --font-family-title: '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;
--font-size-root: 15px; --font-size-root: 16px;
--font-size-base: 1rem; --font-size-base: 1rem;
--font-size-large: 1.2rem; --font-size-large: 1.2rem;
--font-size-small: 0.85rem; --font-size-small: 0.85rem;
--font-size-mini: 0.65rem; --font-size-mini: 0.65rem;
--font-size-h1: 2rem; --font-size-text: 1rem;
--font-size-label: 1rem;
--font-size-title: 1.4rem;
--font-size-h1: 3rem;
--font-size-h2: 1.7rem; --font-size-h2: 1.7rem;
--font-size-h3: 1.4rem; --font-size-h3: 1.4rem;
--font-size-h4: 1.2rem; --font-size-h4: 1.2rem;
@ -35,6 +46,11 @@
--font-weight-bold: 600; --font-weight-bold: 600;
--line-height: 1.6; --line-height: 1.6;
--break-point--small: 640px;
--break-point--medium: 860px;
--break-point--large: 1140px;
--break-point--huge: 1400px;
--spacer: 2rem; --spacer: 2rem;
--border-radius: 0.5rem; --border-radius: 0.5rem;

10
src/styles/datepicker.css
View File

@ -15,14 +15,14 @@
.react-datepicker__day-name, .react-datepicker__day-name,
.react-datepicker__day, .react-datepicker__day,
.react-datepicker__time-name { .react-datepicker__time-name {
color: var(--color-dark); color: var(--brand-grey-dark);
} }
.react-datepicker__current-month, .react-datepicker__current-month,
.react-datepicker-time__header, .react-datepicker-time__header,
.react-datepicker-year-header, .react-datepicker-year-header,
.react-datepicker__day-name { .react-datepicker__day-name {
color: var(--color-white); color: var(--brand-white);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
@ -49,7 +49,7 @@
.react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range { .react-datepicker__month-text--in-range {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-white); color: var(--brand-white);
border-radius: 50%; border-radius: 50%;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
@ -59,9 +59,9 @@
background-color: var(--color-primary); background-color: var(--color-primary);
border-radius: 50%; border-radius: 50%;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-white); color: var(--brand-white);
} }
.react-datepicker__day--outside-month { .react-datepicker__day--outside-month {
color: var(--color-grey); color: var(--brand-grey);
} }

6
src/styles/global.css
View File

@ -20,8 +20,8 @@ html {
} }
body { body {
background-color: var(--color-grey-dimmed); background-color: var(--brand-grey-lighter);
color: var(--color-dark); color: var(--brand-grey-dark);
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);
@ -50,7 +50,7 @@ h3,
h4, h4,
h5 { h5 {
font-family: var(--font-family-title); font-family: var(--font-family-title);
color: var(--color-dark); color: var(--brand-grey-dark);
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;