Skip to content

Commit

Permalink
you wanted dark mode?
Browse files Browse the repository at this point in the history
  • Loading branch information
@daviesgeek
daviesgeek committed Sep 12, 2024
1 parent 766400c commit f89afb3
Show file tree
Hide file tree
Showing 15 changed files with 405 additions and 185 deletions.
2 changes: 1 addition & 1 deletion frontend/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" class="dark:bg-gray-950">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/HardwareImg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const HardwareImg = ({ model }: { model: number }) => {
src={`${import.meta.env.BASE_URL}images/hardware/${image}`}
alt={modelName}
title={modelName}
className="w-8 h-8 object-cover"
className="w-8 h-8 object-cover dark:brightness-5"
/>
);
};
5 changes: 4 additions & 1 deletion frontend/src/components/HeardBy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ export const HeardBy = () => {
<>
{" "}
that have been heard by the mesh by{" "}
<Link to={`/nodes/${config?.server?.node_id}`}>
<Link
to={`/nodes/${config?.server?.node_id}`}
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
{config?.server?.node_id}
</Link>{" "}
({config?.server?.node_id})
Expand Down
98 changes: 73 additions & 25 deletions frontend/src/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,20 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {

return (
<>
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col">
<div className="flex flex-col px-6 pb-4 overflow-y-auto bg-gray-300 border-r-2 grow gap-y-5 border-r-cyan-600">
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col dark:text-gray-100">
<div className="flex flex-col px-6 pb-4 overflow-y-auto bg-gray-300 dark:bg-gray-800 border-r-2 grow gap-y-5 border-r-cyan-600">
<div className="flex items-center h-24 mt-4 shrink-0">
<div className="text-2xl">
{config?.mesh?.name?.split(" ").map((word, index) => (
// eslint-disable-next-line react/no-array-index-key
<div className="p-0 m-0" key={`meshname-${index}`}>
<div
className="p-0 m-0 dark:text-gray-50"
// eslint-disable-next-line react/no-array-index-key
key={`meshname-${index}`}
>
{word[0]}
<span className="text-gray-500">{word.slice(1)}</span>
<span className="text-gray-500 dark:text-gray-400">
{word.slice(1)}
</span>
</div>
))}
</div>
Expand All @@ -33,20 +38,26 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
<div>{config?.mesh?.description}</div>

<div>
<a href={config?.mesh?.url} className="text-xs text-gray-900">
<a
href={config?.mesh?.url}
className="text-xs text-gray-900 dark:text-gray-50"
>
Website
</a>
</div>

<nav className="flex flex-col flex-1">
<h3 className="font-bold">Mesh</h3>
<div className="mb-1">
<Link to="chat" relative="path">
<Link
to="chat"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
<img
src={`${import.meta.env.BASE_URL}images/icons/chat.svg`}
width="20"
height="20"
className="inline-block mr-2"
className="inline-block mr-2 dark:invert"
alt="chat icon"
style={{ verticalAlign: "middle" }}
/>
Expand All @@ -59,85 +70,103 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
src={`${import.meta.env.BASE_URL}images/icons/map.svg`}
width="20"
height="20"
className="inline-block mr-2"
className="inline-block mr-2 dark:invert"
alt="graph icon"
style={{ verticalAlign: "middle" }}
/>
Graph
</Link>
</div> */}
<div className="mb-1">
<Link to="map">
<Link
to="map"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
<img
src={`${import.meta.env.BASE_URL}images/icons/map.svg`}
width="20"
height="20"
className="inline-block mr-2"
className="inline-block mr-2 dark:invert"
alt="map icon"
style={{ verticalAlign: "middle" }}
/>
Map
</Link>
</div>
<div className="mb-1">
<Link to="nodes">
<Link
to="nodes"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
<img
src={`${import.meta.env.BASE_URL}images/icons/node.svg`}
width="20"
height="20"
className="inline-block mr-2"
className="inline-block mr-2 dark:invert"
alt="node icon"
style={{ verticalAlign: "middle" }}
/>
Nodes
</Link>
</div>
<div className="mb-1">
<Link to="neighbors" relative="path">
<Link
to="neighbors"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
<img
src={`${import.meta.env.BASE_URL}images/icons/neighbors.svg`}
width="20"
height="20"
className="inline-block mr-2"
className="inline-block mr-2 dark:invert"
alt="neighbors icon"
style={{ verticalAlign: "middle" }}
/>
Node Neighbors
</Link>
</div>
<div className="mb-1">
<Link to="stats" relative="path">
<Link
to="stats"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
<img
src={`${import.meta.env.BASE_URL}images/icons/stats.svg`}
width="20"
height="20"
className="inline-block mr-2"
className="inline-block mr-2 dark:invert"
alt="stats icon"
style={{ verticalAlign: "middle" }}
/>
Stats
</Link>
</div>
<div className="mb-1">
<Link to="telemetry" relative="path">
<Link
to="telemetry"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
<img
src={`${import.meta.env.BASE_URL}images/icons/telemetry.svg`}
width="20"
height="20"
className="inline-block mr-2"
className="inline-block mr-2 dark:invert"
alt="telemetry icon"
style={{ verticalAlign: "middle" }}
/>
Telemetry
</Link>
</div>
<div className="mb-1">
<Link to="traceroutes">
<Link
to="traceroutes"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
<img
src={`${import.meta.env.BASE_URL}images/icons/route2.svg`}
width="20"
height="20"
className="inline-block mr-2"
className="inline-block mr-2 dark:invert"
alt="traceroutes icon"
style={{ verticalAlign: "middle" }}
/>
Expand All @@ -149,10 +178,20 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
<nav className="flex flex-col flex-1">
<h3 className="font-bold">Logs</h3>
<div className="mb-1">
<Link to="mesh-log">Mesh Messages</Link>
<Link
to="mesh-log"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
Mesh Messages
</Link>
</div>
<div className="mb-1">
<Link to="mqtt-log">MQTT Messages</Link>
<Link
to="mqtt-log"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
MQTT Messages
</Link>
</div>
</nav>

Expand All @@ -161,7 +200,12 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
{(config?.mesh?.tools ?? defaultTools).map((tool, index) => (
// eslint-disable-next-line react/no-array-index-key
<div key={`tools-${index}`} className="mb-1">
<a href={tool.url} target="_blank" rel="noopener noreferrer">
<a
href={tool.url}
target="_blank"
rel="noopener noreferrer"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
{tool.name}
</a>
</div>
Expand All @@ -175,6 +219,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
href="https://github.com/armooo/meshtastic_dopewars"
target="_blank"
rel="noreferrer"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
DopeWars
</a>
Expand All @@ -184,6 +229,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
href="https://github.com/TheCommsChannel/TC2-BBS-mesh"
target="_blank"
rel="noreferrer"
className="dark:text-indigo-400 dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
TheCommsChannel BBS
</a>
Expand Down Expand Up @@ -220,7 +266,9 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
</div>
</div>

<div className={`lg:pl-60 ${pathname === "/map" ? "h-screen" : ""}`}>
<div
className={`lg:pl-60 dark:bg-gray-950 dark:text-gray-100 ${pathname === "/map" ? "h-screen" : ""}`}
>
<main className={`${pathname === "/map" ? "h-screen" : "py-1 "}`}>
<div
className={`w-full ${pathname === "/map" ? "h-screen" : "px-4 py-2 sm:px-6 sm:py-2 lg:px-6 lg:py-2"}`}
Expand Down
26 changes: 14 additions & 12 deletions frontend/src/pages/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ export const Chat = () => {
}, [channels]);

return (
<div>
<h5 className="mb-2 text-gray-500">Chat</h5>
<div className="">
<h5 className="mb-2 text-gray-500 dark:text-gray-400">Chat</h5>
<h1 className="mb-2 text-xl">Chat</h1>

{channels.map(([id, channel]) => (
Expand Down Expand Up @@ -91,28 +91,28 @@ export const Chat = () => {
</div>

<h2>Channel {selectedChannel}</h2>
<table className="w-full max-w-full table-fixed border-collapse border border-gray-500 bg-gray-50">
<table className="w-full max-w-full table-fixed border-collapse border border-gray-500 bg-gray-50 dark:bg-gray-800">
<thead>
<tr>
<th className="w-48 max-w-48 border border-gray-500 bg-gray-400">
<th className="w-48 max-w-48 border border-gray-500 bg-gray-400 dark:bg-gray-900">
Time
</th>
<th className="w-12 max-w-12 border border-gray-500 bg-gray-400">
<th className="w-12 max-w-12 border border-gray-500 bg-gray-400 dark:bg-gray-900">
From
</th>
<th className="w-12 max-w-12 border border-gray-500 bg-gray-400">
<th className="w-12 max-w-12 border border-gray-500 bg-gray-400 dark:bg-gray-900">
Via
</th>
<th className="w-12 max-w-12 border border-gray-500 bg-gray-400">
<th className="w-12 max-w-12 border border-gray-500 bg-gray-400 dark:bg-gray-900">
To
</th>
<th className="w-12 max-w-12 border border-gray-500 bg-gray-400">
<th className="w-12 max-w-12 border border-gray-500 bg-gray-400 dark:bg-gray-900">
Hops
</th>
<th className="w-20 max-w-20 border border-gray-500 bg-gray-400">
<th className="w-20 max-w-20 border border-gray-500 bg-gray-400 dark:bg-gray-900">
DX
</th>
<th className="p-1 text-wrap border border-gray-500 bg-gray-400">
<th className="p-1 text-wrap border border-gray-500 bg-gray-400 dark:bg-gray-900">
Message
</th>
</tr>
Expand All @@ -129,8 +129,10 @@ export const Chat = () => {
: null;

return (
// eslint-disable-next-line react/no-array-index-key
<tr key={`chat-message-${message.id}-${i}`}>
<tr
// eslint-disable-next-line react/no-array-index-key
key={`chat-message-${message.id}-${i}`}
>
<td className="p-1 border border-gray-400 text-nowrap">
{format(
new Date(message.timestamp * 1000),
Expand Down
Loading

0 comments on commit f89afb3

Please sign in to comment.