From f4e98fd8138e9e18152310f1139c2a91473fb703 Mon Sep 17 00:00:00 2001
From: Sukma Gladys <sukmagladysv@gmail.com>
Date: Wed, 4 Sep 2024 16:12:22 +0700
Subject: [PATCH 1/5] fix: text color

---
 apps/frontend/src/routes/forgot-password/index.lazy.tsx  | 2 +-
 apps/frontend/src/routes/forgot-password/verify.lazy.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/routes/forgot-password/index.lazy.tsx b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
index 8f0a73e..2844bac 100644
--- a/apps/frontend/src/routes/forgot-password/index.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
@@ -185,7 +185,7 @@ export function ForgotPasswordForm() {
             >
               Forgot Password
             </h1>
-            <p className="text-sm">
+            <p className="text-sm text-muted-foreground">
               No worries, we'll send you reset instructions
             </p>
           </div>
diff --git a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
index 23d5b94..7180c97 100644
--- a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
@@ -221,7 +221,7 @@ export function ResetPasswordForm() {
             >
               Change Password
             </h1>
-            <p className="text-sm">Enter your new password</p>
+            <p className="text-sm text-muted-foreground">Enter your new password</p>
           </div>
           <Form {...form}>
             <form

From cca21096dd83a8437c349442f9ef91cc2ab1b115 Mon Sep 17 00:00:00 2001
From: Sukma Gladys <sukmagladysv@gmail.com>
Date: Wed, 4 Sep 2024 18:05:35 +0700
Subject: [PATCH 2/5] fix: background div className

---
 apps/frontend/src/routes/forgot-password/index.lazy.tsx  | 2 +-
 apps/frontend/src/routes/forgot-password/verify.lazy.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/routes/forgot-password/index.lazy.tsx b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
index 2844bac..6a3e361 100644
--- a/apps/frontend/src/routes/forgot-password/index.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
@@ -160,7 +160,7 @@ export function ForgotPasswordForm() {
   return (
     <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
       <div
-        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 lg:overflow-hidden"
+        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 overflow-hidden"
       >
         <div className="flex absolute border border-slate-300 rounded-2xl w-[455px] h-[455px] lg:w-[650px] lg:h-[650px] items-center justify-center -rotate-[15deg]">
           <div className="flex absolute border border-slate-400  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
diff --git a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
index 7180c97..44e9bdb 100644
--- a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
@@ -196,7 +196,7 @@ export function ResetPasswordForm() {
   return (
     <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
       <div
-        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 lg:overflow-hidden"
+        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 overflow-hidden"
       >
         <div className="flex absolute border border-slate-200 rounded-2xl w-[455px] h-[455px] lg:w-[650px] lg:h-[650px] items-center justify-center -rotate-[15deg]">
           <div className="flex absolute border border-slate-300  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">

From e73c99c0a5263361e7d2c45f1bdea207f017ad41 Mon Sep 17 00:00:00 2001
From: Sukma Gladys <sukmagladysv@gmail.com>
Date: Thu, 5 Sep 2024 09:38:11 +0700
Subject: [PATCH 3/5] fix: back to login page link

---
 apps/frontend/src/routes/forgot-password/index.lazy.tsx  | 2 +-
 apps/frontend/src/routes/forgot-password/verify.lazy.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/routes/forgot-password/index.lazy.tsx b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
index 6a3e361..58608f1 100644
--- a/apps/frontend/src/routes/forgot-password/index.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
@@ -219,7 +219,7 @@ export function ForgotPasswordForm() {
                 </Button>
                 <a
                   href="/login"
-                  className="text-xs text-blue-500 hover:underline font-bold"
+                  className="text-xs text-blue-500 hover:underline font-bold w-fit"
                 >
                   Back to login
                 </a>
diff --git a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
index 44e9bdb..5294140 100644
--- a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
@@ -261,7 +261,7 @@ export function ResetPasswordForm() {
                 </Button>
                 <a
                   href="/login"
-                  className="text-xs text-blue-500 hover:underline font-bold"
+                  className="text-xs text-blue-500 hover:underline font-bold w-fit"
                 >
                   Back to login
                 </a>

From 041781c5b3074233c43d7f2cfb54321e163a4769 Mon Sep 17 00:00:00 2001
From: Sukma Gladys <sukmagladysv@gmail.com>
Date: Thu, 5 Sep 2024 15:56:12 +0700
Subject: [PATCH 4/5] fix: form and bg position

---
 apps/frontend/src/routes/forgot-password/index.lazy.tsx  | 4 ++--
 apps/frontend/src/routes/forgot-password/verify.lazy.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/routes/forgot-password/index.lazy.tsx b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
index 58608f1..bc29d01 100644
--- a/apps/frontend/src/routes/forgot-password/index.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
@@ -162,7 +162,7 @@ export function ForgotPasswordForm() {
       <div
         className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 overflow-hidden"
       >
-        <div className="flex absolute border border-slate-300 rounded-2xl w-[455px] h-[455px] lg:w-[650px] lg:h-[650px] items-center justify-center -rotate-[15deg]">
+        <div className="flex absolute border border-slate-300 rounded-2xl w-[455px] h-[455px] lg:w-[45vw] lg:h-[45vw] items-center justify-center -rotate-[15deg]">
           <div className="flex absolute border border-slate-400  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
             <div className="flex absolute border border-slate-500 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
               <div className="hidden lg:flex absolute border border-slate-600 rounded-2xl w-2/3 h-2/3">
@@ -177,7 +177,7 @@ export function ForgotPasswordForm() {
         <div className="flex items-center font-bold">Amati</div>
 
         {/* Center */}
-        <div className="flex flex-col h-full w-full bg-transparent justify-center lg:px-28">
+        <div className="flex flex-col h-full w-full xl:ml-32 2xl:ml-72 bg-transparent justify-center lg:px-28">
           <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
             <h1
               className="text-4xl font-bold"
diff --git a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
index 5294140..c617495 100644
--- a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
@@ -198,7 +198,7 @@ export function ResetPasswordForm() {
       <div
         className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 overflow-hidden"
       >
-        <div className="flex absolute border border-slate-200 rounded-2xl w-[455px] h-[455px] lg:w-[650px] lg:h-[650px] items-center justify-center -rotate-[15deg]">
+        <div className="flex absolute border border-slate-200 rounded-2xl w-[455px] h-[455px] lg:w-[45vw] lg:h-[45vw] items-center justify-center -rotate-[15deg]">
           <div className="flex absolute border border-slate-300  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
             <div className="flex absolute border border-slate-400 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
               <div className="hidden lg:flex absolute border border-slate-500 rounded-2xl w-2/3 h-2/3">
@@ -213,7 +213,7 @@ export function ResetPasswordForm() {
         <div className="flex items-center font-bold">Amati</div>
 
         {/* Center */}
-        <div className="flex flex-col h-full w-full bg-transparent justify-center lg:px-28">
+        <div className="flex flex-col h-full w-full xl:ml-32 2xl:ml-72 bg-transparent justify-center lg:px-28">
           <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
             <h1
               className="text-4xl font-bold"

From 44078b4f9eed0e3a9ae76cf91a5bb61bde70528c Mon Sep 17 00:00:00 2001
From: Sukma Gladys <sukmagladysv@gmail.com>
Date: Fri, 13 Sep 2024 10:11:52 +0700
Subject: [PATCH 5/5] fix: background and component style

---
 apps/frontend/src/index.css                   |  4 ++
 .../src/routes/forgot-password/index.lazy.tsx | 44 ++++++++-----------
 .../routes/forgot-password/verify.lazy.tsx    | 44 ++++++++-----------
 3 files changed, 40 insertions(+), 52 deletions(-)

diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 99a7b0c..6f4ed59 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -66,4 +66,8 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+:root {
+  --primary-color: #2555FF
 }
\ No newline at end of file
diff --git a/apps/frontend/src/routes/forgot-password/index.lazy.tsx b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
index bc29d01..e03c549 100644
--- a/apps/frontend/src/routes/forgot-password/index.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
@@ -1,7 +1,7 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { TbArrowNarrowRight } from "react-icons/tb";
 import { IoIosArrowUp } from "react-icons/io";
-import { HiOutlineGlobeAlt  } from "react-icons/hi";
+import { HiOutlineGlobeAlt } from "react-icons/hi";
 import { useForm, Control, FieldError } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -87,11 +87,11 @@ const CustomDropdownMenu: React.FC<DropdownProps> = ({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button className="bg-transparent text-gray-800 w-full justify-between text-xs hover:bg-blue-100">
-        <div className="flex items-center gap-1">
-          <HiOutlineGlobeAlt className="h-3 w-3" />
-          {selectedOption || "Select an option"}
-        </div>
-        <IoIosArrowUp className="h-3 w-3 ml-auto" />
+          <div className="flex items-center gap-1">
+            <HiOutlineGlobeAlt className="h-3 w-3" />
+            {selectedOption || "Select an option"}
+          </div>
+          <IoIosArrowUp className="h-3 w-3 ml-auto" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
@@ -159,20 +159,18 @@ export function ForgotPasswordForm() {
 
   return (
     <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
-      <div
-        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 overflow-hidden"
-      >
-        <div className="flex absolute border border-slate-300 rounded-2xl w-[455px] h-[455px] lg:w-[45vw] lg:h-[45vw] items-center justify-center -rotate-[15deg]">
-          <div className="flex absolute border border-slate-400  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
-            <div className="flex absolute border border-slate-500 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
-              <div className="hidden lg:flex absolute border border-slate-600 rounded-2xl w-2/3 h-2/3">
-              </div>
-            </div>
+      <div className="absolute inset-0 flex z-0 overflow-hidden">
+        <div className="relative h-[50vw] md:h-screen z-0">
+          <div className="-translate-y-[calc(50vw+2rem)] md:translate-y-0 w-full md:-translate-x-[calc(10vh-60vw)]">
+            <span className="absolute scale-[25%] -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-800 flex rounded-xl"></span>
+            <span className="absolute scale-50 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-400 flex rounded-xl"></span>
+            <span className="absolute scale-75 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-300 flex rounded-xl"></span>
+            <span className="absolute scale-100 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-200 flex rounded-xl"></span>
           </div>
         </div>
       </div>
 
-      <div className="flex flex-col min-h-screen p-7 bg-transparent justify-between z-20">
+      <div className="relative flex flex-col min-h-screen p-7 bg-transparent justify-between z-10">
         {/* Top */}
         <div className="flex items-center font-bold">Amati</div>
 
@@ -180,8 +178,7 @@ export function ForgotPasswordForm() {
         <div className="flex flex-col h-full w-full xl:ml-32 2xl:ml-72 bg-transparent justify-center lg:px-28">
           <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
             <h1
-              className="text-4xl font-bold"
-              style={{ color: "#000000" }}
+              className="text-4xl font-bold text-black"
             >
               Forgot Password
             </h1>
@@ -207,12 +204,7 @@ export function ForgotPasswordForm() {
               <div className="flex flex-col justify-between gap-9">
                 <Button
                   type="submit"
-                  style={{
-                    backgroundColor: "#2555FF",
-                    color: "white",
-                    width: "100%",
-                  }}
-                  className="flex items-center justify-between shadow-xl"
+                  className="flex items-center justify-between shadow-xl w-full text-white bg-[--primary-color]"
                 >
                   <span className="flex">Request Reset</span>
                   <TbArrowNarrowRight className="h-5 w-5" />
@@ -231,8 +223,8 @@ export function ForgotPasswordForm() {
         {/* Bottom */}
         <div className="flex items-center justify-center lg:justify-start w-56 h-8 mx-auto lg:mx-0 bg-muted rounded-md">
           <CustomDropdownMenu
-            onSelect={handleSelect} 
-            defaultOption="English (United States)" 
+            onSelect={handleSelect}
+            defaultOption="English (United States)"
             listOption={["English (United States)", "Indonesia"]}
           />
         </div>
diff --git a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
index c617495..1d8294a 100644
--- a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
@@ -91,11 +91,11 @@ const CustomDropdownMenu: React.FC<DropdownProps> = ({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button className="bg-transparent text-gray-800 w-full justify-between text-xs hover:bg-blue-100">
-        <div className="flex items-center gap-1">
-          <HiOutlineGlobeAlt className="h-3 w-3" />
-          {selectedOption || "Select an option"}
-        </div>
-        <IoIosArrowUp className="h-3 w-3 ml-auto" />
+          <div className="flex items-center gap-1">
+            <HiOutlineGlobeAlt className="h-3 w-3" />
+            {selectedOption || "Select an option"}
+          </div>
+          <IoIosArrowUp className="h-3 w-3 ml-auto" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
@@ -142,7 +142,7 @@ export function ResetPasswordForm() {
     const urlParams = new URLSearchParams(window.location.search);
     const tokenFromURL = urlParams.get("token");
     setToken(tokenFromURL);
-  }, []);  
+  }, []);
 
   // Function to handle form submission
   const onSubmit = async (values: FormSchema) => {
@@ -195,20 +195,18 @@ export function ResetPasswordForm() {
 
   return (
     <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
-      <div
-        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 overflow-hidden"
-      >
-        <div className="flex absolute border border-slate-200 rounded-2xl w-[455px] h-[455px] lg:w-[45vw] lg:h-[45vw] items-center justify-center -rotate-[15deg]">
-          <div className="flex absolute border border-slate-300  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
-            <div className="flex absolute border border-slate-400 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
-              <div className="hidden lg:flex absolute border border-slate-500 rounded-2xl w-2/3 h-2/3">
-              </div>
-            </div>
+      <div className="absolute inset-0 flex z-0 overflow-hidden">
+        <div className="relative h-[50vw] md:h-screen z-0">
+          <div className="-translate-y-[calc(50vw+2rem)] md:translate-y-0 w-full md:-translate-x-[calc(10vh-60vw)]">
+            <span className="absolute scale-[25%] -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-800 flex rounded-xl"></span>
+            <span className="absolute scale-50 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-400 flex rounded-xl"></span>
+            <span className="absolute scale-75 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-300 flex rounded-xl"></span>
+            <span className="absolute scale-100 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-200 flex rounded-xl"></span>
           </div>
         </div>
       </div>
 
-      <div className="flex flex-col min-h-screen p-7 bg-transparent justify-between z-20">
+      <div className="relative flex flex-col min-h-screen p-7 bg-transparent justify-between z-10">
         {/* Top */}
         <div className="flex items-center font-bold">Amati</div>
 
@@ -216,8 +214,7 @@ export function ResetPasswordForm() {
         <div className="flex flex-col h-full w-full xl:ml-32 2xl:ml-72 bg-transparent justify-center lg:px-28">
           <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
             <h1
-              className="text-4xl font-bold"
-              style={{ color: "#000000" }}
+              className="text-4xl font-bold text-black"
             >
               Change Password
             </h1>
@@ -249,12 +246,7 @@ export function ResetPasswordForm() {
               <div className="flex flex-col justify-between gap-9">
                 <Button
                   type="submit"
-                  style={{
-                    backgroundColor: "#2555FF",
-                    color: "white",
-                    width: "100%",
-                  }}
-                  className="flex items-center justify-between shadow-xl"
+                  className="flex items-center justify-between shadow-xl w-full text-white bg-[--primary-color]"
                 >
                   <span className="flex">Submit</span>
                   <TbArrowNarrowRight className="h-5 w-5" />
@@ -272,8 +264,8 @@ export function ResetPasswordForm() {
 
         <div className="flex items-center justify-center lg:justify-start w-56 h-8 mx-auto lg:mx-0 bg-muted rounded-md">
           <CustomDropdownMenu
-            onSelect={handleSelect} 
-            defaultOption="English (United States)" 
+            onSelect={handleSelect}
+            defaultOption="English (United States)"
             listOption={["English (United States)", "Indonesia"]}
           />
         </div>