fix: add responsivness

This commit is contained in:
Bereket Engida
2024-09-17 18:49:41 +03:00
parent 5617925397
commit 43419f38f8
8 changed files with 34 additions and 39 deletions

View File

@@ -30,8 +30,8 @@ export default function SignIn() {
return (
<Card className="z-50 rounded-md rounded-t-none max-w-md">
<CardHeader>
<CardTitle className="text-xl">Sign In</CardTitle>
<CardDescription>
<CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
<CardDescription className="text-xs md:text-sm">
Enter your email below to login to your account
</CardDescription>
</CardHeader>

View File

@@ -45,8 +45,8 @@ export function SignUp() {
return (
<Card className="z-50 rounded-md rounded-t-none max-w-md">
<CardHeader>
<CardTitle className="text-xl">Sign Up</CardTitle>
<CardDescription>
<CardTitle className="text-lg md:text-xl">Sign Up</CardTitle>
<CardDescription className="text-xs md:text-sm">
Enter your information to create an account
</CardDescription>
</CardHeader>

View File

@@ -11,8 +11,8 @@ import {
export function Wrapper(props: { children: React.ReactNode }) {
return (
<div className="min-h-screen w-full dark:bg-black bg-white dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2] relative flex justify-center">
<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
<div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-10/12 lg:w-8/12 px-4 md:px-1">
<div className="absolute pointer-events-none inset-0 md:flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] hidden"></div>
<div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-full lg:w-8/12 px-4 md:px-1">
<Link href="/">
<div className="flex gap-2 cursor-pointer">
<Logo />
@@ -23,7 +23,7 @@ export function Wrapper(props: { children: React.ReactNode }) {
<ThemeToggle />
</div>
</div>
<div className="mt-20 lg:w-7/12 w-9/12">
<div className="mt-20 lg:w-7/12 w-full">
{props.children}
</div>
</div>