[Design QA] View collective page-recent transactions section / mobile+desktop

[SanaJamm]

align icon and title to center

Devs:

[benefacto]

Technical Implementation

To center-align the icon and the title in your TransactionList component, you need to adjust the styling of the row view that contains these elements. Here's how you can modify the code:

1. Update Row Style for Center Alignment: Change the row style to use alignItems: 'center' for vertical alignment and justifyContent: 'center' for horizontal alignment. Also, remove the fixed width to allow the row to take the full width of its parent.

   row: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center', // Center items vertically
    justifyContent: 'center', // Center items horizontally
    marginVertical: 8,
    backgroundColor: Colors.white,
   },

2. Adjust Row Text Style: The rowText style currently has a marginLeft: 16. This might need to be adjusted or removed to ensure the text aligns correctly with the icon.

   rowText: {
    fontSize: 16,
    ...InterSemiBold,
    color: Colors.black,
    textAlign: 'center', // Center the text
   },

3. Icon Style: If the icon's style (firstIcon) has any margins that affect its alignment, adjust or remove them.

4. Test on Different Screen Sizes: After making these changes, test your component on various screen sizes to ensure that the alignment appears correctly on both mobile and desktop resolutions.

5. Check Flex Layout: Ensure that the flex layout behaves as expected in different resolutions. Sometimes, flex properties might need adjustment for different screen sizes.

6. Remove Unnecessary Width Restrictions: If there are any width restrictions on the row or its children that prevent proper centering, adjust or remove them.

By following these steps, the icon and the title in your TransactionList component should be centered horizontally and vertically within their row. Remember to test the layout after making these changes to ensure the desired alignment is achieved across different devices and screen orientations.

Estimate

Estimating the time for center-aligning the icon and title in the TransactionList component involves front-end development tasks, primarily focusing on CSS and layout adjustments. This task is relatively straightforward and mainly involves tweaking existing styles to achieve the desired alignment.

1. Understanding the Current Layout (1 hour): Reviewing the existing TransactionList component and its row style to understand the current alignment and structure.

2. Updating Row Style for Center Alignment (1-2 hours):

   • Modifying the row style to use alignItems: 'center' and justifyContent: 'center'.
   • Removing any fixed width or unnecessary constraints that prevent full-width utilization.

3. Adjusting Row Text Style (1 hour):

   • Updating the rowText style, potentially adjusting or removing the marginLeft to ensure correct alignment with the icon.

4. Icon Style Adjustment (1 hour):

   • Checking and adjusting the icon's style (firstIcon) to ensure it aligns correctly without unnecessary margins.

5. Testing Across Different Screen Sizes (1-2 hours):

   • Testing the adjusted layout on various screen sizes to ensure the icon and title are properly centered both horizontally and vertically.
   • Ensuring that the layout does not break or appear misaligned on different devices.

6. Flex Layout Consideration (1 hour):

   • Verifying that the flex layout behaves as expected across different resolutions and making any necessary adjustments.

7. Review and Refinement (1 hour):

   • Addressing any feedback and making necessary refinements.

Adding these up, the total estimated time could be around 6-8 hours. This estimate assumes that the developer is familiar with the existing codebase and proficient in CSS and layout adjustments. It also includes time for testing and potential adjustments to ensure a seamless and visually appealing alignment of the icon and title in the TransactionList component.

[vldkhh]

verified on web and mobile