front: CordaChecker online tgl

webapp/src/components/Header/index.css

@@ -2,6 +2,8 @@ h1 {
     display: inline-flex;
 }
 
-.OfflineToggle {
+.OnlineTgl {
-    margin-left: 15px;
+    transform: scale(.25, .25);
+    width: 32px;
+    height: 16px;
 }

webapp/src/components/Header/index.jsx

@@ -1,7 +1,7 @@
 import './index.css';
 import React from "react"
 import { Link } from "react-router-dom";
-import OfflineToggle from '../OfflineToggle';
+import OfflineToggle from '../OnlineTgl';
 
 export default function Header() {
 

webapp/src/components/OfflineToggle/index.jsx

@@ -1,12 +0,0 @@
-import React from "react"
-import { AppData } from "../../context/data"
-
-export default function OfflineToggle() {
-    const [appData, dispatchData] = React.useContext(AppData)
-
-    return <div className="OfflineToggle">
-        <button onClick={() => dispatchData({type: "toggleOfflineMode"})}>
-            { appData.offlineMode === true ? "offline" : "online" }
-        </button>
-        </div>
-}

webapp/src/components/OnlineTgl/index.css

@@ -0,0 +1,104 @@
+
+.tgl {
+  display: none;
+  
+  /* add default box-sizing for this scope */
+  &,
+  &:after,
+  &:before,
+  & *,
+  & *:after,
+  & *:before,
+  & + .tgl-btn {
+    box-sizing: border-box;
+    &::selection {
+      background: none;
+    }
+  }
+  
+  + .tgl-btn {
+    outline: 0;
+    display: block;
+    width: 4em;
+    height: 2em;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    &:after,
+    &:before {
+      position: relative;
+      display: block;
+      content: "";
+      width: 50%;
+      height: 100%;
+    }
+    
+    &:after {
+      left: 0;
+    }
+    
+    &:before {
+      display: none;
+    }
+  }
+  
+  &:checked + .tgl-btn:after {
+    left: 50%;
+  }
+}
+
+.tgl-flip {
+  + .tgl-btn {
+    padding: 2px;
+    transition: all .2s ease;
+    font-family: sans-serif;
+    perspective: 100px;
+    &:after,
+    &:before {
+      display: inline-block;
+      transition: all .4s ease;
+      width: 100%;
+      text-align: center;
+      position: absolute;
+      line-height: 2em;
+      font-weight: bold;
+      color: #fff;
+      position: absolute;
+      top: 0;
+      left: 0;
+      backface-visibility: hidden;
+      border-radius: 4px;
+    }
+    
+    &:after {
+      content: attr(data-tg-on);
+      background: #02C66F;
+      transform: rotateY(-180deg);
+    }
+    
+    &:before {
+      background: #FF3A19;
+      content: attr(data-tg-off);
+    }
+
+    &:active:before {
+      transform: rotateY(-20deg);
+    }
+  }
+  
+  &:checked + .tgl-btn {
+    &:before {
+      transform: rotateY(180deg);
+    }
+    
+    &:after {
+      transform: rotateY(0);
+      left: 0;
+      background: #7FC6A6;
+    }
+    
+    &:active:after {
+      transform: rotateY(20deg);
+    }
+  }
+}

webapp/src/components/OnlineTgl/index.jsx

@@ -0,0 +1,12 @@
+import "./index.css"
+import React from "react"
+import { AppData } from "../../context/data"
+
+export default function OnlineTgl() {
+    const [/*appData*/, dispatchData] = React.useContext(AppData)
+
+    return <div className="OnlineTgl">
+            <input className="tgl tgl-flip" id="cb5" type="checkbox" defaultChecked onClick={() => dispatchData({type: "toggleOfflineMode"})}/>
+            <label className="tgl-btn" data-tg-off="offline" data-tg-on="online" htmlFor="cb5"/>
+        </div>
+}