diff --git a/package-lock.json b/package-lock.json index 2b0a36b67..9978cd5d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3007,6 +3007,11 @@ "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==", "dev": true }, + "@oceanprotocol/art": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-2.2.0.tgz", + "integrity": "sha512-p2n505t2K0zD1ZvGPhI6EsSviEVLCB7BYowhf/ONmVaWED138PaG4Z9nY6YuHU383uOoIWT+Lq3dLkFzDzstXw==" + }, "@oceanprotocol/keeper-contracts": { "version": "0.13.2", "resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.13.2.tgz", @@ -3037,6 +3042,11 @@ "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": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.3.tgz", @@ -4321,7 +4331,7 @@ "resolved": "https://registry.npmjs.org/web3/-/web3-0.20.7.tgz", "integrity": "sha512-VU6/DSUX93d1fCzBz7WP/SGCQizO1rKZi4Px9j/3yRyfssHyFcZamMw2/sj4E8TlfMXONvZLoforR8B4bRoyTQ==", "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", "utf8": "^2.1.1", "xhr2-cookies": "^1.1.0", @@ -7885,8 +7895,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -7904,13 +7913,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7923,18 +7930,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -8037,8 +8041,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -8048,7 +8051,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8061,20 +8063,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -8091,7 +8090,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8172,8 +8170,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -8183,7 +8180,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -8259,8 +8255,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -8290,7 +8285,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8308,7 +8302,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8347,13 +8340,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -10962,7 +10953,7 @@ "resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-1.4.2.tgz", "integrity": "sha1-jZWCAsftuq6Dlwf7pvCf8ydgYhA=", "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" }, "dependencies": { @@ -15123,8 +15114,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -15145,14 +15135,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -15167,20 +15155,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -15297,8 +15282,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -15310,7 +15294,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -15325,7 +15308,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -15333,14 +15315,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -15359,7 +15339,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -15449,8 +15428,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -15462,7 +15440,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -15548,8 +15525,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -15585,7 +15561,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -15605,7 +15580,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -15649,14 +15623,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/package.json b/package.json index 2f73395d2..106b8bbe1 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,9 @@ "storybook:build": "build-storybook -c .storybook -o public/storybook" }, "dependencies": { + "@oceanprotocol/art": "^2.2.0", "@oceanprotocol/squid": "2.0.0-beta.4", + "@oceanprotocol/typographies": "^0.1.0", "axios": "^0.19.2", "date-fns": "^2.11.0", "dotenv": "^8.2.0", diff --git a/site.config.js b/site.config.js index 904e3d5e4..a58c79d46 100644 --- a/site.config.js +++ b/site.config.js @@ -1,9 +1,9 @@ module.exports = { - title: 'Logistics Data Marketplace', - description: `Easily buy and sell logistics data from around the world.`, + title: 'Data Marketplace', + description: `A marketplace to find and publish open data sets in the Ocean Network.`, url: 'https://dexfreight.oceanprotocol.com', copyright: - 'All Rights Reserved. Powered by [dexFreight](https://dexfreight.io) & [Ocean Protocol](https://oceanprotocol.com)', + 'All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)', refundPolicy: [ 'Data can be challenged within 2 days after purchase.', 'The marketplace decides if you are eligible for refund.' diff --git a/src/components/atoms/Alert.module.css b/src/components/atoms/Alert.module.css index 72fdb1ee5..0800bca3f 100644 --- a/src/components/atoms/Alert.module.css +++ b/src/components/atoms/Alert.module.css @@ -10,7 +10,7 @@ .alert, .title { - color: var(--color-white); + color: var(--brand-white); } .title { @@ -25,21 +25,21 @@ /* States */ .error { - border-color: var(--color-danger); - color: var(--color-danger); + border-color: var(--red); + color: var(--red); } .success { - border-color: var(--color-success); - color: var(--color-success); + border-color: var(--green); + color: var(--green); } .info { - border-color: var(--color-info); - color: var(--color-info); + border-color: var(--yellow); + color: var(--yellow); } .warning { - border-color: var(--color-warning); - color: var(--color-warning); + border-color: var(--orange); + color: var(--orange); } diff --git a/src/components/atoms/Box.module.css b/src/components/atoms/Box.module.css index 10c802c00..d9b08d2be 100644 --- a/src/components/atoms/Box.module.css +++ b/src/components/atoms/Box.module.css @@ -1,15 +1,14 @@ .box { - background: var(--color-white); + background: var(--brand-white); padding: var(--spacer); border-radius: var(--border-radius); - border: 1px solid var(--color-grey-light); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + border: 1px solid var(--brand-grey-light); } a.box:hover, a.box:focus { outline: 0; - border-color: var(--color-grey); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); - transform: translate3d(0, -2px, 0); + border-color: var(--brand-pink); + /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); */ + /* transform: translate3d(0, -2px, 0); */ } diff --git a/src/components/atoms/Button.module.css b/src/components/atoms/Button.module.css index 6dfb6935a..ee50599c3 100644 --- a/src/components/atoms/Button.module.css +++ b/src/components/atoms/Button.module.css @@ -1,33 +1,47 @@ .button { - border: 2px solid var(--color-secondary); + border: 0; cursor: pointer; outline: 0; margin: 0; display: inline-block; width: fit-content; - padding: calc(var(--spacer) / 5) var(--spacer); + padding: calc(var(--spacer) / 3) var(--spacer); font-size: var(--font-size-base); font-family: var(--font-family-base); font-weight: var(--font-weight-bold); + text-transform: uppercase; border-radius: var(--border-radius); transition: 0.2s ease-out; - color: var(--color-white); - background: var(--color-secondary); + color: var(--brand-white); + background: var(--brand-grey-light); + box-shadow: 0 9px 18px 0 rgba(0, 0, 0, 0.1); user-select: none; + margin-left: calc(var(--spacer) / 4); + margin-right: calc(var(--spacer) / 4); +} + +.button:first-child { + margin-left: 0; +} + +.button:last-child { + margin-right: 0; } .button:hover, .button:focus { - color: var(--color-dark); - background: transparent; + color: var(--brand-white); + background: var(--brand-grey-light); text-decoration: none; + transform: translate3d(0, -0.05rem, 0); + box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.1); } .button:active { - color: var(--color-white); - background: var(--color-dark); - border-color: var(--color-dark); + background: var(--brand-grey-light); transition: none; + transform: none; + box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.1); } .button:disabled { @@ -36,29 +50,35 @@ opacity: 0.5; } -.primary { - background: var(--color-primary); - border-color: var(--color-primary); -} - +.primary, .primary:hover, -.primary:focus { -} - +.primary:focus, .primary:active { + background: var(--brand-gradient); } .link { border: 0; outline: 0; display: inline-block; - width: fit-content; background: 0; padding: 0; - color: var(--color-primary); - font-size: var(--font-size-base); - font-weight: var(--font-weight-base); - font-family: inherit; + color: var(--brand-pink); box-shadow: none; cursor: pointer; } +.link:hover { + background: none; + color: var(--brand-pink); + box-shadow: none; +} + +/* Size Modifiers */ +.small { + font-size: var(--font-size-small); + padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2); +} + +.text.small { + padding: 0; +} diff --git a/src/components/atoms/File.module.css b/src/components/atoms/File.module.css index 717b32fd1..733b8fd6f 100644 --- a/src/components/atoms/File.module.css +++ b/src/components/atoms/File.module.css @@ -11,7 +11,7 @@ .file li { font-size: var(--font-size-small); - color: var(--color-white); + color: var(--brand-white); } .file li.empty { diff --git a/src/components/atoms/FormWidgets/TermsWidget.module.css b/src/components/atoms/FormWidgets/TermsWidget.module.css index 394bfc1f6..d677df623 100644 --- a/src/components/atoms/FormWidgets/TermsWidget.module.css +++ b/src/components/atoms/FormWidgets/TermsWidget.module.css @@ -1,7 +1,7 @@ .terms { padding: calc(var(--spacer) / 2); - border: 1px solid var(--color-grey-light); - background-color: var(--color-grey-dimmed); + border: 1px solid var(--brand-grey-light); + background-color: var(--brand-grey-lighter); border-radius: var(--border-radius); margin-bottom: calc(var(--spacer) / 2); font-size: var(--font-size-small); diff --git a/src/components/atoms/Lists.module.css b/src/components/atoms/Lists.module.css index 9a22bd908..87332dca2 100644 --- a/src/components/atoms/Lists.module.css +++ b/src/components/atoms/Lists.module.css @@ -1,12 +1,12 @@ .item { display: list-item; margin-top: calc(var(--spacer) / 8); - color: var(--color-grey); + color: var(--brand-grey); list-style-position: inside; } .item span { - color: var(--color-dark); + color: var(--brand-grey-dark); } .ulItem { diff --git a/src/components/atoms/Loader.module.css b/src/components/atoms/Loader.module.css index 2cfc8370a..6eb94c418 100644 --- a/src/components/atoms/Loader.module.css +++ b/src/components/atoms/Loader.module.css @@ -1,13 +1,13 @@ .loaderWrap { display: inline-block; font-size: var(--font-size-small); - color: var(--color-grey); + color: var(--brand-grey); } .loader, .loader:before, .loader:after { - background: var(--color-grey); + background: var(--brand-grey); border-radius: var(--border-radius); animation: load1 0.7s infinite ease-in-out; font-size: var(--font-size-base); diff --git a/src/components/atoms/Logo.module.css b/src/components/atoms/Logo.module.css new file mode 100644 index 000000000..c45215760 --- /dev/null +++ b/src/components/atoms/Logo.module.css @@ -0,0 +1,13 @@ +.logo { + width: 4rem; + height: 4rem; + margin: 0; +} + +.logo path { + fill: var(--brand-black); +} + +a > .logo:hover path { + fill: var(--brand-pink); +} diff --git a/src/components/atoms/Logo.tsx b/src/components/atoms/Logo.tsx new file mode 100644 index 000000000..4921bccdf --- /dev/null +++ b/src/components/atoms/Logo.tsx @@ -0,0 +1,7 @@ +import React, { ReactElement } from 'react' +import { ReactComponent as LogoAsset } from '@oceanprotocol/art/logo/logo.svg' +import styles from './Logo.module.css' + +export default function Logo(): ReactElement { + return +} diff --git a/src/components/atoms/Price.module.css b/src/components/atoms/Price.module.css index 3f29b798b..f8484e4b4 100644 --- a/src/components/atoms/Price.module.css +++ b/src/components/atoms/Price.module.css @@ -1,7 +1,7 @@ .price { font-weight: var(--font-weight-bold); font-size: var(--font-size-large); - color: var(--color-dark); + color: var(--brand-grey-dark); } .price span { diff --git a/src/components/atoms/Rating.module.css b/src/components/atoms/Rating.module.css index 80e4af360..eaa583f05 100644 --- a/src/components/atoms/Rating.module.css +++ b/src/components/atoms/Rating.module.css @@ -28,7 +28,7 @@ .star svg { fill: none; - stroke: var(--color-grey); + stroke: var(--brand-grey); } .full { @@ -44,7 +44,7 @@ display: inline-block; font-size: var(--font-size-small); padding-left: 5px; - color: var(--color-grey); + color: var(--brand-grey); } .readonly { diff --git a/src/components/atoms/Status.module.css b/src/components/atoms/Status.module.css index e2fbc0659..4fccb0308 100644 --- a/src/components/atoms/Status.module.css +++ b/src/components/atoms/Status.module.css @@ -4,7 +4,7 @@ height: var(--font-size-small); border-radius: 50%; display: inline-block; - background: var(--color-success); + background: var(--green); } /* yellow triangle */ @@ -16,13 +16,13 @@ height: 0; border-left: 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 */ .error { composes: status; border-radius: 0; - background: var(--color-danger); + background: var(--red); text-transform: capitalize; } diff --git a/src/components/atoms/Tags.module.css b/src/components/atoms/Tags.module.css index fff7b53cd..d60b604d7 100644 --- a/src/components/atoms/Tags.module.css +++ b/src/components/atoms/Tags.module.css @@ -14,7 +14,7 @@ margin-bottom: calc(var(--spacer) / 8); text-align: center; border-radius: var(--border-radius); - border: 1px solid var(--color-grey-light); + border: 1px solid var(--brand-grey-light); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/components/molecules/AssetTeaser.module.css b/src/components/molecules/AssetTeaser.module.css index cb0a6f849..592c3d62a 100644 --- a/src/components/molecules/AssetTeaser.module.css +++ b/src/components/molecules/AssetTeaser.module.css @@ -7,7 +7,7 @@ composes: box from '../atoms/Box.module.css'; font-size: var(--font-size-small); height: 100%; - color: var(--color-dark); + color: var(--brand-grey-dark); /* for sticking footer to bottom */ display: flex; @@ -38,7 +38,7 @@ color: var(--color-secondary); font-weight: var(--font-weight-bold); 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); display: flex; flex-wrap: wrap; diff --git a/src/components/molecules/Form/FieldTemplate.module.css b/src/components/molecules/Form/FieldTemplate.module.css index 19281391f..b72b202ae 100644 --- a/src/components/molecules/Form/FieldTemplate.module.css +++ b/src/components/molecules/Form/FieldTemplate.module.css @@ -10,11 +10,11 @@ font-family: var(--font-family-base); font-weight: var(--font-weight-bold); /* font-weight: var(--font-weight-bold); */ - color: var(--color-dark); - border: 1px solid var(--color-grey-light); + color: var(--brand-grey-dark); + border: 2px solid var(--brand-pink); box-shadow: none; width: 100%; - background: var(--color-white); + background: var(--brand-white); padding: calc(var(--spacer) / 3); margin: 0; border-radius: var(--border-radius); @@ -29,7 +29,7 @@ .row textarea:focus { box-shadow: none; outline: 0; - border-color: var(--color-secondary); + border-color: var(--brand-pink); } .input::placeholder, @@ -46,7 +46,7 @@ .input[disabled], .row input[readonly], .row input[disabled] { - background-color: var(--color-grey-light); + background-color: var(--brand-grey-light); cursor: not-allowed; pointer-events: none; } @@ -63,18 +63,15 @@ background-image: linear-gradient( 45deg, transparent 50%, - var(--color-secondary) 50% + var(--brand-pink) 50% ), - linear-gradient(135deg, var(--color-secondary) 50%, transparent 50%), - linear-gradient( - to right, - var(--color-grey-light) 0px, - var(--color-white) 1.5px - ); + linear-gradient(135deg, var(--brand-pink) 50%, transparent 50%), + linear-gradient(to right, var(--brand-pink) 0px, var(--brand-white) 2px); background-position: calc(100% - 18px) calc(1rem + 5px), calc(100% - 13px) calc(1rem + 5px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5rem 4rem; background-repeat: no-repeat; + cursor: pointer; } .checkbox label, @@ -87,7 +84,7 @@ } .row :global(.field-radio-group) { - border: 1px solid var(--color-grey-light); + border: 2px solid var(--brand-pink); padding: calc(var(--spacer) / 3); border-radius: var(--border-radius); } diff --git a/src/components/molecules/Form/FileField/Info.module.css b/src/components/molecules/Form/FileField/Info.module.css index d8dfb3a0a..02504842a 100644 --- a/src/components/molecules/Form/FileField/Info.module.css +++ b/src/components/molecules/Form/FileField/Info.module.css @@ -1,7 +1,8 @@ .info { border-radius: var(--border-radius); padding: calc(var(--spacer) / 2); - border: 1px solid var(--color-grey-light); + border: 1px solid var(--brand-grey-light); + background-color: var(--brand-grey-lighter); } .url { diff --git a/src/components/molecules/Menu.module.css b/src/components/molecules/Menu.module.css index f2db9caca..fa10aff2a 100644 --- a/src/components/molecules/Menu.module.css +++ b/src/components/molecules/Menu.module.css @@ -3,7 +3,7 @@ .link { display: inline-block; - color: var(--color-secondary); + color: var(--brand-grey); font-weight: var(--font-weight-bold); margin: calc(var(--spacer) / 4) var(--spacer); } @@ -11,11 +11,11 @@ .link:hover, .link:focus, .link:active { - color: var(--color-dark); + color: var(--brand-pink); } .link.active { - color: var(--color-primary); + color: var(--brand-pink); } .link:first-child { diff --git a/src/components/molecules/Pagination.module.css b/src/components/molecules/Pagination.module.css index ab468e6d1..3d33fb773 100644 --- a/src/components/molecules/Pagination.module.css +++ b/src/components/molecules/Pagination.module.css @@ -15,7 +15,7 @@ margin-top: -1px; display: inline-block; cursor: pointer; - border: 1px solid var(--color-grey-light); + border: 1px solid var(--brand-grey-light); min-width: 3.5rem; } @@ -40,7 +40,7 @@ li:last-child .number { .number:hover { background-color: var(--color-primary); - color: var(--color-white); + color: var(--brand-white); } .current, @@ -59,7 +59,7 @@ li:last-child .number { .current:hover, .current:focus, .current:active { - color: var(--color-grey); + color: var(--brand-grey); } .next { diff --git a/src/components/molecules/PublishForm/PublishForm.module.css b/src/components/molecules/PublishForm/PublishForm.module.css index 90d19d6c2..0cf2d6a1c 100644 --- a/src/components/molecules/PublishForm/PublishForm.module.css +++ b/src/components/molecules/PublishForm/PublishForm.module.css @@ -1,9 +1,9 @@ .error { - background-color: var(--color-danger); + background-color: var(--red); } .success { - background-color: var(--color-success); + background-color: var(--green); } .info { - background-color: var(--color-info); + background-color: var(--yellow); } diff --git a/src/components/molecules/SearchBar.module.css b/src/components/molecules/SearchBar.module.css index 3ad81a453..26cf4907e 100644 --- a/src/components/molecules/SearchBar.module.css +++ b/src/components/molecules/SearchBar.module.css @@ -13,30 +13,37 @@ margin-top: -1px; width: 100%; border-width: 1px; - background-color: var(--color-grey-light); - border-color: var(--color-grey-light); - color: var(--color-secondary); -} - -.inputGroup button:hover, -.inputGroup button:focus, -.inputGroup .input:focus + button { - color: var(--color-white); + text-transform: uppercase; + color: var(--brand-grey-lighter); + background: var(--brand-gradient); + box-shadow: none; } .inputGroup button:hover, .inputGroup button:focus, .inputGroup .input:focus + button:hover, .inputGroup .input:focus + button:focus { - background-color: var(--color-primary); - border-color: var(--color-primary); + background: var(--brand-gradient); + transform: none; + box-shadow: none; } .inputGroup .input:focus + button { - border-color: var(--color-secondary); - background-color: var(--color-secondary); + color: var(--brand-white); } +/* .inputGroup button:hover, +.inputGroup button:focus, +.inputGroup .input:focus + button { + color: var(--brand-white); + background-color: var(--brand-pink); +} + +.inputGroup .input:focus + button { + border-color: var(--brand-pink); + background-color: var(--brand-pink); +} */ + @media screen and (min-width: 30rem) { .inputGroup { display: flex; diff --git a/src/components/molecules/Web3Feedback/index.module.css b/src/components/molecules/Web3Feedback/index.module.css index 83309036d..788dd471f 100644 --- a/src/components/molecules/Web3Feedback/index.module.css +++ b/src/components/molecules/Web3Feedback/index.module.css @@ -10,6 +10,9 @@ .statuscontainer { flex-grow: 1; } +.statuscontainer h3 { + margin-top: 0; +} .walletcontainer { width: 35%; @@ -18,7 +21,7 @@ .feedback i { position: absolute; left: 0; - top: 2px; + top: 4px; } .title { diff --git a/src/components/organisms/Consume.module.css b/src/components/organisms/Consume.module.css index 06cde80a0..6bbd06cfc 100644 --- a/src/components/organisms/Consume.module.css +++ b/src/components/organisms/Consume.module.css @@ -38,5 +38,5 @@ width: 100%; margin-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); } diff --git a/src/components/organisms/Footer.module.css b/src/components/organisms/Footer.module.css index ccbd86385..6c551048e 100644 --- a/src/components/organisms/Footer.module.css +++ b/src/components/organisms/Footer.module.css @@ -1,6 +1,5 @@ .footer { - background-color: var(--color-dark); - color: var(--color-grey-light); + color: var(--brand-grey-light); font-size: var(--font-size-small); text-align: center; } diff --git a/src/components/organisms/Header.module.css b/src/components/organisms/Header.module.css index 7160df693..064018783 100644 --- a/src/components/organisms/Header.module.css +++ b/src/components/organisms/Header.module.css @@ -1,6 +1,5 @@ .header { - background-color: var(--color-white); - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); + background-color: var(--brand-white); } .content { @@ -20,11 +19,18 @@ .logoUnit svg { fill: var(--color-primary); - width: 70px; - height: 40px; + width: 4rem; + height: 4rem; margin-right: calc(var(--spacer) / 2); } +.logoUnit path { + fill: var(--brand-black); +} +.logoUnit:hover path { + fill: var(--brand-pink); +} + .title { display: none; } diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx index 7564e1de7..2bb1cf12c 100644 --- a/src/components/organisms/Header.tsx +++ b/src/components/organisms/Header.tsx @@ -3,7 +3,7 @@ import Link from 'next/link' import Menu from '../molecules/Menu' import styles from './Header.module.css' import { title } from '../../../site.config' -import Logo from '../../images/logo.svg' +import Logo from '@oceanprotocol/art/logo/logo.svg' export default function Header() { return ( diff --git a/src/components/templates/AssetDetails/MetaFull.module.css b/src/components/templates/AssetDetails/MetaFull.module.css index c8dcf8d5b..f9d8586d2 100644 --- a/src/components/templates/AssetDetails/MetaFull.module.css +++ b/src/components/templates/AssetDetails/MetaFull.module.css @@ -3,7 +3,7 @@ font-size: var(--font-size-small); padding: var(--spacer); border-radius: var(--border-radius); - border: 1px solid var(--color-grey-light); + border: 1px solid var(--brand-grey-light); display: grid; gap: var(--spacer); grid-template-columns: 1fr 1fr; diff --git a/src/components/templates/AssetDetails/RatingAction.module.css b/src/components/templates/AssetDetails/RatingAction.module.css index c0653c188..ad9918a1a 100644 --- a/src/components/templates/AssetDetails/RatingAction.module.css +++ b/src/components/templates/AssetDetails/RatingAction.module.css @@ -17,9 +17,9 @@ } .success { - background-color: var(--color-success); + background-color: var(--green); } .error { - background-color: var(--color-danger); + background-color: var(--red); } diff --git a/src/images/datapool.svg b/src/images/datapool.svg index 1e37480bc..769bd36fa 100644 --- a/src/images/datapool.svg +++ b/src/images/datapool.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/images/explore.svg b/src/images/explore.svg index ed2b9d9df..00b640c47 100644 --- a/src/images/explore.svg +++ b/src/images/explore.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/images/publish.svg b/src/images/publish.svg index 6d4d2f39e..09efdb039 100644 --- a/src/images/publish.svg +++ b/src/images/publish.svg @@ -1,10 +1,10 @@ - + - + diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 6b8e32844..115f8ff0e 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -9,6 +9,7 @@ import { title, description, url } from '../../site.config' import { toast } from 'react-toastify' // this is the place to import global css +import '@oceanprotocol/typographies/css/ocean-typo.css' import 'react-toastify/dist/ReactToastify.css' import '../styles/global.css' import '../components/atoms/NProgress.css' diff --git a/src/styles/_code.css b/src/styles/_code.css new file mode 100644 index 000000000..af5a0467c --- /dev/null +++ b/src/styles/_code.css @@ -0,0 +1,26 @@ +code { + font-family: var(--font-family-monospace); + font-size: var(--font-size-small); + color: var(--brand-grey-light); + text-shadow: none; +} + +:not(pre) > code { + display: inline-block; + padding-left: 0.3rem; + padding-right: 0.3rem; +} + +pre { + display: block; + margin: calc(var(--spacer) / 2) 0; + padding: 0; + border: 1px solid var(--brand-grey-dark); + border-radius: var(--border-radius); +} + +pre code { + padding: calc(var(--spacer) / 2); + display: block; + white-space: pre-wrap; +} diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 41ca1646e..6237a27df 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -1,31 +1,45 @@ :root { - --color-primary: #ca2935; - --color-secondary: #666; - --color-dark: #333; - --color-grey: #bbb; - --color-grey-light: #ddd; - --color-grey-dimmed: #fafafa; - --color-white: #fff; + --brand-grey: #41474e; + --brand-grey-light: #8b98a9; + --brand-grey-dark: #303030; + --brand-grey-lighter: #e2e2e2; - --color-success: #a5ce58; - --color-danger: #ca2935; - --color-warning: #fab32b; - --color-info: #3d5d7c; + --brand-white: #ffffff; + --brand-black: #141414; + --brand-pink: #ff4092; + --brand-purple: #7b1173; + --brand-violet: #e000cf; + --brand-blue: #11597b; - --font-family-base: 'Montserrat', -apple-system, BlinkMacSystemFont, + --brand-gradient: linear-gradient(to right bottom, #7b1173, #ff4092); + + --green: #5fb359; + --red: #d80606; + --orange: #b35f36; + --yellow: #eac146; + + /* Buttons */ + --color-primary: #ff4092; + --color-secondary: #8b98a9; + + --font-family-base: 'Sharp Sans', -apple-system, BlinkMacSystemFont, '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; --font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, 'Courier New', monospace; - --font-size-root: 15px; + --font-size-root: 16px; --font-size-base: 1rem; --font-size-large: 1.2rem; --font-size-small: 0.85rem; --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-h3: 1.4rem; --font-size-h4: 1.2rem; @@ -35,8 +49,13 @@ --font-weight-bold: 600; --line-height: 1.6; + --break-point--small: 640px; + --break-point--medium: 860px; + --break-point--large: 1140px; + --break-point--huge: 1400px; + --spacer: 2rem; - --border-radius: 0.5rem; + --border-radius: 0.2rem; --layout-max-width: 85rem; diff --git a/src/styles/datepicker.css b/src/styles/datepicker.css index 84ddee5a7..2b73dac9f 100644 --- a/src/styles/datepicker.css +++ b/src/styles/datepicker.css @@ -15,14 +15,14 @@ .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name { - color: var(--color-dark); + color: var(--brand-grey-dark); } .react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header, .react-datepicker__day-name { - color: var(--color-white); + color: var(--brand-white); font-weight: var(--font-weight-bold); } @@ -49,7 +49,7 @@ .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range { background-color: var(--color-primary); - color: var(--color-white); + color: var(--brand-white); border-radius: 50%; font-weight: var(--font-weight-bold); } @@ -59,9 +59,9 @@ background-color: var(--color-primary); border-radius: 50%; font-weight: var(--font-weight-bold); - color: var(--color-white); + color: var(--brand-white); } .react-datepicker__day--outside-month { - color: var(--color-grey); + color: var(--brand-grey); } diff --git a/src/styles/global.css b/src/styles/global.css index f4ce10c9e..a732a021c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -20,18 +20,20 @@ html { } body { - background-color: var(--color-grey-dimmed); - color: var(--color-dark); + color: var(--brand-grey); font-size: var(--font-size-base); font-family: var(--font-family-base); font-weight: var(--font-weight-base); line-height: var(--line-height); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: relative; } a { text-decoration: none; - color: var(--color-primary); + color: var(--brand-pink); transition: 0.2s ease-out; } @@ -50,10 +52,9 @@ h3, h4, h5 { font-family: var(--font-family-title); - color: var(--color-dark); + color: var(--brand-black); line-height: 1.2; font-weight: var(--font-weight-bold); - margin-top: 0; } h1 { @@ -99,19 +100,6 @@ ul li { display: block; } -code, -kbd, -pre, -samp { - font-family: var(--font-family-monospace); - font-size: var(--font-size-small); - color: var(--color-secondary); - text-shadow: none; - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-all; -} - form, fieldset { border: 0; @@ -129,5 +117,7 @@ input[type='checkbox'] { input[type='radio']:checked, input[type='checkbox']:checked { - background: var(--color-primary); + background: var(--brand-white); } + +@import '_code.css';