Closed SanaJamm closed 8 months ago
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:
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...
},
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...
},
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...
},
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.
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.
Remove Gap Between Image and Top Nav Bar (1-2 hours):
image
or its container.Rounded Corners Only at the Bottom of Title's White Background (1 hour):
borderRadius
properties for the title
to apply rounding only to the bottom corners.Remove Right Margin of the Screen (1-2 hours):
Set Bottom Padding to 0 Under 'See Your Impact' Button (1 hour):
collectiveDonateBox
or the relevant container that includes the button.Testing and Validation (2-3 hours):
ViewCollective
component post-adjustments.Review and Refinement (1 hour):
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.
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: