fix: background and component style
This commit is contained in:
Sukma Gladys
parent
041781c5b3
commit
44078b4f9e
|
|
@ -67,3 +67,7 @@
|
|||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-color: #2555FF
|
||||
}
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user