chore: make ui responsive

azeemshaik025 · azeemshaik025 · commit 2445d8729dcd · 2025-01-03T17:13:53.000+05:30
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -29,7 +29,7 @@ export default function RootLayout({
       </head>
       <body className="antialiased bg-[#EEEEEC] font-roboto font-normal">
         <NavigationBar />
-        <ToastContainer />
+        <ToastContainer className="!w-[10rem]" />
         {children}
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -18,8 +18,8 @@ export default async function Dashboard() {
     <div className={containerStyles}>
       <div className="flex flex-wrap gap-10 flex-col items-center justify-around">
         <div className="flex flex-col items-center gap-4">
-          <h1 className="font-sans text-3xl font-semibold text-gray-800">Welcome to PulsePoll</h1>
-          <p className="text-xs font-roboto w-[25rem] text-center">Browse through the latest polls, cast your vote, and stay updated with real-time results. Join the conversation today</p>
+          <h1 className="font-sans lg:text-3xl md:text-2xl text-xl font-semibold text-gray-800">Welcome to PulsePoll</h1>
+          <p className="text-xs lg:w-[25rem] md:w-[20rem] font-roboto w-[18rem] text-center">Browse through the latest polls, cast your vote, and stay updated with real-time results. Join the conversation today</p>
         </div>
         <div className="flex mt-10 flex-wrap items-center justify-evenly px-5 gap-x-10 gap-y-10">
           {Array.isArray(polls) && polls.length > 0 ? (
diff --git a/src/app/polls/[pollId]/page.tsx b/src/app/polls/[pollId]/page.tsx
@@ -16,7 +16,7 @@ export default async function SinglePoll({ params }: {
 
     return <div className={containerStyles} >
         {poll ?
-            <div className="hover:scale-105 hover:rotate-1 transition-all duration-75 bg-white shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06)] hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)] flex flex-col gap-[10px] w-fit px-[2rem] py-[4rem] justify-center items-start rounded-xl ">
+            <div className="hover:scale-105 hover:rotate-1 transition-all duration-75 bg-white shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06)] hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)] flex flex-col gap-[10px] w-fit px-[1.5rem] py-[2.5rem] lg:px-[2rem] lg:py-[4rem] md:px-[2rem] md:py-[4rem] justify-center items-start rounded-xl ">
                 <div className="flex w-[20rem] flex-col px-[10px] gap-[10px]">
                     <h2 className="font-sans text-xl font-semibold text-gray-800 flex">{poll.title}</h2>
                     <p className="font-roboto text-xs text-gray-600">
diff --git a/src/app/polls/statistics/[pollId]/page.tsx b/src/app/polls/statistics/[pollId]/page.tsx
@@ -1,5 +1,4 @@
-import { Poll } from "@/types/Poll";
-import { GetAllPolls, GetPollById } from "@/services/pollServices";
+import { GetPollById } from "@/services/pollServices";
 import StatisticsComponent from "@/components/poll/statistics/StatisticsComponent";
 
 export default async function PollStatistics({ params }: {
@@ -17,121 +16,4 @@ export default async function PollStatistics({ params }: {
             poll ? < StatisticsComponent poll={poll} /> : <p>There is no poll with given id.</p>
         }
     </>
-}
-
-// export default function PollStatistics() {
-//     const [pollData, setPollData] = useState<PollResults>();
-//     const params = useParams();
-//     const pollId = params?.pollId as string | null;
-
-//     const { notifySuccess, notifyError } = useNotificationStore((state) => state);
-
-//     useEffect(() => {
-//         if (pollId) {
-//             fetchPollData();
-//         }
-
-//         const es = new EventSource(`${process.env.NEXT_PUBLIC_API_URL}/socket/create-client`);
-
-//         es.onopen = () => {
-//             console.log("connected succesfully.");
-//         }
-
-//         es.addEventListener("poll_results", (event) => {
-//             const poll = JSON.parse(event.data);
-//             if (poll.pollId === pollId) {
-//                 setPollData(poll);
-//             }
-//         });
-
-//     }, [pollId]);
-
-//     const fetchPollData = async () => {
-//         try {
-//             const response = await GetResults(pollId);
-//             setPollData(response);
-//             notifySuccess("Fetched results for the given poll.");
-//         } catch (error) {
-//             if (axios.isAxiosError(error) && error.response) {
-//                 const message = error.response.data;
-//                 notifyError(message);
-//                 return;
-//             }
-//             notifyError("Failed to fetch poll data");
-//             console.error("Failed to fetch poll data:", error);
-//         }
-//     };
-
-//     if (!pollData) {
-//         return <p className="w-full h-[80vh] flex justify-center items-center">Loading...</p>;
-//     }
-
-//     const COLORS = pollData ? generateColors(pollData.options.length) : [];
-
-//     const chartData = pollData?.options?.map((option) => ({
-//         name: option.text,
-//         value: option.votes,
-//     }));
-
-//     return (
-
-//         <div className="w-full flex justify-center">
-//             <div className="w-fit max-w-4xl p-6 m-5 bg-white rounded-xl shadow-lg space-y-6">
-//                 <div className="flex flex-row gap-6 justify-between items-center ">
-//                     <div className="flex-1 flex flex-col items-start gap-3">
-//                         <h1 className="mx-[10px] text-2xl font-semibold text-left text-gray-800">{pollData.title}</h1>
-//                         <div className="mx-[10px] text-gray-600 flex flex-col gap-2">
-//                             <p className="text-sm">
-//                                 Total Votes:{" "}
-//                                 <span className="font-medium text-black">{pollData.totalVotes}</span>
-//                             </p>
-//                             <p className="text-sm">
-//                                 Time Elapsed:{" "}
-//                                 <span className="font-medium text-black">{pollData.timeElapsed}</span>
-//                             </p>
-//                         </div>
-//                         <ViewPollComponent pollId={pollData.pollId} />
-//                     </div>
-
-//                     <div className="flex-1 bg-gray-50 rounded-xl p-4 shadow-inner flex justify-center items-center">
-//                         <ResponsiveContainer width="90%" height={200}>
-//                             <PieChart>
-//                                 <Pie
-//                                     data={chartData}
-//                                     dataKey="value"
-//                                     nameKey="name"
-//                                     cx="50%"
-//                                     cy="50%"
-//                                     outerRadius={50}
-//                                     fill="#8884d8"
-//                                     label
-//                                 >
-//                                     {chartData?.map((entry, index) => (
-//                                         <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-//                                     ))}
-//                                 </Pie>
-//                                 <Tooltip />
-//                             </PieChart>
-//                         </ResponsiveContainer>
-//                     </div>
-
-//                 </div>
-//                 <div className="bg-gray-50 p-6 rounded-xl shadow-inner">
-//                     <h2 className="text-xl  font-medium font-sans text-gray-800 mb-4">Options Breakdown</h2>
-//                     <ul className="list-disc ml-6 space-y-3">
-//                         {pollData?.options?.map((option, index) => (
-//                             <li key={index} className="text-gray-700 text-sm">
-//                                 <span className="font-medium text-black">{option.text}</span>:{" "}
-//                                 {option.votes} votes
-//                                 <span className="text-gray-500 ml-2">
-//                                     ({option.percentage.toFixed(2)}%)
-//                                 </span>
-//                             </li>
-//                         ))}
-//                     </ul>
-//                 </div>
-//             </div>
-//         </div>
-//     );
-
-// }
+}
diff --git a/src/components/navigation/LoggedInComponent.tsx b/src/components/navigation/LoggedInComponent.tsx
@@ -28,16 +28,31 @@ export default function LoggedInComponent() {
     }
     return <>
         <Link className="flex justify-center items-center" href="/">
-            <span className="text-black opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Home</span>
+            <span className="text-black text-xs sm:text-base md:text-base lg:text-base opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Home</span>
         </Link>
-        <Link className="flex justify-center items-center" href={"/polls/manage"}>
-            <span className="text-black opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Manage polls</span>
+
+
+        <Link className="justify-center items-center flex md:hidden lg:hidden" href={"/polls/manage"}>
+            <span className="text-black text-xs sm:text-base md:text-base lg:text-base opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Manage</span>
         </Link>
-        <Link className="flex justify-center items-center" href="/polls/new">
-            <span className="text-black opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Create poll</span>
+
+
+        <Link className="justify-center items-center flex md:hidden lg:hidden" href="/polls/new">
+            <span className="text-black text-xs sm:text-base md:text-base lg:text-base opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Create</span>
         </Link>
-        <Link href="#" onClick={handleLogOut} className="bg-[#B4FE3A] py-2 px-6 rounded-lg hover:-translate-y-1  hover:text-black focus:outline-none focus:ring-2 focus:ring-black transition" >
-            <span className="text-black opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Log out</span>
+
+
+        <Link className="lg:flex md:flex justify-center items-center hidden" href={"/polls/manage"}>
+            <span className="text-black text-xs sm:text-base md:text-base lg:text-base opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Manage polls</span>
+        </Link>
+
+
+        <Link className="lg:flex md:flex justify-center items-center hidden" href="/polls/new">
+            <span className="text-black text-xs sm:text-base md:text-base lg:text-base opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Create poll</span>
+        </Link>
+
+        <Link href="#" onClick={handleLogOut} className="bg-[#B4FE3A] py-1 px-3 lg:py-2 lg:px-6 rounded-lg hover:-translate-y-1 hover:text-black focus:outline-none focus:ring-2 focus:ring-black transition">
+            <span className="text-black text-xs sm:text-base md:text-base lg:text-base opacity-90 hover:opacity-100 transition-all hover:-translate-y-[3px]">Log out</span>
         </Link>
     </>
 };
diff --git a/src/components/navigation/NavigationBarComponent.tsx b/src/components/navigation/NavigationBarComponent.tsx
@@ -21,18 +21,18 @@ export default function NavigationBar() {
     return (
         <nav className="bg-white m-4 shadow-md rounded-2xl">
             <div className="max-w-7xl p-[15px] rounded-md mx-auto flex justify-between items-center">
-                <div className="text-black text-2xl font-semibold">
-                    <Link href="/">PulsePoll</Link>
+                <div className="text-black font-semibold">
+                    <Link className="lg:text-2xl md:text-xl text-sm" href="/">PulsePoll</Link>
                 </div>
-                <div className="flex space-x-6 items-center">
+                <div className="flex space-x-3 lg:space-x-6 md:space-x-6  items-center">
                     {username ?
                         <LoggedInComponent /> :
                         <>
-                            <Link className="text-center hover:-translate-y-[3px] text-black transition-all hover:text-black-200" href="/register">
+                            <Link className="text-center lg:text-base md:text-base text-xs hover:-translate-y-[3px] text-black transition-all hover:text-black-200" href="/register">
                                 Register
                             </Link>
                             <Link href="/login" className="bg-[#B4FE3A] transition-all py-2 px-6 rounded-lg hover:-translate-y-[3px]  hover:text-black focus:outline-none focus:ring-2 focus:ring-black" >
-                                <span className="text-black hover:text-black transition">Log in</span>
+                                <span className="text-black lg:text-base md:text-base text-xs hover:text-black transition">Log in</span>
                             </Link>
                         </>
                     }
