Closed SanaJamm closed 8 months ago
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:
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 ...
});
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
/>
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.
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.
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:
Understanding the Requirement (1-2 hours): Reviewing the existing DonateComponent
and RoundedButton
component to understand the current styling and structure.
Defining and Applying New Style (1-3 hours):
StyleSheet
to set the button's width to 343px.RoundedButton
component accepts and applies the new style correctly.Responsive Design Implementation (1-2 hours):
useMediaQuery
or a similar approach for responsive design to conditionally apply different styles based on screen size.Testing Across Devices and Screen Sizes (2-3 hours):
Adjusting Other Elements if Necessary (1-2 hours):
DonateComponent
that might be affected by the change in the button's width.Review and Refinement (1-2 hours):
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
.
@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?
@krisbitney the mobile one is the correct one
Set Confirm button to 343px wide and not fill whole screen.
Devs:
Design: