From ed8aa4b22b2dcbcbefa34fce6ccc81aaaec9c190 Mon Sep 17 00:00:00 2001
From: Daniel <10026790+dnlggr@users.noreply.github.com>
Date: Tue, 8 Feb 2022 15:19:26 +0100
Subject: [PATCH] feat: fancy toggle switch (#63)

* 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>
---
 src/components/CreateWallet.jsx        | 11 +++---
 src/components/ToggleSwitch.jsx        | 16 +++++++++
 src/components/ToggleSwitch.module.css | 50 ++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ToggleSwitch.jsx
 create mode 100644 src/components/ToggleSwitch.module.css

diff --git a/src/components/CreateWallet.jsx b/src/components/CreateWallet.jsx
index 40617dc0..82cad3db 100644
--- a/src/components/CreateWallet.jsx
+++ b/src/components/CreateWallet.jsx
@@ -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"
diff --git a/src/components/ToggleSwitch.jsx b/src/components/ToggleSwitch.jsx
new file mode 100644
index 00000000..6a60a33e
--- /dev/null
+++ b/src/components/ToggleSwitch.jsx
@@ -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>
+  )
+}
diff --git a/src/components/ToggleSwitch.module.css b/src/components/ToggleSwitch.module.css
new file mode 100644
index 00000000..e2e2e58d
--- /dev/null
+++ b/src/components/ToggleSwitch.module.css
@@ -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);
+}