From 7d0e33ea41b3e7374b54c62b7e09e0a82be462b2 Mon Sep 17 00:00:00 2001 From: maxieprotocol Date: Mon, 11 May 2020 17:31:42 +0200 Subject: [PATCH] init and replace global styles based on ocean's web site color palette --- package-lock.json | 91 ++++++------------- package.json | 1 + src/components/atoms/Alert.module.css | 18 ++-- src/components/atoms/Box.module.css | 6 +- src/components/atoms/Button.module.css | 10 +- src/components/atoms/File.module.css | 2 +- .../atoms/FormWidgets/TermsWidget.module.css | 4 +- src/components/atoms/Lists.module.css | 4 +- src/components/atoms/Loader.module.css | 4 +- src/components/atoms/Price.module.css | 2 +- src/components/atoms/Rating.module.css | 4 +- src/components/atoms/Status.module.css | 6 +- src/components/atoms/Tags.module.css | 2 +- .../molecules/AssetTeaser.module.css | 4 +- .../molecules/Form/FieldTemplate.module.css | 14 +-- .../molecules/Form/FileField/Info.module.css | 2 +- src/components/molecules/Menu.module.css | 2 +- .../molecules/Pagination.module.css | 6 +- .../PublishForm/PublishForm.module.css | 6 +- src/components/molecules/SearchBar.module.css | 6 +- src/components/organisms/Consume.module.css | 2 +- src/components/organisms/Footer.module.css | 4 +- src/components/organisms/Header.module.css | 2 +- .../AssetDetails/MetaFull.module.css | 2 +- .../AssetDetails/RatingAction.module.css | 4 +- src/pages/_app.tsx | 1 + src/styles/_variables.css | 46 +++++++--- src/styles/datepicker.css | 10 +- src/styles/global.css | 6 +- 29 files changed, 128 insertions(+), 143 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b0a36b67..bc65bcdb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3037,6 +3037,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 +4326,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 +7890,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -7904,13 +7908,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 +7925,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 +8036,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -8048,7 +8046,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8061,20 +8058,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 +8085,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8172,8 +8165,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -8183,7 +8175,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -8259,8 +8250,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -8290,7 +8280,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 +8297,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8347,13 +8335,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 +10948,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 +15109,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -15145,14 +15130,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 +15150,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 +15277,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -15310,7 +15289,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -15325,7 +15303,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -15333,14 +15310,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 +15334,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -15449,8 +15423,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -15462,7 +15435,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -15548,8 +15520,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -15585,7 +15556,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 +15575,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -15649,14 +15618,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..4e633dff3 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@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/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..798737a4a 100644 --- a/src/components/atoms/Box.module.css +++ b/src/components/atoms/Box.module.css @@ -1,15 +1,15 @@ .box { - background: var(--color-white); + background: var(--brand-white); padding: var(--spacer); 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); } a.box:hover, a.box:focus { outline: 0; - border-color: var(--color-grey); + border-color: var(--brand-grey); 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..c1484d48e 100644 --- a/src/components/atoms/Button.module.css +++ b/src/components/atoms/Button.module.css @@ -11,22 +11,22 @@ font-weight: var(--font-weight-bold); border-radius: var(--border-radius); transition: 0.2s ease-out; - color: var(--color-white); + color: var(--brand-white); background: var(--color-secondary); user-select: none; } .button:hover, .button:focus { - color: var(--color-dark); + color: var(--brand-grey-dark); background: transparent; text-decoration: none; } .button:active { - color: var(--color-white); - background: var(--color-dark); - border-color: var(--color-dark); + color: var(--brand-white); + background: var(--brand-grey-dark); + border-color: var(--brand-grey-dark); transition: none; } 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/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..d441754fd 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: 1px solid var(--brand-grey-light); 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); @@ -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; } @@ -68,8 +68,8 @@ linear-gradient(135deg, var(--color-secondary) 50%, transparent 50%), linear-gradient( to right, - var(--color-grey-light) 0px, - var(--color-white) 1.5px + var(--brand-grey-light) 0px, + var(--brand-white) 1.5px ); background-position: calc(100% - 18px) calc(1rem + 5px), calc(100% - 13px) calc(1rem + 5px), 100% 0; @@ -87,7 +87,7 @@ } .row :global(.field-radio-group) { - border: 1px solid var(--color-grey-light); + border: 1px solid var(--brand-grey-light); 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..8207ae168 100644 --- a/src/components/molecules/Form/FileField/Info.module.css +++ b/src/components/molecules/Form/FileField/Info.module.css @@ -1,7 +1,7 @@ .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); } .url { diff --git a/src/components/molecules/Menu.module.css b/src/components/molecules/Menu.module.css index f2db9caca..3647ee6cc 100644 --- a/src/components/molecules/Menu.module.css +++ b/src/components/molecules/Menu.module.css @@ -11,7 +11,7 @@ .link:hover, .link:focus, .link:active { - color: var(--color-dark); + color: var(--brand-grey-dark); } .link.active { 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..c0c9d0115 100644 --- a/src/components/molecules/SearchBar.module.css +++ b/src/components/molecules/SearchBar.module.css @@ -13,15 +13,15 @@ margin-top: -1px; width: 100%; border-width: 1px; - background-color: var(--color-grey-light); - border-color: var(--color-grey-light); + background-color: var(--brand-grey-light); + border-color: var(--brand-grey-light); color: var(--color-secondary); } .inputGroup button:hover, .inputGroup button:focus, .inputGroup .input:focus + button { - color: var(--color-white); + color: var(--brand-white); } .inputGroup button:hover, 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..910c56986 100644 --- a/src/components/organisms/Footer.module.css +++ b/src/components/organisms/Footer.module.css @@ -1,6 +1,6 @@ .footer { - background-color: var(--color-dark); - color: var(--color-grey-light); + background-color: var(--brand-grey-dark); + 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..2e4bdf3ed 100644 --- a/src/components/organisms/Header.module.css +++ b/src/components/organisms/Header.module.css @@ -1,5 +1,5 @@ .header { - background-color: var(--color-white); + background-color: var(--brand-white); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); } 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/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/_variables.css b/src/styles/_variables.css index 41ca1646e..e56e9eea9 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -1,31 +1,42 @@ :root { - --color-primary: #ca2935; - --color-secondary: #666; - --color-dark: #333; - --color-grey: #bbb; - --color-grey-light: #ddd; - --color-grey-dimmed: #fafafa; - --color-white: #fff; + --color-primary: #ffffff; + --color-secondary: #141414; - --color-success: #a5ce58; - --color-danger: #ca2935; - --color-warning: #fab32b; - --color-info: #3d5d7c; + --brand-grey: #41474e; + --brand-grey-light: #8b98a9; + --brand-grey-dark: #303030; + --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; - --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,6 +46,11 @@ --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; 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..2be7cb075 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -20,8 +20,8 @@ html { } body { - background-color: var(--color-grey-dimmed); - color: var(--color-dark); + background-color: var(--brand-grey-lighter); + color: var(--brand-grey-dark); font-size: var(--font-size-base); font-family: var(--font-family-base); font-weight: var(--font-weight-base); @@ -50,7 +50,7 @@ h3, h4, h5 { font-family: var(--font-family-title); - color: var(--color-dark); + color: var(--brand-grey-dark); line-height: 1.2; font-weight: var(--font-weight-bold); margin-top: 0;