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

11
src/components/CreateWallet.jsx
View file

@ -2,6 +2,7 @@ import React, { useState } from 'react'
import * as rb from 'react-bootstrap'
import { Link, useNavigate } from 'react-router-dom'
import PageTitle from './PageTitle'
import ToggleSwitch from './ToggleSwitch'
import { serialize, walletDisplayName } from '../utils'
import { useCurrentWallet } from '../context/WalletContext'
@ -61,8 +62,8 @@ const WalletCreationForm = ({ createWallet, isCreating }) => {
const WalletCreationConfirmation = ({ createdWallet, walletConfirmed }) => {
const [userConfirmed, setUserConfirmed] = useState(false)
const onSwitch = (e) => {
setUserConfirmed(e.target.checked)
const onToggle = (isToggled) => {
setUserConfirmed(isToggled)
}
return (
@ -79,9 +80,9 @@ const WalletCreationConfirmation = ({ createdWallet, walletConfirmed }) => {
<div>Password</div>
<div className="fs-4">{createdWallet.password}</div>
</p>
<p className="mb-4">
<rb.Form.Switch onChange={onSwitch} label="I've written down the information above." />
</p>
<div className="mb-4">
<ToggleSwitch label="I've written down the information above." onToggle={onToggle} />
</div>
<rb.Button
variant="dark"
type="submit"

16
src/components/ToggleSwitch.jsx Normal file
View file

@ -0,0 +1,16 @@
import React from 'react'
import styles from './ToggleSwitch.module.css'
export default function ToggleSwitch({ label, onToggle }) {
const onClick = (e) => {
onToggle(e.target.checked)
}
return (
<label className={`${styles['toggle-switch-label']}`}>
<input type="checkbox" className={`${styles['peer']} ${styles['toggle-switch-input']}`} onClick={onClick} />
<span className={styles['toggle-switch']}></span>
{label}
</label>
)
}

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);
}