LLM - Small flexible cards ui modifications to match the Security Key…

… use case (#7412) feat(llm): small flexible cards ui modifications
LedgerHQ · Jul 25, 2024 · 7b41333 · 7b41333
1 parent db826f8
commit 7b41333
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 28 deletions.
diff --git a/.changeset/itchy-tigers-divide.md b/.changeset/itchy-tigers-divide.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+LLM - Small Flexible Cards Ui Modifications
diff --git a/apps/ledger-live-mobile/src/contentCards/cards/vertical/elements.tsx b/apps/ledger-live-mobile/src/contentCards/cards/vertical/elements.tsx
@@ -13,14 +13,12 @@ export const ImageStyles: {
     flex: 1,
     width: "100%",
     maxHeight: 260,
-    marginBottom: 32,
     marginTop: 24,
   },
   M: {
     flex: 1,
     aspectRatio: 1,
     maxHeight: 160,
-    marginBottom: 32,
     marginTop: 24,
   },
   S: {
@@ -40,8 +38,9 @@ type ImageProps = {
 export const Image = ({ uri, size, filledImage }: ImageProps) => {
   const isBigCardAndFilled = (size === "L" && filledImage) || false;
   const stylesBigCard = isBigCardAndFilled
-    ? { marginBottom: 24, marginTop: 0, borderTopLeftRadius: 12, borderTopRightRadius: 12 }
+    ? { marginBottom: 0, marginTop: 0, borderTopLeftRadius: 12, borderTopRightRadius: 12 }
     : { aspectRatio: 1 };
+
   return (
     <NativeImage
       source={{ uri }}
@@ -92,7 +91,6 @@ export const TitleStyles: {
   L: {
     variant: "large",
     fontWeight: "medium",
-    numberOfLine: 1,
     paddingBottom: 2,
     textAlign: "center",
   },
@@ -121,13 +119,12 @@ export const SubtitleStyles: {
   L: {
     variant: "body",
     fontWeight: "medium",
-    numberOfLine: 1,
     textAlign: "center",
   },
   M: {
     variant: "paragraph",
     fontWeight: "medium",
-    numberOfLine: 1,
+    numberOfLines: 1,
     textAlign: "center",
   },
   S: {
@@ -140,7 +137,7 @@ export const Subtitle = ({ label, size }: LabelProps) => {
 
   return (
     <Text {...SubtitleStyles[size]} color={colors.neutral.c70}>
-      {label}
+      {label.replace(/\\n/g, "\n")}
     </Text>
   );
 };
@@ -151,21 +148,21 @@ export const PriceStyles: {
   L: {
     variant: "large",
     fontWeight: "medium",
-    numberOfLine: 1,
+    numberOfLines: 1,
     paddingTop: 12,
     textAlign: "center",
   },
   M: {
     variant: "paragraph",
     fontWeight: "medium",
-    numberOfLine: 1,
+    numberOfLines: 1,
     paddingTop: 12,
     textAlign: "center",
   },
   S: {
     variant: "paragraph",
     fontWeight: "medium",
-    numberOfLine: 1,
+    numberOfLines: 1,
     paddingTop: 4,
     textAlign: "center",
   },
@@ -205,17 +202,17 @@ export const ButtonlabelStyles: {
   L: {
     variant: "paragraph",
     fontWeight: "semiBold",
-    numberOfLine: 1,
+    numberOfLines: 1,
   },
   M: {
     variant: "paragraph",
     fontWeight: "semiBold",
-    numberOfLine: 1,
+    numberOfLines: 1,
   },
   S: {
     variant: "paragraph",
     fontWeight: "semiBold",
-    numberOfLine: 1,
+    numberOfLines: 1,
   },
 };
 
@@ -229,11 +226,16 @@ export const Button = ({ label, size, action }: LabelProps & { action?: () => vo
   );
 };
 
-export const ContainerStyles = (size: Size, widthFactor: WidthFactor): object => {
+export const ContainerStyles = (
+  size: Size,
+  widthFactor: WidthFactor,
+  isOnlyImage?: boolean,
+): object => {
   const styles = {
     L: {
-      height: 406,
-      paddingBottom: 24,
+      height: isOnlyImage ? 282 : 406,
+      paddingBottom: isOnlyImage ? 0 : 24,
+      justifyContent: isOnlyImage ? "center" : "space-between",
       borderRadius: 12,
     },
     M: {
@@ -255,11 +257,15 @@ export const Container = ({
   size,
   children,
   widthFactor,
-}: { size: Size } & PropsWithChildren & { widthFactor: WidthFactor }) => {
+  isOnlyImage,
+}: { size: Size; isOnlyImage?: boolean } & PropsWithChildren & { widthFactor: WidthFactor }) => {
   const { colors } = useTheme();
-  const styles = ContainerStyles(size, widthFactor);
+  const styles = ContainerStyles(size, widthFactor, isOnlyImage);
   return (
-    <View
+    <Flex
+      alignItems="center"
+      width={"100%"}
+      height={"100%"}
       style={{
         position: "relative",
         justifyContent: "space-between",
@@ -269,6 +275,6 @@ export const Container = ({
       }}
     >
       {children}
-    </View>
+    </Flex>
   );
 };
diff --git a/apps/ledger-live-mobile/src/contentCards/cards/vertical/index.tsx b/apps/ledger-live-mobile/src/contentCards/cards/vertical/index.tsx
@@ -43,21 +43,22 @@ const VerticalCard = ContentCardBuilder<Props>(
     useEffect(() => metadata.actions?.onView?.());
     const hasCta = cta && size === "L";
     const hasPrice = !hasCta && price;
+    const isOnlyImage = !title && !subtitle && !price && !cta;
 
     return (
       <TouchableOpacity onPress={metadata.actions?.onClick}>
         {tag && <Tag size={size} label={tag} />}
         {metadata.actions?.onDismiss && <Close onPress={metadata.actions?.onDismiss} />}
-        <Container size={size} widthFactor={widthFactor}>
-          <Flex alignItems="center" width={"100%"} height={"100%"}>
-            <Image uri={image} size={size} filledImage={filledImage} />
-            <Flex alignItems="center" px={6}>
-              <Title size={size} label={title} />
-              <Subtitle size={size} label={subtitle} />
+        <Container size={size} widthFactor={widthFactor} isOnlyImage={isOnlyImage}>
+          <Image uri={image} size={size} filledImage={filledImage} />
+          {!isOnlyImage ? (
+            <Flex alignItems="center" px={6} pt={4}>
+              {title && <Title size={size} label={title} />}
+              {subtitle && <Subtitle size={size} label={subtitle} />}
               {hasPrice && <Price size={size} label={price} />}
               {hasCta && <Button size={size} label={cta} action={metadata.actions?.onClick} />}
             </Flex>
-          </Flex>
+          ) : null}
         </Container>
       </TouchableOpacity>
     );

diff --git a/...ledger-live-mobile/src/newArch/features/LandingPages/screens/GenericLandingPage/index.tsx b/...ledger-live-mobile/src/newArch/features/LandingPages/screens/GenericLandingPage/index.tsx
@@ -30,7 +30,7 @@ const GenericLandingPage = (props: NavigationProps) => {
   return (
     <Flex>
       <TrackScreen name="Landing Page" useCase={useCase} />
-      <ContentCardsLocation locationId={props.route.params?.useCase} />
+      <ContentCardsLocation locationId={props.route.params?.useCase} mb={8} />
     </Flex>
   );
 };