From 7f9c653e2eaf2d22558dc8692a7086b7c3594abb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Fri, 24 Jun 2022 12:12:46 +0200 Subject: [PATCH] Fix Status Bar color, and some minor adjustments in the create channel screen (#6414) * Fix Status Bar color, and some minor adjustments in the create channel screen * iOS fixes and tweaks * Revert autocomplete changes Co-authored-by: Daniel Espino --- app/actions/remote/groups.ts | 2 +- .../options/edit_channel/index.tsx | 2 +- .../channel_info_form.tsx | 148 +++++++++--------- app/screens/navigation.ts | 1 - app/screens/user_profile/options.tsx | 2 +- app/screens/user_profile/title/avatar.tsx | 2 +- app/screens/user_profile/user_profile.tsx | 2 +- 7 files changed, 79 insertions(+), 80 deletions(-) diff --git a/app/actions/remote/groups.ts b/app/actions/remote/groups.ts index 523c32cdd..7976f2a76 100644 --- a/app/actions/remote/groups.ts +++ b/app/actions/remote/groups.ts @@ -2,10 +2,10 @@ // See LICENSE.txt for license information. import {storeGroups} from '@actions/local/group'; -import {prepareGroups} from '@app/queries/servers/group'; import {Client} from '@client/rest'; import DatabaseManager from '@database/manager'; import NetworkManager from '@managers/network_manager'; +import {prepareGroups} from '@queries/servers/group'; import {forceLogoutIfNecessary} from './session'; diff --git a/app/screens/channel_info/options/edit_channel/index.tsx b/app/screens/channel_info/options/edit_channel/index.tsx index 669b1602f..eb149170b 100644 --- a/app/screens/channel_info/options/edit_channel/index.tsx +++ b/app/screens/channel_info/options/edit_channel/index.tsx @@ -19,7 +19,7 @@ const EditChannel = ({channelId}: Props) => { const title = formatMessage({id: 'screens.channel_edit', defaultMessage: 'Edit Channel'}); const goToEditChannel = preventDoubleTap(async () => { - goToScreen(Screens.CREATE_OR_EDIT_CHANNEL, title, {channelId, isModal: false}); + goToScreen(Screens.CREATE_OR_EDIT_CHANNEL, title, {channelId}); }); return ( diff --git a/app/screens/create_or_edit_channel/channel_info_form.tsx b/app/screens/create_or_edit_channel/channel_info_form.tsx index cc8c8648f..dde06cedf 100644 --- a/app/screens/create_or_edit_channel/channel_info_form.tsx +++ b/app/screens/create_or_edit_channel/channel_info_form.tsx @@ -12,6 +12,7 @@ import { NativeSyntheticEvent, NativeScrollEvent, Platform, + KeyboardEvent, } from 'react-native'; import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'; import {SafeAreaView} from 'react-native-safe-area-context'; @@ -39,7 +40,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => ({ flex: 1, }, scrollView: { - paddingVertical: 30, + paddingVertical: 32, paddingHorizontal: 20, }, errorContainer: { @@ -49,29 +50,21 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => ({ justifyContent: 'center', alignItems: 'center', }, - input: { - color: theme.centerChannelColor, - fontSize: 14, - height: 40, - paddingHorizontal: 15, - }, loading: { flex: 1, alignItems: 'center', justifyContent: 'center', }, - textInput: { - marginTop: 30, + makePrivateContainer: { + marginBottom: 32, + }, + fieldContainer: { + marginBottom: 24, }, helpText: { - ...typography('Body', 400, 'Regular'), - fontSize: 12, - lineHeight: 16, + ...typography('Body', 75, 'Regular'), color: changeOpacity(theme.centerChannelColor, 0.5), - marginTop: 10, - }, - headerHelpText: { - zIndex: -1, + marginTop: 8, }, })); @@ -122,11 +115,11 @@ export default function ChannelInfoForm({ const updateScrollTimeout = useRef(); - const [keyboardVisible, setKeyBoardVisible] = useState(false); + const [keyboardVisible, setKeyBoardVisible] = useState(false); const [keyboardHeight, setKeyboardHeight] = useState(0); const [scrollPosition, setScrollPosition] = useState(0); - const [headerPosition, setHeaderPosition] = useState(0); + const [headerPosition, setHeaderPosition] = useState(0); const optionalText = formatMessage({id: t('channel_modal.optional'), defaultMessage: '(optional)'}); const labelDisplayName = formatMessage({id: t('channel_modal.name'), defaultMessage: 'Name'}); @@ -165,14 +158,14 @@ export default function ChannelInfoForm({ if (scrollViewRef?.current) { scrollViewRef.current?.scrollToPosition(0, headerPosition); } - }, []); + }, [headerPosition]); - const onKeyboardDidShow = useCallback((frames: any) => { + const onKeyboardDidShow = useCallback((frames: KeyboardEvent) => { setKeyBoardVisible(true); if (Platform.OS === 'android') { setKeyboardHeight(frames.endCoordinates.height); } - }, [scrollHeaderToTop]); + }, []); const onKeyboardDidHide = useCallback(() => { setKeyBoardVisible(false); @@ -219,6 +212,7 @@ export default function ChannelInfoForm({ ); } + const platformHeaderHeight = headerHeight.defaultHeight + Platform.select({ios: 10, default: headerHeight.defaultHeight + 10}); const postInputTop = (headerPosition + scrollPosition + platformHeaderHeight) - keyboardHeight; @@ -252,6 +246,7 @@ export default function ChannelInfoForm({ type={'toggle'} selected={isPrivate} icon={'lock-outline'} + containerStyle={styles.makePrivateContainer} /> )} {!displayHeaderOnly && ( @@ -273,63 +268,69 @@ export default function ChannelInfoForm({ testID='channel_info_form.display_name.input' value={displayName} ref={nameInput} - containerStyle={styles.textInput} + containerStyle={styles.fieldContainer} theme={theme} /> - - + + + + )} - - + > + + + @@ -342,7 +343,6 @@ export default function ChannelInfoForm({ nestedScrollEnabled={true} maxHeightOverride={isTablet ? 200 : undefined} inPost={false} - fixedBottomPosition={false} /> diff --git a/app/screens/navigation.ts b/app/screens/navigation.ts index cd5262579..8747e4e8e 100644 --- a/app/screens/navigation.ts +++ b/app/screens/navigation.ts @@ -345,7 +345,6 @@ export function goToScreen(name: string, title: string, passProps = {}, options right: {enabled: false}, }, statusBar: { - backgroundColor: null, style: isDark ? 'light' : 'dark', }, topBar: { diff --git a/app/screens/user_profile/options.tsx b/app/screens/user_profile/options.tsx index 33e7645a4..c410f3a45 100644 --- a/app/screens/user_profile/options.tsx +++ b/app/screens/user_profile/options.tsx @@ -6,7 +6,6 @@ import {useIntl} from 'react-intl'; import {DeviceEventEmitter, StyleSheet, TouchableOpacity, View} from 'react-native'; import {createDirectChannel, switchToChannelById} from '@actions/remote/channel'; -import {buttonBackgroundStyle, buttonTextStyle} from '@app/utils/buttonStyles'; import CompassIcon from '@components/compass_icon'; import FormattedText from '@components/formatted_text'; import OptionBox, {OPTIONS_HEIGHT} from '@components/option_box'; @@ -14,6 +13,7 @@ import {Events, Screens} from '@constants'; import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {dismissBottomSheet} from '@screens/navigation'; +import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles'; export type OptionsType = 'all' | 'message'; diff --git a/app/screens/user_profile/title/avatar.tsx b/app/screens/user_profile/title/avatar.tsx index 2ac708988..0b240c1c8 100644 --- a/app/screens/user_profile/title/avatar.tsx +++ b/app/screens/user_profile/title/avatar.tsx @@ -7,7 +7,7 @@ import React from 'react'; import {StyleSheet, View} from 'react-native'; import FastImage from 'react-native-fast-image'; -import ProfilePicture from '@app/components/profile_picture'; +import ProfilePicture from '@components/profile_picture'; import type UserModel from '@typings/database/models/servers/user'; diff --git a/app/screens/user_profile/user_profile.tsx b/app/screens/user_profile/user_profile.tsx index 31875b655..69f1b5df5 100644 --- a/app/screens/user_profile/user_profile.tsx +++ b/app/screens/user_profile/user_profile.tsx @@ -8,8 +8,8 @@ import {useIntl} from 'react-intl'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {fetchTeamAndChannelMembership} from '@actions/remote/user'; -import {useServerUrl} from '@app/context/server'; import {Screens} from '@constants'; +import {useServerUrl} from '@context/server'; import {getLocaleFromLanguage} from '@i18n'; import BottomSheet from '@screens/bottom_sheet'; import {getUserTimezone} from '@utils/user';