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

Updated ui

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-30 17:12:37 +08:00
parent dfec2f7f36
commit 7af0425b0c
2 changed files with 24 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/Row/Row.tsx
View file

@ -5,13 +5,14 @@ interface Props {
children: JSXElement
content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
gap?: number
padding?: string
}
export default (props: Props) => {
return (
<>
<Show when={props.gap}>
<section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
<section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap || 0}rem; padding: ${props.padding || 0}`}>
{props.children}
</section>
</Show>

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

@ -1,5 +1,5 @@
import './Main.sass'
import { Logo, Link, Page, Row, Padding, ModalButton, Box, Column } from '../../components/'
import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button } from '../../components/'
import { FiLogOut } from 'solid-icons/fi'
import { Tabs } from '@kobalte/core/tabs'
import { ofetch } from 'ofetch'
@ -7,6 +7,7 @@ import { onMount, createSignal } from 'solid-js'
import dayjs from 'dayjs'
const API = import.meta.env.VITE_BACKEND
const PESO = import.meta.env.VITE_PESO
export default () => {
const [updatedList, setUpdatedList] = createSignal<string[]>([])
@ -156,24 +157,30 @@ export default () => {
<td>111</td>
<td>11</td>
<td>
<ModalButton class="modal" label="Show Details" design="bo-link" background="#111d29e1" color="#ffffffec">
<ModalButton class="modal" label="Show Details" design="bo-link" background="#121e2acc" color="#ffffffec">
<Padding top={0} left={2} right={2} bottom={0}>
<Column>
<Box curved thickness={1} padding={1}>
<span class="modal__application-number">25-0000000123</span>
</Box>
<Box curved thickness={1} padding={1}>
<span class="modal__application-number">25-0000000123</span>
</Box>
<Row>
<span class="modal__name">Sample Name</span>
</Row>
<section class="modal__row">
<span class="modal__row__label">Assessed By:</span>
<span class="modal__row__detail">{assessor()}</span>
</section>
<section class="modal__row">
<span class="modal__row__label">Assessed By:</span>
<span class="modal__row__detail">{assessor()}</span>
</section>
<section class="modal__row">
<span class="modal__row__label">Total Fee:</span>
<span class="modal__row__detail">
{PESO} {totalOp().toFixed(2)}
</span>
</section>
<section class="modal__row">
<span class="modal__row__label">Total Fee:</span>
<span class="modal__row__detail">P {totalOp().toFixed(2)}</span>
</section>
</Column>
<Row gap={1} padding="1rem 0 0 0">
<Button label="Disapprove" edges="curved" design="bo-danger"></Button>
<Button label="Approve" edges="curved" design="bo-primary"></Button>
</Row>
</Padding>
</ModalButton>
</td>