Document Upload Section with Tick Marks Chatgpt Prompting
Mon May 22 2023 06:08:51 GMT+0000 (Coordinated Universal Time)
Saved by @JISSMONJOSE
"""
<div className="top">
<div className="left-container">
<div className="file-upload-icon">
<img src={FileUploadIcon} alt="File Uploader Icon" />
</div>
<div className="document-title">Testator Passport</div>
</div>
<div className="tick-icon">
<img src={TickMarkIconGreen} alt="Tick Mark" />
</div>
</div>
<div className="middle">
<div className="left-container">
<div className="file-upload-icon">
<img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
</div>
<div className="document-title text-black">Additional Document</div>
</div>
<div className="tick-icon">
<img src={TickMarkIconGreen} alt="Tick Mark" />
</div>
</div>
<div className="bottom">
<div className="left-container">
<div className="file-upload-icon">
<img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
</div>
<div className="document-title text-black">Executor Passport</div>
</div>
<div className="tick-icon">
<img src={TickMarkIconGreen} alt="Tick Mark" />
</div>
<div />
</div>
"""
"""
.container {
display: flex;
flex-direction: column;
gap: 2px;
}
.top, .middle, .bottom {
display: flex;
justify-content: space-between;
background-color: #f4f4f4;
border-radius: 5px 0px 0px 5px;
}
.top {
display: flex;
align-items: center;
background-color: #023979;
}
.container div {
padding: 5px;
text-align: center;
cursor: pointer;
}
.document-title {
font-family: 'Basis Grotesque Arabic Pro';
font-style: normal;
font-weight: 700;
font-size: 0.875rem;
line-height: 14px;
color: #FFFFFF;
}
.left-container {
display: flex;
align-items: center;
margin-right: 12px;
}
.file-upload-icon,
.document-title {
margin-right: 12px;
}
.tick-icon {
margin-left: auto;
}
"""
You are experienced css expert.
I want to resolve one design issue in my code.
Here tick-icon div element of top and middle elements are aligned properly with same margin around it.
tick-icon div of top element matches with middle element. They share same margin right spacing.
butBtick-icon div element of bottom div element is not aligned when compared with top and middle element.
I Found it takes more margin / spacing on its right side compared with top and middle div element.
Help me to fix this issue with tick-icon element of bottom div element. Finally all tick-icon elements should share same margin/spacing.
Suggest me to make changes in styling and return upated version of code.



Comments