poanetwork
/
poa-dapps-keys-generation
mirror of https://github.com/poanetwork/poa-dapps-keys-generation.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(add) temporary dai logo - (add) multiple images support for home image

This commit is contained in:
Gabriel Rodriguez Alsina 2018-12-11 16:54:27 -03:00
parent 49857827ba
commit 9cc5dc69b4
19 changed files with 112 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/images/Home/home-main.png → src/assets/images/MainImage/dai/image.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 100 KiB

0
src/assets/images/Home/home-main@2x.png → src/assets/images/MainImage/dai/image@2x.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 246 KiB

After

Width:  |  Height:  |  Size: 246 KiB

0
src/assets/images/Home/home-main@3x.png → src/assets/images/MainImage/dai/image@3x.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 404 KiB

After

Width:  |  Height:  |  Size: 404 KiB

BIN
src/assets/images/MainImage/poa/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
src/assets/images/MainImage/poa/image@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

BIN
src/assets/images/MainImage/poa/image@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 KiB

BIN
src/assets/images/MainImage/sokol/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
src/assets/images/MainImage/sokol/image@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

BIN
src/assets/images/MainImage/sokol/image@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 KiB

6
src/assets/stylesheets/components/_Footer.scss
View File

@ -19,7 +19,7 @@
}
&#{ & }-dai {
background-color: $xdai-orange;
background-color: $xdai-gray;
}
}
@ -49,4 +49,8 @@
@media (min-width: $breakpoint-md) {
padding-top: 0;
}
.sw-Footer & {
color: #000;
}
}

2
src/assets/stylesheets/components/_Header.scss
View File

@ -18,7 +18,7 @@
}
&#{ & }-dai {
background-color: $xdai-orange;
background-color: $xdai-gray;
}
}

20
src/assets/stylesheets/components/_Home.scss
View File

@ -28,26 +28,6 @@
}
}
.hm-Home_ImageContainer {
align-items: center;
display: flex;
max-width: 100%;
order: 1;
@media (min-width: $breakpoint-xl) {
order: 2;
}
}
.hm-Home_Image {
@include aspect-ratio(520px, 408px);
@include image-retina('#{ $base-images-path }/Home/home-main', 'png');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
width: 520px;
}
.hm-Home_Title {
color: #333;
font-size: 24px;

31
src/assets/stylesheets/components/_MainImage.scss Normal file
View File

@ -0,0 +1,31 @@
.hm-MainImage {
align-items: center;
display: flex;
max-width: 100%;
order: 1;
@media (min-width: $breakpoint-xl) {
order: 2;
}
}
.hm-MainImage_Img {
@include aspect-ratio(520px, 408px);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
width: 520px;
&,
&#{ & }-poa {
@include image-retina('#{ $base-images-path }/MainImage/poa/image', 'png');
}
&#{ & }-sokol {
@include image-retina('#{ $base-images-path }/MainImage/sokol/image', 'png');
}
&#{ & }-dai {
@include image-retina('#{ $base-images-path }/MainImage/dai/image', 'png');
}
}

1
src/assets/stylesheets/components/_index.scss
View File

@ -5,4 +5,5 @@
@import "Home";
@import "LogoPOA";
@import "LogoSokol";
@import "MainImage";
@import "SocialIcons";

91
src/assets/stylesheets/index.css
View File

