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

Footer (#9) 

* style: dummied up footer

* chore: alt text
This commit is contained in:
James Gareth Smith 2019-04-01 18:31:15 +02:00 committed by GitHub
parent a56bd77143
commit fdd6fc612b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 73 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,5 @@
<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

After

Width:  |  Height:  |  Size: 2.5 KiB

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

@ -1,6 +1,40 @@
import React from 'react'
import styles from './Footer.module.scss'
import icon from '../../common/assets/images/icon.svg'
const Footer = () => <div className={styles.footer}>Footer</div>
const Footer = () => (
<div className={styles.footer}>
<div className={styles.footerItem}>
<img src={icon} alt="Join the DApp community chat" />
<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.
</p>
</div>
</div>
<div className={styles.footerItem}>
<img src={icon} alt="Submit a DApp" />
<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>
</div>
</div>
<div className={styles.footerItem}>
<img src={icon} alt="Support" />
<div>
<h2>Support</h2>
<p>
Status is a community of people all over the world connected by a set
of values and principles.
</p>
</div>
</div>
</div>
)
export default Footer

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

@ -3,6 +3,38 @@
.footer {
background-color: #eef2f5;
font-family: $font;
padding: calculateRem(40) calculateRem(16);
padding: calculateRem(40) calculateRem(16) calculateRem(32) calculateRem(16);
margin-top: calculateRem(24);
}
.footerItem {
display: flex;
align-items: flex-start;
margin-bottom: calculateRem(24);
:last-of-type {
margin-bottom: 0;
}
img {
margin-top: calculateRem(15);
margin-right: calculateRem(16);
}
h2 {
color: $headline-color;
font-size: calculateRem(15);
line-height: calculateRem(22);
margin-bottom: calculateRem(2);
margin-top: calculateRem(12);
font-weight: 500;
}
p {
color: $text-color;
font-size: calculateRem(13);
line-height: calculateRem(18);
margin-bottom: calculateRem(2);
margin-top: 0;
}
}