Skip to content

Commit 1af37c3

Browse files
LemonDrewLemonDrew
committed
Fix styling
1 parent cccb125 commit 1af37c3

File tree

5 files changed

+105
-106
lines changed

5 files changed

+105
-106
lines changed

‎frontend/src/app/auth/login/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import Image from "next/image";
44
export default function LoginPage() {
55
return (
66
<div className="h-screen flex flex-col items-center justify-center">
7-
<Image
8-
src="/PeerPrepLogo.png"
9-
alt="PeerprepLogo"
7+
<Image
8+
src="/PeerPrepLogo.png"
9+
alt="PeerprepLogo"
1010
width={200}
1111
height={200}
1212
/>
13-
<LoginForm/>
13+
<LoginForm />
1414
</div>
1515
);
1616
}

‎frontend/src/app/components/home/WelcomeComponent.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Card, CardTitle, CardHeader, CardContent } from "@/components/ui/card";
44
import { Button } from "@/components/ui/button";
55

66
export default function WelcomePage() {
7-
87
function directToHome() {
98
window.location.href = "/match";
109
}
@@ -20,7 +19,10 @@ export default function WelcomePage() {
2019
</CardHeader>
2120

2221
<CardContent>
23-
<Button className="w-30 bg-white border-black text-black border-2 border-black" onClick={() => directToHome()}>
22+
<Button
23+
className="w-30 bg-white border-black text-black border-2 border-black"
24+
onClick={() => directToHome()}
25+
>
2426
Start
2527
</Button>
2628
</CardContent>

‎frontend/src/app/components/match/TopicsComponent.tsx‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
1-
2-
"use client"
1+
"use client";
32

43
import { IoIosSettings } from "react-icons/io";
54
import { CiBookmark } from "react-icons/ci";
6-
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
5+
import {
6+
Card,
7+
CardHeader,
8+
CardTitle,
9+
CardDescription,
10+
CardContent,
11+
} from "@/components/ui/card";
712
import { Button } from "@/components/ui/button";
813

914
export default function TopicsComponent() {
10-
return (
11-
<Card className="w-[80%] flex-1 m-10">
12-
<div className="flex w-full ">
13-
<CiBookmark className="ml-3 mt-1 text-2xl" />
14-
<CardHeader className="ml-5 flex-1 ml-0 pl-3">
15-
<CardTitle className="text-2xl font-bold">
16-
Topics
17-
</CardTitle>
18-
<CardDescription>
19-
Choose the topics that you want to focus on
20-
</CardDescription>
21-
</CardHeader>
22-
</div>
23-
24-
<CardContent className="flex justify-evenly h-full items-center gap-3">
25-
<Button className="flex-1 h-[50%] bg-gray-200 text-black">
26-
Strings
27-
</Button>
15+
return (
16+
<Card className="w-[80%] flex-1 m-10">
17+
<div className="flex w-full ">
18+
<CiBookmark className="ml-3 mt-1 text-2xl" />
19+
<CardHeader className="ml-5 flex-1 ml-0 pl-3">
20+
<CardTitle className="text-2xl font-bold">Topics</CardTitle>
21+
<CardDescription>
22+
Choose the topics that you want to focus on
23+
</CardDescription>
24+
</CardHeader>
25+
</div>
2826

29-
<Button className="flex-1 h-[50%] bg-gray-200 text-black">
30-
Linked Lists
31-
</Button>
27+
<CardContent className="flex justify-evenly h-full items-center gap-3">
28+
<Button className="flex-1 h-[50%] bg-gray-200 text-black">
29+
Strings
30+
</Button>
3231

33-
<Button className="flex-1 h-[50%] bg-gray-200 text-black">
34-
Dyanmic Programming
35-
</Button>
32+
<Button className="flex-1 h-[50%] bg-gray-200 text-black">
33+
Linked Lists
34+
</Button>
3635

37-
</CardContent>
38-
</Card>
39-
)
40-
}
36+
<Button className="flex-1 h-[50%] bg-gray-200 text-black">
37+
Dyanmic Programming
38+
</Button>
39+
</CardContent>
40+
</Card>
41+
);
42+
}

‎frontend/src/app/match/page.tsx‎

Lines changed: 44 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,55 @@
1-
21
import { IoIosSettings } from "react-icons/io";
32
import { CiBookmark } from "react-icons/ci";
4-
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
3+
import {
4+
Card,
5+
CardHeader,
6+
CardTitle,
7+
CardDescription,
8+
CardContent,
9+
} from "@/components/ui/card";
510
import { Button } from "@/components/ui/button";
611
import TopicsComponent from "../components/match/TopicsComponent";
712

813
export default function MatchPage() {
9-
return (
10-
<div className="h-screen flex flex-col items-center justify-center">
11-
<div className="text-center">
12-
<h1 className="text-5xl font-bold mt-30">
13-
Find your coding partner
14-
</h1>
15-
<h1 className="text-lg m-2">
16-
Set your preferences and we will find the best match for you!
17-
</h1>
18-
</div>
19-
20-
<Card className="w-[80%] flex-1 m-10">
21-
<div className="flex w-full ">
22-
<IoIosSettings className="ml-3 mt-1 text-2xl" />
23-
<CardHeader className="ml-5 flex-1 ml-0 pl-3">
24-
<CardTitle className="text-2xl font-bold">
25-
Difficult Level
26-
</CardTitle>
27-
<CardDescription>
28-
Select one of more difficulty levels that you would like to practice
29-
</CardDescription>
30-
</CardHeader>
31-
</div>
32-
33-
<CardContent className="flex justify-evenly h-full items-center gap-3">
34-
<Button className="flex-1 h-[50%] bg-green-200 text-black">
35-
Easy
36-
</Button>
37-
38-
<Button className="flex-1 h-[50%] bg-yellow-200 text-black">
39-
Medium
40-
</Button>
41-
42-
<Button className="flex-1 h-[50%] bg-red-200 text-black">
43-
Hard
44-
</Button>
45-
46-
</CardContent>
47-
</Card>
48-
49-
<TopicsComponent/>
14+
return (
15+
<div className="h-screen flex flex-col items-center justify-center">
16+
<div className="text-center">
17+
<h1 className="text-5xl font-bold mt-30">Find your coding partner</h1>
18+
<h1 className="text-lg m-2">
19+
Set your preferences and we will find the best match for you!
20+
</h1>
21+
</div>
22+
23+
<Card className="w-[80%] flex-1 m-10">
24+
<div className="flex w-full ">
25+
<IoIosSettings className="ml-3 mt-1 text-2xl" />
26+
<CardHeader className="ml-5 flex-1 ml-0 pl-3">
27+
<CardTitle className="text-2xl font-bold">
28+
Difficult Level
29+
</CardTitle>
30+
<CardDescription>
31+
Select one of more difficulty levels that you would like to
32+
practice
33+
</CardDescription>
34+
</CardHeader>
35+
</div>
5036

37+
<CardContent className="flex justify-evenly h-full items-center gap-3">
38+
<Button className="flex-1 h-[50%] bg-green-200 text-black">
39+
Easy
40+
</Button>
5141

42+
<Button className="flex-1 h-[50%] bg-yellow-200 text-black">
43+
Medium
44+
</Button>
5245

53-
<Button className="mb-15 w-[80%]">
54-
Find my partner
55-
</Button>
46+
<Button className="flex-1 h-[50%] bg-red-200 text-black">Hard</Button>
47+
</CardContent>
48+
</Card>
5649

50+
<TopicsComponent />
5751

58-
</div>
59-
)
60-
}
52+
<Button className="mb-15 w-[80%]">Find my partner</Button>
53+
</div>
54+
);
55+
}

