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