robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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>
authored by
Samuel Newman
Eric Bailey
and committed by
GitHub
3755807b
abb709d2
+17
-14
+17
-14
src/components/forms/Toggle.tsx
+17
-14
src/components/forms/Toggle.tsx
···
1
1
import React from 'react'
2
2
import {Pressable, View, ViewStyle} from 'react-native'
3
+
import Animated, {LinearTransition} from 'react-native-reanimated'
3
4
4
5
import {HITSLOP_10} from 'lib/constants'
5
6
import {
···
244
245
<Text
245
246
style={[
246
247
a.font_bold,
248
+
a.leading_tight,
247
249
{
248
250
userSelect: 'none',
249
251
color: disabled
···
251
253
: t.atoms.text_contrast_high.color,
252
254
},
253
255
native({
254
-
paddingTop: 3,
256
+
paddingTop: 2,
255
257
}),
256
258
flatten(style),
257
259
]}>
···
344
346
style={[
345
347
a.justify_center,
346
348
a.align_center,
347
-
a.border,
348
349
a.rounded_xs,
349
350
t.atoms.border_contrast_high,
350
351
{
352
+
borderWidth: 1,
351
353
height: 20,
352
354
width: 20,
353
355
},
···
375
377
<View
376
378
style={[
377
379
a.relative,
378
-
a.border,
379
380
a.rounded_full,
380
381
t.atoms.bg,
381
382
t.atoms.border_contrast_high,
382
383
{
384
+
borderWidth: 1,
383
385
height: 20,
384
-
width: 30,
386
+
width: 32,
387
+
padding: 2,
385
388
},
386
389
baseStyles,
387
390
hovered ? baseHoverStyles : {},
388
391
]}>
389
-
<View
392
+
<Animated.View
393
+
layout={LinearTransition.duration(100)}
390
394
style={[
391
-
a.absolute,
392
395
a.rounded_full,
393
396
{
394
-
height: 12,
395
-
width: 12,
396
-
top: 3,
397
-
left: 3,
398
-
backgroundColor: t.palette.contrast_400,
397
+
height: 14,
398
+
width: 14,
399
399
},
400
400
selected
401
401
? {
402
402
backgroundColor: t.palette.primary_500,
403
-
left: 13,
403
+
alignSelf: 'flex-start',
404
404
}
405
-
: {},
405
+
: {
406
+
backgroundColor: t.palette.contrast_400,
407
+
alignSelf: 'flex-end',
408
+
},
406
409
indicatorStyles,
407
410
]}
408
411
/>
···
428
431
style={[
429
432
a.justify_center,
430
433
a.align_center,
431
-
a.border,
432
434
a.rounded_full,
433
435
t.atoms.border_contrast_high,
434
436
{
437
+
borderWidth: 1,
435
438
height: 20,
436
439
width: 20,
437
440
},