diff --git a/app/components/announcement_banner/announcement_banner.tsx b/app/components/announcement_banner/announcement_banner.tsx index f390664232..4008b5c869 100644 --- a/app/components/announcement_banner/announcement_banner.tsx +++ b/app/components/announcement_banner/announcement_banner.tsx @@ -17,6 +17,7 @@ import {ANNOUNCEMENT_BAR_HEIGHT} from '@constants/view'; import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {bottomSheet} from '@screens/navigation'; +import {getMarkdownTextStyles} from '@utils/markdown'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; @@ -84,6 +85,7 @@ const AnnouncementBanner = ({ const theme = useTheme(); const [visible, setVisible] = useState(false); const style = getStyle(theme); + const markdownTextStyles = getMarkdownTextStyles(theme); const renderContent = useCallback(() => ( diff --git a/app/components/autocomplete/autocomplete.tsx b/app/components/autocomplete/autocomplete.tsx index f56f8a3bd4..640fd4f34c 100644 --- a/app/components/autocomplete/autocomplete.tsx +++ b/app/components/autocomplete/autocomplete.tsx @@ -115,7 +115,7 @@ const Autocomplete = ({ }, [growDown, position]); const containerStyles = useMemo(() => { - const s = [style.base, containerAnimatedStyle]; + const s: StyleProp = [style.base, containerAnimatedStyle]; if (hasElements) { s.push(style.borders); } diff --git a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx index b6253fb519..6dbd4ec54f 100644 --- a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx +++ b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx @@ -33,9 +33,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => { width: 16, height: 16, }, - iconColor: { - tintColor: theme.centerChannelColor, - }, container: { flexDirection: 'row', alignItems: 'center', @@ -110,7 +107,8 @@ const SlashSuggestionItem = ({ let image = ( ); diff --git a/app/components/channel_list_row/index.tsx b/app/components/channel_list_row/index.tsx index 68c8647350..8de7d2dc72 100644 --- a/app/components/channel_list_row/index.tsx +++ b/app/components/channel_list_row/index.tsx @@ -70,7 +70,7 @@ export default function ChannelListRow({ const color = selected ? theme.buttonBg : theme.centerChannelColor; return ( - + { const bannerContainer = { flex: 1, paddingHorizontal: 10, - overflow: 'hidden', - flexDirection: 'row', - alignItems: 'center', + overflow: 'hidden' as const, + flexDirection: 'row' as const, + alignItems: 'center' as const, marginHorizontal: 8, borderRadius: 7, }; diff --git a/app/components/floating_text_input_label/index.tsx b/app/components/floating_text_input_label/index.tsx index 0855f6b4c2..89ccc9ef78 100644 --- a/app/components/floating_text_input_label/index.tsx +++ b/app/components/floating_text_input_label/index.tsx @@ -184,7 +184,7 @@ const FloatingTextInput = forwardRef { - const res = [styles.container]; + const res: StyleProp = [styles.container]; if (multiline) { res.push({height: 100 + (2 * BORDER_DEFAULT_WIDTH)}); } diff --git a/app/components/formatted_markdown_text/index.tsx b/app/components/formatted_markdown_text/index.tsx index de77fbe150..862b70fffb 100644 --- a/app/components/formatted_markdown_text/index.tsx +++ b/app/components/formatted_markdown_text/index.tsx @@ -5,7 +5,7 @@ import {Parser} from 'commonmark'; import Renderer from 'commonmark-react-renderer'; import React, {ReactElement, useRef} from 'react'; import {useIntl} from 'react-intl'; -import {GestureResponderEvent, StyleProp, Text, TextStyle} from 'react-native'; +import {GestureResponderEvent, StyleProp, Text, TextStyle, ViewStyle} from 'react-native'; import AtMention from '@components/markdown/at_mention'; import MarkdownLink from '@components/markdown/markdown_link'; @@ -24,9 +24,6 @@ type Props = { location: string; onPostPress?: (e: GestureResponderEvent) => void; style?: StyleProp; - textStyles: { - [key: string]: TextStyle; - }; values?: Record; }; @@ -50,7 +47,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { }; }); -const FormattedMarkdownText = ({baseTextStyle, channelId, defaultMessage, id, location, onPostPress, style, textStyles, values}: Props) => { +const FormattedMarkdownText = ({baseTextStyle, channelId, defaultMessage, id, location, onPostPress, style, values}: Props) => { const intl = useIntl(); const theme = useTheme(); const styles = getStyleSheet(theme); @@ -81,14 +78,14 @@ const FormattedMarkdownText = ({baseTextStyle, channelId, defaultMessage, id, lo }; const computeTextStyle = (base: StyleProp, context: string[]) => { - return concatStyles(base, context.map((type) => txtStyles[type])); + return concatStyles(base, context.map((type) => (txtStyles as {[s: string]: TextStyle})[type])); }; const renderAtMention = ({context, mentionName}: {context: string[]; mentionName: string}) => { return ( { - const blockStyle = [styles.block]; + const blockStyle: StyleProp = [styles.block]; if (!first) { const blockS = getMarkdownBlockStyles(theme); blockStyle.push(blockS.adjacentParagraph); diff --git a/app/components/formatted_text/index.tsx b/app/components/formatted_text/index.tsx index 26db7fd1b6..6546f97e25 100644 --- a/app/components/formatted_text/index.tsx +++ b/app/components/formatted_text/index.tsx @@ -3,14 +3,14 @@ import {createElement, isValidElement} from 'react'; import {useIntl} from 'react-intl'; -import {StyleProp, Text, TextProps, TextStyle, ViewStyle} from 'react-native'; +import {StyleProp, Text, TextProps, TextStyle} from 'react-native'; type FormattedTextProps = TextProps & { id: string; defaultMessage?: string; values?: Record; testID?: string; - style?: StyleProp | StyleProp; + style?: StyleProp; } const FormattedText = (props: FormattedTextProps) => { diff --git a/app/components/friendly_date/index.tsx b/app/components/friendly_date/index.tsx index 3dc0ac6aae..1b329984e2 100644 --- a/app/components/friendly_date/index.tsx +++ b/app/components/friendly_date/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {IntlShape, useIntl} from 'react-intl'; -import {StyleProp, Text, ViewStyle} from 'react-native'; +import {StyleProp, Text, TextStyle} from 'react-native'; import {DateTime} from '@constants'; import {isYesterday} from '@utils/datetime'; @@ -11,7 +11,7 @@ import {isYesterday} from '@utils/datetime'; const {SECONDS} = DateTime; type Props = { - style?: StyleProp; + style?: StyleProp; sourceDate?: number | Date; value: number | Date; }; diff --git a/app/components/markdown/markdown.tsx b/app/components/markdown/markdown.tsx index c0012c13fb..4bdf7a6d5e 100644 --- a/app/components/markdown/markdown.tsx +++ b/app/components/markdown/markdown.tsx @@ -4,7 +4,7 @@ import {Parser, Node} from 'commonmark'; import Renderer from 'commonmark-react-renderer'; import React, {ReactElement, useMemo, useRef} from 'react'; -import {Dimensions, GestureResponderEvent, Platform, StyleProp, Text, TextStyle, View} from 'react-native'; +import {Dimensions, GestureResponderEvent, Platform, StyleProp, Text, TextStyle, View, ViewStyle} from 'react-native'; import CompassIcon from '@components/compass_icon'; import Emoji from '@components/emoji'; @@ -431,7 +431,7 @@ const Markdown = ({ return null; } - const blockStyle = [style.block]; + const blockStyle: StyleProp = [style.block]; if (!first) { blockStyle.push(blockStyles?.adjacentParagraph); } diff --git a/app/components/markdown/markdown_table/index.tsx b/app/components/markdown/markdown_table/index.tsx index 2f50b1366a..66796396c7 100644 --- a/app/components/markdown/markdown_table/index.tsx +++ b/app/components/markdown/markdown_table/index.tsx @@ -3,7 +3,7 @@ import React, {PureComponent, ReactNode} from 'react'; import {injectIntl, IntlShape} from 'react-intl'; -import {Dimensions, EventSubscription, LayoutChangeEvent, Platform, ScaledSize, ScrollView, TouchableOpacity, View} from 'react-native'; +import {Dimensions, EventSubscription, LayoutChangeEvent, Platform, ScaledSize, ScrollView, StyleProp, TouchableOpacity, View, ViewStyle} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import CompassIcon from '@components/compass_icon'; @@ -203,7 +203,7 @@ class MarkdownTable extends PureComponent { const {theme} = this.props; const style = getStyleSheet(theme); - const tableStyle = [style.table]; + const tableStyle: StyleProp = [style.table]; const renderAsFlex = this.shouldRenderAsFlex(isFullView); if (renderAsFlex) { diff --git a/app/components/markdown/markdown_table_cell/index.tsx b/app/components/markdown/markdown_table_cell/index.tsx index 634d9addc6..2da5759471 100644 --- a/app/components/markdown/markdown_table_cell/index.tsx +++ b/app/components/markdown/markdown_table_cell/index.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React, {ReactNode} from 'react'; -import {View} from 'react-native'; +import {StyleProp, View, ViewStyle} from 'react-native'; import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; @@ -40,7 +40,7 @@ const MarkdownTableCell = ({isLastCell, align, children}: MarkdownTableCellProps const theme = useTheme(); const style = getStyleSheet(theme); - const cellStyle = [style.cell]; + const cellStyle: StyleProp = [style.cell]; if (!isLastCell) { cellStyle.push(style.cellRightBorder); } diff --git a/app/components/markdown/markdown_table_row/index.tsx b/app/components/markdown/markdown_table_row/index.tsx index e1880b2998..7e19bb4003 100644 --- a/app/components/markdown/markdown_table_row/index.tsx +++ b/app/components/markdown/markdown_table_row/index.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React, {ReactElement, ReactNode} from 'react'; -import {View} from 'react-native'; +import {StyleProp, View, ViewStyle} from 'react-native'; import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; @@ -33,7 +33,7 @@ const MarkdownTableRow = ({isFirstRow, isLastRow, children}: MarkdownTableRowPro const theme = useTheme(); const style = getStyleSheet(theme); - const rowStyle = [style.row]; + const rowStyle: StyleProp = [style.row]; if (!isLastRow) { rowStyle.push(style.rowBottomBorder); } diff --git a/app/components/post_draft/archived/index.tsx b/app/components/post_draft/archived/index.tsx index 1a47041769..21a81b5323 100644 --- a/app/components/post_draft/archived/index.tsx +++ b/app/components/post_draft/archived/index.tsx @@ -14,6 +14,7 @@ import {useIsTablet} from '@hooks/device'; import {t} from '@i18n'; import {popToRoot} from '@screens/navigation'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; +import {typography} from '@utils/typography'; type Props = { testID?: string; @@ -28,6 +29,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => ({ backgroundColor: theme.centerChannelBg, borderTopColor: changeOpacity(theme.centerChannelColor, 0.20), }, + baseTextStyle: { + ...typography('Body', 200, 'Regular'), + color: theme.centerChannelColor, + }, archivedText: { textAlign: 'center', color: theme.centerChannelColor, @@ -89,7 +94,6 @@ export default function Archived({ {...message} style={style.archivedText} baseTextStyle={style.baseTextStyle} - textStyles={style.textStyles} location='' /> ))} diff --git a/app/screens/browse_channels/dropdown_slideup.tsx b/app/screens/browse_channels/dropdown_slideup.tsx index 79b439674c..f9f8e51c11 100644 --- a/app/screens/browse_channels/dropdown_slideup.tsx +++ b/app/screens/browse_channels/dropdown_slideup.tsx @@ -44,7 +44,7 @@ export default function DropdownSlideup({ const commonProps = { rightIcon: true, - imageStyles: style.checkIcon, + iconStyles: style.checkIcon, }; const handlePublicPress = useCallback(() => { diff --git a/app/screens/channel_info/channel_info.tsx b/app/screens/channel_info/channel_info.tsx index 32f42ad4f5..cb9c660d6c 100644 --- a/app/screens/channel_info/channel_info.tsx +++ b/app/screens/channel_info/channel_info.tsx @@ -5,9 +5,9 @@ import React, {useCallback} from 'react'; import {ScrollView, View} from 'react-native'; import {Edge, SafeAreaView} from 'react-native-safe-area-context'; -import {useServerUrl} from '@app/context/server'; import ChannelInfoEnableCalls from '@calls/components/channel_info_enable_calls'; import ChannelActions from '@components/channel_actions'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import useNavButtonPressed from '@hooks/navigation_button_pressed'; import {dismissModal} from '@screens/navigation'; diff --git a/app/screens/edit_profile/components/field.tsx b/app/screens/edit_profile/components/field.tsx index e3c8bf0628..5903e15b6c 100644 --- a/app/screens/edit_profile/components/field.tsx +++ b/app/screens/edit_profile/components/field.tsx @@ -3,7 +3,7 @@ import React, {memo, RefObject, useCallback} from 'react'; import {useIntl} from 'react-intl'; -import {Platform, StyleSheet, TextInputProps, View} from 'react-native'; +import {Platform, TextInputProps, View} from 'react-native'; import FloatingTextInput, {FloatingTextInputRef} from '@components/floating_text_input_label'; import {useTheme} from '@context/theme'; @@ -24,7 +24,7 @@ export type FieldProps = TextInputProps & { }; const getStyleSheet = makeStyleSheetFromTheme((theme) => { - return StyleSheet.create({ + return { viewContainer: { marginVertical: 8, alignItems: 'center', @@ -33,7 +33,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { disabledStyle: { backgroundColor: changeOpacity(theme.centerChannelColor, 0.04), }, - }); + }; }); const Field = ({ diff --git a/app/screens/find_channels/filtered_list/filtered_list.tsx b/app/screens/find_channels/filtered_list/filtered_list.tsx index fe89218939..7cc19de2ca 100644 --- a/app/screens/find_channels/filtered_list/filtered_list.tsx +++ b/app/screens/find_channels/filtered_list/filtered_list.tsx @@ -55,11 +55,6 @@ type Props = { const style = StyleSheet.create({ flex: {flex: 1}, - loading: { - height: 32, - width: 32, - justifyContent: 'center', - }, noResultContainer: { flexGrow: 1, alignItems: 'center', diff --git a/app/screens/find_channels/filtered_list/remote_channel_item/remote_channel_item.tsx b/app/screens/find_channels/filtered_list/remote_channel_item/remote_channel_item.tsx index e90ad70207..7a88214f00 100644 --- a/app/screens/find_channels/filtered_list/remote_channel_item/remote_channel_item.tsx +++ b/app/screens/find_channels/filtered_list/remote_channel_item/remote_channel_item.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React, {useCallback, useMemo} from 'react'; -import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import {Text, TouchableOpacity, View} from 'react-native'; import ChannelIcon from '@components/channel_icon'; import {useTheme} from '@context/theme'; @@ -51,11 +51,6 @@ export const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ }, })); -export const textStyle = StyleSheet.create({ - bright: typography('Body', 200, 'SemiBold'), - regular: typography('Body', 200, 'Regular'), -}); - const RemoteChannelItem = ({onPress, channel, teamDisplayName, testID}: Props) => { const theme = useTheme(); const isTablet = useIsTablet(); diff --git a/app/screens/forgot_password/index.tsx b/app/screens/forgot_password/index.tsx index ec3358c70c..15099be055 100644 --- a/app/screens/forgot_password/index.tsx +++ b/app/screens/forgot_password/index.tsx @@ -215,7 +215,6 @@ const ForgotPassword = ({serverUrl, theme}: Props) => { autoCorrect={false} autoCapitalize={'none'} blurOnSubmit={true} - containerStyle={styles.inputBoxEmail} disableFullscreenUI={true} enablesReturnKeyAutomatically={true} error={error} diff --git a/app/screens/gallery/footer/footer.tsx b/app/screens/gallery/footer/footer.tsx index da0498799f..f16a04cbfc 100644 --- a/app/screens/gallery/footer/footer.tsx +++ b/app/screens/gallery/footer/footer.tsx @@ -9,7 +9,6 @@ import {SafeAreaView, Edge, useSafeAreaInsets} from 'react-native-safe-area-cont import {Events} from '@constants'; import {GALLERY_FOOTER_HEIGHT} from '@constants/gallery'; import {changeOpacity} from '@utils/theme'; -import {typography} from '@utils/typography'; import {displayUsername} from '@utils/user'; import Actions from './actions'; @@ -53,15 +52,6 @@ const styles = StyleSheet.create({ paddingHorizontal: 20, }, details: {flex: 3, flexDirection: 'row'}, - icon: { - alignItems: 'center', - justifyContent: 'center', - height: '100%', - }, - title: { - ...typography('Heading', 300), - color: 'white', - }, }); const Footer = ({ diff --git a/app/screens/gallery/pager/index.tsx b/app/screens/gallery/pager/index.tsx index 276741663d..d4c5f50c75 100644 --- a/app/screens/gallery/pager/index.tsx +++ b/app/screens/gallery/pager/index.tsx @@ -39,9 +39,6 @@ const MIN_VELOCITY = 700; const MAX_VELOCITY = 3000; const styles = StyleSheet.create({ - backdrop: { - flex: 1, - }, pager: { flex: 1, flexDirection: 'row', diff --git a/app/screens/home/account/components/options/user_presence/index.tsx b/app/screens/home/account/components/options/user_presence/index.tsx index 5586265a17..45f2f5b2ee 100644 --- a/app/screens/home/account/components/options/user_presence/index.tsx +++ b/app/screens/home/account/components/options/user_presence/index.tsx @@ -58,7 +58,7 @@ const UserStatus = ({currentUser}: Props) => { <> setUserStatus(ONLINE)} testID='user_status.online.option' text={intl.formatMessage({ @@ -69,7 +69,7 @@ const UserStatus = ({currentUser}: Props) => { /> setUserStatus(AWAY)} testID='user_status.away.option' text={intl.formatMessage({ @@ -80,7 +80,7 @@ const UserStatus = ({currentUser}: Props) => { /> setUserStatus(DND)} testID='user_status.dnd.option' text={intl.formatMessage({ @@ -91,7 +91,7 @@ const UserStatus = ({currentUser}: Props) => { /> setUserStatus(OFFLINE)} testID='user_status.offline.option' text={intl.formatMessage({ diff --git a/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx b/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx index 5f17a37ca1..81856c084a 100644 --- a/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx +++ b/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx @@ -3,7 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {useIntl} from 'react-intl'; -import {Animated, DeviceEventEmitter, Platform, Text, View} from 'react-native'; +import {Animated, DeviceEventEmitter, Platform, StyleProp, Text, View, ViewStyle} from 'react-native'; import {RectButton} from 'react-native-gesture-handler'; import Swipeable from 'react-native-gesture-handler/Swipeable'; @@ -210,7 +210,7 @@ const ServerItem = ({ }; const containerStyle = useMemo(() => { - const style = [styles.container]; + const style: StyleProp = [styles.container]; if (isActive) { style.push(styles.active); } @@ -219,7 +219,7 @@ const ServerItem = ({ }, [isActive]); const serverStyle = useMemo(() => { - const style = [styles.row]; + const style: StyleProp = [styles.row]; if (!server.lastActiveAt) { style.push(styles.offline); } diff --git a/app/screens/home/search/results/filter.tsx b/app/screens/home/search/results/filter.tsx index f03814660b..8520753fbe 100644 --- a/app/screens/home/search/results/filter.tsx +++ b/app/screens/home/search/results/filter.tsx @@ -112,11 +112,10 @@ const Filter = ({initialFilter, setFilter, title}: FilterProps) => { title={title} titleSeparator={true} > - + diff --git a/app/screens/integration_selector/channel_list_row/index.tsx b/app/screens/integration_selector/channel_list_row/index.tsx index 3aea34f43e..2fed833112 100644 --- a/app/screens/integration_selector/channel_list_row/index.tsx +++ b/app/screens/integration_selector/channel_list_row/index.tsx @@ -15,7 +15,7 @@ import CustomListRow, {Props as CustomListRowProps} from '../custom_list_row'; type ChannelListRowProps = { id: string; - theme: object; + theme: Theme; channel: Channel; onPress: (item: Channel) => void; }; diff --git a/app/screens/integration_selector/custom_list/index.tsx b/app/screens/integration_selector/custom_list/index.tsx index 0f8855953c..68d08051d2 100644 --- a/app/screens/integration_selector/custom_list/index.tsx +++ b/app/screens/integration_selector/custom_list/index.tsx @@ -32,7 +32,7 @@ type Props = { onRowPress: (item: Channel | DialogOption) => void; renderItem: (props: ListItemProps) => JSX.Element; selectable?: boolean; - theme?: object; + theme: Theme; shouldRenderSeparator?: boolean; testID?: string; } diff --git a/app/screens/integration_selector/custom_list_row/index.tsx b/app/screens/integration_selector/custom_list_row/index.tsx index 2184882d16..751fdfdae3 100644 --- a/app/screens/integration_selector/custom_list_row/index.tsx +++ b/app/screens/integration_selector/custom_list_row/index.tsx @@ -22,10 +22,6 @@ export type Props = { }; const style = StyleSheet.create({ - touchable: { - flex: 1, - overflow: 'hidden', - }, container: { flexDirection: 'row', height: 65, diff --git a/app/screens/integration_selector/integration_selector.tsx b/app/screens/integration_selector/integration_selector.tsx index 8ea945add6..06339c6ac9 100644 --- a/app/screens/integration_selector/integration_selector.tsx +++ b/app/screens/integration_selector/integration_selector.tsx @@ -7,15 +7,15 @@ import {View} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import {fetchChannels, searchChannels} from '@actions/remote/channel'; -import ServerUserList from '@app/components/server_user_list'; -import {t} from '@app/i18n'; import FormattedText from '@components/formatted_text'; import SearchBar from '@components/search'; +import ServerUserList from '@components/server_user_list'; import {General, View as ViewConstants} from '@constants'; import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {debounce} from '@helpers/api/general'; import useNavButtonPressed from '@hooks/navigation_button_pressed'; +import {t} from '@i18n'; import { buildNavigationButton, popTopScreen, setButtons, diff --git a/app/screens/integration_selector/option_list_row/index.tsx b/app/screens/integration_selector/option_list_row/index.tsx index e20d4992f9..0ade003dd0 100644 --- a/app/screens/integration_selector/option_list_row/index.tsx +++ b/app/screens/integration_selector/option_list_row/index.tsx @@ -14,7 +14,7 @@ import CustomListRow, {Props as CustomListRowProps} from '../custom_list_row'; type OptionListRowProps = { id: string; - theme: object; + theme: Theme; item: { text: string; value: string }; onPress: (item: DialogOption) => void; } diff --git a/app/screens/integration_selector/selected_options/index.tsx b/app/screens/integration_selector/selected_options/index.tsx index 69ea7f640e..2ed6d3cab6 100644 --- a/app/screens/integration_selector/selected_options/index.tsx +++ b/app/screens/integration_selector/selected_options/index.tsx @@ -67,7 +67,6 @@ const SelectedOptions = ({ return ( {options} diff --git a/app/screens/mfa/index.tsx b/app/screens/mfa/index.tsx index 21f32d42e2..e612d73885 100644 --- a/app/screens/mfa/index.tsx +++ b/app/screens/mfa/index.tsx @@ -221,7 +221,6 @@ const MFA = ({config, goToHome, license, loginId, password, serverDisplayName, s autoCorrect={false} autoCapitalize={'none'} blurOnSubmit={true} - containerStyle={styles.inputBoxEmail} disableFullscreenUI={true} enablesReturnKeyAutomatically={true} error={error} diff --git a/app/screens/permalink/permalink.tsx b/app/screens/permalink/permalink.tsx index 160c8f4d86..b0a57c6602 100644 --- a/app/screens/permalink/permalink.tsx +++ b/app/screens/permalink/permalink.tsx @@ -392,7 +392,7 @@ function Permalink({ {showHeaderDivider && ( - + )} diff --git a/app/screens/pinned_messages/pinned_messages.tsx b/app/screens/pinned_messages/pinned_messages.tsx index 05f2a133ec..f4b46d74a9 100644 --- a/app/screens/pinned_messages/pinned_messages.tsx +++ b/app/screens/pinned_messages/pinned_messages.tsx @@ -44,11 +44,6 @@ const styles = StyleSheet.create({ list: { paddingVertical: 8, }, - loading: { - height: 40, - width: 40, - justifyContent: 'center' as const, - }, }); function SavedMessages({ diff --git a/app/screens/select_team/team_list.tsx b/app/screens/select_team/team_list.tsx index ef567af82a..abd9d11375 100644 --- a/app/screens/select_team/team_list.tsx +++ b/app/screens/select_team/team_list.tsx @@ -55,7 +55,7 @@ function TeamList({ }; const containerStyle = useMemo(() => { - return isTablet ? [styles.container, {maxWidth: 600, alignItems: 'center'}] : styles.container; + return isTablet ? [styles.container, {maxWidth: 600, alignItems: 'center' as const}] : styles.container; }, [isTablet, styles]); return ( diff --git a/app/screens/settings/about/about.tsx b/app/screens/settings/about/about.tsx index e569be624b..4f46840b48 100644 --- a/app/screens/settings/about/about.tsx +++ b/app/screens/settings/about/about.tsx @@ -304,7 +304,7 @@ const About = ({config, license}: AboutProps) => { /> - + { {config.BuildHash} - + { - + { diff --git a/app/screens/settings/settings_separator.tsx b/app/screens/settings/settings_separator.tsx index 7a4f27e4a8..846a333162 100644 --- a/app/screens/settings/settings_separator.tsx +++ b/app/screens/settings/settings_separator.tsx @@ -8,7 +8,7 @@ import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; const getStyleSheet = makeStyleSheetFromTheme((theme) => { - const groupSeparator = { + const groupSeparator: ViewStyle = { backgroundColor: changeOpacity(theme.centerChannelColor, 0.12), width: '91%', alignSelf: 'center', diff --git a/app/screens/sso/sso_with_webview.tsx b/app/screens/sso/sso_with_webview.tsx index ce4a2695fc..2f70cc7ab1 100644 --- a/app/screens/sso/sso_with_webview.tsx +++ b/app/screens/sso/sso_with_webview.tsx @@ -26,7 +26,7 @@ interface SSOWithWebViewProps { loginUrl: string; serverUrl: string; ssoType: string; - theme: Partial; + theme: Theme; } const HEADERS = { diff --git a/app/screens/thread/thread_follow_button/thread_follow_button.tsx b/app/screens/thread/thread_follow_button/thread_follow_button.tsx index 7c44e4df77..276836c8b8 100644 --- a/app/screens/thread/thread_follow_button/thread_follow_button.tsx +++ b/app/screens/thread/thread_follow_button/thread_follow_button.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React from 'react'; -import {Platform, StyleSheet, TouchableOpacity, View} from 'react-native'; +import {Platform, StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native'; import {updateThreadFollowing} from '@actions/remote/thread'; import FormattedText from '@components/formatted_text'; @@ -59,7 +59,7 @@ function ThreadFollow({isFollowing, teamId, threadId}: Props) { updateThreadFollowing(serverUrl, teamId, threadId, !isFollowing); }); - const containerStyle = [styles.container]; + const containerStyle: StyleProp = [styles.container]; let followTextProps = { id: t('threads.follow'), defaultMessage: 'Follow', diff --git a/app/utils/theme/index.ts b/app/utils/theme/index.ts index 6680380397..54ced1132b 100644 --- a/app/utils/theme/index.ts +++ b/app/utils/theme/index.ts @@ -9,6 +9,7 @@ import {Preferences} from '@constants'; import {MODAL_SCREENS_WITHOUT_BACK, SCREENS_WITH_TRANSPARENT_BACKGROUND} from '@constants/screens'; import EphemeralStore from '@store/ephemeral_store'; import NavigationStore from '@store/navigation_store'; +import {NamedStyles} from '@typings/global/styles'; import {appearanceControlledScreens, mergeNavigationOptions} from '@utils/navigation'; import type {Options} from 'react-native-navigation'; @@ -51,10 +52,10 @@ export function getComponents(inColor: string): {red: number; green: number; blu }; } -export function makeStyleSheetFromTheme(getStyleFromTheme: (a: any) => any): (a: any) => any { - let lastTheme: any; - let style: any; - return (theme: any) => { +export function makeStyleSheetFromTheme>(getStyleFromTheme: (a: Theme) => T): (a: Theme) => T { + let lastTheme: Theme; + let style: T; + return (theme: Theme) => { if (!style || theme !== lastTheme) { style = StyleSheet.create(getStyleFromTheme(theme)); lastTheme = theme; diff --git a/share_extension/components/channel_item/avatar/avatar.tsx b/share_extension/components/channel_item/avatar/avatar.tsx index 5daeb5434f..fa3f8ec197 100644 --- a/share_extension/components/channel_item/avatar/avatar.tsx +++ b/share_extension/components/channel_item/avatar/avatar.tsx @@ -5,8 +5,8 @@ import React from 'react'; import {View} from 'react-native'; import FastImage from 'react-native-fast-image'; -import {ACCOUNT_OUTLINE_IMAGE} from '@app/constants/profile'; import CompassIcon from '@components/compass_icon'; +import {ACCOUNT_OUTLINE_IMAGE} from '@constants/profile'; import NetworkManager from '@managers/network_manager'; import {useShareExtensionServerUrl} from '@share/state'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; diff --git a/share_extension/components/content_view/attachments/multiple.tsx b/share_extension/components/content_view/attachments/multiple.tsx index 4098de3877..f8c8840d5a 100644 --- a/share_extension/components/content_view/attachments/multiple.tsx +++ b/share_extension/components/content_view/attachments/multiple.tsx @@ -4,7 +4,7 @@ import React, {useCallback, useMemo} from 'react'; import {FlatList, ListRenderItemInfo, StyleProp, View, ViewStyle} from 'react-native'; -import FormattedText from '@app/components/formatted_text'; +import FormattedText from '@components/formatted_text'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; diff --git a/share_extension/components/servers_list/index.ts b/share_extension/components/servers_list/index.ts index 0aced6f757..a9b7045462 100644 --- a/share_extension/components/servers_list/index.ts +++ b/share_extension/components/servers_list/index.ts @@ -3,7 +3,7 @@ import withObservables from '@nozbe/with-observables'; -import {observeAllActiveServers} from '@app/queries/app/servers'; +import {observeAllActiveServers} from '@queries/app/servers'; import ServersList from './servers_list'; diff --git a/types/global/styles.ts b/types/global/styles.ts new file mode 100644 index 0000000000..f3c43b0843 --- /dev/null +++ b/types/global/styles.ts @@ -0,0 +1,5 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import {ImageStyle, TextStyle, ViewStyle} from 'react-native'; + +export type NamedStyles = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };