octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Use svg icons instead of expo ones

Browse Source 
Possibility to control `strokeWidth`
This commit is contained in:
Zhiyuan Zheng
2021-01-03 02:00:26 +01:00
parent 5a80359739
commit dceaf8d25c
62 changed files with 495 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Button.tsx
View File

@ -1,4 +1,7 @@
import { Feather } from '@expo/vector-icons'
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import layoutAnimation from '@utils/styles/layoutAnimation'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useMemo } from 'react'
import {
Pressable,
@ -9,9 +12,6 @@ import {
ViewStyle
} from 'react-native'
import { Chase } from 'react-native-animated-spinkit'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import layoutAnimation from '@root/utils/styles/layoutAnimation'
export interface Props {
style?: StyleProp<ViewStyle>
@ -23,6 +23,7 @@ export interface Props {
destructive?: boolean
disabled?: boolean
strokeWidth?: number
size?: 'S' | 'M' | 'L'
spacing?: 'XS' | 'S' | 'M' | 'L'
round?: boolean
@ -38,6 +39,7 @@ const Button: React.FC<Props> = ({
loading = false,
destructive = false,
disabled = false,
strokeWidth,
size = 'M',
spacing = 'S',
round = false,
@ -78,12 +80,12 @@ const Button: React.FC<Props> = ({
case 'icon':
return (
<>
<Feather
name={content as any}
size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
<Icon
name={content}
color={colorContent}
strokeWidth={strokeWidth}
style={{ opacity: loading ? 0 : 1 }}
testID='icon'
size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
/>
{loading && loadingSpinkit}
</>

10
src/components/Header/Left.tsx
View File

@ -1,8 +1,8 @@
import React, { useMemo } from 'react'
import { Pressable, StyleSheet, Text } from 'react-native'
import { Feather } from '@expo/vector-icons'
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useMemo } from 'react'
import { Pressable, StyleSheet, Text } from 'react-native'
export interface Props {
type?: 'icon' | 'text'
@ -18,9 +18,9 @@ const HeaderLeft: React.FC<Props> = ({ type = 'icon', content, onPress }) => {
switch (type) {
case 'icon':
return (
<Feather
name={content || ('chevron-left' as any)}
<Icon
color={theme.primary}
name={content || 'ChevronLeft'}
size={StyleConstants.Spacing.M * 1.25}
/>
)

16
src/components/Header/Right.tsx
View File

@ -1,13 +1,13 @@
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useMemo } from 'react'
import { Pressable, StyleSheet, Text, View } from 'react-native'
import { Chase } from 'react-native-animated-spinkit'
import { Feather } from '@expo/vector-icons'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
export interface Props {
type?: 'icon' | 'text'
content?: string
content: string
loading?: boolean
disabled?: boolean
@ -41,11 +41,11 @@ const HeaderRight: React.FC<Props> = ({
case 'icon':
return (
<>
<Feather
name={content as any}
color={disabled ? theme.secondary : theme.primary}
size={StyleConstants.Spacing.M * 1.25}
<Icon
name={content}
style={{ opacity: loading ? 0 : 1 }}
size={StyleConstants.Spacing.M * 1.25}
color={disabled ? theme.secondary : theme.primary}
/>
{loading && loadingSpinkit}
</>

45
src/components/Icon.tsx Normal file
View File

@ -0,0 +1,45 @@
import React, { createElement } from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'
import * as FeatherIcon from 'react-native-feather'
export interface Props {
name: string
size: number
color: string
strokeWidth?: number
inline?: boolean // When used in line of text, need to drag it down
style?: StyleProp<ViewStyle>
}
const Icon: React.FC<Props> = ({
name,
size,
color,
strokeWidth = 2,
inline = false,
style
}) => {
return (
<View
style={[
style,
{
width: size,
height: size,
justifyContent: 'center',
alignItems: 'center',
marginBottom: inline ? -size * 0.125 : undefined
}
]}
>
{createElement(FeatherIcon[name], {
width: size,
height: size,
color,
strokeWidth
})}
</View>
)
}
export default Icon

8
src/components/Menu/Row.tsx
View File

@ -1,4 +1,4 @@
import { Feather } from '@expo/vector-icons'
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { ColorDefinitions } from '@utils/styles/themes'
@ -18,7 +18,7 @@ export interface Props {
switchDisabled?: boolean
switchOnValueChange?: () => void
iconBack?: 'chevron-right' | 'check'
iconBack?: 'ChevronRight' | 'Check'
iconBackColor?: ColorDefinitions
loading?: boolean
@ -63,7 +63,7 @@ const MenuRow: React.FC<Props> = ({
<View style={styles.core}>
<View style={styles.front}>
{iconFront && (
<Feather
<Icon
name={iconFront}
size={StyleConstants.Font.Size.M + 2}
color={theme[iconFrontColor]}
@ -116,7 +116,7 @@ const MenuRow: React.FC<Props> = ({
) : null}
{iconBack ? (
<>
<Feather
<Icon
name={iconBack}
size={StyleConstants.Font.Size.M + 2}
color={theme[iconBackColor]}

53
src/components/Parse/HTML.tsx
View File

@ -1,6 +1,6 @@
import Icon from '@components/Icon'
import openLink from '@components/openLink'
import ParseEmojis from '@components/Parse/Emojis'
import { Feather } from '@expo/vector-icons'
import { useNavigation } from '@react-navigation/native'
import { StyleConstants } from '@utils/styles/constants'
import layoutAnimation from '@utils/styles/layoutAnimation'
@ -96,10 +96,11 @@ const renderNode = ({
}
>
{!shouldBeTag ? (
<Feather
name='external-link'
size={StyleConstants.Font.Size[size]}
<Icon
inline
color={theme.blue}
name='ExternalLink'
size={StyleConstants.Font.Size[size]}
/>
) : null}
{content || (showFullLink ? href : domain[1])}
@ -166,37 +167,45 @@ const ParseHTML: React.FC<Props> = ({
const [heightOriginal, setHeightOriginal] = useState<number>()
const [heightTruncated, setHeightTruncated] = useState<number>()
const [allowExpand, setAllowExpand] = useState(
numberOfLines === 0 ? true : undefined
)
const [allowExpand, setAllowExpand] = useState(false)
const [showAllText, setShowAllText] = useState(false)
const calNumberOfLines = useMemo(() => {
if (heightOriginal) {
if (!heightTruncated) {
return numberOfLines
} else {
if (allowExpand && !showAllText) {
if (numberOfLines === 0) {
// For spoilers without calculation
return showAllText ? undefined : 1
} else {
if (heightOriginal) {
if (!heightTruncated) {
return numberOfLines
} else {
return undefined
if (allowExpand && !showAllText) {
return numberOfLines
} else {
return undefined
}
}
} else {
return undefined
}
} else {
return undefined
}
}, [heightOriginal, heightTruncated, allowExpand, showAllText])
const onLayout = useCallback(
({ nativeEvent }) => {
if (!heightOriginal) {
setHeightOriginal(nativeEvent.layout.height)
if (numberOfLines === 0) {
// For spoilers without calculation
setAllowExpand(true)
} else {
if (!heightTruncated) {
setHeightTruncated(nativeEvent.layout.height)
if (!heightOriginal) {
setHeightOriginal(nativeEvent.layout.height)
} else {
if (heightOriginal > heightTruncated) {
setAllowExpand(true)
if (!heightTruncated) {
setHeightTruncated(nativeEvent.layout.height)
} else {
if (heightOriginal > heightTruncated) {
setAllowExpand(true)
}
}
}
}
@ -214,7 +223,7 @@ const ParseHTML: React.FC<Props> = ({
}}
children={children}
numberOfLines={calNumberOfLines}
onLayout={allowExpand === undefined ? onLayout : undefined}
onLayout={onLayout}
/>
{allowExpand ? (
<Pressable

2
src/components/Timelines.tsx
View File

@ -86,7 +86,7 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
</View>
),
headerRight: () => (
<HeaderRight content='search' onPress={onPressSearch} />
<HeaderRight content='Search' onPress={onPressSearch} />
)
})
}}

12
src/components/Timelines/Timeline.tsx
View File

@ -24,10 +24,10 @@ export type TimelineData =
export interface Props {
page: App.Pages
hashtag?: string
list?: string
toot?: Mastodon.Status
account?: string
hashtag?: Mastodon.Tag['name']
list?: Mastodon.List['id']
toot?: Mastodon.Status['id']
account?: Mastodon.Account['id']
disableRefresh?: boolean
disableInfinity?: boolean
}
@ -134,7 +134,7 @@ const Timeline: React.FC<Props> = ({
flattenPinnedLength[0] && {
pinnedLength: flattenPinnedLength[0]
})}
{...(toot && toot.id === item.id && { highlighted: true })}
{...(toot === item.id && { highlighted: true })}
/>
)
}
@ -144,7 +144,7 @@ const Timeline: React.FC<Props> = ({
const ItemSeparatorComponent = useCallback(
({ leadingItem }) => (
<TimelineSeparator
{...(toot && toot.id === leadingItem.id && { highlighted: true })}
{...(toot === leadingItem.id && { highlighted: true })}
/>
),
[]

5
src/components/Timelines/Timeline/Default.tsx
View File

@ -44,6 +44,7 @@ const TimelineDefault: React.FC<Props> = ({
}),
[]
)
return (
<Pressable style={styles.statusView} onPress={onPress}>
{item.reblog ? (
@ -57,11 +58,11 @@ const TimelineDefault: React.FC<Props> = ({
{...(!isRemotePublic && { queryKey })}
account={actualStatus.account}
/>
<TimelineHeaderDefault
{/* <TimelineHeaderDefault
{...(!isRemotePublic && { queryKey })}
status={actualStatus}
sameAccount={actualStatus.account.id === localAccountId}
/>
/> */}
</View>
<View

10
src/components/Timelines/Timeline/Empty.tsx
View File

@ -1,5 +1,5 @@
import Button from '@components/Button'
import { Feather } from '@expo/vector-icons'
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useMemo } from 'react'
@ -26,8 +26,8 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
case 'error':
return (
<>
<Feather
name='frown'
<Icon
name='Frown'
size={StyleConstants.Font.Size.L}
color={theme.primary}
/>
@ -44,8 +44,8 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
case 'success':
return (
<>
<Feather
name='smartphone'
<Icon
name='Smartphone'
size={StyleConstants.Font.Size.L}
color={theme.primary}
/>

25
src/components/Timelines/Timeline/Shared/Actioned.tsx
View File

@ -1,5 +1,5 @@
import Icon from '@components/Icon'
import { ParseEmojis } from '@components/Parse'
import { Feather } from '@expo/vector-icons'
import { useNavigation } from '@react-navigation/native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -37,8 +37,8 @@ const TimelineActioned: React.FC<Props> = ({
case 'pinned':
return (
<>
<Feather
name='anchor'
<Icon
name='Anchor'
size={StyleConstants.Font.Size.S}
color={iconColor}
style={styles.icon}
@ -50,8 +50,8 @@ const TimelineActioned: React.FC<Props> = ({
case 'favourite':
return (
<>
<Feather
name='heart'
<Icon
name='Heart'
size={StyleConstants.Font.Size.S}
color={iconColor}
style={styles.icon}
@ -65,8 +65,8 @@ const TimelineActioned: React.FC<Props> = ({
case 'follow':
return (
<>
<Feather
name='user-plus'
<Icon
name='UserPlus'
size={StyleConstants.Font.Size.S}
color={iconColor}
style={styles.icon}
@ -80,8 +80,8 @@ const TimelineActioned: React.FC<Props> = ({
case 'poll':
return (
<>
<Feather
name='bar-chart-2'
<Icon
name='BarChart2'
size={StyleConstants.Font.Size.S}
color={iconColor}
style={styles.icon}
@ -93,8 +93,8 @@ const TimelineActioned: React.FC<Props> = ({
case 'reblog':
return (
<>
<Feather
name='repeat'
<Icon
name='Repeat'
size={StyleConstants.Font.Size.S}
color={iconColor}
style={styles.icon}
@ -118,12 +118,13 @@ const TimelineActioned: React.FC<Props> = ({
const styles = StyleSheet.create({
actioned: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: StyleConstants.Spacing.S,
paddingLeft: StyleConstants.Avatar.M - StyleConstants.Font.Size.S,
paddingRight: StyleConstants.Spacing.Global.PagePadding
},
icon: {
paddingRight: StyleConstants.Spacing.S
marginRight: StyleConstants.Spacing.S
}
})

22
src/components/Timelines/Timeline/Shared/Actions.tsx
View File

@ -1,8 +1,8 @@
import client from '@api/client'
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import { TimelineData } from '@components/Timelines/Timeline'
import { toast } from '@components/toast'
import { Feather } from '@expo/vector-icons'
import { useNavigation } from '@react-navigation/native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -171,8 +171,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
const childrenReply = useMemo(
() => (
<>
<Feather
name='message-circle'
<Icon
name='MessageCircle'
color={iconColor}
size={StyleConstants.Font.Size.M + 2}
/>
@ -193,8 +193,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
)
const childrenReblog = useMemo(
() => (
<Feather
name='repeat'
<Icon
name='Repeat'
color={
status.visibility === 'private' || status.visibility === 'direct'
? theme.disabled
@ -207,8 +207,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
)
const childrenFavourite = useMemo(
() => (
<Feather
name='heart'
<Icon
name='Heart'
color={iconColorAction(status.favourited)}
size={StyleConstants.Font.Size.M + 2}
/>
@ -217,8 +217,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
)
const childrenBookmark = useMemo(
() => (
<Feather
name='bookmark'
<Icon
name='Bookmark'
color={iconColorAction(status.bookmarked)}
size={StyleConstants.Font.Size.M + 2}
/>
@ -227,8 +227,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
)
const childrenShare = useMemo(
() => (
<Feather
name='share-2'
<Icon
name='Share2'
color={iconColor}
size={StyleConstants.Font.Size.M + 2}
/>

2
src/components/Timelines/Timeline/Shared/Attachment.tsx
View File

@ -117,7 +117,7 @@ const TimelineAttachment: React.FC<Props> = ({ status }) => {
) : (
<Button
type='icon'
content='eye-off'
content='EyeOff'
round
overlay
onPress={onPressShow}

2
src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx
View File

@ -67,7 +67,7 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
)}
<Button
type='icon'
content={audioPlaying ? 'pause-circle' : 'play-circle'}
content={audioPlaying ? 'PauseCircle' : 'PlayCircle'}
size='L'
round
overlay

2
src/components/Timelines/Timeline/Shared/Attachment/Video.tsx
View File

@ -64,7 +64,7 @@ const AttachmentVideo: React.FC<Props> = ({ sensitiveShown, video }) => {
) : (
<Button
type='icon'
content='play-circle'
content='PlayCircle'
size='L'
round
overlay

10
src/components/Timelines/Timeline/Shared/End.tsx
View File

@ -1,4 +1,4 @@
import { Feather } from '@expo/vector-icons'
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
@ -22,8 +22,9 @@ const TimelineEnd: React.FC<Props> = ({ hasNextPage }) => {
<Trans
i18nKey='timeline:shared.end.message' // optional -> fallbacks to defaults if not provided
components={[
<Feather
name='coffee'
<Icon
inline
name='Coffee'
size={StyleConstants.Font.Size.S}
color={theme.secondary}
/>
@ -43,8 +44,7 @@ const styles = StyleSheet.create({
padding: StyleConstants.Spacing.M
},
text: {
...StyleConstants.FontStyle.S,
marginLeft: StyleConstants.Spacing.S
...StyleConstants.FontStyle.S
}
})

8
src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
View File

@ -1,7 +1,7 @@
import client from '@api/client'
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import { toast } from '@components/toast'
import { Feather } from '@expo/vector-icons'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useMemo } from 'react'
@ -66,8 +66,8 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
const actionChildren = useMemo(
() => (
<Feather
name='trash'
<Icon
name='Trash'
color={theme.secondary}
size={StyleConstants.Font.Size.M + 2}
/>
@ -86,7 +86,7 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
/>
) : null}
{conversation.unread && (
<Feather name='circle' color={theme.blue} style={styles.unread} />
<Icon name='Circle' color={theme.blue} style={styles.unread} />
)}
</View>
</View>

15
src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
View File

@ -1,5 +1,5 @@
import BottomSheet from '@components/BottomSheet'
import { Feather } from '@expo/vector-icons'
import Icon from '@components/Icon'
import { getLocalUrl } from '@utils/slices/instancesSlice'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -9,10 +9,10 @@ import HeaderDefaultActionsStatus from '@components/Timelines/Timeline/Shared/He
import React, { useCallback, useMemo, useState } from 'react'
import { Pressable, StyleSheet, View } from 'react-native'
import { useSelector } from 'react-redux'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedVisibility from './HeaderShared/Visibility'
import HeaderSharedCreated from './HeaderShared/Created'
import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedCreated from './HeaderShared/Created'
import HeaderSharedVisibility from './HeaderShared/Visibility'
export interface Props {
queryKey?: QueryKey.Timeline
@ -37,8 +37,8 @@ const TimelineHeaderDefault: React.FC<Props> = ({
const pressableAction = useMemo(
() => (
<Feather
name='more-horizontal'
<Icon
name='MoreHorizontal'
color={theme.secondary}
size={StyleConstants.Font.Size.M + 2}
/>
@ -102,8 +102,7 @@ const TimelineHeaderDefault: React.FC<Props> = ({
const styles = StyleSheet.create({
base: {
flex: 1,
flexDirection: 'row',
alignItems: 'baseline'
flexDirection: 'row'
},
accountAndMeta: {
flex: 4

6
src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount.tsx
View File

@ -84,7 +84,7 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
setBottomSheetVisible(false)
mutate({ type: 'mute' })
}}
iconFront='eye-off'
iconFront='EyeOff'
title={t('timeline:shared.header.default.actions.account.mute.button', {
acct: account.acct
})}
@ -94,7 +94,7 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
setBottomSheetVisible(false)
mutate({ type: 'block' })
}}
iconFront='x-circle'
iconFront='XCircle'
title={t(
'timeline:shared.header.default.actions.account.block.button',
{
@ -107,7 +107,7 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
setBottomSheetVisible(false)
mutate({ type: 'reports' })
}}
iconFront='flag'
iconFront='Flag'
title={t(
'timeline:shared.header.default.actions.account.report.button',
{

2
src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsDomain.tsx
View File

@ -54,7 +54,7 @@ const HeaderDefaultActionsDomain: React.FC<Props> = ({
setBottomSheetVisible(false)
mutate()
}}
iconFront='cloud-off'
iconFront='CloudOff'
title={t(`timeline:shared.header.default.actions.domain.block.button`, {
domain
})}

8
src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsStatus.tsx
View File

@ -128,7 +128,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
setBottomSheetVisible(false)
mutate({ type: 'delete' })
}}
iconFront='trash'
iconFront='Trash'
title={t('timeline:shared.header.default.actions.status.delete.button')}
/>
<MenuRow
@ -174,7 +174,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
]
)
}}
iconFront='trash'
iconFront='Trash'
title={t('timeline:shared.header.default.actions.status.edit.button')}
/>
<MenuRow
@ -182,7 +182,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
setBottomSheetVisible(false)
mutate({ type: 'mute', state: status.muted })
}}
iconFront='volume-x'
iconFront='VolumeX'
title={
status.muted
? t(
@ -200,7 +200,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
setBottomSheetVisible(false)
mutate({ type: 'pin', state: status.pinned })
}}
iconFront='anchor'
iconFront='Anchor'
title={
status.pinned
? t(

22
src/components/Timelines/Timeline/Shared/HeaderNotification.tsx
View File

@ -1,6 +1,6 @@
import client from '@api/client'
import { Feather } from '@expo/vector-icons'
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import { toast } from '@components/toast'
import { relationshipFetch } from '@utils/fetches/relationshipFetch'
import { StyleConstants } from '@utils/styles/constants'
@ -9,10 +9,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Pressable, StyleSheet, View } from 'react-native'
import { Chase } from 'react-native-animated-spinkit'
import { useQuery } from 'react-query'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedVisibility from './HeaderShared/Visibility'
import HeaderSharedCreated from './HeaderShared/Created'
import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedCreated from './HeaderShared/Created'
import HeaderSharedVisibility from './HeaderShared/Visibility'
export interface Props {
notification: Mastodon.Notification
@ -73,19 +73,19 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
case 'success':
return (
<Pressable onPress={relationshipOnPress}>
<Feather
<Icon
name={
updateData
? updateData.following
? 'user-check'
? 'UserCheck'
: updateData.requested
? 'loader'
: 'user-plus'
? 'Loader'
: 'UserPlus'
: data!.following
? 'user-check'
? 'UserCheck'
: data!.requested
? 'loader'
: 'user-plus'
? 'Loader'
: 'UserPlus'
}
color={
updateData

6
src/components/Timelines/Timeline/Shared/HeaderShared/Visibility.tsx
View File

@ -1,4 +1,4 @@
import { Feather } from '@expo/vector-icons'
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
@ -12,8 +12,8 @@ const HeaderSharedVisibility: React.FC<Props> = ({ visibility }) => {
const { theme } = useTheme()
return visibility && visibility === 'private' ? (
<Feather
name='lock'
<Icon
name='Lock'
size={StyleConstants.Font.Size.S}
color={theme.secondary}
style={styles.visibility}

14
src/components/Timelines/Timeline/Shared/Poll.tsx
View File

@ -1,9 +1,9 @@
import client from '@api/client'
import Button from '@components/Button'
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import relativeTime from '@components/relativeTime'
import { TimelineData } from '@components/Timelines/Timeline'
import { Feather } from '@expo/vector-icons'
import { ParseEmojis } from '@root/components/Parse'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -151,8 +151,8 @@ const TimelinePoll: React.FC<Props> = ({
const isSelected = useCallback(
(index: number): any =>
allOptions[index]
? `check-${poll.multiple ? 'square' : 'circle'}`
: `${poll.multiple ? 'square' : 'circle'}`,
? `Check${poll.multiple ? 'Square' : 'Circle'}`
: `${poll.multiple ? 'Square' : 'Circle'}`,
[allOptions]
)
@ -160,11 +160,11 @@ const TimelinePoll: React.FC<Props> = ({
return poll.options.map((option, index) => (
<View key={index} style={styles.optionContainer}>
<View style={styles.optionContent}>
<Feather
<Icon
style={styles.optionSelection}
name={
`${poll.own_votes?.includes(index) ? 'check-' : ''}${
poll.multiple ? 'square' : 'circle'
`${poll.own_votes?.includes(index) ? 'Check' : ''}${
poll.multiple ? 'Square' : 'Circle'
}` as any
}
size={StyleConstants.Font.Size.M}
@ -224,7 +224,7 @@ const TimelinePoll: React.FC<Props> = ({
}}
>
<View style={[styles.optionContent]}>
<Feather
<Icon
style={styles.optionSelection}
name={isSelected(index)}
size={StyleConstants.Font.Size.L}

21
src/components/toast.tsx
View File

@ -1,10 +1,10 @@
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import Toast from 'react-native-toast-message'
import { useTheme } from '@utils/styles/ThemeManager'
import { Feather } from '@expo/vector-icons'
import { StyleConstants } from '@utils/styles/constants'
export interface Params {
type: 'success' | 'error' | 'warning'
@ -49,9 +49,9 @@ const toast = ({
const ToastBase = ({ config }: { config: Config }) => {
const { theme } = useTheme()
const iconSet = {
success: 'check-circle',
error: 'x-circle',
warning: 'alert-circle'
success: 'CheckCircle',
error: 'XCircle',
warning: 'AlertCircle'
}
enum colorMapping {
success = 'blue',
@ -67,11 +67,10 @@ const ToastBase = ({ config }: { config: Config }) => {
]}
>
<View style={styles.container}>
<Feather
// @ts-ignore
<Icon
name={iconSet[config.type]}
size={StyleConstants.Font.Size.M}
color={theme[colorMapping[config.type]]}
size={StyleConstants.Font.Size.M + 2}
/>
<View style={styles.texts}>
<Text style={[styles.text1, { color: theme.primary }]}>
@ -104,7 +103,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: StyleConstants.Spacing.L
padding: StyleConstants.Spacing.M
},
texts: {
marginLeft: StyleConstants.Spacing.S
@ -114,7 +113,7 @@ const styles = StyleSheet.create({
},
text2: {
...StyleConstants.FontStyle.S,
marginTop: StyleConstants.Spacing.S
marginTop: StyleConstants.Spacing.XS
}
})