hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: updated app to tailwind 4.x

Browse Source
This commit is contained in:
Dan Ditomaso
2025-02-19 07:47:02 -05:00
parent e769143e58
commit f4d58a9ea9
55 changed files with 372 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageComponents/Connect/BLE.tsx
+2
View File
@@ -41,6 +41,7 @@ export const BLE = ({ closeDialog }: TabElementProps): JSX.Element => {
{bleDevices.map((device) => (
<Button
key={device.id}
className="dark:bg-slate-900 dark:text-white"
onClick={() => {
onConnect(device);
}}
@@ -53,6 +54,7 @@ export const BLE = ({ closeDialog }: TabElementProps): JSX.Element => {
)}
</div>
<Button
className="dark:bg-slate-900 dark:text-white"
onClick={async () => {
await navigator.bluetooth
.requestDevice({
src/components/PageComponents/Connect/HTTP.tsx
+6 -2
View File
@@ -60,9 +60,9 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
<div className="flex h-48 flex-col gap-2">
<Label>IP Address/Hostname</Label>
<Input
// label="IP Address/Hostname"
prefix={tlsEnabled ? "https://" : "http://"}
placeholder="000.000.000.000 / meshtastic.local"
className="text-black"
disabled={connectionInProgress}
{...register("ip")}
/>
@@ -85,7 +85,11 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
)}
/>
</div>
<Button type="submit" disabled={connectionInProgress}>
<Button
type="submit"
disabled={connectionInProgress}
className="dark:bg-slate-900 dark:text-white"
>
<span>{connectionInProgress ? "Connecting..." : "Connect"}</span>
</Button>
</form>
src/components/PageComponents/Connect/Serial.tsx
+2
View File
@@ -54,6 +54,7 @@ export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
<Button
key={`${usbVendorId ?? "UNK"}-${usbProductId ?? "UNK"}-${index}`}
disabled={port.readable !== null}
className="dark:bg-slate-900 dark:text-white"
onClick={async () => {
await onConnect(port);
}}
@@ -69,6 +70,7 @@ export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
)}
</div>
<Button
className="dark:bg-slate-900 dark:text-white"
onClick={async () => {
await navigator.serial.requestPort().then((port) => {
setSerialPorts(serialPorts.concat(port));
src/components/PageComponents/Map/NodeDetail.tsx
+6 -6
View File
@@ -31,7 +31,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
Protobuf.Mesh.HardwareModel[hwModel]?.replaceAll("_", " ") ?? `${hwModel}`;
return (
<div className="dark:text-black p-1">
<div className="dark:text-slate-900 p-1">
<div className="flex gap-2">
<div className="flex flex-col items-center gap-2 min-w-6 pt-1">
<Avatar text={node.user?.shortName} />
@@ -120,14 +120,14 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
<Separator className="my-1" />
<div className="flex mt-2 text-sm">
<div className="flex items-center flex-grow">
<div className="border-2 border-black rounded px-0.5 mr-1">
<div className="flex items-center grow">
<div className="border-2 border-black rounded-sm px-0.5 mr-1">
{Number.isNaN(node.hopsAway) ? "?" : node.hopsAway}
</div>
<div>{node.hopsAway === 1 ? "Hop" : "Hops"}</div>
</div>
{node.position?.altitude && (
<div className="flex items-center flex-grow">
<div className="flex items-center grow">
<MountainSnow
size={15}
className="ml-2 mr-1"
@@ -145,7 +145,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
<div className="flex mt-2">
{!!node.deviceMetrics?.channelUtilization && (
<div className="flex-grow">
<div className="grow">
<div>Channel Util</div>
<Mono>
{node.deviceMetrics?.channelUtilization.toPrecision(3)}%
@@ -153,7 +153,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
</div>
)}
{!!node.deviceMetrics?.airUtilTx && (
<div className="flex-grow">
<div className="grow">
<div>Airtime Util</div>
<Mono>{node.deviceMetrics?.airUtilTx.toPrecision(3)}%</Mono>
</div>
src/components/PageComponents/Messages/ChannelChat.tsx
+2 -2
View File
@@ -55,7 +55,7 @@ export const ChannelChat = ({
<div className="flex-1 flex items-center justify-center">
<EmptyState />
</div>
<div className="flex-shrink-0 p-4 w-full dark:bg-gray-900">
<div className="shrink-0 p-4 w-full dark:bg-gray-900">
<MessageInput to={to} channel={channel} maxBytes={200} />
</div>
</div>
@@ -81,7 +81,7 @@ export const ChannelChat = ({
<div ref={messagesEndRef} className="w-full" />
</div>
</div>
<div className="flex-shrink-0 mt-2 p-4 w-full dark:bg-gray-900">
<div className="shrink-0 mt-2 p-4 w-full dark:bg-gray-900">
<MessageInput to={to} channel={channel} maxBytes={200} />
</div>
</div>
src/components/PageComponents/Messages/Message.tsx
+4 -4
View File
@@ -76,7 +76,7 @@ const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => {
const isFailed = state === MESSAGE_STATES.FAILED;
const iconClass = cn(
className,
"text-gray-500 dark:text-gray-400 w-4 h-4 flex-shrink-0",
"text-gray-500 dark:text-gray-400 w-4 h-4 shrink-0",
);
const Icon = STATUS_ICON_MAP[state];
@@ -99,8 +99,8 @@ const getMessageTextStyles = (state: MessageState) => {
return cn(
"break-words overflow-hidden",
isAcknowledged
? "text-black dark:text-white"
: "text-black dark:text-gray-400",
? "text-slate-900 dark:text-white"
: "text-slate-900 dark:text-gray-400",
isFailed && "text-red-500 dark:text-red-500",
);
};
@@ -109,7 +109,7 @@ const TimeDisplay = ({
date,
className,
}: { date: Date; className?: string }) => (
<div className={cn("flex items-center gap-2 flex-shrink-0", className)}>
<div className={cn("flex items-center gap-2 shrink-0", className)}>
<span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
{date.toLocaleDateString()}
</span>
src/components/PageComponents/Messages/MessageInput.tsx
+1 -1
View File
@@ -94,7 +94,7 @@ export const MessageInput = ({
});
}}
>
<div className="flex flex-grow gap-2">
<div className="flex grow gap-2">
<span className="w-full">
<Input
autoFocus={true}
src/components/PageComponents/Messages/TraceRoute.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ export const TraceRoute = ({
return (
<div className="ml-5 flex">
<span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
<span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
<p className="font-semibold">Route to destination:</p>
<p>{to?.user?.longName}</p>
<p>↓ {snrTowards?.[0] ? snrTowards[0] : "??"}dB</p>
@@ -39,7 +39,7 @@ export const TraceRoute = ({
{from?.user?.longName}
</span>
{routeBack ? (
<span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
<span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
<p className="font-semibold">Route back:</p>
<p>{from?.user?.longName}</p>
<p>↓ {snrBack?.[0] ? snrBack[0] : "??"}dB</p>