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

chore: added footer icons (#10)

This commit is contained in:
James Gareth Smith 2019-04-02 11:20:42 +02:00 committed by GitHub
parent fdd6fc612b
commit e22dbd5544
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/common/assets/images/add-dapp.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM10 4C10.5523 4 11 4.44772 11 5V8.5C11 8.77614 11.2239 9 11.5 9H15C15.5523 9 16 9.44772 16 10C16 10.5523 15.5523 11 15 11H11.5C11.2239 11 11 11.2239 11 11.5V15C11 15.5523 10.5523 16 10 16C9.44771 16 9 15.5523 9 15V11.5C9 11.2239 8.77614 11 8.5 11H5C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9H8.5C8.77614 9 9 8.77614 9 8.5V5C9 4.44771 9.44772 4 10 4Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

3
src/common/assets/images/community.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20H2.99864C1.34178 20 3.91417e-06 18.6584 2.97048e-06 17.0015L0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM8.71336 2.99988C8.06033 2.999 7.49538 2.99823 7.00917 3.16836C6.14743 3.4699 5.4699 4.14743 5.16836 5.00917C4.99823 5.49537 4.999 6.06033 4.99988 6.71335V6.71336L5.00001 7H7.00001V6.85715C7.00001 5.97549 7.01416 5.78968 7.05613 5.66973C7.15664 5.38248 7.38248 5.15664 7.66973 5.05613C7.78968 5.01416 7.97549 5.00001 8.85715 5.00001H10C10.9672 5.00001 11.3344 5.00311 11.6257 5.04926C13.3373 5.32034 14.6797 6.6627 14.9508 8.37427C14.9969 8.66561 15 9.03279 15 10C15 10.9672 14.9969 11.3344 14.9508 11.6257C14.6797 13.3373 13.3373 14.6797 11.6257 14.9508C11.3344 14.9969 10.9672 15 10 15H8.85715C7.97549 15 7.78968 14.9859 7.66973 14.9439C7.38248 14.8434 7.15664 14.6175 7.05613 14.3303C7.01416 14.2103 7.00001 14.0245 7.00001 13.1429C7.00001 13.064 6.93605 13 6.85714 13H5.28667C5.12833 13 4.99995 13.1283 4.99988 13.2867C4.999 13.9397 4.99823 14.5046 5.16836 14.9908C5.4699 15.8526 6.14743 16.5301 7.00917 16.8317C7.49538 17.0018 8.06033 17.001 8.71336 17.0001L10.0997 17H10.0997C10.9332 17.0001 11.471 17.0002 11.9386 16.9261C14.506 16.5195 16.5195 14.506 16.9261 11.9386C17.0002 11.471 17.0001 10.9332 17 10.0997V10.0997V9.90034V9.9003C17.0001 9.06681 17.0002 8.52901 16.9261 8.0614C16.5195 5.49405 14.506 3.48051 11.9386 3.07388C11.471 2.99982 10.9332 2.99989 10.0997 3L8.71336 2.99988ZM4 9C3.44772 9 3 9.44771 3 10C3 10.5523 3.44772 11 4 11H10C10.5523 11 11 10.5523 11 10C11 9.44771 10.5523 9 10 9H4Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

5
src/common/assets/images/footer-icon.svg
View File

@ -1,5 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<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

Before

Width:  |  Height:  |  Size: 2.5 KiB

3
src/common/assets/images/support.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM10 6C9.44744 6 8.94882 6.22276 8.5858 6.58579C8.19528 6.97631 7.5621 6.97631 7.17158 6.58579C6.78106 6.19526 6.78106 5.5621 7.17158 5.17157C7.89434 4.44881 8.89572 4 10 4C12.2091 4 14 5.79086 14 8C14 10.2091 12.2091 12 10 12C9.44772 12 9.00001 11.5523 9.00001 11C9.00001 10.4477 9.44772 10 10 10C11.1046 10 12 9.10457 12 8C12 6.89543 11.1046 6 10 6ZM10.25 16.25C10.8023 16.25 11.25 15.8023 11.25 15.25V14.75C11.25 14.1977 10.8023 13.75 10.25 13.75H9.75001C9.19772 13.75 8.75001 14.1977 8.75001 14.75V15.25C8.75001 15.8023 9.19772 16.25 9.75001 16.25H10.25Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 839 B

36
src/modules/Footer/Footer.jsx
View File

@ -1,36 +1,44 @@
import React from 'react'
import styles from './Footer.module.scss'
import icon from '../../common/assets/images/icon.svg'
import communityIcon from '../../common/assets/images/community.svg'
import addDappIcon from '../../common/assets/images/add-dapp.svg'
import supportIcon from '../../common/assets/images/support.svg'
const Footer = () => (
<div className={styles.footer}>
<div className={styles.footerItem}>
<img src={icon} alt="Join the DApp community chat" />
<a
href="https://get.status.im/chat/public/status-core-dapps"
className={styles.footerItem}
>
<div className={styles.iconWrap}>
<img src={communityIcon} alt="Join the DApp community chat" />
</div>
<div>
<h2>Join the DApp community chat</h2>
<p>
Status is a community of people all over the world connected by a set
of values and principles.
Status is a worldwide community committed to web3. Come discuss your
new favourite DApp with us.
</p>
</div>
</div>
</a>
<div className={styles.footerItem}>
<img src={icon} alt="Submit a DApp" />
<div className={styles.iconWrap}>
<img src={addDappIcon} alt="Submit a DApp" />
</div>
<div>
<h2>Submit a DApp</h2>
<p>
Status is a community of people all over the world connected by a set
of values and principles.
</p>
<p>Submit your favourite DApp now! No permission required.</p>
</div>
</div>
<div className={styles.footerItem}>
<img src={icon} alt="Support" />
<div className={styles.iconWrap}>
<img src={supportIcon} alt="Support" />
</div>
<div>
<h2>Support</h2>
<p>
Status is a community of people all over the world connected by a set
of values and principles.
Can&apos;t find what you&apos;re looking for? Reach out and we&apos;ll
see if we can help.
</p>
</div>
</div>

15
src/modules/Footer/Footer.module.scss
View File

@ -8,6 +8,7 @@
}
.footerItem {
text-decoration: none;
display: flex;
align-items: flex-start;
margin-bottom: calculateRem(24);
@ -16,11 +17,6 @@
margin-bottom: 0;
}
img {
margin-top: calculateRem(15);
margin-right: calculateRem(16);
}
h2 {
color: $headline-color;
font-size: calculateRem(15);
@ -38,3 +34,12 @@
margin-top: 0;
}
}
.iconWrap {
background: $text-color;
padding: calculateRem(10);
padding-bottom: calculateRem(6);
border-radius: 50%;
margin-top: calculateRem(15);
margin-right: calculateRem(16);
}