diff --git a/src/assets/logo.svg b/src/assets/logo.svg index 2aae527..53ce962 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,68 +1,109 @@ - - - + + + diff --git a/src/assets/white/arrow.svg b/src/assets/white/arrow.svg new file mode 100644 index 0000000..be8d6f6 --- /dev/null +++ b/src/assets/white/arrow.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/components/addButton/style.scss b/src/components/addButton/style.scss index 2c63667..8bca6a0 100644 --- a/src/components/addButton/style.scss +++ b/src/components/addButton/style.scss @@ -20,6 +20,6 @@ } img { - opacity: .6; + opacity: .8; } } diff --git a/src/components/editLink/index.js b/src/components/editLink/index.js index 44d0a70..7d672d1 100644 --- a/src/components/editLink/index.js +++ b/src/components/editLink/index.js @@ -8,13 +8,12 @@ export default class EditLink extends Component { render() { return ( - Edit {this.props.type} mode_edit + Edit mode_edit ); } } EditLink.propTypes = { - type: PropTypes.string.isRequired, to: PropTypes.string.isRequired, }; diff --git a/src/components/editLink/style.scss b/src/components/editLink/style.scss index 2e33248..a1a1855 100644 --- a/src/components/editLink/style.scss +++ b/src/components/editLink/style.scss @@ -1,11 +1,17 @@ .edit { align-items: center; - color: var(--main-color); + background: var(--main-color); + border: 0; + color: var(--main-bg-color); display: flex; float: right; + font-size: 12px; font-weight: 700; + margin: 0 0 10px 5px; + padding: 2.5px 2px 2.5px 7px; text-align: right; text-decoration: none; + text-transform: uppercase; i { font-size: .98em; diff --git a/src/components/footer/style.scss b/src/components/footer/style.scss index ba9abcd..08bd78d 100644 --- a/src/components/footer/style.scss +++ b/src/components/footer/style.scss @@ -24,6 +24,6 @@ } .active { - color: var(--main-blue); + color: var(--main-purple); } } diff --git a/src/components/formItem/style.scss b/src/components/formItem/style.scss index 25f5889..ebbdb23 100644 --- a/src/components/formItem/style.scss +++ b/src/components/formItem/style.scss @@ -1,30 +1,91 @@ .customFormfieldWrap { - border-bottom: .5px solid var(--main-color); - border-top: .5px solid var(--main-color); + background: var(--main-light-color); + // border-bottom: .5px solid var(--main-color); + // border-top: .5px solid var(--main-color); + border: 0; display: flex; flex-direction: column; margin: 10px 0; padding: 14px 16px; label { - color: var(--main-color); + color: var(--main-blue); font-size: 16px; font-weight: 700; margin: 5px 0 4px; } -} -.select { - background: var(--input-color); - border: 1px solid var(--main-color); - border-radius: 0; - font-size: 15px; - margin-bottom: 5px; - padding: 10px 5px; + select { + background: var(--input-color); + // border: 1px solid var(--main-color); + border: 0; + border-radius: 0; + display: inline-block; + font-size: 15px; + line-height: 1.5em; + padding: 0.5em 3.5em 0.5em 1em; + margin-top: 5px; + margin-bottom: 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + } + + .select { + background-image: + linear-gradient(45deg, transparent 50%, var(--main-color) 50%), + linear-gradient(135deg, var(--main-color) 50%, transparent 50%), + linear-gradient(to right, var(--main-color), var(--main-color)); + background-position: + calc(100% - 20px) calc(1em + 2px), + calc(100% - 15px) calc(1em + 2px), + calc(100% - 2.5em) 0.5em; + background-size: + 5px 5px, + 5px 5px, + 1px 1.5em; + background-repeat: no-repeat; + } + + .select:focus { + background-image: + linear-gradient(45deg, var(--main-color) 50%, transparent 50%), + linear-gradient(135deg, transparent 50%, var(--main-color) 50%), + linear-gradient(to right, var(--main-color), var(--main-color)); + background-position: + calc(100% - 15px) 1em, + calc(100% - 20px) 1em, + calc(100% - 2.5em) 0.5em; + background-size: + 5px 5px, + 5px 5px, + 1px 1.5em; + background-repeat: no-repeat; + border-color: var(--main-color); + outline: 0; + } + + select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 var(--main-color); + } } +// .select { +// background: var(--input-color); +// // border: 1px solid var(--main-color); +// border: 0; +// border-radius: 0; +// font-size: 15px; +// margin-bottom: 5px; +// padding: 10px 5px; +// } + .addedInputField { - border: 1px solid var(--main-color); + // border: 1px solid var(--main-color); + border: 0; border-radius: 0; font-size: 15px; margin-top: 0; diff --git a/src/components/header/index.js b/src/components/header/index.js index e2fcbdc..94a3aba 100644 --- a/src/components/header/index.js +++ b/src/components/header/index.js @@ -3,7 +3,7 @@ import { Link } from 'preact-router/match'; import { PropTypes } from 'preact-compat'; import style from './style'; -import arrow from '../../assets/black/arrow.svg'; +import arrow from '../../assets/white/arrow.svg'; export default class Header extends Component { render() { diff --git a/src/components/item/index.js b/src/components/item/index.js index 763be5b..1b2f975 100644 --- a/src/components/item/index.js +++ b/src/components/item/index.js @@ -5,7 +5,7 @@ import { Link } from 'preact-router/match'; import style from './style'; // Import images -import mediaIcon from '../../assets/black/media.png'; +import mediaIcon from '../../assets/black/media.svg'; import measurementIcon from '../../assets/black/measurements.svg'; function defineImgSrc(details) { diff --git a/src/components/item/style.scss b/src/components/item/style.scss index 53b4307..5d52719 100644 --- a/src/components/item/style.scss +++ b/src/components/item/style.scss @@ -1,7 +1,7 @@ .itemLinkWrap { align-items: center; - background-color: var(--main-bg-color); - border: .5px solid var(--main-color); + background-color: var(--main-light-color); + border: 0; display: flex; height: 50px; margin: 2.5px 0; @@ -12,12 +12,13 @@ .icon { display: inline-block; opacity: .6; - padding: 0 15px 0 10px; + padding: 0 25px 0 10px; } .date { display: inline-block; font-size: 13px; + font-weight: 700; width: 30%; } @@ -38,10 +39,12 @@ } .uploadStatText { + color: var(--main-blue); font-size: 13px; } .uploadStat { - font-size: 13px; + color: var(--main-blue); + font-size: 15px; padding: 0 7.5px; } diff --git a/src/components/license/index.js b/src/components/license/index.js new file mode 100644 index 0000000..e10678c --- /dev/null +++ b/src/components/license/index.js @@ -0,0 +1,15 @@ +import { Component } from 'preact'; +import style from './style'; + +export default class LicenseInfo extends Component { + render() { + return ( +
+ The code of this project is licensed under the terms of the GNU AGPLv3 license. + More info. +
+add item
{this.state.count > 0 && ( )} diff --git a/src/routes/add/style.scss b/src/routes/add/style.scss index fa8b1b9..e8a63ee 100644 --- a/src/routes/add/style.scss +++ b/src/routes/add/style.scss @@ -1,6 +1,6 @@ .mainInputs { - background: var(--main-bg-color); - border-bottom: 1px solid var(--main-color); + background: var(--main-light-color); + // border-bottom: 1px solid var(--main-color); padding: 16px; } @@ -29,8 +29,9 @@ } .customFormfieldWrap { - border-bottom: .5px solid var(--main-color); - border-top: .5px solid var(--main-color); + background: var(--main-light-color); + // border-bottom: .5px solid var(--main-color); + // border-top: .5px solid var(--main-color); display: flex; flex-direction: column; margin: 10px 0; @@ -142,17 +143,17 @@ } .submit { - background: var(--main-bg-color); + background: var(--main-color); border: 1px solid var(--main-color); border-radius: 0; - color: var(--main-color); - font-size: 16px; + color: var(--main-light-color); + font-size: 15px; font-weight: 700; left: 50%; margin-bottom: 16px; margin-top: 10px; outline: 0; - padding: 20px; + padding: 10px; position: relative; text-transform: uppercase; transform: translateX(-50%); diff --git a/src/routes/addMedia/index.js b/src/routes/addMedia/index.js index 9ce364b..1190031 100644 --- a/src/routes/addMedia/index.js +++ b/src/routes/addMedia/index.js @@ -242,7 +242,7 @@ export default class AddMedia extends Component {add media
{this.state.count > 0 && ( )} diff --git a/src/routes/addMedia/style.scss b/src/routes/addMedia/style.scss index c9748c2..2448c8d 100644 --- a/src/routes/addMedia/style.scss +++ b/src/routes/addMedia/style.scss @@ -1,15 +1,17 @@ .mainInputs { - background: var(--main-bg-color); - border-bottom: 1px solid var(--main-color); + background: var(--main-light-color); + // border-bottom: 1px solid var(--main-color); + border: 0; padding: 16px; } .uploadButton { align-items: center; - background: var(--main-bg-color); - border: 1px solid var(--main-color); + background: var(--main-purple); + // border: 1px solid var(--main-color); + border: 0; border-radius: 50%; - color: var(--main-color); + color: var(--main-light-color); display: flex; font-size: 50px; font-weight: 400; @@ -48,13 +50,15 @@ margin-top: 15px; label { + color: var(--main-blue); font-size: 16px; font-weight: 700; } select { - background: var(--main-bg-color); - border: 1px solid var(--main-color); + background: var(--input-color); + // border: 1px solid var(--main-color); + border: 0; border-radius: 0; display: inline-block; font-size: 15px; @@ -128,7 +132,8 @@ .uploadedImage { background: var(--main-color); - border: 1px solid var(--main-color); + // border: 1px solid var(--main-color); + border: 0; display: inline-block; height: calc(50vw - 18.5px); outline: 0; @@ -137,13 +142,13 @@ .remove { align-items: center; - background: var(--main-color); + background: var(--main-purple); border: 0; border-radius: 50%; color: var(--main-bg-color); display: flex; - font-size: 30px; - height: 40px; + font-size: 15px; + height: 30px; justify-content: center; margin: 0; outline: 0; @@ -151,7 +156,7 @@ position: absolute; right: 5px; top: 5px; - width: 40px; + width: 30px; .icon { color: var(--main-bg-color); @@ -167,17 +172,17 @@ } .submit { - background: var(--main-bg-color); + background: var(--main-color); border: 1px solid var(--main-color); border-radius: 0; - color: var(--main-color); - font-size: 16px; + color: var(--main-light-color); + font-size: 15px; font-weight: 700; left: 50%; margin-bottom: 16px; margin-top: 10px; outline: 0; - padding: 20px; + padding: 10px; position: relative; text-transform: uppercase; transform: translateX(-50%); @@ -190,8 +195,9 @@ button { align-items: center; - background: none; - border: 1px solid var(--main-color); + background: var(--input-color); + // border: 1px solid var(--main-color); + border: 0; border-radius: 0; color: var(--main-color); display: flex; @@ -207,7 +213,7 @@ } label { - color: var(--main-color); + color: var(--main-blue); font-size: 16px; font-weight: 700; padding: 0; diff --git a/src/routes/createAccount/index.js b/src/routes/createAccount/index.js index 51b5f88..a922561 100644 --- a/src/routes/createAccount/index.js +++ b/src/routes/createAccount/index.js @@ -4,6 +4,7 @@ import { Link } from 'preact-router/match'; import InputGroup from '../../components/inputGroup/'; import logo from '../../assets/logo.svg'; +import LicenseInfo from '../../components/license/'; import style from './style'; @@ -28,7 +29,7 @@ export default class CreateAccount extends Component { render() { return (