feat/comm/IMPULS-5811, Platform Selection screen improvement

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;

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';

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 (
+      <View style={styles.textWrapper}>
+        <SmallText style={[styles.text, textStyle]}>{text}</SmallText>
+      </View>
+    );
+  }
+  return text;
+}
+
+function PictureCard_Base(props: PictureCardProps & { cardComponent?: PictureCardComponent }) {
+  const { cardComponent, picture, style, text, textStyle, ...viewProps } = props;
+  const CC = cardComponent ?? CardWithoutPadding;
+
+  return (
+    <CC {...(viewProps as ViewProps & TouchableOpacityProps)} style={[styles.cardContainer, style]}>
+      <Picture {...picture} />
+      <PictureCardText text={text} textStyle={textStyle} />
+    </CC>
+  );
+}
+export function PictureCard(props: PictureCardProps) {
+  return <PictureCard_Base cardComponent={Card} {...props} />;
+}
+export function TouchablePictureCard(props: PictureCardProps & TouchableOpacityProps) {
+  return <PictureCard_Base cardComponent={TouchCard} {...props} />;
+}
+
+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 (
+    <PictureCard_Base
+      cardComponent={cardComponent ?? Card}
+      style={[styles.selectorCardPadding, style]}
+      picture={picture}
+      {...rest}
+    />
+  );
+}
+export function SelectorPictureCard(props: PictureCardProps) {
+  return <SelectorPictureCard_Base cardComponent={Card} {...props} />;
+}
+export function TouchableSelectorPictureCard(props: PictureCardProps & TouchableOpacityProps) {
+  return <SelectorPictureCard_Base cardComponent={TouchCard} {...props} />;
+}

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,
+  },
+});

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<Pick<PictureCardProps, 'text' | 'textStyle'>>;

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 (
     <GridList
       data={appConf.platforms}
@@ -24,6 +26,7 @@ export function AuthPlatformsScreenTemplate(props: AuthPlatformsScreenProps) {
           picture={item.logoType === 'Image' ? { source: item.logo, type: 'Image' } : { name: item.logo, type: item.logoType }}
           pictureStyle={styles.picture}
           text={item.displayName}
+          style={styles.cardStyle}
           onPress={() => onOpenItem(item)}
           testID={`network-${item.name}`}
         />
@@ -34,12 +37,14 @@ export function AuthPlatformsScreenTemplate(props: AuthPlatformsScreenProps) {
           <HeadingSText style={styles.heading} testID="network-welcome-title">
             {I18n.get('auth-platformselect-welcome')}
           </HeadingSText>
+          {/*  don't forget to add new i18n label translation */}
           <SmallText style={styles.lightP} testID="network-welcome-subtitle">
             {I18n.get('auth-platformselect-select')}
           </SmallText>
         </SafeAreaView>
       }
       alwaysBounceVertical={false}
+      contentContainerStyle={contentContainerStyle}
       overScrollMode="never"
       ListFooterComponent={<DebugOptions />}
       gap={UI_SIZES.spacing.big}

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%' },
 });