diff --git a/.yarn/cache/hermes-estree-npm-0.33.3-6d722ccbf6-dfaac7eb91.zip b/.yarn/cache/hermes-estree-npm-0.33.3-6d722ccbf6-dfaac7eb91.zip deleted file mode 100644 index 1655bcaedb..0000000000 Binary files a/.yarn/cache/hermes-estree-npm-0.33.3-6d722ccbf6-dfaac7eb91.zip and /dev/null differ diff --git a/.yarn/cache/hermes-parser-npm-0.33.3-d2cc856fd3-709dac7283.zip b/.yarn/cache/hermes-parser-npm-0.33.3-d2cc856fd3-709dac7283.zip deleted file mode 100644 index 1b25448139..0000000000 Binary files a/.yarn/cache/hermes-parser-npm-0.33.3-d2cc856fd3-709dac7283.zip and /dev/null differ diff --git a/.yarn/cache/iconv-lite-npm-0.7.3-0c4725f953-b88a3f4527.zip b/.yarn/cache/iconv-lite-npm-0.7.3-0c4725f953-b88a3f4527.zip deleted file mode 100644 index 0258ecb25f..0000000000 Binary files a/.yarn/cache/iconv-lite-npm-0.7.3-0c4725f953-b88a3f4527.zip and /dev/null differ diff --git a/src/framework/components/card/index.tsx b/src/framework/components/card/index.tsx index 79c7ac94b0..19aa4624ac 100755 --- a/src/framework/components/card/index.tsx +++ b/src/framework/components/card/index.tsx @@ -14,16 +14,6 @@ import { import styled from '@emotion/native'; import { Moment } from 'moment'; -import { - cardPadding, - cardPaddingEqual, - cardPaddingMerging, - cardPaddingSmall, - CardWithoutPadding, - TouchCardWithoutPadding, -} from './base'; -import { OverviewCardProps } from './pictureCard'; - import theme from '~/app/theme'; import { Badge } from '~/framework/components/badge'; import { UI_SIZES, UI_STYLES } from '~/framework/components/constants'; @@ -34,6 +24,16 @@ import { Image } from '~/framework/util/media-deprecated'; import { GridAvatars } from '~/ui/avatars/GridAvatars'; import HtmlContentView from '~/ui/HtmlContentView'; +import { + cardPadding, + cardPaddingEqual, + cardPaddingMerging, + cardPaddingSmall, + CardWithoutPadding, + TouchCardWithoutPadding, +} from './base'; +import { OverviewCardProps } from './picture'; + export interface IContentCardProps extends ViewProps { header?: React.ReactElement; footer?: React.ReactElement; diff --git a/src/framework/components/card/picture/index.ts b/src/framework/components/card/picture/index.ts new file mode 100644 index 0000000000..145a448d10 --- /dev/null +++ b/src/framework/components/card/picture/index.ts @@ -0,0 +1,2 @@ +export { TouchableSelectorPictureCard as default } from '~/framework/components/card/picture/picture-card'; +export type { OverviewCardProps } from '~/framework/components/card/picture/types'; diff --git a/src/framework/components/card/picture/picture-card.tsx b/src/framework/components/card/picture/picture-card.tsx new file mode 100644 index 0000000000..d23511409e --- /dev/null +++ b/src/framework/components/card/picture/picture-card.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { TouchableOpacityProps, View, ViewProps } from 'react-native'; + +import { Card, CardWithoutPadding, TouchCard } from '~/framework/components/card/base'; +import { Picture } from '~/framework/components/picture'; +import { SmallText } from '~/framework/components/text'; + +import { styles } from './styles'; +import type { PictureCardComponent, PictureCardProps, PictureCardTextProps } from './types'; + +function PictureCardText({ text, textStyle }: PictureCardTextProps) { + if (!text) return null; + if (typeof text === 'string') { + return ( + + {text} + + ); + } + return text; +} + +function PictureCard_Base(props: PictureCardProps & { cardComponent?: PictureCardComponent }) { + const { cardComponent, picture, style, text, textStyle, ...viewProps } = props; + const CC = cardComponent ?? CardWithoutPadding; + + return ( + + + + + ); +} +export function PictureCard(props: PictureCardProps) { + return ; +} +export function TouchablePictureCard(props: PictureCardProps & TouchableOpacityProps) { + return ; +} + +function SelectorPictureCard_Base(props: PictureCardProps & { cardComponent?: PictureCardComponent }) { + const { cardComponent, picture, pictureStyle, style, ...rest } = props; + picture.style = { maxWidth: '100%', ...pictureStyle }; + if (picture.type === 'Image') picture.resizeMode = 'contain'; + return ( + + ); +} +export function SelectorPictureCard(props: PictureCardProps) { + return ; +} +export function TouchableSelectorPictureCard(props: PictureCardProps & TouchableOpacityProps) { + return ; +} diff --git a/src/framework/components/card/picture/styles.ts b/src/framework/components/card/picture/styles.ts new file mode 100644 index 0000000000..0b54a31573 --- /dev/null +++ b/src/framework/components/card/picture/styles.ts @@ -0,0 +1,23 @@ +import { StyleSheet } from 'react-native'; + +import { getScaleHeight, UI_SIZES } from '~/framework/components/constants'; + +export const styles = StyleSheet.create({ + cardContainer: { + alignItems: 'center', + justifyContent: 'center', + }, + selectorCardPadding: { + paddingHorizontal: UI_SIZES.spacing.medium, + }, + text: { + lineHeight: undefined, + textAlign: 'center', + }, + textWrapper: { + alignItems: 'center', + height: getScaleHeight(20) * 1.5, + justifyContent: 'center', + marginTop: UI_SIZES.spacing.tiny, + }, +}); diff --git a/src/framework/components/card/picture/types.ts b/src/framework/components/card/picture/types.ts new file mode 100644 index 0000000000..de710046a4 --- /dev/null +++ b/src/framework/components/card/picture/types.ts @@ -0,0 +1,23 @@ +import { TextStyle, ViewProps, ViewStyle } from 'react-native'; + +import { PictureProps } from '~/framework/components/picture'; + +import { Card, CardWithoutPadding, TouchCard } from '../base'; + +export type PictureCardProps = { + text?: string | React.ReactElement; + textStyle?: TextStyle; + picture: PictureProps; + pictureStyle?: ViewStyle; +} & ViewProps; + +export type OverviewCardProps = { + title?: string | React.ReactElement; + picture?: PictureProps; + pictureStyle?: PictureProps['style']; + pictureWrapperStyle?: ViewStyle; +} & ViewProps; + +export type PictureCardComponent = typeof Card | typeof CardWithoutPadding | typeof TouchCard; + +export type PictureCardTextProps = Readonly>; diff --git a/src/framework/components/card/pictureCard.tsx b/src/framework/components/card/pictureCard.tsx deleted file mode 100755 index 8a9f80bc0d..0000000000 --- a/src/framework/components/card/pictureCard.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; -import { TextStyle, TouchableOpacityProps, View, ViewProps, ViewStyle } from 'react-native'; - -import { Card, CardWithoutPadding, TouchCard } from './base'; - -import { getScaleHeight, UI_SIZES } from '~/framework/components/constants'; -import { Picture, PictureProps } from '~/framework/components/picture'; - -import { SmallText } from '~/framework/components/text'; - -export type PictureCardProps = { - text?: string | React.ReactElement; - textStyle?: TextStyle; - picture: PictureProps; - pictureStyle?: ViewStyle; -} & ViewProps; - -function PictureCard_Base(props: PictureCardProps & { cardComponent?: React.ComponentType }) { - const { cardComponent, picture, style, text, textStyle, ...viewProps } = props; - const CC = cardComponent ?? CardWithoutPadding; - return ( - - - {text ? ( - typeof text === 'string' ? ( - - - {text} - - - ) : ( - text - ) - ) : null} - - ); -} -export function PictureCard(props: PictureCardProps) { - return ; -} -export function TouchablePictureCard(props: PictureCardProps & TouchableOpacityProps) { - return ; -} - -function SelectorPictureCard_Base(props: PictureCardProps & { cardComponent?: React.ComponentType }) { - const { picture, pictureStyle, style, ...rest } = props; - picture.style = { maxWidth: '100%', ...pictureStyle }; - picture.resizeMode = 'contain'; - return ( - - ); -} -export function SelectorPictureCard(props: PictureCardProps) { - return ; -} -export function TouchableSelectorPictureCard(props: PictureCardProps & TouchableOpacityProps) { - return ; -} - -export type OverviewCardProps = { - title?: string | React.ReactElement; - picture?: PictureProps; - pictureStyle?: PictureProps['style']; - pictureWrapperStyle?: ViewStyle; -} & ViewProps; diff --git a/src/framework/modules/auth/templates/platforms/screen.tsx b/src/framework/modules/auth/templates/platforms/screen.tsx index 2af6793348..41d4e24a81 100644 --- a/src/framework/modules/auth/templates/platforms/screen.tsx +++ b/src/framework/modules/auth/templates/platforms/screen.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import { SafeAreaView } from 'react-native-safe-area-context'; +import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'; import { I18n } from '~/app/i18n'; -import { TouchableSelectorPictureCard } from '~/framework/components/card/pictureCard'; +import TouchableSelectorPictureCard from '~/framework/components/card/picture'; import { UI_SIZES } from '~/framework/components/constants'; import GridList from '~/framework/components/GridList'; import { HeadingSText, SmallText } from '~/framework/components/text'; @@ -15,7 +15,9 @@ import type { AuthPlatformsScreenProps } from './types'; export function AuthPlatformsScreenTemplate(props: AuthPlatformsScreenProps) { const { getNextRoute, navigation } = props; + const { bottom: bottomInset } = useSafeAreaInsets(); const onOpenItem = React.useCallback((item: Platform) => navigation.navigate(getNextRoute(item)), [getNextRoute, navigation]); + const contentContainerStyle = React.useMemo(() => ({ paddingBottom: bottomInset }), [bottomInset]); return ( onOpenItem(item)} testID={`network-${item.name}`} /> @@ -34,12 +37,14 @@ export function AuthPlatformsScreenTemplate(props: AuthPlatformsScreenProps) { {I18n.get('auth-platformselect-welcome')} + {/* don't forget to add new i18n label translation */} {I18n.get('auth-platformselect-select')} } alwaysBounceVertical={false} + contentContainerStyle={contentContainerStyle} overScrollMode="never" ListFooterComponent={} gap={UI_SIZES.spacing.big} diff --git a/src/framework/modules/auth/templates/platforms/styles.ts b/src/framework/modules/auth/templates/platforms/styles.ts index 3a679b5be0..598175c64b 100644 --- a/src/framework/modules/auth/templates/platforms/styles.ts +++ b/src/framework/modules/auth/templates/platforms/styles.ts @@ -1,15 +1,22 @@ import { StyleSheet } from 'react-native'; import theme from '~/app/theme'; -import { UI_SIZES } from '~/framework/components/constants'; +import { getScaleHeight, getScaleWidth, UI_SIZES } from '~/framework/components/constants'; export default StyleSheet.create({ + cardStyle: { + paddingVertical: UI_SIZES.spacing.minor, + }, heading: { color: theme.ui.text.regular, marginBottom: UI_SIZES.spacing.big, marginTop: UI_SIZES.spacing.medium, textAlign: 'center', }, - lightP: { color: theme.ui.text.light, marginBottom: UI_SIZES.spacing.small, textAlign: 'center' }, - picture: { height: 64, width: '100%' }, + lightP: { + color: theme.palette.primary.regular, + marginBottom: UI_SIZES.spacing.small, + textAlign: 'center', + }, + picture: { height: getScaleHeight(50), maxWidth: getScaleWidth(112), width: '100%' }, });