1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {Text} from 'view/com/util/text/Text'
import {InfoCircleIcon} from 'lib/icons'
import {s, colors} from 'lib/styles'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
export function HelpTip({text}: {text: string}) {
const bg = useColorSchemeStyle(
{backgroundColor: colors.gray1},
{backgroundColor: colors.gray8},
)
const fg = useColorSchemeStyle({color: colors.gray5}, {color: colors.gray4})
return (
<View style={[styles.helptip, bg]}>
<View style={styles.icon}>
<InfoCircleIcon size={18} style={fg} strokeWidth={1.5} />
</View>
<Text type="xs-medium" style={[fg, s.ml5, s.flex1]}>
{text}
</Text>
</View>
)
}
const styles = StyleSheet.create({
icon: {
width: 18,
},
helptip: {
flexDirection: 'row',
alignItems: 'flex-start',
borderRadius: 6,
paddingHorizontal: 10,
paddingVertical: 8,
},
})
|
