[Design QA] Donation page/Desktop - CTA Button Size

[SanaJamm]

Set Confirm button to 343px wide and not fill whole screen.

Devs:

Design:

[benefacto]

Technical Implementation

To set the width of the "Confirm" button to 343px and prevent it from filling the whole screen in your DonateComponent, you need to adjust the styles applied to the RoundedButton component. This can be done by updating the RoundedButton styling in your styles object.

Here is how you can do it:

1. Define a New Style for the Button: Create a new style in your StyleSheet that sets the width of the button to 343px.

   const styles = StyleSheet.create({
    // ... other styles ...
    confirmButton: {
      width: 343, // Set the width to 343px
      alignSelf: 'center', // Center the button
      // Add any other styling as needed
    },
    // ... other styles ...
   });

2. Apply the Style to the RoundedButton: Use the new style when rendering the RoundedButton. Since RoundedButton might be a custom component, ensure it accepts and applies the passed style correctly.

   <RoundedButton
    title="Confirm"
    // ... other props ...
    style={styles.confirmButton} // Apply the new style
   />

3. Responsive Design Consideration: If the button should have a different width on different screen sizes (like mobile vs desktop), you can use useMediaQuery to conditionally apply styles.

   const [isDesktopResolution] = useMediaQuery({
    minWidth: 612,
   });
   
   // In the render section
   <RoundedButton
    title="Confirm"
    // ... other props ...
    style={isDesktopResolution ? styles.confirmButtonDesktop : styles.confirmButton}
   />

   Define styles.confirmButtonDesktop in your StyleSheet for the desktop view if needed.

4. Test on Various Devices: After applying these changes, test the button on different devices and screen sizes to ensure that the button appears correctly and is consistently 343px wide.

By following these steps, you should be able to set the width of the "Confirm" button to 343px and align it properly within your DonateComponent. Remember to check if other elements or styles might be affecting the button's layout and adjust them as necessary.

Estimate

Estimating the time required for adjusting the width of a "Confirm" button in the DonateComponent to a fixed width of 343px involves primarily front-end development tasks. This task is relatively straightforward, focusing on CSS and responsive design. Here's a breakdown for a mid-level developer:

1. Understanding the Requirement (1-2 hours): Reviewing the existing DonateComponent and RoundedButton component to understand the current styling and structure.

2. Defining and Applying New Style (1-3 hours):

   • Creating a new style in the StyleSheet to set the button's width to 343px.
   • Ensuring that the RoundedButton component accepts and applies the new style correctly.

3. Responsive Design Implementation (1-2 hours):

   • Using useMediaQuery or a similar approach for responsive design to conditionally apply different styles based on screen size.
   • Defining additional styles for different screen sizes if necessary.

4. Testing Across Devices and Screen Sizes (2-3 hours):

   • Testing the button on various devices and screen sizes to ensure the width is consistently 343px and the button is properly aligned.
   • Checking for any unexpected behavior or layout issues due to the new styling.

5. Adjusting Other Elements if Necessary (1-2 hours):

   • Reviewing and adjusting other elements or styles in the DonateComponent that might be affected by the change in the button's width.

6. Review and Refinement (1-2 hours):

   • Addressing any feedback, and making necessary refinements.

Adding these up, the total estimated time could be around 7-14 hours. This estimate assumes that the developer is familiar with the existing codebase and proficient in CSS and responsive design. It also includes time for testing and potential adjustments to ensure the button's new width does not adversely affect the layout or functionality of the DonateComponent.

[krisbitney]

@SanaJamm I notice that the "Review your donation" box and the text below it are not in the desktop design, but they are currently present in the app. Which is correct?

[SanaJamm]

@krisbitney the mobile one is the correct one