Fix: Fix text colors in client UI

This commit is contained in:
kmmiio99o 2025-12-09 23:59:14 +01:00
parent eb1ab466b2
commit ba28d53654
6 changed files with 78 additions and 40 deletions

View file

@ -44,7 +44,7 @@ const useStyles = createStyles({
},
headerLabel: {
...TextStyleSheet["heading-md/semibold"],
color: semanticColors.TEXT_NORMAL,
color: semanticColors.HEADER_PRIMARY,
},
headerSubtitle: {
...TextStyleSheet["text-md/semibold"],

View file

@ -19,6 +19,7 @@ import {
TableSwitchRow,
Stack,
} from "@metro/common/components";
import { semanticColors } from "@ui/color";
import { ScrollView, View } from "react-native";
import ErrorComponentStackCard from "./ErrorComponentStackCard";
@ -74,7 +75,7 @@ export default function ErrorBoundaryScreen(props: {
<Text
variant="heading-md/extrabold"
style={{
color: tokens.colors.TEXT_NORMAL,
color: semanticColors.HEADER_PRIMARY,
marginBottom: 8,
textAlign: "center",
}}

View file

@ -1,44 +1,73 @@
import { Strings } from "@core/i18n";
import { Codeblock } from "@lib/ui/components";
import { showSheet } from "@lib/ui/sheets";
import { Button, Card, Stack, Text, TwinButtons } from "@metro/common/components";
import {
Button,
Card,
Stack,
Text,
TwinButtons,
} from "@metro/common/components";
import { semanticColors } from "@ui/color";
import { ReactNode } from "react";
import { View } from "react-native";
import ErrorDetailsActionSheet from "./ErrorDetailsActionSheet";
export const INDEX_BUNDLE_FILE: string = window.HermesInternal.getFunctionLocation(window.__r).fileName;
export const INDEX_BUNDLE_FILE: string =
window.HermesInternal.getFunctionLocation(window.__r).fileName;
interface ErrorCardProps {
error: unknown;
header?: string | ReactNode;
onRetryRender?: () => void;
error: unknown;
header?: string | ReactNode;
onRetryRender?: () => void;
}
export default function ErrorCard(props: ErrorCardProps) {
return <Card>
<Stack>
{props.header && typeof props.header !== "string"
? props.header
: <Text variant="heading-lg/bold">{props.header ?? Strings.UH_OH}</Text>
}
<Codeblock selectable={true}>{String(props.error)}</Codeblock>
<TwinButtons>
{props.onRetryRender && <Button
variant="destructive"
// icon={findAssetId("RetryIcon")}
text={Strings.RETRY_RENDER}
onPress={props.onRetryRender}
/>}
{props.error instanceof Error ? <Button
text={"Details"}
// icon={findAssetId("CircleInformationIcon-primary")}
onPress={() => showSheet(
"BunnyErrorDetailsActionSheet",
ErrorDetailsActionSheet,
{ error: props.error as Error }
)}
/> : null}
</TwinButtons>
</Stack>
</Card>;
return (
<Card>
<Stack>
{props.header && typeof props.header !== "string" ? (
props.header
) : (
<Text variant="heading-lg/bold">{props.header ?? Strings.UH_OH}</Text>
)}
<View
style={{
backgroundColor: semanticColors.BACKGROUND_SECONDARY,
borderRadius: 8,
borderWidth: 1,
borderColor: semanticColors.BACKGROUND_TERTIARY,
padding: 12,
}}
>
<Text style={{ color: semanticColors.TEXT_MUTED }}>
{String(props.error)}
</Text>
</View>
<TwinButtons>
{props.onRetryRender && (
<Button
variant="destructive"
// icon={findAssetId("RetryIcon")}
text={Strings.RETRY_RENDER}
onPress={props.onRetryRender}
/>
)}
{props.error instanceof Error ? (
<Button
text={"Details"}
// icon={findAssetId("CircleInformationIcon-primary")}
onPress={() =>
showSheet(
"BunnyErrorDetailsActionSheet",
ErrorDetailsActionSheet,
{ error: props.error as Error },
)
}
/>
) : null}
</TwinButtons>
</Stack>
</Card>
);
}

View file

@ -27,8 +27,10 @@ export default function AssetBrowser() {
>
<Text
variant="text-sm/medium"
color="text-danger"
style={{ marginBottom: 16 }}
style={{
marginBottom: 16,
color: "var(--text-muted)",
}}
>
Some assets types cannot be displayed and will be marked in red.
</Text>

View file

@ -16,6 +16,7 @@ import { showToast } from "@ui/toasts";
import { showConfirmationAlert } from "@core/vendetta/alerts";
import { VdPluginManager } from "@core/vendetta/plugins";
import { purgeStorage as purgeVdStorage } from "@core/vendetta/storage";
import { semanticColors } from "@ui/color";
import { PluginInfoActionSheetProps } from "./common";
import TitleComponent from "./TitleComponent";
@ -233,8 +234,10 @@ export default function PluginInfoActionSheet({
<Card>
<Text
variant="text-md/semibold"
color="text-primary"
style={{ marginBottom: 4 }}
style={{
marginBottom: 4,
color: semanticColors.HEADER_PRIMARY,
}}
>
Description
</Text>

View file

@ -14,6 +14,7 @@ import {
VdThemeInfo,
} from "@lib/addons/themes";
import { formatString, Strings } from "@core/i18n";
import { semanticColors } from "@ui/color";
interface ThemeInfoActionSheetProps {
theme: VdThemeInfo;
@ -191,8 +192,10 @@ export default function ThemeInfoActionSheet({
<Card>
<Text
variant="text-md/semibold"
color="text-primary"
style={{ marginBottom: 4 }}
style={{
marginBottom: 4,
color: semanticColors.HEADER_PRIMARY,
}}
>
Description
</Text>