forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Redesign play button (#5192)
authored by
Eric Bailey
and committed by
GitHub
c5faa603
cd9c3bf4
+31
-8
+29
-6
src/components/video/PlayButtonIcon.tsx
+29
-6
src/components/video/PlayButtonIcon.tsx
···
2
2
import {View} from 'react-native'
3
3
4
4
import {atoms as a, useTheme} from '#/alf'
5
-
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
5
+
import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
6
6
7
-
export function PlayButtonIcon({size = 44}: {size?: number}) {
7
+
export function PlayButtonIcon({size = 36}: {size?: number}) {
8
8
const t = useTheme()
9
+
const bg = t.name === 'light' ? t.palette.contrast_25 : t.palette.contrast_975
10
+
const fg = t.name === 'light' ? t.palette.contrast_975 : t.palette.contrast_25
9
11
10
12
return (
11
13
<View
12
14
style={[
13
15
a.rounded_full,
16
+
a.overflow_hidden,
14
17
a.align_center,
15
18
a.justify_center,
19
+
t.atoms.shadow_lg,
16
20
{
17
-
backgroundColor: t.palette.primary_500,
18
-
width: size + 16,
19
-
height: size + 16,
21
+
width: size + size / 1.5,
22
+
height: size + size / 1.5,
20
23
},
21
24
]}>
22
-
<PlayIcon height={size} width={size} style={{color: 'white'}} />
25
+
<View
26
+
style={[
27
+
a.absolute,
28
+
a.inset_0,
29
+
{
30
+
backgroundColor: bg,
31
+
opacity: 0.7,
32
+
},
33
+
]}
34
+
/>
35
+
<PlayIcon
36
+
width={size}
37
+
fill={fg}
38
+
style={[
39
+
a.relative,
40
+
a.z_10,
41
+
{
42
+
left: size / 50,
43
+
},
44
+
]}
45
+
/>
23
46
</View>
24
47
)
25
48
}
+1
-1
src/view/com/composer/videos/VideoPreview.tsx
+1
-1
src/view/com/composer/videos/VideoPreview.tsx