gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: background and component style

Browse Source
This commit is contained in:
Sukma Gladys 2024-09-13 10:11:52 +07:00
parent 041781c5b3
commit 44078b4f9e
3 changed files with 40 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/frontend/src/index.css
View File

@ -67,3 +67,7 @@
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
:root {
--primary-color: #2555FF
}

28
apps/frontend/src/routes/forgot-password/index.lazy.tsx
View File

@ -159,20 +159,18 @@ export function ForgotPasswordForm() {
return ( return (
<div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden"> <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
<div <div className="absolute inset-0 flex z-0 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="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)]">
<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]"> <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>
<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"> <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>
<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"> <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>
<div className="hidden lg:flex absolute border border-slate-600 rounded-2xl w-2/3 h-2/3"> <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>
</div> </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 */} {/* Top */}
<div className="flex items-center font-bold">Amati</div> <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 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"> <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
<h1 <h1
className="text-4xl font-bold" className="text-4xl font-bold text-black"
style={{ color: "#000000" }}
> >
Forgot Password Forgot Password
</h1> </h1>
@ -207,12 +204,7 @@ export function ForgotPasswordForm() {
<div className="flex flex-col justify-between gap-9"> <div className="flex flex-col justify-between gap-9">
<Button <Button
type="submit" type="submit"
style={{ className="flex items-center justify-between shadow-xl w-full text-white bg-[--primary-color]"
backgroundColor: "#2555FF",
color: "white",
width: "100%",
}}
className="flex items-center justify-between shadow-xl"
> >
<span className="flex">Request Reset</span> <span className="flex">Request Reset</span>
<TbArrowNarrowRight className="h-5 w-5" /> <TbArrowNarrowRight className="h-5 w-5" />

28
apps/frontend/src/routes/forgot-password/verify.lazy.tsx
View File

@ -195,20 +195,18 @@ export function ResetPasswordForm() {
return ( return (
<div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden"> <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
<div <div className="absolute inset-0 flex z-0 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="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)]">
<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]"> <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>
<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"> <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>
<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"> <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>
<div className="hidden lg:flex absolute border border-slate-500 rounded-2xl w-2/3 h-2/3"> <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>
</div> </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 */} {/* Top */}
<div className="flex items-center font-bold">Amati</div> <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 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"> <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
<h1 <h1
className="text-4xl font-bold" className="text-4xl font-bold text-black"
style={{ color: "#000000" }}
> >
Change Password Change Password
</h1> </h1>
@ -249,12 +246,7 @@ export function ResetPasswordForm() {
<div className="flex flex-col justify-between gap-9"> <div className="flex flex-col justify-between gap-9">
<Button <Button
type="submit" type="submit"
style={{ className="flex items-center justify-between shadow-xl w-full text-white bg-[--primary-color]"
backgroundColor: "#2555FF",
color: "white",
width: "100%",
}}
className="flex items-center justify-between shadow-xl"
> >
<span className="flex">Submit</span> <span className="flex">Submit</span>
<TbArrowNarrowRight className="h-5 w-5" /> <TbArrowNarrowRight className="h-5 w-5" />