[Design QA] Card Design Desktop+Mobile

[SanaJamm]

• Paragraph font size should be 16px with Regular weight, now it’s set to 18 and it looks like medium or bold. Let’s set paragraph up to 3 lines and add text truncation, when clicking the paragraph it expands. and let’s set character limit to 230.

• Keep the text inside the card, right now the paragraph is outside the card.

Devs:

Design:

[benefacto]

Technical Implementation

To implement the requested changes in your React Native CollectiveCard component, you need to adjust the paragraph (description) styles for font size and weight, limit the text to three lines with truncation, enable expansion on click, and ensure the text stays within the card boundaries. Here's how you can modify the code to achieve this:

1. Update Description Style: Change the description style to have a font size of 16px, regular weight, and limit it to 3 lines with truncation.

   description: {
    fontSize: 16,
    lineHeight: 24, // Adjust line height for better readability
    color: Colors.black,
    ...InterRegular, // Use regular font weight
    flexShrink: 1,
    numberOfLines: 3, // Limit to 3 lines
    ellipsizeMode: 'tail', // Automatic text truncation with ellipsis
   },

2. Add State for Expanded Text: Introduce a new state variable to manage whether the description is expanded or not.

   const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);

3. Modify Description Text Component: Update the Text component for the description to change the numberOfLines property based on whether the description is expanded or not. Also, add an onPress event to toggle the expansion.

   <Text
    style={styles.description}
    numberOfLines={isDescriptionExpanded ? undefined : 3}
    onPress={() => setIsDescriptionExpanded(!isDescriptionExpanded)}
   >
    {description}
   </Text>

4. Ensure Text Inside Card: To keep the text inside the card, ensure that the cardDescription style provides adequate padding and margin to contain the text. This seems to be already handled in your existing cardContainer style, but you can adjust the padding or margin if needed.

5. Adjust Styles for Flexbox Layout: Make sure the flexbox layout is correctly set up to handle the text expansion within the card. You might need to adjust flex properties in the styles to ensure the layout works as expected.

6. Test the Component: Finally, test the component to ensure that the text truncation, expansion on click, and character limit work as expected, and that the layout adjusts accordingly without breaking the card's design.

These changes will allow the paragraph in your CollectiveCard component to have a smaller, regular-weight font, truncate after three lines, expand when clicked, and adhere to a character limit, all while ensuring the text remains within the boundaries of the card.

Estimate

Implementing the described changes in the React Native CollectiveCard component involves adjusting text styles, handling state for text expansion, and ensuring responsive layout within the component.

1. Update Description Style (1 hour):

   • Modifying the description style to adjust the font size, line height, color, and weight.
   • Setting properties like flexShrink, numberOfLines, and ellipsizeMode for text truncation.

2. Add State for Expanded Text (1 hour):

   • Introducing a new state variable (isDescriptionExpanded) to manage the expanded/collapsed state of the description.

3. Modify Description Text Component (1-2 hours):

   • Updating the Text component to dynamically change the numberOfLines property based on the expansion state.
   • Adding an onPress event to toggle the expansion state.

4. Ensure Text Stays Inside Card (1 hour):

   • Verifying and adjusting the cardDescription style for padding and margin to ensure text containment within the card.

5. Adjust Styles for Flexbox Layout (1-2 hours):

   • Ensuring the flexbox layout correctly accommodates the text expansion within the card.
   • Potentially adjusting flex properties to maintain a responsive and coherent layout.

6. Test the Component (2-3 hours):

   • Testing the component to confirm that the text truncation, expansion on click, and layout adjustments work as intended.
   • Ensuring that the card's design remains visually appealing and functional across different device sizes.

7. Review and Refinement (1 hour):

   • Addressing any feedback and making necessary refinements.

Adding these up, the total estimated time could be around 8-11 hours. This estimate assumes that the developer is proficient with React Native and has a good understanding of state management and responsive design principles.

[sirpy]

@benefacto I believe today you have the elipsses styling option instead of slice

[vldkhh]

@SanaJamm could you take a look here - https://good-collective-72ntzd8nf-gooddollarteam.vercel.app/ ?
for me its looks fine