status-im
/
discover-dapps
mirror of https://github.com/status-im/discover-dapps.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

More tweaks (#8) 

* fix: icons should have 12px top padding

* fix: medium font weight for category labels

* fix: 2px and 500 font weight for dapp title

* fix: 2px bottom margin for dapp description

* style: added fallback image for dapps

* style: added colors to category selector
This commit is contained in:
James Gareth Smith 2019-04-01 15:11:31 +02:00 committed by GitHub
parent 888c18985c
commit a56bd77143
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 81 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@ -5999,6 +5999,14 @@
}
}
},
"filter-invalid-dom-props": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/filter-invalid-dom-props/-/filter-invalid-dom-props-1.0.0.tgz",
"integrity": "sha1-RNDQMGZXslhOBPcdQoIp67mGfKE=",
"requires": {
"html-attributes": "1.1.0"
}
},
"finalhandler": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
@ -7538,6 +7546,11 @@
"resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
"integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg="
},
"html-attributes": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/html-attributes/-/html-attributes-1.1.0.tgz",
"integrity": "sha1-ggJ6T6x6YHDqbBjMOIauoY1t6gk="
},
"html-comment-regex": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
@ -14191,6 +14204,15 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.4.tgz",
"integrity": "sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg=="
},
"react-image-fallback": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/react-image-fallback/-/react-image-fallback-8.0.0.tgz",
"integrity": "sha512-vvlxApJU7/mVl/1PYZTYROHZsG8cBxhHWj4JqkjN/ZAyf5srdAdIW0fg25jz5CYhGbKRJyv1WRrkNiy5FOA7kw==",
"requires": {
"filter-invalid-dom-props": "1.0.0",
"prop-types": "^15.5.10"
}
},
"react-is": {
"version": "16.8.4",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz",

1
package.json
View File

@ -11,6 +11,7 @@
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-image-fallback": "^8.0.0",
"react-redux": "^6.0.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",

15
src/common/assets/images/icon.svg
View File

@ -1,14 +1,5 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#887AF9"/>
<g clip-path="url(#clip0)">
<path d="M12.8749 18.5H16.6249C16.852 18.5 17.0568 18.3635 17.1442 18.1539L18.7139 14.3866C18.8094 14.1572 18.7432 13.8922 18.5508 13.7349L15.1061 10.9165C14.8989 10.7469 14.6009 10.7469 14.3937 10.9165L10.949 13.7349C10.7567 13.8922 10.6904 14.1572 10.786 14.3866L12.3557 18.1539C12.443 18.3635 12.6478 18.5 12.8749 18.5Z" fill="white"/>
<path d="M22.2499 11C21.8357 11 21.4999 11.3358 21.4999 11.75V17.75C21.4999 18.1642 21.8357 18.5 22.2499 18.5H28.2499C28.6641 18.5 28.9999 18.1642 28.9999 17.75V11.75C28.9999 11.3358 28.6641 11 28.2499 11H22.2499Z" fill="white"/>
<path d="M14.7499 29C16.821 29 18.4999 27.3211 18.4999 25.25C18.4999 23.1789 16.821 21.5 14.7499 21.5C12.6789 21.5 10.9999 23.1789 10.9999 25.25C10.9999 27.3211 12.6789 29 14.7499 29Z" fill="white"/>
<path d="M21.508 29H28.9919C29.3335 29 29.5505 28.6344 29.3869 28.3345L25.645 21.4743C25.4744 21.1616 25.0254 21.1616 24.8549 21.4743L21.1129 28.3345C20.9494 28.6344 21.1664 29 21.508 29Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="19.5" height="19.5" fill="white" transform="translate(10.25 10.25)"/>
</clipPath>
</defs>
<rect width="40" height="40" fill="white"/>
<rect width="40" height="40" fill="#EEF2F5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0368 8H21.9632C25.2668 8 26.6037 8.3713 27.9074 9.06853C29.2111 9.76576 30.2342 10.7889 30.9315 12.0926C31.6287 13.3963 32 14.7332 32 18.0368V21.9632C32 25.2668 31.6287 26.6037 30.9315 27.9074C30.2342 29.2111 29.2111 30.2342 27.9074 30.9315C26.6037 31.6287 25.2668 32 21.9632 32H18.0368C14.7332 32 13.3963 31.6287 12.0926 30.9315C10.7889 30.2342 9.76576 29.2111 9.06853 27.9074C8.3713 26.6037 8 25.2668 8 21.9632V18.0368C8 14.7332 8.3713 13.3963 9.06853 12.0926C9.76576 10.7889 10.7889 9.76576 12.0926 9.06853C13.3963 8.3713 14.7332 8 18.0368 8ZM21.6526 14.0428C21.3441 14.0022 20.9606 14 20 14H18C17.5204 14 17.2107 14.0006 16.9738 14.0167C16.7458 14.0323 16.6589 14.0589 16.6173 14.0761C16.3723 14.1776 16.1776 14.3723 16.0761 14.6173C16.0589 14.6589 16.0323 14.7458 16.0167 14.9738C16.0005 15.2107 16 15.5204 16 16V16.5C16 17.0523 15.5523 17.5 15 17.5C14.4477 17.5 14 17.0523 14 16.5V15.968V15.968C14 15.5293 14 15.1509 14.0214 14.8376C14.0439 14.5078 14.0934 14.1779 14.2284 13.852C14.5328 13.1169 15.1169 12.5329 15.852 12.2284C16.1779 12.0934 16.5078 12.0439 16.8376 12.0214C17.1509 12 17.5294 12 17.968 12L20 12L20.0874 12C20.9329 11.9999 21.4579 11.9999 21.9137 12.0599C25.0548 12.4734 27.5266 14.9452 27.9401 18.0863C28.0001 18.5421 28.0001 19.0671 28 19.9126V20.0874C28.0001 20.9329 28.0001 21.4579 27.9401 21.9137C27.5266 25.0548 25.0548 27.5266 21.9137 27.9401C21.4579 28.0001 20.9329 28.0001 20.0874 28L17.968 28C17.5294 28 17.1509 28 16.8376 27.9787C16.5078 27.9562 16.1779 27.9067 15.852 27.7716C15.1169 27.4672 14.5328 26.8831 14.2284 26.1481C14.0934 25.8221 14.0439 25.4922 14.0214 25.1624C14 24.8491 14 24.4707 14 24.032V24.032V23.5C14 22.9477 14.4477 22.5 15 22.5C15.5523 22.5 16 22.9477 16 23.5V24C16 24.4796 16.0005 24.7893 16.0167 25.0262C16.0323 25.2542 16.0589 25.3411 16.0761 25.3827C16.1776 25.6277 16.3723 25.8224 16.6173 25.9239C16.6589 25.9411 16.7458 25.9677 16.9738 25.9833C17.2107 25.9995 17.5204 26 18 26H20C20.9606 26 21.3441 25.9979 21.6526 25.9572C23.8963 25.6618 25.6618 23.8963 25.9572 21.6526C25.9978 21.3441 26 20.9606 26 20C26 19.0394 25.9978 18.6559 25.9572 18.3474C25.6618 16.1037 23.8963 14.3382 21.6526 14.0428ZM12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21H19C19.5523 21 20 20.5523 20 20C20 19.4477 19.5523 19 19 19H12Z" fill="#939BA1"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

10
src/common/components/DappListItem/DappListItem.jsx
View File

@ -1,14 +1,20 @@
import React from 'react'
import ReactImageFallback from 'react-image-fallback'
import { DappModel } from '../../utils/models'
import styles from './DappListItem.module.scss'
import icon from '../../assets/images/icon.svg'
const DappListItem = props => {
const { name, description, url } = props
const { name, description, url, image } = props
return (
<div className={styles.listItem}>
<div>
<img className={styles.image} src={icon} alt="App icon" />
<ReactImageFallback
className={styles.image}
src={image}
fallbackImage={icon}
alt="App icon"
/>
</div>
<div>
<h2 className={styles.header}>{name}</h2>

5
src/common/components/DappListItem/DappListItem.module.scss
View File

@ -11,8 +11,9 @@
color: $headline-color;
font-size: calculateRem(15);
line-height: calculateRem(22);
margin-bottom: calculateRem(5);
margin-bottom: calculateRem(2);
margin-top: calculateRem(12);
font-weight: 500;
}
.image {
@ -30,7 +31,7 @@
color: $text-color;
font-size: calculateRem(13);
line-height: calculateRem(18);
margin-bottom: calculateRem(5);
margin-bottom: calculateRem(2);
margin-top: 0;
max-height: calculateRem(40);
overflow-y: hidden;

8
src/common/styles/_fonts.scss
View File

@ -13,6 +13,14 @@
url('/fonts/Inter-Italic.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('/fonts/Inter-Medium.woff2') format('woff2'),
url('/fonts/Inter-Medium.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;

5
src/modules/Categories/Categories.module.scss
View File

@ -37,9 +37,14 @@
margin: calculateRem(4);
cursor: pointer;
text-align: left;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
p {
margin-bottom: 0;
font-weight: 500;
}
}

2
src/modules/CategorySelector/CategorySelector.jsx
View File

@ -78,7 +78,7 @@ class CategorySelector extends React.Component {
<button
style={open ? { display: 'none' } : { display: 'flex' }}
className={styles.closed}
className={[styles.closed, styles[category]].join(' ')}
type="button"
onClick={this.toggle}
>

31
src/modules/CategorySelector/CategorySelector.module.scss
View File

@ -63,7 +63,6 @@
}
.closed {
background: $purple;
width: 100%;
margin: calculateRem(12) calculateRem(16);
padding: calculateRem(10) calculateRem(15);
@ -88,3 +87,33 @@
margin-right: calculateRem(19);
}
}
.EXCHANGES {
background: $purple;
}
.MARKETPLACES {
background: $orange;
}
.COLLECTIBLES {
background: $blue;
}
.GAMES {
background: $pink;
}
.SOCIAL_NETWORKS {
background: $green;
color: $headline-color;
}
.UTILITIES {
background: $red;
}
.OTHER {
background: $yellow;
color: $headline-color;
}