iarv/Remote-Terminal-for-MeshCore
1
0
Fork 1
mirror of https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git synced 2026-03-28 17:43:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Better contrast; happier eyeballs!

Browse Source
This commit is contained in:
Jack Kingsman
2026-02-13 01:26:24 -08:00
parent 1c4d6c07a8
commit 76db547f50
7 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/MessageList.tsx
View File

@@ -117,8 +117,8 @@ function HopCountBadge({ paths, onClick, variant }: HopCountBadgeProps) {
const className =
variant === 'header'
? 'font-normal text-muted-foreground/70 ml-1 text-[11px] cursor-pointer hover:text-primary hover:underline'
: 'text-[10px] text-muted-foreground/50 ml-1 cursor-pointer hover:text-primary hover:underline';
? 'font-normal text-muted-foreground ml-1 text-[11px] cursor-pointer hover:text-primary hover:underline'
: 'text-[10px] text-muted-foreground ml-1 cursor-pointer hover:text-primary hover:underline';
return (
<span
@@ -420,7 +420,7 @@ export function MessageList({
) : (
displaySender
)}
<span className="font-normal text-muted-foreground/70 ml-2 text-[11px]">
<span className="font-normal text-muted-foreground ml-2 text-[11px]">
{formatTime(msg.sender_timestamp || msg.received_at)}
</span>
{!msg.outgoing && msg.paths && msg.paths.length > 0 && (
@@ -446,7 +446,7 @@ export function MessageList({
))}
{!showAvatar && (
<>
<span className="text-[10px] text-muted-foreground/50 ml-2">
<span className="text-[10px] text-muted-foreground ml-2">
{formatTime(msg.sender_timestamp || msg.received_at)}
</span>
{!msg.outgoing && msg.paths && msg.paths.length > 0 && (

6
frontend/src/components/PathModal.tsx
View File

@@ -69,7 +69,7 @@ export function PathModal({ open, onClose, paths, senderInfo, contacts, config }
return (
<div key={index}>
<span className="text-foreground/70 font-semibold">Path {index + 1}:</span>{' '}
<span className="font-mono text-muted-foreground/70">{rawPath}</span>
<span className="font-mono text-muted-foreground">{rawPath}</span>
</div>
);
})}
@@ -305,7 +305,7 @@ function HopNode({ hop, hopNumber, prevLocation }: HopNodeProps) {
</div>
{isUnknown ? (
<div className="font-medium text-muted-foreground/70">&lt;UNKNOWN&gt;</div>
<div className="font-medium text-muted-foreground">&lt;UNKNOWN&gt;</div>
) : isAmbiguous ? (
<div>
{hop.matches.map((contact) => {
@@ -366,7 +366,7 @@ function CoordinateLink({ lat, lon, publicKey }: { lat: number; lon: number; pub
return (
<span
className="text-xs text-muted-foreground/70 font-mono cursor-pointer hover:text-primary hover:underline ml-1"
className="text-xs text-muted-foreground font-mono cursor-pointer hover:text-primary hover:underline ml-1"
onClick={handleClick}
title="View on map"
>

4
frontend/src/components/RawPacketList.tsx
View File

@@ -155,7 +155,7 @@ function getRouteTypeColor(routeType: string): string {
case 'Transport Direct':
return 'bg-orange-500/20 text-orange-400';
default:
return 'bg-gray-500/20 text-gray-400';
return 'bg-muted text-muted-foreground';
}
}
@@ -238,7 +238,7 @@ export function RawPacketList({ packets }: RawPacketListProps) {
)}
{/* Raw hex data (always visible) */}
<div className="font-mono text-[10px] break-all text-muted-foreground/70 mt-1 p-1 bg-background/50 rounded">
<div className="font-mono text-[10px] break-all text-muted-foreground mt-1 p-1 bg-background/50 rounded">
{packet.data.toUpperCase()}
</div>
</div>

22
frontend/src/components/StatusBar.tsx
View File

@@ -39,12 +39,12 @@ export function StatusBar({
};
return (
<div className="flex items-center gap-4 px-4 py-2 bg-[#252525] border-b border-[#333] text-xs">
<div className="flex items-center gap-4 px-4 py-2 bg-card border-b border-border text-xs">
{/* Mobile menu button - only visible on small screens */}
{onMenuClick && (
<button
onClick={onMenuClick}
className="md:hidden p-1 bg-transparent border-none text-[#e0e0e0] cursor-pointer"
className="md:hidden p-1 bg-transparent border-none text-foreground cursor-pointer"
aria-label="Open menu"
>
<Menu className="h-5 w-5" />
@@ -53,18 +53,20 @@ export function StatusBar({
<h1 className="text-base font-semibold mr-auto">RemoteTerm</h1>
<div className="flex items-center gap-1 text-[#888]">
<div className={`w-2 h-2 rounded-full ${connected ? 'bg-[#4caf50]' : 'bg-[#666]'}`} />
<span className="hidden lg:inline text-[#e0e0e0]">
<div className="flex items-center gap-1 text-muted-foreground">
<div
className={`w-2 h-2 rounded-full ${connected ? 'bg-primary' : 'bg-muted-foreground'}`}
/>
<span className="hidden lg:inline text-foreground">
{connected ? 'Connected' : 'Disconnected'}
</span>
</div>
{config && (
<div className="hidden lg:flex items-center gap-2 text-[#888]">
<span className="text-[#e0e0e0]">{config.name || 'Unnamed'}</span>
<div className="hidden lg:flex items-center gap-2 text-muted-foreground">
<span className="text-foreground">{config.name || 'Unnamed'}</span>
<span
className="font-mono text-[#888] cursor-pointer hover:text-[#4a9eff]"
className="font-mono text-muted-foreground cursor-pointer hover:text-primary"
onClick={() => {
navigator.clipboard.writeText(config.public_key);
toast.success('Public key copied!');
@@ -80,14 +82,14 @@ export function StatusBar({
<button
onClick={handleReconnect}
disabled={reconnecting}
className="px-3 py-1 bg-[#4a3000] border border-[#6b4500] text-[#ffa500] rounded text-xs cursor-pointer hover:bg-[#5a3a00] disabled:opacity-50 disabled:cursor-not-allowed"
className="px-3 py-1 bg-amber-950 border border-amber-800 text-amber-400 rounded text-xs cursor-pointer hover:bg-amber-900 disabled:opacity-50 disabled:cursor-not-allowed"
>
{reconnecting ? 'Reconnecting...' : 'Reconnect'}
</button>
)}
<button
onClick={onSettingsClick}
className="px-3 py-1 bg-[#333] border border-[#444] text-[#e0e0e0] rounded text-xs cursor-pointer hover:bg-[#444]"
className="px-3 py-1 bg-secondary border border-border text-foreground rounded text-xs cursor-pointer hover:bg-accent"
>
<span role="img" aria-label="Settings">
&#128295;

2
frontend/src/components/ui/sonner.tsx
View File

@@ -16,7 +16,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
// Muted error style - dark red-tinted background with readable text
error:
'group-[.toaster]:bg-[#2a1a1a] group-[.toaster]:text-[#e8a0a0] group-[.toaster]:border-[#4a2a2a] [&_[data-description]]:text-[#b08080]',
'group-[.toaster]:bg-[#2a1a1a] group-[.toaster]:text-[#e8a0a0] group-[.toaster]:border-[#4a2a2a] [&_[data-description]]:text-[#d4a0a0]',
},
}}
{...props}

2
frontend/src/index.css
View File

@@ -15,7 +15,7 @@
--secondary: 0 0% 20%;
--secondary-foreground: 0 0% 88%;
--muted: 0 0% 20%;
--muted-foreground: 0 0% 53%;
--muted-foreground: 0 0% 64%;
--accent: 0 0% 20%;
--accent-foreground: 0 0% 88%;
--destructive: 0 62% 50%;

2
frontend/src/utils/messageParser.ts
View File

@@ -26,7 +26,7 @@ export function formatTime(timestamp: number): string {
const now = new Date();
const isToday = date.toDateString() === now.toDateString();
const time = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const time = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
if (isToday) {
return time;