32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
import { React, ReactNative } from "@vendetta/metro/common";
|
|
import { resolveSemanticColorSafe } from "../lib/color";
|
|
|
|
const { View, Text } = ReactNative;
|
|
|
|
/**
|
|
* Small bordered callout for explanatory text in a settings screen. Text color used to be
|
|
* unset entirely - React Native's Text defaults to black with no explicit color, which is
|
|
* illegible on Discord's dark theme (the default for most users). Explicit theme-aware color now,
|
|
* same resolveSemanticColorSafe fallback-chain pattern used everywhere else in this repo.
|
|
*/
|
|
export default function NoteBox({ children, style }: { children: any; style?: any }) {
|
|
const textColor = resolveSemanticColorSafe(["TEXT_NORMAL", "TEXT_DEFAULT", "TEXT_MUTED"], "#96989d");
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
marginHorizontal: 16,
|
|
marginVertical: 8,
|
|
padding: 10,
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
borderColor: "rgba(128,128,128,0.25)"
|
|
},
|
|
style
|
|
]}
|
|
>
|
|
<Text style={{ fontSize: 12.5, lineHeight: 18, opacity: 0.75, color: textColor }}>{children}</Text>
|
|
</View>
|
|
);
|
|
}
|