[Design QA] View Collective Page - icon alignment / Mobile + Desktop

[SanaJamm]

icons and text should have center alignment

Devs:

Design:

[benefacto]

Technical Implementation

To align icons and text to the center in the ViewCollective component, you need to adjust the styles of the elements containing the icons and text. Here's a step-by-step guide on how to modify the code:

1. Update Icon and Text Container Styles: For every container that holds an icon and a text, ensure that its style promotes center alignment. This can be achieved with alignItems: 'center' and justifyContent: 'center' properties for a flex container.

   Update the styles for collectiveDetailsMobile, icons, and any other relevant container:

   collectiveDetailsMobile: {
    flexDirection: 'row',
    alignItems: 'center', // Center items vertically in the row
    justifyContent: 'center', // Center items horizontally
    gap: 8,
   },
   
   icons: {
    marginTop: 5,
    flexDirection: 'row',
    alignSelf: 'center',
    alignItems: 'center', // Add this for vertical alignment
    justifyContent: 'space-between', // If you want even spacing between icons
    gap: 24,
   },

2. Text Alignment: For text elements, ensure that the textAlign property is set to 'center' if you want the text itself to be centered within its container.

   title: {
    ...InterSemiBold,
    fontSize: 20,
    color: Colors.black,
    textAlign: 'center', // Center align text
   },
   
   informationLabel: {
    ...InterSemiBold,
    fontSize: 14,
    color: Colors.black,
    marginBottom: 16,
    textAlign: 'center', // Center align text
   },

3. Check RowItem Component: If the RowItem component is used for rendering items with icons and text, ensure it also supports center alignment. You might need to update the styles within the RowItem component as well.

4. Ensure Consistency Across Resolutions: Since you have different styles for desktop and mobile (collectiveDesktopData, collectiveDetailsMobile), make sure the alignment is consistent across both.

5. Test the Changes: After making these changes, test your application on different devices or screen sizes to ensure that the icons and text are properly aligned and the layout appears as expected.

By following these steps, you'll be able to ensure that icons and text in the ViewCollective component are centered according to the design requirements. Remember to check all related components and styles to maintain consistency throughout the application.

Estimate

Centering icons and text in the ViewCollective component involves modifying CSS properties to ensure proper alignment within the component's layout. This task focuses on adjusting styles for both mobile and desktop resolutions.

1. Update Icon and Text Container Styles (1-2 hours):

   • Updating the styles of containers like collectiveDetailsMobile and icons to include alignItems: 'center' and justifyContent: 'center'.
   • Ensuring these properties correctly align items both vertically and horizontally.

2. Text Alignment Adjustments (1 hour):

   • Setting the textAlign property to 'center' for text elements to ensure they are centered within their containers.

3. Check and Update RowItem Component (1-2 hours):

   • Inspecting the RowItem component, if used, to make sure it supports center alignment.
   • Adjusting the styles within the RowItem component as needed for consistent alignment.

4. Ensuring Consistency Across Resolutions (1-2 hours):

   • Checking and adjusting styles for different resolutions (collectiveDesktopData, collectiveDetailsMobile) to ensure consistent alignment across devices.

5. Testing the Changes (2-3 hours):

   • Testing the application on various devices and screen sizes to confirm that the icons and text are correctly aligned.
   • Verifying the overall appearance and layout consistency post-adjustments.

6. Review and Refinement (1 hour):

   • Addressing any feedback and making necessary refinements.

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

[vldkhh]

verified on web and mobile