xevion/banner
1
0
Fork 0
mirror of https://github.com/Xevion/banner.git synced 2025-12-06 09:14:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: provide proper theme-based colors to all elements necessary

Browse Source
This commit is contained in:
Xevion
2025-09-13 21:57:56 -05:00
parent 91899bb109
commit 176574343f
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/routes/index.tsx
View File

@@ -34,7 +34,7 @@ const CARD_STYLES = {
const BORDER_STYLES = { const BORDER_STYLES = {
marginTop: "16px", marginTop: "16px",
paddingTop: "16px", paddingTop: "16px",
borderTop: "1px solid #e2e8f0", borderTop: "1px solid var(--gray-7)",
} as const; } as const;
// Service icon mapping // Service icon mapping
@@ -126,7 +126,7 @@ const StatusDisplay = ({ status }: { status: Status | "Unreachable" }) => {
<Text <Text
size="2" size="2"
style={{ style={{
color: status === "Disabled" ? "#8B949E" : undefined, color: status === "Disabled" ? "var(--gray-11)" : undefined,
opacity: status === "Disabled" ? 0.7 : undefined, opacity: status === "Disabled" ? 0.7 : undefined,
}} }}
> >
@@ -143,7 +143,7 @@ const ServiceStatus = ({ service }: { service: Service }) => {
<Flex align="center" justify="between"> <Flex align="center" justify="between">
<Flex align="center" gap="2"> <Flex align="center" gap="2">
<service.icon size={18} /> <service.icon size={18} />
<Text>{service.name}</Text> <Text style={{ color: "var(--gray-11)" }}>{service.name}</Text>
</Flex> </Flex>
<StatusDisplay status={service.status} /> <StatusDisplay status={service.status} />
</Flex> </Flex>
@@ -267,7 +267,6 @@ function App() {
return ( return (
<div className="App"> <div className="App">
{/* Theme Toggle - Fixed position in top right */}
<div <div
style={{ style={{
position: "fixed", position: "fixed",
@@ -299,7 +298,9 @@ function App() {
transition: "opacity 2s ease-in-out, color 2s ease-in-out", transition: "opacity 2s ease-in-out, color 2s ease-in-out",
}} }}
/> />
<Text size="4">System Status</Text> <Text size="4" style={{ color: "var(--gray-12)" }}>
System Status
</Text>
</Flex> </Flex>
{isLoading ? ( {isLoading ? (
<Skeleton height="20px" width="80px" /> <Skeleton height="20px" width="80px" />
@@ -327,7 +328,9 @@ function App() {
</TimingRow> </TimingRow>
) : shouldShowTiming ? ( ) : shouldShowTiming ? (
<TimingRow icon={Hourglass} name="Response Time"> <TimingRow icon={Hourglass} name="Response Time">
<Text size="2">{formatNumber(state.timing.health!)}ms</Text> <Text size="2" style={{ color: "var(--gray-11)" }}>
{formatNumber(state.timing.health!)}ms
</Text>
</TimingRow> </TimingRow>
) : null} ) : null}
@@ -350,11 +353,11 @@ function App() {
cursor: "pointer", cursor: "pointer",
textDecoration: "underline", textDecoration: "underline",
textDecorationStyle: "dotted", textDecorationStyle: "dotted",
textDecorationColor: "#CBCED1", textDecorationColor: "var(--gray-6)",
textUnderlineOffset: "6px", textUnderlineOffset: "6px",
}} }}
> >
<Text size="2"> <Text size="2" style={{ color: "var(--gray-11)" }}>
<TimeAgo date={state.lastFetch} /> <TimeAgo date={state.lastFetch} />
</Text> </Text>
</abbr> </abbr>
@@ -381,7 +384,7 @@ function App() {
<Text <Text
size="1" size="1"
style={{ style={{
color: "#8B949E", color: "var(--gray-11)",
}} }}
> >
v{__APP_VERSION__} v{__APP_VERSION__}
@@ -392,7 +395,7 @@ function App() {
style={{ style={{
width: "1px", width: "1px",
height: "12px", height: "12px",
backgroundColor: "#8B949E", backgroundColor: "var(--gray-10)",
opacity: 0.3, opacity: 0.3,
}} }}
/> />
@@ -400,7 +403,7 @@ function App() {
<Text <Text
size="1" size="1"
style={{ style={{
color: "#8B949E", color: "var(--gray-11)",
textDecoration: "none", textDecoration: "none",
}} }}
> >