diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx index 133ca09cc4..d5b6bcbf8c 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -201,7 +201,10 @@ export function createInput(Component: typeof TextInput) { a.text_md, t.atoms.text, a.px_xs, - {lineHeight: a.text_md.lineHeight * 1.1875}, + { + lineHeight: a.text_md.lineHeight * 1.1875, + textAlignVertical: 'top', + }, ]} /> diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx index 7c77207749..f653d115d4 100644 --- a/src/components/forms/Toggle.tsx +++ b/src/components/forms/Toggle.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Pressable, View, ViewStyle} from 'react-native' -import {useTheme, atoms as a, web} from '#/alf' +import {useTheme, atoms as a, web, native} from '#/alf' import {Text} from '#/components/Typography' import {useInteractionState} from '#/components/hooks/useInteractionState' @@ -241,6 +241,9 @@ export function Label({children}: React.PropsWithChildren<{}>) { userSelect: 'none', color: disabled ? t.palette.contrast_400 : t.palette.contrast_600, }, + native({ + paddingTop: 3, + }), ]}> {children} @@ -345,8 +348,6 @@ export function Checkbox() { { height: 20, width: 20, - backgroundColor: selected ? t.palette.primary_500 : undefined, - borderColor: selected ? t.palette.primary_500 : undefined, }, baseStyles, hovered || focused ? baseHoverStyles : {}, @@ -445,8 +446,6 @@ export function Radio() { { height: 20, width: 20, - backgroundColor: selected ? t.palette.primary_500 : undefined, - borderColor: selected ? t.palette.primary_500 : undefined, }, baseStyles, hovered || focused ? baseHoverStyles : {}, diff --git a/src/components/forms/ToggleButton.tsx b/src/components/forms/ToggleButton.tsx index 2694dd021c..615fedae8b 100644 --- a/src/components/forms/ToggleButton.tsx +++ b/src/components/forms/ToggleButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useTheme, native} from '#/alf' import {Text} from '#/components/Typography' import * as Toggle from '#/components/forms/Toggle' @@ -91,14 +91,17 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) { return (