React: Updating the UI elements
So I'm trying to mimic a UI in React. I have been able to implement most of it except the following points:
-
Blue background in Edit Component should cover the whole top. Currently it does not cover the borders. I'm assuming that due to padding this issue occurs, not sure how to fix it though.
-
Delete button should be aligned to the center as in the reference image. Currently it is palced slightly down.
-
I want to display a '+' symbol at left of Add Button. It is available under /resources/plus.svg but for some reason browser is not rendering it.
I have added and updated the styling as per your requirement, you can play further here and make thing work as your needed, please check.
please check the below reference https://stackblitz.com/edit/react-yxjldk?file=src%2FStackStyled.js