front: CordaChecker online tgl

webapp/src/App.js

@@ -9,14 +9,12 @@ import {
 import Header from "./components/Header"
 import Leaderboard from "./components/Leaderboard"
 import GameProposal from "./components/GameProposal"
-import DataPolling from './components/OfflineToggle';
 
 function App() { 
 
   return <div className="App">
     <BrowserRouter>
         <Header/>
-        <DataPolling/>
         <div className="Container">
           <Routes>
             <Route path="/leaderboard" element={<Leaderboard/>} />

webapp/src/components/Header/index.css

@@ -1,3 +1,9 @@
-p {
-    margin-bottom: 30px;
+h1 {
+    display: inline-flex;
+}
+
+.OnlineTgl {
+    transform: scale(.25, .25);
+    width: 32px;
+    height: 16px;
 }

webapp/src/components/Header/index.jsx

@@ -1,11 +1,13 @@
 import './index.css';
 import React from "react"
 import { Link } from "react-router-dom";
+import OfflineToggle from '../OnlineTgl';
 
 export default function Header() {
 
   return <div>
-    <h1>CordaCheckers</h1>
+    <h1>CordaCheckers <OfflineToggle/> </h1>
+
     <nav>
       <Link to="/leaderboard">Leaderboard</Link> {"| "}
       <Link to="/gameproposal">Game Proposal</Link> {"| "}

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>
+}