VoltEuropa/profile.volt.link
VoltEuropa/profile.volt.link
1
0
Fork 0
mirror of https://github.com/voltbonn/profile-picture-generator.git synced 2024-12-22 15:55:08 +00:00
Code Activity

nicer file-chooser button

Browse source
This commit is contained in:
thomasrosen 2021-01-21 19:31:57 +01:00
parent 403f8b02c1
commit 5a7949afc6
2 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/App.css
View file

@ -33,8 +33,34 @@
justify-content: center; justify-content: center;
font-size: calc(10px + 2vmin); font-size: calc(10px + 2vmin);
color: white; color: white;
button,
.labelButton{
outline: none;
border: none;
margin: 2vh;
padding: 1vh 2vh;
font-size: calc(10px + 2vmin);
font-weight: bold;
cursor: pointer;
background: white;
color: var(--volt-purple);
transition: transform 0.2s ease;
}
button:hover,
.labelButton:hover{
transform-origin: center center;
transform: scale(1.05);
} }
.App-link { .App-link {
color: #61dafb; color: #61dafb;
.labelButton img{
display: inline;
height: calc(10px + 4vmin);
vertical-align: middle;
margin: 0 2vh 0 -1vh;
}
.labelButton span{
vertical-align: middle;
} }

5
src/App.js
View file

@ -62,6 +62,11 @@ return (
<img src={HeaderImage} className="HeaderImage" /> <img src={HeaderImage} className="HeaderImage" />
<img src={combinedImage} className="App-logo" alt="Finished Frame" /> <img src={combinedImage} className="App-logo" alt="Finished Frame" />
<label className="labelButton" tabIndex="0" style={{outline:'none'}}>
{!!photo ? <img src={photo} /> : null}
<span>Load Photo</span>
<input onChange={handleImage} type="file" accept="image/*" style={{display: 'none'}} />
</label>
<FrameChooser onFrameChange={handleFrameURL} /> <FrameChooser onFrameChange={handleFrameURL} />
<button onClick={() => download(combinedImage, "volt-profile-picture.png", "image/png")}>Download Profile Picture</button> <button onClick={() => download(combinedImage, "volt-profile-picture.png", "image/png")}>Download Profile Picture</button>