GlcoinCore/jam
1
0
Fork 0
mirror of https://github.com/joinmarket-webui/jam.git synced 2026-08-17 13:07:34 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: fancy toggle switch (#63)

Browse source 
* fature: privacy shields ui

* fix: show address status in advanced wallet view

* feat: advanced wallet setting

* fix: smaller ui adjustments

* Remove todo

* Fix flickering

* Restyle create wallet flow

* Don'
t open wallet until confirmed

* Dry up styles

* Fix css

* Fix linter warning

* Add fancy toggle switch

* Update src/components/CreateWallet.jsx

Co-authored-by: Gigi <109058+dergigi@users.noreply.github.com>

* Update src/components/CreateWallet.jsx

Co-authored-by: Gigi <109058+dergigi@users.noreply.github.com>

Co-authored-by: Gigi <109058+dergigi@users.noreply.github.com>
This commit is contained in:
Daniel 2022-02-08 15:19:26 +01:00 • committed by GitHub
parent 8ed27ae745
commit ed8aa4b22b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/ToggleSwitch.module.css Normal file
View file

@ -0,0 +1,50 @@
/* Adapted from https://medium.com/front-end-weekly/build-a-css-only-toggle-switch-using-tailwindcss-d2739882934 */
.toggle-switch-label {
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
}
.toggle-switch-input {
appearance: none;
position: absolute;
border-radius: 0.375rem;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.toggle-switch {
width: 2.75rem;
height: 1.75rem;
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0.25rem;
margin-right: 1rem;
background-color: rgba(222, 222, 222, 1);
border-radius: 9999px;
}
.toggle-switch:after {
content: '';
width: 1.25rem;
height: 1.25rem;
background-color: white;
border-radius: 9999px;
box-shadow: 0 3px 5px rgb(0, 0, 0, 0.25);
transition-duration: 300ms;
}
.peer:checked ~ .toggle-switch {
background-color: rgba(39, 174, 96, 1);
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.peer:checked ~ .toggle-switch:after {
transform: translateX(1rem);
}