frontend/sandbox: added styling to improve UX

BitBoxSwiss · Oct 11, 2023 · 1959d0b · 1959d0b
1 parent c99f4dd
commit 1959d0b
Show file tree

Hide file tree

Showing 13 changed files with 649 additions and 273 deletions.
diff --git a/sandbox/package-lock.json b/sandbox/package-lock.json
diff --git a/sandbox/src/Accordion.css b/sandbox/src/Accordion.css
@@ -0,0 +1,36 @@
+.accordion {
+    width: 100%;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    overflow: hidden;
+    margin: 16px 0;
+}
+
+.accordion-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 24px;
+    cursor: pointer;
+}
+
+.accordion-header h3 {
+    line-height: 0;
+    font-size: 16px;
+}
+
+.toggle-icon {
+    font-size: 1.2rem;
+}
+
+.accordion-content {
+    padding: 10px 20px;
+    border-top: 1px solid #e0e0e0;
+    background-color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+    .accordion-content {
+        background-color: #242424;
+    }
+}
diff --git a/sandbox/src/Accordion.tsx b/sandbox/src/Accordion.tsx
@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import './Accordion.css';
+
+type TProps = {
+    title: string;
+    children: React.ReactNode;
+    opened?: boolean;
+}
+
+export const Accordion = ({ title, children, opened }: TProps) => {
+    const [isOpen, setIsOpen] = useState(opened);
+
+    return (
+        <div className="accordion">
+            <div className="accordion-header" onClick={() => setIsOpen(!isOpen)}>
+                <h3>{title}</h3>
+                <span className="toggle-icon">
+                    {isOpen ? '-' : '+'}
+                </span>
+            </div>
+            {isOpen && <div className="accordion-content">{children}</div>}
+        </div>
+    );
+};
diff --git a/sandbox/src/App.css b/sandbox/src/App.css
@@ -1,10 +1,35 @@
 #root {
+  display: flex;
+  width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  overflow-x: hidden;
+}
+
+.action h4 {
+  margin-bottom: 16px;
 }
 
 .action {
-    border: 1px solid black;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    padding: 32px 16px;
+}
+
+.action:not(:last-child) {
+  border-bottom: 1px solid #e0e0e0;
+  border-radius: 0;
 }
+
+.action button {
+  margin-top: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .action:not(:last-child) {
+    border-color: #626262;
+  }
+}
diff --git a/sandbox/src/App.tsx b/sandbox/src/App.tsx
@@ -6,6 +6,8 @@ import { Bitcoin } from './Bitcoin';
 import { Cardano } from './Cardano';
 import { Ethereum } from './Ethereum';
 import { General } from './General';
+import { ErrorNotification } from './ErrorNotification';
+import { Accordion } from './Accordion';
 
 function App() {
   const [bb02, setBB02] = useState<bitbox.PairedBitBox>();
@@ -40,56 +42,49 @@ function App() {
     }
   };
 
-  if (err !== undefined) {
-    return (
-      <>
-        <h2>Error</h2>
-        <pre>
-          { JSON.stringify(err) }
-        </pre>
-      </>
-    );
-  }
+
   if (pairingCode !== undefined) {
     return (
-      <>
+      <div className="container">
         <h2>Pairing code</h2>
         <pre>
-          { pairingCode }
+          {pairingCode}
         </pre>
-      </>
+      </div>
     );
   }
   if (bb02 !== undefined) {
     return (
-      <>
-        <h2>Connected. Product: {bb02.product()}</h2>
-        <h3>General</h3>
-        <General bb02={bb02} />
-        <h3>Bitcoin</h3>
-        <Bitcoin bb02={bb02} />
+      <div className="contentContainer">
+        <h2 style={{textAlign: 'left'}}>BitBox02 sandbox</h2>
+        <h4 style={{textAlign: 'left'}}>Connected product: {bb02.product()}</h4>
+        <Accordion opened title="General">
+          <General bb02={bb02} />
+        </Accordion>
+        <Accordion title="Bitcoin">
+          <Bitcoin bb02={bb02} />
+        </Accordion>
         { bb02.ethSupported() ? (
-            <>
-              <h3>Ethereum</h3>
+            <Accordion title="Ethereum">
               <Ethereum bb02={bb02} />
-            </>
+            </Accordion>
         ) : null }
         { bb02.cardanoSupported() ? (
-            <>
-              <h3>Cardano</h3>
+            <Accordion title="Cardano">
               <Cardano bb02={bb02} />
-            </>
+            </Accordion>
         ) : null }
-      </>
+      </div>
     );
   }
   return (
-    <>
+    <div className="container">
       <h1>BitBox sandbox</h1>
-      <button onClick={() => connect('webHID')}>Connect using WebHID</button><br />
-      <button onClick={() => connect('bridge')}>Connect using BitBoxBridge</button><br />
-      <button onClick={() => connect('auto')}>Choose automatically</button>
-    </>
+      <button className="menuButton" onClick={() => connect('webHID')}>Connect using WebHID</button><br />
+      <button className="menuButton" onClick={() => connect('bridge')}>Connect using BitBoxBridge</button><br />
+      <button className="menuButton" onClick={() => connect('auto')}>Choose automatically</button>
+      {err !== undefined && <ErrorNotification err={JSON.stringify(err)} onClose={() => setErr(undefined)} /> }
+    </div>
   );
 }