From 7af0425b0c1cd278a2587bf4615473cb89ae05b8 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 30 Sep 2025 17:12:37 +0800
Subject: [PATCH] Updated ui

---
 src/components/Row/Row.tsx  |  3 ++-
 src/pages/MainPage/Main.tsx | 37 ++++++++++++++++++++++---------------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx
index 5255e9c..cf33ba4 100644
--- a/src/components/Row/Row.tsx
+++ b/src/components/Row/Row.tsx
@@ -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>
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index 3543735..5e90131 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -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>