@ -454,7 +454,7 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
.sw-Footer.sw-Footer-sokol {
background-color: #8ce1d7; }
.sw-Footer.sw-Footer-dai {
background-color: #fec042; }
background-color: #f2f6f8; }
.sw-Footer_Content {
max-width: 100%;
@ -490,6 +490,8 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
@media (min-width: 768px) {
.sw-Footer_Text {
padding-top: 0; } }
.sw-Footer .sw-Footer_Text {
color: #000; }
.sw-Header {
align-items: center;
@ -506,7 +508,7 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
.sw-Header.sw-Header-sokol {
background-color: #8ce1d7; }
.sw-Header.sw-Header-dai {
background-color: #fec042; }
background-color: #f2f6f8; }
.sw-Header_Content {
max-width: 100%;
@ -548,40 +550,6 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
order: 1;
padding: 0 45px 0 0; } }
.hm-Home_ImageContainer {
align-items: center;
display: flex;
max-width: 100%;
order: 1; }
@media (min-width: 1024px) {
.hm-Home_ImageContainer {
order: 2; } }
.hm-Home_Image {
position: relative;
background-image: url("../../assets/images/Home/home-main.png");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
width: 520px; }
.hm-Home_Image:before {
content: "";
display: block;
padding-top: 78.46154%;
width: 100%; }
.hm-Home_Image > .content-ratio {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0; }
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
.hm-Home_Image {
background-image: url("../../assets/images/Home/home-main@2x.png"); } }
@media (-webkit-min-device-pixel-ratio: 3), (-moz-min-device-pixel-ratio: 3), (min-resolution: 288dpi), (min-resolution: 3dppx) {
.hm-Home_Image {
background-image: url("../../assets/images/Home/home-main@3x.png"); } }
.hm-Home_Title {
color: #333;
font-size: 24px;
@ -626,6 +594,57 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
height: 100%;
width: 100%; }
.hm-MainImage {
align-items: center;
display: flex;
max-width: 100%;
order: 1; }
@media (min-width: 1024px) {
.hm-MainImage {
order: 2; } }
.hm-MainImage_Img {
position: relative;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
width: 520px; }
.hm-MainImage_Img:before {
content: "";
display: block;
padding-top: 78.46154%;
width: 100%; }
.hm-MainImage_Img > .content-ratio {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0; }
.hm-MainImage_Img, .hm-MainImage_Img.hm-MainImage_Img-poa {
background-image: url("../../assets/images/MainImage/poa/image.png"); }
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
.hm-MainImage_Img, .hm-MainImage_Img.hm-MainImage_Img-poa {
background-image: url("../../assets/images/MainImage/poa/image@2x.png"); } }
@media (-webkit-min-device-pixel-ratio: 3), (-moz-min-device-pixel-ratio: 3), (min-resolution: 288dpi), (min-resolution: 3dppx) {
.hm-MainImage_Img, .hm-MainImage_Img.hm-MainImage_Img-poa {
background-image: url("../../assets/images/MainImage/poa/image@3x.png"); } }
.hm-MainImage_Img.hm-MainImage_Img-sokol {
background-image: url("../../assets/images/MainImage/sokol/image.png"); }
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
.hm-MainImage_Img.hm-MainImage_Img-sokol {
background-image: url("../../assets/images/MainImage/sokol/image@2x.png"); } }
@media (-webkit-min-device-pixel-ratio: 3), (-moz-min-device-pixel-ratio: 3), (min-resolution: 288dpi), (min-resolution: 3dppx) {
.hm-MainImage_Img.hm-MainImage_Img-sokol {
background-image: url("../../assets/images/MainImage/sokol/image@3x.png"); } }
.hm-MainImage_Img.hm-MainImage_Img-dai {
background-image: url("../../assets/images/MainImage/dai/image.png"); }
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
.hm-MainImage_Img.hm-MainImage_Img-dai {
background-image: url("../../assets/images/MainImage/dai/image@2x.png"); } }
@media (-webkit-min-device-pixel-ratio: 3), (-moz-min-device-pixel-ratio: 3), (min-resolution: 288dpi), (min-resolution: 3dppx) {
.hm-MainImage_Img.hm-MainImage_Img-dai {
background-image: url("../../assets/images/MainImage/dai/image@3x.png"); } }
.ft-SocialIcons {
align-items: center;
display: flex;

7
src/components/Home/index.js
View File

@ -1,5 +1,6 @@
import React from 'react'
import { ButtonGenerate } from '../ButtonGenerate'
import { MainImage } from '../MainImage'
export const Home = ({ extraClassName = '', networkBranch = false, onClick = null, disabled = false }) => {
return (
@ -12,11 +13,7 @@ export const Home = ({ extraClassName = '', networkBranch = false, onClick = nul
</p>
<ButtonGenerate onClick={onClick} disabled={disabled} networkBranch={networkBranch} />
</div>
<div className="hm-Home_ImageContainer">
<div className="hm-Home_Image">
<div className="content-ratio" />
</div>
</div>
<MainImage />
</div>
)
}

6
src/components/LogoDai/logo.svg
View File

@ -12,12 +12,12 @@
</style>
</defs>
<path
fill="#FFF"
fill="#000"
fill-rule="evenodd"
d="M36.528 20H24.272c-.167 0-.334-.028-.499-.068l.018.068h-5.287l-1.607-5.969H.969A.96.96 0 0 1 0 13.078l.003-.015H0V5.906C0 4.853.86 4 1.922 4l.016.002V4h30.275c1.061 0 2.153.855 2.437 1.91l3.285 12.18c.285 1.055-.345 1.91-1.407 1.91zM7.723 6.866H3.361l1.169 4.298h4.362L7.723 6.866zm7.209 0h-4.361l1.169 4.298h4.361l-1.169-4.298zm11.743 10.985h1.923l-.517-1.911h-1.922l.516 1.911zm5.201-10.985h-8.17l2.194 8.119h8.171l-2.195-8.119zm2.453 9.074h-1.922l.516 1.911h1.923l-.517-1.911zm-33.61.047v-.049h12.969v.002h1.557L16.341 20H1.938v-.002L1.922 20A1.914 1.914 0 0 1 0 18.094v-1.188h.005c0-.006-.005-.01-.005-.015 0-.44.308-.793.719-.904z"
/>
<text
fill="#fff"
fill="#000"
font-family="Nunito"
font-size="14"
font-weight="300"
@ -27,6 +27,6 @@
<path
d="M166 0a1 1 0 0 1 1 1v24a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1z"
fill-rule="evenodd"
fill="#fff"
fill="#000"
/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

3
src/components/MainImage/icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16">
<path fill="#FFF" fill-rule="evenodd" d="M13 10a4.974 4.974 0 0 1-2.797-.855l-3.33 3.33c-.044.084-.088.169-.159.239-.07.071-.155.115-.239.159l-2.602 2.602c-.044.084-.088.169-.159.239a.956.956 0 0 1-.733.275.949.949 0 0 1-.694-.275c-.048-.049-.073-.109-.109-.165L.286 13.657a.969.969 0 1 1 1.371-1.371l1.356 1.356 1.629-1.629-1.356-1.356a.969.969 0 1 1 1.371-1.371l1.356 1.356 2.843-2.844A5 5 0 1 1 13 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

11
src/components/MainImage/index.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
export const MainImage = ({ extraClassName = '', networkBranch = '' }) => {
return (
<div className={`hm-MainImage ${extraClassName} ${networkBranch ? 'hm-MainImage-' + networkBranch : ''}`}>
<div className="hm-MainImage_Img">
<div className="content-ratio" />
</div>
</div>
)
}