Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gary, you wanted dark mode? #106

Merged
merged 1 commit into from
Sep 12, 2024
Merged

gary, you wanted dark mode? #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
2 changes: 1 addition & 1 deletion frontend/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
<Menu />

<div
className={`lg:pl-60 ${pathname === "/map" ? "h-screen" : ""} sm:pt-14 md:pt-14 lg:pt-0`}
className={`lg:pl-60 dark:bg-gray-950 dark:text-gray-100 ${pathname === "/map" ? "h-screen" : ""} sm:pt-14 md:pt-14 lg:pt-0`}
>
<main className={`${pathname === "/map" ? "h-screen" : "py-1 "}`}>
<div
Expand Down
95 changes: 71 additions & 24 deletions frontend/src/components/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,21 @@ export const Menu = () => {
</button>

<div
className={`lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col ${showMenu ? "" : "hidden"}`}
className={`lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col ${showMenu ? "" : "hidden"} dark:text-gray-100`}
>
<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 sm:pt-14 md:pt-14 lg:pt-0">
<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 sm:pt-14 md:pt-14 lg:pt-0">
<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 @@ -59,20 +64,27 @@ export const Menu = () => {
<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"
relative="path"
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 @@ -85,85 +97,103 @@ export const Menu = () => {
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 @@ -175,10 +205,20 @@ export const Menu = () => {
<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 @@ -187,7 +227,12 @@ export const Menu = () => {
{(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 @@ -201,6 +246,7 @@ export const Menu = () => {
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 @@ -210,6 +256,7 @@ export const Menu = () => {
href="https://github.com/TheCommsChannel/TC2-BBS-mesh"
target="_blank"
rel="noreferrer"
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
TheCommsChannel BBS
</a>
Expand Down
31 changes: 19 additions & 12 deletions frontend/src/pages/Chat.tsx
View file
Open in desktop
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 @@ -92,26 +92,28 @@ export const Chat = () => {
</div>

<h2>Channel {selectedChannel}</h2>
<table className="w-full max-w-full table-auto border-collapse border border-gray-500 bg-gray-50">
<table className="w-full max-w-full table-auto 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=" border border-gray-500 bg-gray-400">Via</th>
<th className="w-12 max-w-12 border border-gray-500 bg-gray-400">
<th className=" 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 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 @@ -133,8 +135,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 All @@ -145,6 +149,7 @@ export const Chat = () => {
<td className="p-1 text-center border border-gray-400">
<Link
to={`/nodes/${nodeFrom?.id}`}
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
title={
message.from in nodes
? `${message.from} / ${nodes[message.from].longname}`
Expand All @@ -162,6 +167,7 @@ export const Chat = () => {
<Link
to={`/nodes/${s.id}`}
title={`${message.sender} / ${s.longname}`}
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
{s.shortname ?? "UNK"}
{idx < senders.length - 1 ? ", " : ""}
Expand All @@ -185,6 +191,7 @@ export const Chat = () => {
? `${message.to} / ${nodes[message.to].longname}`
: `${message.to} / Unknown`
}
className="dark:text-indigo-400 dark:visited:text-indigo-400 dark:hover:text-indigo-500"
>
{nodes[message.to]
? nodes[message.to].shortname
Expand Down
Loading