diff options
| author | Samuel Newman <mozzius@protonmail.com> | 2024-07-23 22:49:37 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-07-23 22:49:37 +0100 |
| commit | 3755807b5efd4b6f228a0c03d5339c06ba0824a3 (patch) | |
| tree | 16c82d6dc11b9ed349e4418e88511a5d624cfe61 /src | |
| parent | abb709d209946cdb0be0a88a6982116f028e0672 (diff) | |
| download | voidsky-3755807b5efd4b6f228a0c03d5339c06ba0824a3.tar.zst | |
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>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/forms/Toggle.tsx | 31 |
1 files changed, 17 insertions, 14 deletions
diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx index 8036223f2..502ed535a 100644 --- a/src/components/forms/Toggle.tsx +++ b/src/components/forms/Toggle.tsx @@ -1,5 +1,6 @@ import React from 'react' import {Pressable, View, ViewStyle} from 'react-native' +import Animated, {LinearTransition} from 'react-native-reanimated' import {HITSLOP_10} from 'lib/constants' import { @@ -244,6 +245,7 @@ export function LabelText({ <Text style={[ a.font_bold, + a.leading_tight, { userSelect: 'none', color: disabled @@ -251,7 +253,7 @@ export function LabelText({ : t.atoms.text_contrast_high.color, }, native({ - paddingTop: 3, + paddingTop: 2, }), flatten(style), ]}> @@ -344,10 +346,10 @@ export function Checkbox() { style={[ a.justify_center, a.align_center, - a.border, a.rounded_xs, t.atoms.border_contrast_high, { + borderWidth: 1, height: 20, width: 20, }, @@ -375,34 +377,35 @@ export function Switch() { <View style={[ a.relative, - a.border, a.rounded_full, t.atoms.bg, t.atoms.border_contrast_high, { + borderWidth: 1, height: 20, - width: 30, + width: 32, + padding: 2, }, baseStyles, hovered ? baseHoverStyles : {}, ]}> - <View + <Animated.View + layout={LinearTransition.duration(100)} style={[ - a.absolute, a.rounded_full, { - height: 12, - width: 12, - top: 3, - left: 3, - backgroundColor: t.palette.contrast_400, + height: 14, + width: 14, }, selected ? { backgroundColor: t.palette.primary_500, - left: 13, + alignSelf: 'flex-start', } - : {}, + : { + backgroundColor: t.palette.contrast_400, + alignSelf: 'flex-end', + }, indicatorStyles, ]} /> @@ -428,10 +431,10 @@ export function Radio() { style={[ a.justify_center, a.align_center, - a.border, a.rounded_full, t.atoms.border_contrast_high, { + borderWidth: 1, height: 20, width: 20, }, |