oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +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"
}
},
"@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
}
}
},

1
package.json
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -17,9 +17,9 @@
}
.success {
background-color: var(--color-success);
background-color: var(--green);
}
.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'
// 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'

46
src/styles/_variables.css
View File

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

10
src/styles/datepicker.css
View File

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

6
src/styles/global.css
View File

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