zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Fix switch style and animate (#4814) 

* set height to 20+(2*hairline)

* animate switch

* Try to align on line height across platforms

* Use border 1px

---------

Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
Co-authored-by: Eric Bailey <git@esb.lol>
zio/stable
Samuel Newman 2024-07-23 22:49:37 +01:00 committed by GitHub
parent abb709d209
commit 3755807b5e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/forms/Toggle.tsx
View File

@ -1,5 +1,6 @@
import React from 'react' import React from 'react'
import {Pressable, View, ViewStyle} from 'react-native' import {Pressable, View, ViewStyle} from 'react-native'
import Animated, {LinearTransition} from 'react-native-reanimated'
import {HITSLOP_10} from 'lib/constants' import {HITSLOP_10} from 'lib/constants'
import { import {
@ -244,6 +245,7 @@ export function LabelText({
<Text <Text
style={[ style={[
a.font_bold, a.font_bold,
a.leading_tight,
{ {
userSelect: 'none', userSelect: 'none',
color: disabled color: disabled
@ -251,7 +253,7 @@ export function LabelText({
: t.atoms.text_contrast_high.color, : t.atoms.text_contrast_high.color,
}, },
native({ native({
paddingTop: 3, paddingTop: 2,
}), }),
flatten(style), flatten(style),
]}> ]}>
@ -344,10 +346,10 @@ export function Checkbox() {
style={[ style={[
a.justify_center, a.justify_center,
a.align_center, a.align_center,
a.border,
a.rounded_xs, a.rounded_xs,
t.atoms.border_contrast_high, t.atoms.border_contrast_high,
{ {
borderWidth: 1,
height: 20, height: 20,
width: 20, width: 20,
}, },
@ -375,34 +377,35 @@ export function Switch() {
<View <View
style={[ style={[
a.relative, a.relative,
a.border,
a.rounded_full, a.rounded_full,
t.atoms.bg, t.atoms.bg,
t.atoms.border_contrast_high, t.atoms.border_contrast_high,
{ {
borderWidth: 1,
height: 20, height: 20,
width: 30, width: 32,
padding: 2,
}, },
baseStyles, baseStyles,
hovered ? baseHoverStyles : {}, hovered ? baseHoverStyles : {},
]}> ]}>
<View <Animated.View
layout={LinearTransition.duration(100)}
style={[ style={[
a.absolute,
a.rounded_full, a.rounded_full,
{ {
height: 12, height: 14,
width: 12, width: 14,
top: 3,
left: 3,
backgroundColor: t.palette.contrast_400,
}, },
selected selected
? { ? {
backgroundColor: t.palette.primary_500, backgroundColor: t.palette.primary_500,
left: 13, alignSelf: 'flex-start',
} }
: {}, : {
backgroundColor: t.palette.contrast_400,
alignSelf: 'flex-end',
},
indicatorStyles, indicatorStyles,
]} ]}
/> />
@ -428,10 +431,10 @@ export function Radio() {
style={[ style={[
a.justify_center, a.justify_center,
a.align_center, a.align_center,
a.border,
a.rounded_full, a.rounded_full,
t.atoms.border_contrast_high, t.atoms.border_contrast_high,
{ {
borderWidth: 1,
height: 20, height: 20,
width: 20, width: 20,
}, },