feat: fix buttons in Developer settings looking bad

This commit is contained in:
kmmiio99o 2026-02-06 20:13:55 +01:00
parent 5bdc55a8b0
commit f7d4061b86
No known key found for this signature in database
GPG key ID: 163FE39F7772D2EC
2 changed files with 73 additions and 59 deletions

View file

@ -122,76 +122,90 @@ export default function Developer() {
style={{ paddingVertical: 24, paddingHorizontal: 12 }}
spacing={24}
>
<TableRowGroup title={Strings.DEBUGGER_URL}>
<TextInput
placeholder="127.0.0.1:9090"
size="md"
leadingIcon={() => (
<LegacyFormText style={styles.leadingText}>
ws://
</LegacyFormText>
)}
defaultValue={settings.debuggerUrl}
onChange={(v: string) => (settings.debuggerUrl = v)}
/>
<TableSwitchRow
label={Strings.AUTO_DEBUGGER}
icon={<TableRow.Icon source={findAssetId("copy")} />}
value={settings.autoDebugger}
onValueChange={(v: boolean) => {
settings.autoDebugger = v;
}}
/>
<TableRow
label={Strings.CONNECT_TO_DEBUG_WEBSOCKET}
subLabel="Connect to Chrome DevTools for debugging"
icon={<TableRow.Icon source={findAssetId("WrenchIcon")} />}
onPress={handleDebuggerConnect}
/>
</TableRowGroup>
<Stack spacing={4}>
<TableRowGroup title={Strings.DEBUGGER_URL}>
<Stack spacing={4}>
<TextInput
placeholder="127.0.0.1:9090"
size="md"
leadingIcon={() => (
<LegacyFormText style={styles.leadingText}>
ws://
</LegacyFormText>
)}
defaultValue={settings.debuggerUrl}
onChange={(v: string) => (settings.debuggerUrl = v)}
/>
</Stack>
</TableRowGroup>
{isReactDevToolsPreloaded() && (
<TableRowGroup title="React Development">
<TextInput
placeholder="127.0.0.1:8097"
size="md"
leadingIcon={() => (
<LegacyFormText style={styles.leadingText}>
ws://
</LegacyFormText>
)}
defaultValue={settings.devToolsUrl}
onChange={(v: string) => (settings.devToolsUrl = v)}
/>
<TableRowGroup>
<TableSwitchRow
label={Strings.AUTO_DEVTOOLS}
icon={<TableRow.Icon source={findAssetId("ic_badge_staff")} />}
value={settings.autoDevTools}
label={Strings.AUTO_DEBUGGER}
icon={<TableRow.Icon source={findAssetId("copy")} />}
value={settings.autoDebugger}
onValueChange={(v: boolean) => {
settings.autoDevTools = v;
settings.autoDebugger = v;
}}
/>
<TableRow
label={Strings.CONNECT_TO_REACT_DEVTOOLS}
subLabel="Connect React DevTools for component debugging"
icon={<TableRow.Icon source={findAssetId("ic_badge_staff")} />}
onPress={handleReactDevToolsConnect}
label={Strings.CONNECT_TO_DEBUG_WEBSOCKET}
subLabel="Connect DevTools for debugging"
icon={<TableRow.Icon source={findAssetId("WrenchIcon")} />}
onPress={handleDebuggerConnect}
/>
</TableRowGroup>
</Stack>
{isLoaderConfigSupported() && isVendettaLoader() && (
{isReactDevToolsPreloaded() && (
<Stack spacing={4}>
<TableRowGroup title="React Development">
<Stack spacing={4}>
<TextInput
placeholder="127.0.0.1:8097"
size="md"
leadingIcon={() => (
<LegacyFormText style={styles.leadingText}>
ws://
</LegacyFormText>
)}
defaultValue={settings.devToolsUrl}
onChange={(v: string) => (settings.devToolsUrl = v)}
/>
</Stack>
</TableRowGroup>
<TableRowGroup>
<TableSwitchRow
label={Strings.LOAD_REACT_DEVTOOLS}
subLabel={`${Strings.VERSION}: ${getReactDevToolsVersion()}`}
icon={
<TableRow.Icon source={findAssetId("ic_badge_staff")} />
}
value={loaderConfig.loadReactDevTools}
label={Strings.AUTO_DEVTOOLS}
icon={<TableRow.Icon source={findAssetId("ic_badge_staff")} />}
value={settings.autoDevTools}
onValueChange={(v: boolean) => {
loaderConfig.loadReactDevTools = v;
settings.autoDevTools = v;
}}
/>
)}
</TableRowGroup>
<TableRow
label={Strings.CONNECT_TO_REACT_DEVTOOLS}
subLabel="Connect React DevTools for component debugging"
icon={<TableRow.Icon source={findAssetId("ic_badge_staff")} />}
onPress={handleReactDevToolsConnect}
/>
{isLoaderConfigSupported() && isVendettaLoader() && (
<TableSwitchRow
label={Strings.LOAD_REACT_DEVTOOLS}
subLabel={`${Strings.VERSION}: ${getReactDevToolsVersion()}`}
icon={
<TableRow.Icon source={findAssetId("ic_badge_staff")} />
}
value={loaderConfig.loadReactDevTools}
onValueChange={(v: boolean) => {
loaderConfig.loadReactDevTools = v;
}}
/>
)}
</TableRowGroup>
</Stack>
)}
{isLoaderConfigSupported() && (

View file

@ -211,7 +211,7 @@ interface TableRowIconProps {
export type TableRowIcon = React.FC<TableRowIconProps>;
interface TableRowGroupProps {
title: string;
title?: string;
children: ReactNode;
}