‎frontend/src/components/ui/dialog.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
"use client"
1+
"use client";
22

3-
import * as React from "react"
4-
import * as DialogPrimitive from "@radix-ui/react-dialog"
5-
import { XIcon } from "lucide-react"
3+
import * as React from "react";
4+
import * as DialogPrimitive from "@radix-ui/react-dialog";
5+
import { XIcon } from "lucide-react";
66

7-
import { cn } from "@/lib/utils"
7+
import { cn } from "@/lib/utils";
88

99
function Dialog({
1010
...props
1111
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
12-
return <DialogPrimitive.Root data-slot="dialog" {...props} />
12+
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
1313
}
1414

1515
function DialogTrigger({
1616
...props
1717
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
18-
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
18+
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
1919
}
2020

2121
function DialogPortal({
2222
...props
2323
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
24-
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
24+
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
2525
}
2626

2727
function DialogClose({
2828
...props
2929
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
30-
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
30+
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
3131
}
3232

3333
function DialogOverlay({
@@ -39,11 +39,11 @@ function DialogOverlay({
3939
data-slot="dialog-overlay"
4040
className={cn(
4141
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
42-
className
42+
className,
4343
)}
4444
{...props}
4545
/>
46-
)
46+
);
4747
}
4848

4949
function DialogContent({
@@ -52,7 +52,7 @@ function DialogContent({
5252
showCloseButton = true,
5353
...props
5454
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
55-
showCloseButton?: boolean
55+
showCloseButton?: boolean;
5656
}) {
5757
return (
5858
<DialogPortal data-slot="dialog-portal">
@@ -61,7 +61,7 @@ function DialogContent({
6161
data-slot="dialog-content"
6262
className={cn(
6363
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
64-
className
64+
className,
6565
)}
6666
{...props}
6767
>
@@ -77,7 +77,7 @@ function DialogContent({
7777
)}
7878
</DialogPrimitive.Content>
7979
</DialogPortal>
80-
)
80+
);
8181
}
8282

8383
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -87,7 +87,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
8787
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
8888
{...props}
8989
/>
90-
)
90+
);
9191
}
9292

9393
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -96,11 +96,11 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
9696
data-slot="dialog-footer"
9797
className={cn(
9898
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
99-
className
99+
className,
100100
)}
101101
{...props}
102102
/>
103-
)
103+
);
104104
}
105105

106106
function DialogTitle({
@@ -113,7 +113,7 @@ function DialogTitle({
113113
className={cn("text-lg leading-none font-semibold", className)}
114114
{...props}
115115
/>
116-
)
116+
);
117117
}
118118

119119
function DialogDescription({
@@ -126,7 +126,7 @@ function DialogDescription({
126126
className={cn("text-muted-foreground text-sm", className)}
127127
{...props}
128128
/>
129-
)
129+
);
130130
}
131131

132132
export {
@@ -140,4 +140,4 @@ export {
140140
DialogPortal,
141141
DialogTitle,
142142
DialogTrigger,
143-
}
143+
};

0 commit comments

Comments
 (0)