UI Update

src/app/(app)/guide/Info.tsx

@@ -5,7 +5,7 @@ import React from "react";
 const InfoContent = () => {
 
     return (
-        <div className="px-6 py-10 max-w-full lg:max-w-1/2 mx-auto font-sans text-neutral-100">
+        <div>
             <h1 className="text-3xl dark:text-3xl font-bold mb-4">
                 Beverage Consumption Info!
             </h1>

src/app/(app)/guide/PointGuide.tsx

@@ -56,7 +56,7 @@ const tableData = [
 const PointGuide = () => {
 
     return (
-		<div className="px-6 py-10 max-w-full lg:max-w-3/4 mx-auto font-sans text-neutral-100">
+		<div>
 			<h1 className="text-2xl sm:text-3xl font-bold mb-4 text-white">
   				Points Guide
 			</h1>

src/app/(app)/guide/page.tsx

@@ -9,6 +9,7 @@ export default function InfoPage() {
 
     return (
         <div className="px-6 py-10 max-w-full lg:max-w-3/4 mx-auto font-sans text-neutral-100">
+            <img src="/drinkhappylogo.png" alt="Drink Happy Logo Image" className="h-auto my-4 mx-auto w-3/4 lg:w-1/3" />
             <div className="flex justify-center gap-4 mb-6">
                 <button
                     className={`px-4 py-2 rounded ${

src/app/(app)/layout.tsx

@@ -13,8 +13,7 @@ export default function RootLayout({
 	return (
 		<main className="max-h-screen max-w-screen bg-img overflow-hidden" suppressHydrationWarning={true}>
 			{!isMobile && !isSafari ? <NavBar /> : null}
-			<section className="space-x-2 gap-4 flex flex-col overflow-y-auto h-screen p-4 lg:p-6 lg:rounded-xl lg:shadow-sm">
+			<section className="space-x-2 gap-4 flex flex-col overflow-y-auto h-screen p-4 lg:p-6 lg:rounded-xl lg:shadow-sm mb-2">
-				<img src="/drinkhappylogo.png" alt="Drink Happy Logo Image" className="h-auto mx-auto w-3/4 lg:w-1/3" />
 				{children}
 			</section>
 			{isMobile && isSafari ? (

src/app/(app)/page.tsx

@@ -7,6 +7,11 @@ function Mobile() {
 
 	return (
 		<main className="flex flex-col gap-[32px] row-start-2 items-center mt-10 text-white">
+			<img
+				src="/drinkhappylogo.png"
+				alt="Drink Happy Logo Image"
+				className="h-auto mx-auto my-auto w-3/4 lg:w-1/3"
+			/>
 			<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
 				{isAuthenticated ? `Welcome, ${session.username} !!` : ""}
 			</h1>
@@ -35,6 +40,11 @@ function Web() {
 
 	return (
 		<main className="flex flex-col row-start-2 items-center mt-10">
+			<img
+				src="/drinkhappylogo.png"
+				alt="Drink Happy Logo Image"
+				className="h-auto mx-auto w-3/4 lg:w-1/3"
+			/>
 			<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left text-white">
 				{isAuthenticated ? `Welcome, ${session.username} !!` : ""}
 			</h1>

src/app/(app)/profile/page.tsx

@@ -7,25 +7,19 @@ export default function ProfilePage() {
 	const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 	const [uploadMessage, setUploadMessage] = useState<string>("");
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files && event.target.files[0]) {
-      const file = event.target.files[0];
-      setSelectedFile(file);
-      setPreviewUrl(URL.createObjectURL(file)); // Generate a preview URL for the image
-    }
-  };
-
 	return (
 		<main className="flex flex-col items-center mt-10">
 			<h1 className="text-3xl font-bold mb-6">Profile Picture</h1>
 			<div className="flex flex-col items-center gap-4">
-        {(
+				{
 					<img
 						alt="Profile Preview"
 						className="w-32 h-32 rounded-full object-cover border border-gray-300"
 					/>
+				}
+				{uploadMessage && (
+					<p className="text-sm text-gray-600">{uploadMessage}</p>
 				)}
-        {uploadMessage && <p className="text-sm text-gray-600">{uploadMessage}</p>}
 			</div>
 		</main>
 	);

src/app/api/index.ts

@@ -1,34 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next';
-import formidable from 'formidable';
-import fs from 'fs';
-
-export const config = {
-  api: {
-    bodyParser: false, // Disable Next.js body parser to handle form data
-  },
-};
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === 'POST') {
-    const form = new formidable.IncomingForm();
-
-    form.parse(req, (err, fields, files) => {
-      if (err) {
-        console.error('Error parsing form data:', err);
-        return res.status(500).json({ error: 'Failed to process form data' });
-      }
-
-      // Access the uploaded file
-      const file = files.image;
-      if (file) {
-        console.log('Uploaded file:', file);
-        return res.status(200).json({ message: 'Image received successfully', file });
-      } else {
-        return res.status(400).json({ error: 'No image file uploaded' });
-      }
-    });
-  } else {
-    res.setHeader('Allow', ['POST']);
-    res.status(405).end(`Method ${req.method} Not Allowed`);
-  }
-}

src/components/PostRequestComponent.tsx

@@ -1,35 +0,0 @@
-import React, { useState } from 'react';
-
-const PostRequestComponent: React.FC = () => {
-  const [responseMessage, setResponseMessage] = useState<string>('');
-
-  const handlePostRequest = async () => {
-    try {
-      const response = await fetch('/api', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ data: 'Sample data' }),
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setResponseMessage(data.message);
-      } else {
-        setResponseMessage(`Error: ${response.status}`);
-      }
-    } catch (error) {
-      setResponseMessage('An error occurred while making the request.');
-    }
-  };
-
-  return (
-    <div>
-      <button onClick={handlePostRequest}>Make POST Request</button>
-      <p>Response: {responseMessage}</p>
-    </div>
-  );
-};
-
-export default PostRequestComponent;