Skip to content

Commit 0fbc872

Browse files
Maran1947Maran1947
committedOct 14, 2024·
fixed responsivenss of ui
1 parent 61243bf commit 0fbc872

File tree

18 files changed

+50
-49
lines changed

18 files changed

+50
-49
lines changed
 

‎src/app/(protected)/dashboard/page.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const DashboardPage = () => {
4949
text: 'Questions Answered Per Day',
5050
align: 'center',
5151
style: {
52-
fontSize: '16px',
52+
fontSize: window && window.innerWidth > 400 ? '16px' : '12px',
5353
fontWeight: 'bold',
5454
color: '#333'
5555
}
@@ -61,7 +61,7 @@ const DashboardPage = () => {
6161
last7Days[last7Days.length - 1].fullDate
6262
})`,
6363
style: {
64-
fontSize: '14px',
64+
fontSize: window && window.innerWidth > 400 ? '14px' : '10px',
6565
fontWeight: 'bold'
6666
}
6767
},
@@ -73,7 +73,7 @@ const DashboardPage = () => {
7373
title: {
7474
text: 'Total Questions Answered',
7575
style: {
76-
fontSize: '14px',
76+
fontSize: window && window.innerWidth > 400 ? '14px' : '10px',
7777
fontWeight: 'bold'
7878
}
7979
},
@@ -127,7 +127,7 @@ const DashboardPage = () => {
127127
}, [])
128128

129129
return (
130-
<div className="w-full p-8">
130+
<div className="w-full p-4 sm:p-8">
131131
<div>
132132
<h2 className="text-2xl text-black font-semibold mb-4">Dashboard</h2>
133133
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -172,7 +172,7 @@ const DashboardPage = () => {
172172
series={chartData.series}
173173
type="line"
174174
width="100%"
175-
height={320}
175+
height={window && window.innerWidth > 400 ? 320 : 220}
176176
/>
177177
) : (
178178
<Loading
@@ -190,8 +190,8 @@ const DashboardPage = () => {
190190
</h3>
191191
<div className="mt-5">
192192
<div className="flex items-center gap-2">
193-
<span className="inline-block w-3 h-3 rounded-full bg-[var(--color-primary-100)]"></span>
194-
<p>Attended Quiz: The Web Series of Web3</p>
193+
<span className="inline-block min-w-3 h-3 rounded-full bg-[var(--color-primary-100)]"></span>
194+
<p>Attempted Quiz: The Web Series of Web3</p>
195195
</div>
196196
</div>
197197
</div>

‎src/app/(protected)/dashboard/quiz/[quizId]/view/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const QuizViewPage = () => {
5858
}, [])
5959

6060
return (
61-
<div className="w-full p-8">
61+
<div className="w-full p-4 sm:p-8">
6262
{loading ? (
6363
<div className="w-full flex items-center justify-center">
6464
<Loading type="bubbles" color="#dd92e4" width={100} height={100} />
@@ -75,7 +75,7 @@ const QuizViewPage = () => {
7575
/>
7676
</div>
7777
</div>
78-
<div className="flex items-center justify-between mt-2 mb-4">
78+
<div className="flex flex-col sm:flex-row items-center justify-between mt-2 mb-4">
7979
<h2 className="text-sm sm:text-xl border border-[var(--color-primary-100)] text-[var(--color-primary-100)] py-1 px-4">
8080
Total Questions: {quiz.totalQuestions}
8181
</h2>

‎src/app/(protected)/dashboard/quiz/_components/generateQuiz.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ const GenerateQuiz = ({
135135
<div className="text-black text-xl border-t-2 border-[var(--color-primary-500)] shadow rounded-md bg-[var(--color-surface-mixed-400)] py-3 px-6 mb-4">
136136
{quizDetails?.title}
137137
</div>
138-
<div className="h-[400px] overflow-y-auto p-6 border-t-2 border-[var(--color-primary-500)] shadow rounded-md bg-[var(--color-surface-mixed-400)]">
138+
<div className="h-[400px] overflow-y-auto p-2 sm:p-6 border-t-2 border-[var(--color-primary-500)] shadow rounded-md bg-[var(--color-surface-mixed-400)]">
139139
{questionsLoading ? (
140140
<AiLoading />
141141
) : (

‎src/app/(protected)/dashboard/quiz/_components/question.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface QuestionProps {
1212

1313
const Question = ({ question, questionIndex, handleChange }: QuestionProps) => {
1414
return (
15-
<div className="border-t-2 border-[var(--color-primary-600)] shadow rounded-md bg-[var(--color-surface-mixed-400)] p-6 mb-4">
15+
<div className="border-t-2 border-[var(--color-primary-600)] shadow rounded-md bg-[var(--color-surface-mixed-400)] p-2 sm:p-6 mb-4">
1616
<div className="mb-4">
1717
<label
1818
className="block text-gray-500 text-sm font-bold mb-2"

‎src/app/(protected)/dashboard/quiz/_components/quizCreated.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const QuizCreated = ({ quizRoomCode }: { quizRoomCode: string }) => {
1515
}
1616

1717
return (
18-
<div className="w-[400px] p-8 bg-[var(--color-primary-500)] border border-[var(--color-primary-100)] rounded-lg">
18+
<div className="w-[98%] sm:w-[400px] p-8 bg-[var(--color-primary-500)] border border-[var(--color-primary-100)] rounded-lg">
1919
<div className="flex items-center justify-center">
2020
<Image
2121
className="rounded-full"

‎src/app/(protected)/dashboard/quiz/_components/quizDetails.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const QuizDetails = ({
3131
}
3232

3333
return (
34-
<div className="w-[400px] p-8 border-t-2 border-[var(--color-primary-500)] shadow rounded-md bg-[var(--color-surface-mixed-400)]">
34+
<div className="w-[98%] sm:w-[400px] p-4 sm:p-8 border-t-2 border-[var(--color-primary-500)] shadow rounded-md bg-[var(--color-surface-mixed-400)]">
3535
<form onSubmit={handleSubmit}>
3636
<div className="mb-4">
3737
<label

‎src/app/(protected)/dashboard/quiz/_components/stepper.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Stepper = ({ activeStep }: StepperProps) => {
1010
return (
1111
<ol className="w-full flex items-center text-sm font-medium text-center sm:text-base">
1212
<li className={`flex md:w-full items-center text-blue-600 sm:after:content-[''] after:w-full after:h-1 after:border-b ${activeStep > 0 ? 'after:border-blue-600' : 'after:border-gray-300'} after:border-1 after:hidden sm:after:inline-block after:mx-4`}>
13-
<span className="flex items-center after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200">
13+
<span className="flex items-center after:content-['/'] sm:after:hidden after:mx-2">
1414
{activeStep === 0 ? (
1515
<FaRegCircleDot className="me-2" />
1616
) : (
@@ -24,11 +24,11 @@ const Stepper = ({ activeStep }: StepperProps) => {
2424
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
2525
</svg>
2626
)}
27-
Quiz <span className="hidden sm:inline-flex sm:ms-2">Type</span>
27+
Quiz <span className="inline-flex ms-2"> Type</span>
2828
</span>
2929
</li>
3030
<li className={`${activeStep > 0 ? 'text-blue-600' : 'text-gray-500'} flex md:w-full items-center after:content-[''] after:w-full after:h-1 after:border-b ${activeStep > 1 ? 'after:border-blue-600' : 'after:border-gray-300'} after:border-1 after:hidden sm:after:inline-block after:mx-4`}>
31-
<span className="flex items-center after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200">
31+
<span className="flex items-center after:content-['/'] sm:after:hidden after:mx-2">
3232
{activeStep === 1 ? (
3333
<FaRegCircleDot className="me-2" />
3434
) : activeStep < 1 ? (
@@ -44,11 +44,11 @@ const Stepper = ({ activeStep }: StepperProps) => {
4444
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
4545
</svg>
4646
)}
47-
Quiz <span className="hidden sm:inline-flex sm:ms-2">Details</span>
47+
Quiz <span className="inline-flex ms-2">Details</span>
4848
</span>
4949
</li>
5050
<li className={`${activeStep > 1 ? 'text-blue-600' : 'text-gray-500'} flex items-center`}>
51-
<span className="flex items-center after:content-['/'] sm:after:hidden after:mx-2 after:text-blue-600">
51+
<span className="flex items-center after:content-[''] sm:after:hidden after:mx-2">
5252
{activeStep === 2 ? (
5353
<FaRegCircleDot className="me-2" />
5454
) : activeStep < 2 ? (
@@ -64,7 +64,7 @@ const Stepper = ({ activeStep }: StepperProps) => {
6464
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
6565
</svg>
6666
)}
67-
Quiz <span className="hidden sm:inline-flex sm:ms-2">Details</span>
67+
Generate
6868
</span>
6969
</li>
7070
</ol>

‎src/app/(protected)/dashboard/quiz/create/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const CreateQuizPage = () => {
1515

1616
return (
1717
<div className="w-full h-full flex flex-col items-center justify-center text-white">
18-
<div className="w-[600px] flex flex-col items-center justify-center gap-12">
18+
<div className="max-w-[600px] flex flex-col items-center justify-center gap-4 sm:gap-12">
1919
<Stepper activeStep={activeStep} />
2020

2121
{activeStep === 1 ? (

‎src/app/(protected)/dashboard/quiz/page.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ const QuizPage = () => {
3838
}, [refresh])
3939

4040
return (
41-
<div className="w-full p-8">
41+
<div className="w-full p-4 sm:p-8">
4242
<div className="w-full flex items-center justify-between">
43-
<div className="text-black text-2xl font-medium">Manage Quizzes</div>
43+
<div className="text-black text-xl sm:text-2xl font-medium">Manage Quizzes</div>
4444
<Link
4545
href={'/dashboard/quiz/create'}
46-
className="text-black border font-medium border-gray-300 bg-[var(--color-primary-500)] shadow-[0px_1px_10px_0px_#0000001a] px-6 py-2 rounded-[50px]"
46+
className="text-center text-black text-sm sm:text-base border font-medium border-gray-300 bg-[var(--color-primary-500)] shadow-[0px_1px_10px_0px_#0000001a] px-4 sm:px-6 py-2 rounded-[50px]"
4747
>
4848
Create Quiz
4949
</Link>

‎src/app/(protected)/dashboard/settings/page.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react'
22

33
const SettingsPage = () => {
44
return (
5-
<div className="w-full p-8">
6-
<div className="w-[80%] mx-auto bg-[var(--color-suface-mixed-200)] rounded-lg border border-[var(--color-primary-500)]">
5+
<div className="w-full p-4 sm:p-8">
6+
<div className="w-full sm:w-[80%] mx-auto bg-[var(--color-suface-mixed-200)] rounded-lg border border-[var(--color-primary-500)]">
77
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
88
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-800 md:text-2xl">
99
Change Password
@@ -20,7 +20,7 @@ const SettingsPage = () => {
2020
type="password"
2121
name="currentPassword"
2222
id="currentPassword"
23-
className="bg-[var(--color-surface-mixed-200)] border border-gray-300 text-black rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
23+
className="bg-[var(--color-surface-mixed-200)] border border-gray-300 text-black rounded-lg focus:outline-none focus:border-[var(--color-primary-100)] block w-full p-2.5"
2424
placeholder="••••••••"
2525
required
2626
/>
@@ -37,7 +37,7 @@ const SettingsPage = () => {
3737
name="newPassword"
3838
id="newPassword"
3939
placeholder="••••••••"
40-
className="bg-[var(--color-surface-mixed-200)] border border-gray-300 text-black rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
40+
className="bg-[var(--color-surface-mixed-200)] border border-gray-300 text-black rounded-lg focus:outline-none focus:border-[var(--color-primary-100)] block w-full p-2.5"
4141
required
4242
/>
4343
</div>
@@ -53,7 +53,7 @@ const SettingsPage = () => {
5353
name="confirmPassword"
5454
id="confirmPassword"
5555
placeholder="••••••••"
56-
className="bg-[var(--color-surface-mixed-200)] border border-gray-300 text-black rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
56+
className="bg-[var(--color-surface-mixed-200)] border border-gray-300 text-black rounded-lg focus:outline-none focus:border-[var(--color-primary-100)] block w-full p-2.5"
5757
required
5858
/>
5959
</div>

‎src/app/(protected)/quiz/join/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const JoinQuizPage = () => {
1313
}
1414

1515
return (
16-
<section className="bg-[var(--color-surface-mixed-100)]">
16+
<section className="h-screen bg-[var(--color-surface-mixed-100)]">
1717
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
1818
<div className="w-full bg-[var(--color-suface-mixed-200)] rounded-lg shadow-[0px_1px_15px_0px_#0000001a] md:mt-0 sm:max-w-md xl:p-0">
1919
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">

‎src/app/(protected)/quiz/room/[quizRoomCode]/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,9 @@ const QuizRoomPage = () => {
114114
handleContinue()
115115
}, [questionTimer])
116116
return (
117-
<div className="w-full pt-20 h-screen bg-[var(--color-surface-mixed-200)]">
117+
<div className="w-full pt-10 sm:pt-20 pb-5 min-h-screen bg-[var(--color-surface-mixed-200)]">
118118
{questions.length > 0 ? (
119-
<div className="max-w-[800px] p-8 mx-8 md:mx-auto border border-[var(--color-primary-100)] rounded-[50px] shadow-md">
119+
<div className="max-w-[800px] px-4 sm:px-8 py-8 mx-1 sm:mx-8 md:mx-auto border border-[var(--color-primary-100)] rounded-[50px] shadow-md">
120120
<div className="flex justify-between items-center">
121121
<div className="text-[var(--color-primary-200)] text-lg">
122122
<span className="font-semibold">{currentQuestion + 1}</span> of{' '}

‎src/app/page.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import { motion } from 'framer-motion'
44
import Link from 'next/link'
55
import Footer from '@/components/footer/footer'
66
import Image from 'next/image'
7-
import dashboardScreenshot from '../assets/images/dashboard_quiz_ui.png'
7+
import dashboardScreenshot from '../assets/images/quiz_dashboard_ui.png'
88

99
export default function Home() {
1010
return (
1111
<div className="w-full bg-gradient-to-t from-[var(--color-primary-300)] to-[var(--color-primary-100)]">
1212
<header className="flex items-center justify-around px-8 py-3">
1313
<h1 className="text-white font-bold text-2xl border-x-4 rounded-lg px-2">QuizSpot.ai</h1>
14-
<div className="rounded-full py-2 px-5 gap-8 bg-white">
14+
<div className="hidden sm:block rounded-full py-2 px-5 gap-8 bg-white">
1515
<ul className="flex items-center gap-4 text-black">
1616
<li className='hover:text-[var(--color-primary-100)]'>Features</li>
1717
<li className='hover:text-[var(--color-primary-100)]'>About</li>
@@ -75,6 +75,7 @@ export default function Home() {
7575
<Image
7676
width={1200}
7777
height={1200}
78+
style={{ width: 'auto', height: 'auto' }}
7879
className="w-full h-auto"
7980
src={dashboardScreenshot}
8081
alt="codesocket editor screenshot"
@@ -113,7 +114,7 @@ export default function Home() {
113114
>
114115
<a
115116
href="https://github.com/maran1947/quizspot"
116-
className="flex items-center w-full px-4 py-2 text-base font-medium text-black bg-[#0bff75] rounded-md hover:bg-[#46db87]"
117+
className="flex items-center w-full px-4 py-2 text-base font-medium text-black bg-[#0bff75] rounded-md hover:shadow-[0px_0px_15px_0px_#fff]"
117118
>
118119
<svg
119120
xmlns="http://www.w3.org/2000/svg"

‎src/app/signin/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const SigninPage = () => {
2222
}
2323
} catch (error) {
2424
console.log(error)
25-
alert('Something went wrong')
25+
toast.error('Something went wrong')
2626
}
2727
}
2828

‎src/assets/images/quiz_dashboard_ui.png

94.3 KB
Loading

‎src/components/dashboard/header.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import Link from 'next/link'
77

88
const DashboardHeader = () => {
99
return (
10-
<div className="w-full h-[8vh] text-black bg-[var(--color-surface-mixed-300)] drop-shadow-lg flex items-center justify-between px-6">
10+
<div className="w-full h-[8vh] text-black bg-[var(--color-surface-mixed-300)] drop-shadow-lg flex items-center justify-between px-2 sm:px-6">
1111
<div className="flex items-center gap-4">
1212
<RiMenu2Line className="text-2xl cursor-pointer" />
13-
<h2 className="text-black text-2xl">QuizSpot</h2>
13+
<h2 className="hidden sm:block text-black text-2xl">QuizSpot</h2>
1414
</div>
1515
<div className="flex items-center gap-2">
1616
<Link

‎src/components/dashboard/sidebar.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -38,28 +38,28 @@ const DashboardSidebar = () => {
3838
const pathname = usePathname()
3939
console.log(pathname)
4040
return (
41-
<div className="w-[120px] h-[92vh] drop-shadow-lg bg-[var(--color-surface-mixed-300)] flex flex-col justify-between py-4 text-black">
42-
<div className="px-6">
41+
<div className="w-[40px] sm:w-[120px] h-[92vh] drop-shadow-lg bg-[var(--color-surface-mixed-300)] flex flex-col justify-between py-4 text-black">
42+
<div className="px-2 sm:px-6">
4343
<MenuItem
4444
redirectTo="/dashboard"
4545
text="Dashboard"
46-
textClassName="text-sm"
47-
icon={<MdDashboard className="text-4xl" />}
46+
textClassName="hidden sm:block text-sm"
47+
icon={<MdDashboard className="text-2xl sm:text-4xl" />}
4848
pathname={pathname}
4949
/>
5050
<MenuItem
5151
redirectTo="/dashboard/quiz"
5252
text="Quiz"
53-
textClassName="text-sm"
54-
icon={<MdQuiz className="text-4xl" />}
53+
textClassName="hidden sm:block text-sm"
54+
icon={<MdQuiz className="text-2xl sm:text-4xl" />}
5555
pathname={pathname}
5656
/>
5757
</div>
58-
<div className="px-6">
58+
<div className="px-2 sm:px-6">
5959
<MenuItem
6060
text={'Settings'}
61-
textClassName={'text-sm'}
62-
icon={<IoMdSettings className="text-4xl" />}
61+
textClassName={'hidden sm:block text-sm'}
62+
icon={<IoMdSettings className="text-2xl sm:text-4xl" />}
6363
redirectTo="/dashboard/settings"
6464
pathname={pathname}
6565
/>

‎src/components/quiz/create/chooseQuizType.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ const ChooseQuizType = ({
1919
}
2020

2121
return (
22-
<div className="flex items-center justify-center gap-8">
23-
<div className="w-80 h-80 flex flex-col items-center justify-center gap-6 border-t-2 border-[var(--color-primary-500)] shadow rounded-md bg-[var(--color-surface-mixed-400)]">
22+
<div className="flex flex-col sm:flex-row items-center justify-center gap-8">
23+
<div className="max-w-80 max-h-80 flex flex-col items-center justify-center gap-6 border-t-2 border-[var(--color-primary-500)] shadow rounded-md bg-[var(--color-surface-mixed-400)]">
2424
<Image
2525
src={customQuizGif}
2626
alt="Custom Quiz Gif"
@@ -35,7 +35,7 @@ const ChooseQuizType = ({
3535
Custom Quiz
3636
</button>
3737
</div>
38-
<div className="w-80 h-80 flex flex-col items-center justify-center gap-6 border-t-2 border-[var(--color-primary-500)] shadow rounded-md bg-[var(--color-surface-mixed-400)]">
38+
<div className="max-w-80 max-h-80 flex flex-col items-center justify-center gap-6 border-t-2 border-[var(--color-primary-500)] shadow rounded-md bg-[var(--color-surface-mixed-400)]">
3939
<Image src={aiQuizGif} alt="AI Quiz Gif" width={120} height={120} />
4040
<button
4141
type="button"

0 commit comments

Comments
 (0)
Please sign in to comment.