PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated design of modal

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-10-03 11:52:50 +08:00
parent 105e7ea195
commit 74d8ad747e
2 changed files with 48 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/pages/MainPage/Main.sass
View file

@ -84,6 +84,7 @@ h1
width: 90% width: 90%
border-collapse: collapse border-collapse: collapse
margin: 2rem margin: 2rem
box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
th, td th, td
// border: 1px solid vars.$tableBorderColor // border: 1px solid vars.$tableBorderColor
@ -120,13 +121,17 @@ h1
font-weight: 500 font-weight: 500
&__application-number &__application-number
padding: 1rem
// border: 1px solid #5882abdb
border-radius: 8px
font-size: 1.75rem font-size: 1.75rem
font-weight: 700 font-weight: 700
display: flex display: flex
flex-direction: column flex-direction: column
flex-wrap: wrap flex-wrap: wrap
align-items: center align-items: center
background: #16212C
box-shadow: 8px 8px 28px #0d141b, -8px -8px 28px #1f2e3d
&__name &__name
padding: 1rem 0 0 0 padding: 1rem 0 0 0
font-size: 1rem font-size: 1rem
@ -138,7 +143,11 @@ h1
justify-content: flex-start justify-content: flex-start
align-items: flex-start align-items: flex-start
gap: 0.5rem gap: 0.5rem
padding: 2rem 0 0 0 padding: 1.25rem 1rem
// box-shadow: 5px 5px 10px #10171f, -5px -5px 10px #1c2b39
// border: 1px solid white
// border-radius: 8px
// margin: 0.5rem
&__label &__label
font-size: 0.75rem font-size: 0.75rem
@ -149,3 +158,8 @@ h1
&__price &__price
font-size: 1.75rem font-size: 1.75rem
font-weight: 700 font-weight: 700
&__cancel
font-size: 0.75rem
padding: 0.5rem 0 0 0
font-weight: 400

64
src/pages/MainPage/Main.tsx
View file

@ -251,44 +251,44 @@ export default () => {
}} }}
> >
<Padding top={0} left={2} right={2} bottom={0}> <Padding top={0} left={2} right={2} bottom={0}>
<Box curved thickness={1} padding="1rem"> <span class="modal__application-number">{item}</span>
<span class="modal__application-number">{item}</span> <Padding top={1} left={0} right={0} bottom={0}>
</Box> <section class="modal__row">
<section class="modal__row"> <span class="modal__row__label">Name of Applicant:</span>
<span class="modal__row__label">Name of Applicant:</span> <span class="modal__row__detail">{nameList()[index]}</span>
<span class="modal__row__detail">{nameList()[index]}</span> </section>
</section>
<section class="modal__row"> <section class="modal__row">
<span class="modal__row__label">Location:</span> <span class="modal__row__label">Location:</span>
<span class="modal__row__detail">{location()}</span> <span class="modal__row__detail">{location()}</span>
</section> </section>
<section class="modal__row"> <section class="modal__row">
<span class="modal__row__label">Type:</span> <span class="modal__row__label">Type:</span>
<span class="modal__row__detail">{type().toUpperCase()}</span> <span class="modal__row__detail">{type().toUpperCase()}</span>
</section> </section>
<section class="modal__row"> <section class="modal__row">
<span class="modal__row__label">Assessed By:</span> <span class="modal__row__label">Assessed By:</span>
<span class="modal__row__detail">{assessor()}</span> <span class="modal__row__detail">{assessor()}</span>
</section> </section>
<section class="modal__row"> <section class="modal__row">
<span class="modal__row__label">Date Assessed:</span> <span class="modal__row__label">Date Assessed:</span>
<span class="modal__row__detail">{dateOp().toUpperCase()}</span> <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
</section> </section>
<section class="modal__row"> <section class="modal__row">
<span class="modal__row__label">Total Fee:</span> <span class="modal__row__label">Total Fee:</span>
<span class="modal__row__detail__price"> <span class="modal__row__detail__price">
{PESO} {totalOp().toFixed(2)} {PESO} {totalOp().toFixed(2)}
</span> </span>
</section> </section>
</Padding>
<Row gap={12} padding="2rem 0 0 0"> <Row padding="2rem 0 0 0">
<Button label="Cancel" edges="curved" design="bo-danger"></Button> <Button wide label="Approve" edges="curved" design="bo-primary" onClick={approveHandler}></Button>
<Button label="Approve" edges="curved" design="bo-primary" onClick={approveHandler}></Button> <span class="modal__cancel">To cancel click anywhere</span>
</Row> </Row>
</Padding> </Padding>
</ModalButton> </ModalButton>