[Design QA] Page padding/Mobile

[SanaJamm]

All pages padding should be set to 16px (from right and left) right now some pages, or at least part of the page is set to 24px.. it’s a waste of space.

Devs:

Design:

[benefacto]

Technical Implementation

To standardize the padding across all pages to 16px (from right and left) in your React Native code, you'll need to adjust the styles applied to the main containers of your pages. Here's how you can modify the WalletProfile component and apply a similar approach to other components as needed:

1. Update the Main Container Style: Adjust the container style in your stylesheet to ensure it has 16px padding on the right and left. This seems to be already done in your code, but it's important to ensure consistency across all components.

   container: {
    width: '100%',
    padding: 16, // Set padding to 16px
    backgroundColor: Colors.white,
   },

2. Review Other Styles: Check other style properties in your stylesheet to ensure no other elements are overriding this padding with a different value (like 24px). Specifically, look for any padding or margin properties in the stylesheet and update them accordingly.

3. Apply Changes to Other Components: Since you want this change to be reflected across all pages, you'll need to ensure that similar adjustments are made to the main container styles of other components/pages in your application.

4. Verify Nested Components: If there are nested components within each page, ensure that their styles don't inadvertently increase the overall padding or margin beyond the desired 16px.

5. Test on Different Devices: After making these changes, it's crucial to test your application on different devices (or screen sizes) to ensure that the UI looks consistent and the 16px padding is maintained across all pages.

6. Ensure Responsiveness: Since you're working with both desktop and mobile layouts, make sure that the responsiveness of your application is not affected by these changes.

By following these steps, you'll be able to set a consistent padding of 16px from right and left across all pages in your application, ensuring a uniform look and feel. Remember, the key here is consistency and thorough testing across different components and screen sizes.

Estimate

Standardizing padding across all pages to 16px (from right and left) in a React Native application involves updating styles in various components to maintain consistency throughout the app. This task is primarily focused on CSS and ensuring uniformity across different components and screen sizes.

1. Update Main Container Style (1-2 hours):

   • Adjusting the container style in various components to set a uniform padding of 16px.
   • Ensuring that this style is consistently applied across all main containers.

2. Review Other Styles (2-3 hours):

   • Reviewing other style properties in the stylesheets to identify and modify any elements that might override the standard padding.
   • Paying particular attention to padding and margin properties that could affect the overall layout.

3. Apply Changes to Other Components (3-4 hours):

   • Applying similar style adjustments to the main container styles of other components/pages in the application.
   • Ensuring uniformity of these styles across all pages for consistency.

4. Verify Nested Components (2-3 hours):

   • Checking nested components within each page to ensure their styles do not inadvertently increase the padding or margin beyond the desired 16px.
   • Making necessary adjustments to maintain the standard padding while keeping the layout intact.

5. Test on Different Devices (2-3 hours):

   • Testing the application on a variety of devices or screen sizes to confirm that the UI looks consistent and the 16px padding is maintained across all pages.
   • Ensuring that the changes do not adversely affect the appearance or usability on any device.

6. Ensure Responsiveness (2 hours):

   • Making sure that the responsiveness of the application is not negatively impacted by these padding adjustments.
   • Testing and tweaking responsive layouts as necessary to maintain a cohesive look across different screen sizes.

7. Review and Refinement (1 hour):

   • Addressing any feedback and making necessary refinements.

Adding these up, the total estimated time could be around 13-18 hours. This estimate assumes that the developer has a good understanding of the React Native framework and the application’s layout.