feat(llm): change ui of content card to fit with design

.changeset/quiet-phones-tan.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+change ui of braze content cards grid layout. The grid layout will now be stacking action cards. The padding between cards has been also changed

apps/ledger-live-mobile/src/contentCards/layouts/carousel/index.tsx

@@ -12,12 +12,7 @@ import { useTheme } from "styled-components/native";
 import { ContentLayoutBuilder } from "~/contentCards/layouts/utils";
 import Pagination from "./pagination";
 import { ContentCardItem } from "~/contentCards/cards/types";
-
-export enum WidthFactor {
-  Full = 1,
-  Half = 0.5,
-  ThreeQuarters = 0.72,
-}
+import { WidthFactor } from "~/contentCards/layouts/types";
 
 type Props = {
   styles?: {
@@ -30,7 +25,7 @@ type Props = {
 const defaultStyles = {
   gap: 6,
   pagination: true,
-  widthFactor: 1,
+  widthFactor: WidthFactor.Full,
 };
 
 const Carousel = ContentLayoutBuilder<Props>(({ items, styles: _styles = defaultStyles }) => {

apps/ledger-live-mobile/src/contentCards/layouts/grid/index.tsx

@@ -2,23 +2,27 @@ import React from "react";
 import { useWindowDimensions } from "react-native";
 import { ContentLayoutBuilder } from "~/contentCards/layouts/utils";
 import { Flex } from "@ledgerhq/native-ui";
+import { WidthFactor } from "~/contentCards/layouts/types";
 
 type Props = {
   styles?: {
     gap?: number;
+    widthFactor?: WidthFactor;
   };
 };
 
 const defaultStyles = {
-  gap: 6,
+  gap: 12,
+  widthFactor: WidthFactor.Half,
 };
 
 const Grid = ContentLayoutBuilder<Props>(({ items, styles: _styles = defaultStyles }) => {
   const styles = {
     gap: _styles.gap ?? defaultStyles.gap,
+    widthFactor: _styles.widthFactor ?? defaultStyles.widthFactor,
   };
 
-  const width = useWindowDimensions().width / 2 - 20;
+  const width = useWindowDimensions().width * styles.widthFactor - 20;
 
   return (
     <Flex

apps/ledger-live-mobile/src/contentCards/layouts/types.tsx

@@ -3,3 +3,9 @@ import { ContentCardItem, ContentCardProps } from "~/contentCards/cards/types";
 export interface ContentLayoutProps<T extends ContentCardProps> {
   items: ContentCardItem<T>[];
 }
+
+export enum WidthFactor {
+  Full = 1,
+  Half = 0.5,
+  ThreeQuarters = 0.72,
+}

apps/ledger-live-mobile/src/dynamicContent/ContentCardsCategory/Layout.tsx

@@ -18,7 +18,8 @@ import {
   mapAsBigSquareContentCard,
   mapAsHeroContentCard,
 } from "~/dynamicContent/utils";
-import Carousel, { WidthFactor } from "../../contentCards/layouts/carousel";
+import Carousel from "../../contentCards/layouts/carousel";
+import { WidthFactor } from "~/contentCards/layouts/types";
 import useDynamicContent from "../useDynamicContent";
 import { ContentCardsType } from "../types";
 import Grid from "~/contentCards/layouts/grid";
@@ -127,7 +128,7 @@ const Layout = ({ category, cards }: LayoutProps) => {
         />
       );
     case ContentCardsLayout.grid:
-      return <Grid items={items} />;
+      return <Grid items={items} styles={{ widthFactor: cardsSorted[0].gridWidthFactor }} />;
     case ContentCardsLayout.unique:
     default:
       return <Flex mx={6}>{items[0].component(items[0].props)}</Flex>;

apps/ledger-live-mobile/src/dynamicContent/ContentCardsLocation.tsx

@@ -36,7 +36,7 @@ const ContentCardsLocation = ({ locationId, ...containerProps }: Props) => {
         data={categoriesFormatted}
         renderItem={Category}
         keyExtractor={(item: CategoriesWithCards) => item.category.id}
-        ItemSeparatorComponent={() => <Flex height={8} />}
+        ItemSeparatorComponent={() => <Flex height={32} />}
       />
     </Flex>
   );

apps/ledger-live-mobile/src/dynamicContent/types.ts

@@ -1,6 +1,6 @@
 import { ContentCard as BrazeContentCard } from "@braze/react-native-sdk";
 import { Size } from "~/contentCards/cards/vertical/types";
-import { WidthFactor } from "~/contentCards/layouts/carousel";
+import { WidthFactor } from "~/contentCards/layouts/types";
 
 enum ContentCardsType {
   smallSquare = "small_square",
@@ -39,6 +39,7 @@ type ContentCardCommonProperties = {
   viewed: boolean;
   order?: number;
   carouselWidthFactor?: WidthFactor;
+  gridWidthFactor?: WidthFactor;
 };
 
 type CategoryContentCard = ContentCardCommonProperties & {
@@ -91,6 +92,7 @@ type HorizontalContentCard = ContentCardCommonProperties & {
   link?: string;
   description?: string;
   image?: string;
+  gridWidthFactor?: WidthFactor;
 };
 
 type HeroContentCard = ContentCardCommonProperties & {

apps/ledger-live-mobile/src/dynamicContent/utils.tsx

@@ -1,5 +1,5 @@
 import { Size } from "~/contentCards/cards/vertical/types";
-import { WidthFactor } from "~/contentCards/layouts/carousel";
+import { WidthFactor } from "~/contentCards/layouts/types";
 import {
   BrazeContentCard,
   AssetContentCard,
@@ -144,6 +144,7 @@ export const mapAsHorizontalContentCard = (card: BrazeContentCard): HorizontalCo
   createdAt: card.created,
   viewed: card.viewed,
   order: parseInt(card.extras.order) ? parseInt(card.extras.order) : undefined,
+  gridWidthFactor: WidthFactor.Full,
 });
 
 const mapAsSquareContentCard = (