diff --git a/app/screens/convert_gm_to_channel/channel_name_input.tsx b/app/screens/convert_gm_to_channel/channel_name_input.tsx new file mode 100644 index 000000000..9accaef76 --- /dev/null +++ b/app/screens/convert_gm_to_channel/channel_name_input.tsx @@ -0,0 +1,47 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +import FloatingTextInput from '@app/components/floating_text_input_label'; +import {Channel} from '@app/constants'; +import {useTheme} from '@app/context/theme'; +import {t} from '@app/i18n'; +import {getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme} from '@app/utils/theme'; + +const getStyleSheet = makeStyleSheetFromTheme((theme) => ({ + fieldContainer: { + marginBottom: 32, + }, +})); + +export const ChannelNameInput = () => { + const {formatMessage} = useIntl(); + const theme = useTheme(); + + const labelDisplayName = formatMessage({id: t('channel_modal.name'), defaultMessage: 'Name'}); + const placeholder = formatMessage({id: t('"channel_modal.name": "Name",'), defaultMessage: 'Channel Name'}); + + const styles = getStyleSheet(theme); + + return ( + + ); +}; diff --git a/app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx b/app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx new file mode 100644 index 000000000..93506e4e8 --- /dev/null +++ b/app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx @@ -0,0 +1,53 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; +import {View} from 'react-native'; + +import {useTheme} from '@app/context/theme'; +import {makeStyleSheetFromTheme} from '@app/utils/theme'; +import Button from '@components/button'; + +import {ChannelNameInput} from './channel_name_input'; +import {MessageBox} from './message_box'; +import {TeamSelector} from './team_selector'; + +const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => { + return { + container: { + paddingVertical: 24, + paddingHorizontal: 20, + display: 'flex', + flexDirection: 'column', + gap: 24, + }, + }; +}); + +export const ConvertGMToChannelForm = () => { + const theme = useTheme(); + const styles = getStyleFromTheme(theme); + + const {formatMessage} = useIntl(); + const confirmButtonText = formatMessage({ + id: 'channel_info.convert_gm_to_channel.button_text', + defaultMessage: 'Convert to a Private Channel', + }); + + return ( + + + + +