Fix: Fix text colors in client UI
This commit is contained in:
parent
eb1ab466b2
commit
ba28d53654
6 changed files with 78 additions and 40 deletions
|
|
@ -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"],
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue