[Design QA] Stewards Page/Mobile - Padding & Margins

[SanaJamm]

• here’s a gap between the image and the top nav bar, please delete it.

• the title white background should only have rounded corners in the bottom part

• there’s a margin on the right side of the screen, please delete it.

• there’s a vertical padding in the bottom of the screen under See Your Impact button, delete it, should be set to 0.

Devs:

Design:

[benefacto]

Technical Implementation

To address the four layout concerns in your ViewCollective component, you'll need to adjust the relevant styles. Here's how to modify each point:

1. Remove Gap Between Image and Top Nav Bar: The gap is likely due to margin or padding around the image or its container. Set the margin to 0 to remove this space.

   image: {
    width: '100%',
    height: 192,
    marginTop: 0, // Remove top margin
    // Other styles...
   },

2. Rounded Corners Only at the Bottom of Title's White Background: To achieve rounded corners only at the bottom, set the borderRadius property only for the bottom corners.

   title: {
    ...InterSemiBold,
    fontSize: 20,
    color: Colors.black,
    borderRadius: 0,
    borderBottomLeftRadius: 10, // Rounded bottom-left corner
    borderBottomRightRadius: 10, // Rounded bottom-right corner
    // Other styles...
   },

3. Remove Right Margin of the Screen: Ensure that the main container of your component doesn't have any unnecessary right margin or padding.

   container: {
    width: '100%',
    padding: 24,
    paddingRight: 0, // Remove right padding
    // Other styles...
   },

4. Set Bottom Padding to 0 Under 'See Your Impact' Button: If the bottom padding is part of the container or a specific section that includes the button, set its bottom padding to 0.

   collectiveDonateBox: {
    gap: 24,
    paddingBottom: 0, // Set bottom padding to 0
    // Other styles...
   },

After making these adjustments, test your application on various screen sizes to ensure that the layout changes appear as expected. It's important to verify that these changes don't negatively affect the layout on other screens or resolutions.

Estimate

Addressing the four specific layout concerns in the ViewCollective component requires targeted CSS adjustments in the application's front end. This task focuses on modifying existing styles to refine the component's appearance.

1. Remove Gap Between Image and Top Nav Bar (1-2 hours):

   • Identifying the source of the gap (margin or padding) around the image or its container.
   • Setting the margin to 0 or adjusting padding to remove the space.

2. Rounded Corners Only at the Bottom of Title's White Background (1 hour):

   • Adjusting the borderRadius properties for the title to apply rounding only to the bottom corners.

3. Remove Right Margin of the Screen (1-2 hours):

   • Inspecting the main container's styles to identify and remove any unnecessary right margin or padding.

4. Set Bottom Padding to 0 Under 'See Your Impact' Button (1 hour):

   • Adjusting the bottom padding of the collectiveDonateBox or the relevant container that includes the button.

5. Testing and Validation (2-3 hours):

   • Testing the application on various screen sizes to ensure that the layout changes appear correctly and do not negatively impact other elements or screen resolutions.
   • Verifying the overall aesthetic and functionality of the ViewCollective component 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-10 hours. This estimate assumes that the developer is proficient with CSS and responsive design and that there are no significant unforeseen complexities in adjusting the layout.