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

update: Revision on Login Page

Browse Source
This commit is contained in:
falendikategar 2024-09-04 16:15:05 +07:00
parent 867838e077
commit 8862dfa00e
1 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
apps/frontend/src/routes/login/index.lazy.tsx
View File

@ -97,18 +97,24 @@ export default function LoginPage() {
}; };
return ( return (
<div <div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
className="flex items-center justify-center bg-contain bg-top lg:bg-right <div className="absolute top-6 left-7 text-base font-bold leading-5">
bg-no-repeat bg-[url('../src/assets/backgrounds/backgroundLoginMobile.png')]
lg:bg-[url('../src/assets/backgrounds/backgroundLogin.png')]"
>
<div className="absolute top-[1.688rem] left-[1.875rem] text-base font-bold leading-[1.21rem]">
Amati Amati
</div> </div>
<div className="w-screen h-screen flex ml-0 lg:ml-[7.063rem] justify-center lg:justify-start items-center"> <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 -z-20">
<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-[29.5rem] h-auto bg-transparent border-none"> <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]">
<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tightest">Sign In</h1> <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">
<p className="text-sm mb-10 leading-[1.059rem]"> <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>
</div>
</div>
<div className="w-screen h-screen flex ml-0 lg:ml-28 justify-center lg:justify-start items-center">
<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-auto h-auto bg-transparent border-none shadow-none">
<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tight">Sign In</h1>
<p className="text-sm mb-10 leading-4 text-muted-foreground">
New to this app?{' '} New to this app?{' '}
<a <a
href="/register" href="/register"
@ -129,7 +135,7 @@ export default function LoginPage() {
name="username" name="username"
render={({ field }) => ( render={({ field }) => (
<FormItem className="text-sm"> <FormItem className="text-sm">
<FormLabel className="font-semibold leading-[1.059rem]">Email/Username</FormLabel> <FormLabel className="font-semibold leading-4">Email/Username</FormLabel>
<FormControl> <FormControl>
<Input <Input
placeholder="eg; user@mail.com" placeholder="eg; user@mail.com"
@ -146,7 +152,7 @@ export default function LoginPage() {
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem className="text-sm"> <FormItem className="text-sm">
<FormLabel className="font-semibold leading-[1.059rem]">Password</FormLabel> <FormLabel className="font-semibold leading-4">Password</FormLabel>
<FormControl> <FormControl>
<Input <Input
type="password" type="password"
@ -163,7 +169,7 @@ export default function LoginPage() {
<p className="text-sm"> <p className="text-sm">
<a <a
href="/forgot-password" href="/forgot-password"
className="text-blue-500 font-bold hover:text-blue-800 leading-[1.059rem]" className="text-blue-500 font-bold hover:text-blue-800 leading-4"
> >
Forgot Password? Forgot Password?
</a> </a>
@ -177,7 +183,7 @@ export default function LoginPage() {
className="w-full flex items-center justify-center space-x-[13.125rem] sm:space-x-[20rem] className="w-full flex items-center justify-center space-x-[13.125rem] sm:space-x-[20rem]
lg:space-x-[23.125rem] bg-[#2555FF] text-white hover:bg-[#1e4ae0]" lg:space-x-[23.125rem] bg-[#2555FF] text-white hover:bg-[#1e4ae0]"
> >
<span className="leading-[1.25rem]">Sign In</span> <span className="leading-5">Sign In</span>
<TbArrowNarrowRight className="h-5 w-5" /> <TbArrowNarrowRight className="h-5 w-5" />
</Button> </Button>
</div> </div>
@ -188,4 +194,3 @@ export default function LoginPage() {
</div> </div>
); );
} }