From 26cf7a74a2cb83bd779bc70e0b80f3f26461a6bf Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Fri, 26 Sep 2025 13:36:12 +0800
Subject: [PATCH] Added modal opacity

---
 src/components/Modal/Modal.tsx      | 5 +++--
 src/pages/RegisterPage/Register.tsx | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 02a9904..7b7f28a 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -8,6 +8,7 @@ interface Props {
   color?: string
   border?: string
   trigger: boolean
+  opacity?: number
 }
 
 export default (props: Props) => {
@@ -34,13 +35,13 @@ export default (props: Props) => {
       <Show when={props.trigger}>
         <div class="modal" ref={dialogRef} onClick={closeHandler}>
           <Show when={props.border}>
-            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}>
               {props.children}
             </div>
           </Show>
 
           <Show when={!props.border}>
-            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
               {props.children}
             </div>
           </Show>
diff --git a/src/pages/RegisterPage/Register.tsx b/src/pages/RegisterPage/Register.tsx
index b29eb5b..8a88bb2 100644
--- a/src/pages/RegisterPage/Register.tsx
+++ b/src/pages/RegisterPage/Register.tsx
@@ -229,7 +229,7 @@ export default () => {
         </Padding>
       </Page>
 
-      <Modal trigger={saved()} background="#d5e3f2f3" color="#181818e4">
+      <Modal trigger={saved()} background="#ffffffff" color="#000000e4" opacity={0.4}>
         <Padding top={1} bottom={1} left={4} right={4}>
           <Column>
             <Row>