Added dark mode

10 files changed, 158 insertions, 17 deletions

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index cb82abc..bbab612 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import {useEffect, useMemo, useState} from "react";
+import {ReactElement, useEffect, useMemo, useState} from "react";
 import useRequests, {
   ReadyState,
   RequestResponse
@@ -9,13 +9,24 @@ import styles from './App.module.scss';
 import Details from "../Details/Details";
 import RequestSummary from "../RequestSummary/RequestSummary";
 import {getHost} from "../../utils";
-import {Container, ListGroup, Navbar} from "react-bootstrap";
+import {Container, ListGroup, Nav, Navbar, NavDropdown} from "react-bootstrap";
 import classNames from "classnames";
+import useDarkMode from "../../hooks/useDarkMode";
+import {Sliders} from "../Icons/Sliders";
+import {Sun} from "../Icons/Sun";
+import {Moon} from "../Icons/Moon";
+import Trash from "../Icons/Trash";
 
 interface Config {
   url: string
 }
 
+interface SettingsMenu {
+  icon: ReactElement,
+  label: string,
+  onClick: () => void,
+}
+
 type ReadyStateMap = {
   [ReadyState.CONNECTING]: string,
   [ReadyState.OPEN]: string,
@@ -23,18 +34,25 @@ type ReadyStateMap = {
   [ReadyState.CLOSED]: string,
 }
 
-const statusMap: ReadyStateMap = {
+const statusIconMap: ReadyStateMap = {
   [ReadyState.CONNECTING]: '🔴',
   [ReadyState.OPEN]: '🟢',
   [ReadyState.CLOSING]: '🔴',
   [ReadyState.CLOSED]: '🔴',
 }
 
-export default function App() {
+const statusTextMap: ReadyStateMap = {
+  [ReadyState.CONNECTING]: 'Connecting...',
+  [ReadyState.OPEN]: 'Connected',
+  [ReadyState.CLOSING]: 'Closing...',
+  [ReadyState.CLOSED]: 'Closed',
+}
 
+export default function App() {
+  const { darkMode, toggle } = useDarkMode();
   const [config, setConfig]= useState<Config | null>(null)
 
-  const { calls, readyState } = useRequests({
+  const { calls, readyState, clear } = useRequests({
     onConnect: async () => {
       const response = await fetch(`http://${getHost()}/config/`)
       const config = await response.json()
@@ -44,7 +62,7 @@ export default function App() {
 
   useEffect(() => {
     const url = new URL(config?.url ?? 'https://loading...');
-    document.title = `${statusMap[readyState]} ${url.host} | TTUN`;
+    document.title = `${statusIconMap[readyState]} ${url.host} | TTUN`;
   }, [readyState, config?.url])
 
   const [selectedRequestIndex, setSelectedRequestIndex] = useState<number | null>(null);
@@ -54,6 +72,23 @@ export default function App() {
       : calls[selectedRequestIndex]
   ), [selectedRequestIndex, calls]);
 
+  const settingsMenu: (SettingsMenu | null)[] = [
+    {
+      onClick: toggle,
+      icon: darkMode ? <Sun />: <Moon />,
+      label: darkMode ? "Light mode" : "DarkMode",
+    },
+    null,
+    {
+      onClick: () => {
+        setSelectedRequestIndex(null);
+        clear();
+      },
+      icon: <Trash />,
+      label: "Clear"
+    }
+  ];
+
   return config && (
     <div className={styles.app}>
       <Navbar
@@ -63,12 +98,47 @@ export default function App() {
         as="header"
       >
         <Container fluid>
-          <Navbar.Brand>
-            {statusMap[readyState]} TTUN
-          </Navbar.Brand>
-          <Navbar.Text>
-            <a href={config.url} target="_blank">{config.url}</a>
-          </Navbar.Text>
+          <div>
+            <Navbar.Brand>
+              TTUN
+            </Navbar.Brand>
+            <Navbar.Text>
+              {`${statusIconMap[readyState]} ${statusTextMap[readyState]}`}
+            </Navbar.Text>
+          </div>
+          <div className="d-flex">
+            <Navbar.Text>
+              <a href={config.url} target="_blank">{config.url}</a>
+            </Navbar.Text>
+            <Navbar.Toggle aria-controls="settings"/>
+            <Navbar.Collapse id="settings" className="ms-2">
+              <Nav>
+                <NavDropdown
+                  align="end"
+                  title={<Sliders/>}
+                >
+                  {
+                    settingsMenu.map((item) => {
+                      if (item !== null) {
+                        const { onClick, icon, label } = item;
+                        return (
+                          <NavDropdown.Item
+                            onClick={onClick}
+                            className="d-flex align-items-center"
+                          >
+                            {icon}
+                            <span className="ms-3">{label}</span>
+                          </NavDropdown.Item>
+                        )
+                      } else {
+                        return <NavDropdown.Divider />
+                      }
+                    })
+                  }
+                </NavDropdown>
+              </Nav>
+            </Navbar.Collapse>
+          </div>
         </Container>
       </Navbar>
 
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 0e63f30..95ee444 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -30,9 +30,9 @@ export default function Content({ raw, setRaw, data }: ContentProps): JSX.Elemen
     <div className={styles.content}>
       <Container fluid className="border-bottom">
         <Row className="py-3">
-            <Col>
-              <input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/>
-              <label htmlFor='raw' className="ps-1">Raw</label>
+            <Col className="form-check form-switch ms-3">
+              <input className="form-check-input" id='raw' type='checkbox' checked={raw} role="switch" onChange={() => setRaw(!raw)}/>
+              <label htmlFor='raw' className="form-check-label">Raw</label>
             </Col>
           <Col xs="auto">
             {
diff --git a/src/components/Icons/Moon.tsx b/src/components/Icons/Moon.tsx
new file mode 100644
index 0000000..7e3e680
--- /dev/null
+++ b/src/components/Icons/Moon.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export function Moon() {
+  return <svg xmlns="http://www.w3.org/2000/svg"
+              width="16" height="16" fill="currentColor"
+              className="bi bi-moon"
+              viewBox="0 0 16 16">
+    <path
+      d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"/>
+  </svg>;
+}
diff --git a/src/components/Icons/Sliders.tsx b/src/components/Icons/Sliders.tsx
new file mode 100644
index 0000000..9feef34
--- /dev/null
+++ b/src/components/Icons/Sliders.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+export function Sliders() {
+  return <svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" fill="currentColor"
+              className="bi bi-sliders" viewBox="0 0 16 16">
+    <path fill-rule="evenodd"
+          d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"/>
+  </svg>;
+}
diff --git a/src/components/Icons/Sun.tsx b/src/components/Icons/Sun.tsx
new file mode 100644
index 0000000..93a5187
--- /dev/null
+++ b/src/components/Icons/Sun.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";