Multiple theme support & fixes
This commit is contained in:
Sacha Weatherstone
@@ -30,7 +30,6 @@ export const ChannelsPage = (): JSX.Element => {
|
||||
actions={[
|
||||
() => (
|
||||
<Button
|
||||
variant="secondary"
|
||||
iconBefore={<ArrowDownOnSquareStackIcon className="w-4" />}
|
||||
onClick={() => {
|
||||
setImportDialogOpen(true);
|
||||
@@ -41,7 +40,6 @@ export const ChannelsPage = (): JSX.Element => {
|
||||
),
|
||||
() => (
|
||||
<Button
|
||||
variant="secondary"
|
||||
iconBefore={<QrCodeIcon className="w-4" />}
|
||||
onClick={() => {
|
||||
setQRDialogOpen(true);
|
||||
|
||||
@@ -41,7 +41,6 @@ export const ConfigPage = (): JSX.Element => {
|
||||
<Button
|
||||
disabled={!pendingSettingsChanges}
|
||||
onClick={connection?.commitEditSettings}
|
||||
variant="primary"
|
||||
>
|
||||
Commit Changes
|
||||
</Button>
|
||||
|
||||
+11
-11
@@ -17,31 +17,31 @@ export const LogsPage = (): JSX.Element => {
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-y-auto">
|
||||
<div className="overflow-hidden ring-1 ring-black ring-opacity-5">
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<div className="ring-black overflow-hidden ring-1 ring-opacity-5">
|
||||
<table className="divide-gray-300 min-w-full divide-y">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 pr-3 pl-6 text-left text-sm font-semibold text-gray-900"
|
||||
className="text-gray-900 py-3.5 pr-3 pl-6 text-left text-sm font-semibold"
|
||||
>
|
||||
Emitter
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
className="text-gray-900 py-3.5 text-left text-sm font-semibold"
|
||||
>
|
||||
Level
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
className="text-gray-900 py-3.5 text-left text-sm font-semibold"
|
||||
>
|
||||
Message
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
className="text-gray-900 py-3.5 text-left text-sm font-semibold"
|
||||
>
|
||||
Scope
|
||||
</th>
|
||||
@@ -53,18 +53,18 @@ export const LogsPage = (): JSX.Element => {
|
||||
key={index}
|
||||
className={index % 2 === 0 ? undefined : "bg-gray-50"}
|
||||
>
|
||||
<td className="whitespace-nowrap py-2 pl-6 text-sm text-gray-500">
|
||||
<td className="text-gray-500 whitespace-nowrap py-2 pl-6 text-sm">
|
||||
<span className="my-auto">{Types.Emitter[log.emitter]}</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
||||
<span className="rounded-md bg-slate-200 p-1">
|
||||
<td className="text-gray-500 whitespace-nowrap py-2 text-sm">
|
||||
<span className="bg-slate-200 rounded-md p-1">
|
||||
<Mono>{[Protobuf.LogRecord_Level[log.level]]}</Mono>
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
||||
<td className="text-gray-500 whitespace-nowrap py-2 text-sm">
|
||||
<Mono>{log.message}</Mono>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
||||
<td className="text-gray-500 whitespace-nowrap py-2 text-sm">
|
||||
{Types.EmitterScope[log.scope]}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -32,7 +32,6 @@ export const MessagesPage = (): JSX.Element => {
|
||||
actions={[
|
||||
() => (
|
||||
<IconButton
|
||||
variant="secondary"
|
||||
icon={<PencilIcon className="h-4" />}
|
||||
onClick={() => {
|
||||
setActivePage("channels");
|
||||
|
||||
+90
-115
@@ -18,126 +18,101 @@ export const PeersPage = (): JSX.Element => {
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-y-auto">
|
||||
<div className="overflow-hidden ring-1 ring-black ring-opacity-5">
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 pr-3 pl-6 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Model
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
MAC Address
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Versions
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Last Heard
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
SNR
|
||||
</th>
|
||||
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
||||
<span className="sr-only">Edit</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white">
|
||||
{nodes.map((node, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className={index % 2 === 0 ? undefined : "bg-gray-50"}
|
||||
>
|
||||
<td className="flex gap-2 whitespace-nowrap py-2 pr-3 pl-6 text-sm font-medium text-gray-900">
|
||||
<Hashicon size={24} value={node.data.num.toString()} />
|
||||
<span className="my-auto">
|
||||
{node.data.user?.longName ??
|
||||
`Meshtastic_${base16
|
||||
.stringify(node.data.user?.macaddr.subarray(4, 6) ?? [])
|
||||
.toLowerCase()}`}
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
||||
<span className="rounded-md bg-slate-200 p-1">
|
||||
<Mono>
|
||||
{Protobuf.HardwareModel[node.data.user?.hwModel ?? 0]}
|
||||
</Mono>
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
||||
<table className="min-w-full">
|
||||
<thead className="bg-backgroundPrimary text-sm font-semibold text-textPrimary">
|
||||
<tr>
|
||||
<th scope="col" className="py-2 pr-3 pl-6 text-left">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" className="py-2 text-left">
|
||||
Model
|
||||
</th>
|
||||
<th scope="col" className="py-2 text-left">
|
||||
MAC Address
|
||||
</th>
|
||||
<th scope="col" className="py-2 text-left">
|
||||
Versions
|
||||
</th>
|
||||
<th scope="col" className="py-2 text-left">
|
||||
Last Heard
|
||||
</th>
|
||||
<th scope="col" className="py-2 text-left">
|
||||
SNR
|
||||
</th>
|
||||
<th scope="col" className="relative py-2 pl-3 pr-4 sm:pr-6">
|
||||
<span className="sr-only">Edit</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{nodes.map((node, index) => (
|
||||
<tr key={index}>
|
||||
<td className="flex gap-2 whitespace-nowrap py-2 pr-3 pl-6 text-sm font-medium text-textPrimary">
|
||||
<Hashicon size={24} value={node.data.num.toString()} />
|
||||
<span className="my-auto">
|
||||
{node.data.user?.longName ??
|
||||
`Meshtastic_${base16
|
||||
.stringify(node.data.user?.macaddr.subarray(4, 6) ?? [])
|
||||
.toLowerCase()}`}
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-textSecondary">
|
||||
<span className="bg-slate-200 rounded-md p-1">
|
||||
<Mono>
|
||||
{base16
|
||||
.stringify(node.data.user?.macaddr ?? [])
|
||||
.match(/.{1,2}/g)
|
||||
?.join(":") ?? ""}
|
||||
{Protobuf.HardwareModel[node.data.user?.hwModel ?? 0]}
|
||||
</Mono>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
||||
{node.metadata ? (
|
||||
<>
|
||||
<Mono>{node.metadata.firmwareVersion}</Mono>
|
||||
<span className="text-black">/</span>
|
||||
<Mono>{node.metadata.deviceStateVersion}</Mono>
|
||||
</>
|
||||
) : (
|
||||
<IconButton
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
if (connection) {
|
||||
void toast.promise(
|
||||
connection.getMetadata({ nodeNum: node.data.num }),
|
||||
{
|
||||
loading: "Requesting Metadata...",
|
||||
success: "Recieved Metadata",
|
||||
error: "No response received"
|
||||
}
|
||||
);
|
||||
}
|
||||
}}
|
||||
icon={<ArrowPathRoundedSquareIcon className="h-4" />}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
||||
{new Date(node.data.lastHeard).toLocaleTimeString()}
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
||||
<Mono>{node.data.snr}db</Mono>
|
||||
</td>
|
||||
<td className="relative whitespace-nowrap pl-3 pr-4 text-right text-sm font-medium">
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-textSecondary">
|
||||
<Mono>
|
||||
{base16
|
||||
.stringify(node.data.user?.macaddr ?? [])
|
||||
.match(/.{1,2}/g)
|
||||
?.join(":") ?? ""}
|
||||
</Mono>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-textSecondary">
|
||||
{node.metadata ? (
|
||||
<>
|
||||
<Mono>{node.metadata.firmwareVersion}</Mono>
|
||||
<span className="text-black">/</span>
|
||||
<Mono>{node.metadata.deviceStateVersion}</Mono>
|
||||
</>
|
||||
) : (
|
||||
<IconButton
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
icon={<EllipsisHorizontalIcon className="h-4" />}
|
||||
onClick={() => {
|
||||
if (connection) {
|
||||
void toast.promise(
|
||||
connection.getMetadata({ nodeNum: node.data.num }),
|
||||
{
|
||||
loading: "Requesting Metadata...",
|
||||
success: "Recieved Metadata",
|
||||
error: "No response received"
|
||||
}
|
||||
);
|
||||
}
|
||||
}}
|
||||
icon={<ArrowPathRoundedSquareIcon className="h-4" />}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-textSecondary">
|
||||
{new Date(node.data.lastHeard).toLocaleTimeString()}
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-2 text-sm text-textSecondary">
|
||||
<Mono>{node.data.snr}db</Mono>
|
||||
</td>
|
||||
<td className="relative whitespace-nowrap pl-3 pr-4 text-right text-sm font-medium">
|
||||
<IconButton
|
||||
size="sm"
|
||||
icon={<EllipsisHorizontalIcon className="h-4" />}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user