From caeba8e9f76f7c3645e5b0c6d2cb5e78f73ecb33 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Sat, 28 Mar 2026 15:52:33 +0800
Subject: [PATCH] Updated login page

---
 src/pages/LoginPage/Login.sass | 31 ++++++++++++++++-
 src/pages/LoginPage/Login.tsx  | 63 ++++++++++++++++++++++++++--------
 2 files changed, 79 insertions(+), 15 deletions(-)

diff --git a/src/pages/LoginPage/Login.sass b/src/pages/LoginPage/Login.sass
index f0c0a34..baa895a 100644
--- a/src/pages/LoginPage/Login.sass
+++ b/src/pages/LoginPage/Login.sass
@@ -26,11 +26,40 @@
 
   &__title
     font-weight: bold
-    padding: 0 0 0.25rem 0
+    font-size: 1.25rem
+    padding: 0 0 0.5rem 0
 
   &__info
     padding: 0 0 0.15rem 0
 
+  &__subinfo
+    padding: 0 0 0.15rem 4.45rem
+    font-size: 0.75rem
+
+    &__last
+      @extend .modal-tooltip__subinfo
+      padding: 0 0 .55rem 4.45rem
+
+  &__category
+    padding: 0.15rem 0.55rem
+    border-radius: 0.5rem
+    background-color: #000000
+    font-size: 0.65rem
+    width: 3.25rem
+    text-align: center
+
+    &__red
+      @extend .modal-tooltip__category
+      background-color: #731313
+
+    &__green
+      @extend .modal-tooltip__category
+      background-color: #13731b
+
+    &__yellow
+      @extend .modal-tooltip__category
+      background-color: #6b7313
+
   &__note
     font-weight: bold
     font-size: 0.75rem
diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
index 64626f7..367976e 100644
--- a/src/pages/LoginPage/Login.tsx
+++ b/src/pages/LoginPage/Login.tsx
@@ -239,7 +239,7 @@ export default () => {
         </Modal>
       </div>
 
-      <div onClick={() => setOpenTooltip(false)}>
+      {/*<div onClick={() => setOpenTooltip(false)}>
         <Modal trigger={openTooltip()} background="#252525ff" color="#dfe7fbf0" opacity={0.8} width="52rem">
           <Padding top={1} bottom={1} left={1.5} right={1.5}>
             <section class="modal-tooltip">
@@ -270,31 +270,66 @@ export default () => {
             </section>
           </Padding>
         </Modal>
-      </div>
+      </div>*/}
 
       <div onClick={() => setOpenChanges(false)}>
-        <Modal trigger={openChanges()} background="#252525ff" color="#dfe7fbf0" opacity={0.8} width="52rem">
+        <Modal trigger={openChanges()} background="#252525ff" color="#dfe7fbf0" opacity={0.8} width="35rem">
           <Padding top={1} bottom={1} left={1.5} right={1.5}>
             <section class="modal-tooltip">
               <div class="modal-tooltip__group">
                 <span class="modal-tooltip__title">Login</span>
-                <span class="modal-tooltip__info">Removed version change.</span>
-                <span class="modal-tooltip__info">It is recommended that you update your password after logging in. Open the 'Config' menu in the upper right.</span>
+                <Row content="left" gap={0.5}>
+                  <span class="modal-tooltip__category__red">Removed</span>
+                  <span class="modal-tooltip__info">Removed version selection of encryption.</span>
+                </Row>
+
+                <span class="modal-tooltip__subinfo">* All active users are using version 2.</span>
+              </div>
+              
+              <div class="modal-tooltip__group">
+                <span class="modal-tooltip__title">Both Printing and Approval</span>
+                <Row content="left" gap={0.5}>
+                  <span class="modal-tooltip__category__yellow">Info</span>
+                  <span class="modal-tooltip__info">Loading</span>
+                </Row>
+                <span class="modal-tooltip__subinfo">* Clicking too fast lead to .</span>
+                <span class="modal-tooltip__subinfo__last">* Use this if the original order of payment is lost.</span>
               </div>
 
               <div class="modal-tooltip__group">
-                <span class="modal-tooltip__title">Enc v2 (Encryption Version 2)</span>
-                <span class="modal-tooltip__info">The new default password encryption.</span>
-                <span class="modal-tooltip__info">Use this mode if you've recently registered or changed your password.</span>
+                <span class="modal-tooltip__title">Printing</span>
+                <Row content="left" gap={0.5}>
+                  <span class="modal-tooltip__category__yellow">Info</span>
+                  <span class="modal-tooltip__info">Reprint (No Change)</span>
+                </Row>
+                <span class="modal-tooltip__subinfo">* Reprints a duplicate of the order of payment without any changes to its data.</span>
+                <span class="modal-tooltip__subinfo__last">* Use this if the original order of payment is lost.</span>
+
+                <Row content="left" gap={0.5}>
+                  <span class="modal-tooltip__category__green">New</span>
+                  <span class="modal-tooltip__info">Void (Back to Approval)</span>
+                </Row>
+                <span class="modal-tooltip__subinfo">* Returns the application back to approval.</span>
+                <span class="modal-tooltip__subinfo">* Deletes the existing order of payment to make room for the newly generated one.</span>
+                <span class="modal-tooltip__subinfo">* All applications listed are unpaid and safe to remove.</span>
+                <span class="modal-tooltip__subinfo">* Use this if duplicate values occur or there is any mistake in its data.</span>
               </div>
 
               <div class="modal-tooltip__group">
-                <span class="modal-tooltip__note">Note:</span>
-                <span class="modal-tooltip__note-info">To ensure security and privacy, avoid sharing your password.</span>
-                <span class="modal-tooltip__note-info">Your password's encryption is irreversible, which means it cannot be decrypted.</span>
-                <span class="modal-tooltip__note-info">Only encrypted passwords are saved in the database.</span>
-                <span class="modal-tooltip__note-info">Only you know your password. If forgotten, the account will be locked.</span>
-                <span class="modal-tooltip__note-info">If this happens, contact the IT department and request that your account be reset. You will be required to register again.</span>
+                <span class="modal-tooltip__title">Approval</span>
+                <Row content="left" gap={0.5}>
+                  <span class="modal-tooltip__category__yellow">Info</span>
+                  <span class="modal-tooltip__info">Data Lock</span>
+                </Row>
+                <span class="modal-tooltip__subinfo">* To avoid .</span>
+                <span class="modal-tooltip__subinfo">* Use this if the original order of payment is lost.</span>
+                
+                <Row content="left" gap={0.5}>
+                  <span class="modal-tooltip__category__green">New</span>
+                  <span class="modal-tooltip__info">Data Lock</span>
+                </Row>
+                <span class="modal-tooltip__subinfo">* To avoid .</span>
+                <span class="modal-tooltip__subinfo">* Use this if the original order of payment is lost.</span>
               </div>
 
               <Row>