Adjust styling further

Draikth · Jul 26, 2024 · 7df28a7 · 7df28a7
1 parent 53eb476
commit 7df28a7
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 66 deletions.
diff --git a/app/(auth)/login/LoginForm.tsx b/app/(auth)/login/LoginForm.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -46,36 +47,49 @@ export default function LoginForm(props: Props) {
   }
 
   return (
-    <form onSubmit={async (event) => await handleLogin(event)}>
-      <label>
-        Email
-        <input
-          value={email}
-          onChange={(event) => setEmail(event.currentTarget.value)}
-        />
-      </label>
-      <label>
-        Password
-        <input
-          type="password"
-          value={password}
-          onChange={(event) => setPassword(event.currentTarget.value)}
-        />
-      </label>
-      <button>Login</button>
-      <br />
+    <>
       <div>
-        If you haven't yet, please{' '}
-        <span>
-          <Link href="/register">Register here</Link>
-        </span>
+        <h2>Log in to your profile with your Registered Email and Password.</h2>
       </div>
-
-      {errors.map((error) => (
-        <div className="error" key={`error-${error.message}`}>
-          <ErrorMessage>{error.message}</ErrorMessage>
+      <form onSubmit={async (event) => await handleLogin(event)}>
+        <label>
+          Email
+          <input
+            value={email}
+            onChange={(event) => setEmail(event.currentTarget.value)}
+          />
+        </label>
+        <label>
+          Password
+          <input
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.currentTarget.value)}
+          />
+        </label>
+        <button>Login</button>
+        <br />
+        <div>
+          If you haven't yet, please Register here:
+          <br />
+          <div>
+            <Link href="/register">
+              <Image
+                src="/images/registration.webp"
+                alt="Outdoor event with crowd"
+                width={120}
+                height={100}
+              />
+            </Link>
+          </div>
         </div>
-      ))}
-    </form>
+
+        {errors.map((error) => (
+          <div className="error" key={`error-${error.message}`}>
+            <ErrorMessage>{error.message}</ErrorMessage>
+          </div>
+        ))}
+      </form>
+    </>
   );
 }
diff --git a/app/(auth)/register/RegisterForm.tsx b/app/(auth)/register/RegisterForm.tsx
@@ -42,36 +42,43 @@ export default function RegisterForm() {
   }
 
   return (
-    <form onSubmit={async (event) => await handleRegister(event)}>
-      <label>
-        Username
-        <input
-          value={username}
-          onChange={(event) => setUsername(event.currentTarget.value)}
-        />
-      </label>
-      <label>
-        Email
-        <input
-          value={email}
-          onChange={(event) => setEmail(event.currentTarget.value)}
-        />
-      </label>
-      <label>
-        Password
-        <input
-          type="password"
-          value={password}
-          onChange={(event) => setPassword(event.currentTarget.value)}
-        />
-      </label>
-      <button>Register</button>
+    <>
+      <div>
+        <h2>
+          Please Register with us using a Username, an Email and a Password
+        </h2>
+      </div>
+      <form onSubmit={async (event) => await handleRegister(event)}>
+        <label>
+          Username
+          <input
+            value={username}
+            onChange={(event) => setUsername(event.currentTarget.value)}
+          />
+        </label>
+        <label>
+          Email
+          <input
+            value={email}
+            onChange={(event) => setEmail(event.currentTarget.value)}
+          />
+        </label>
+        <label>
+          Password
+          <input
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.currentTarget.value)}
+          />
+        </label>
+        <button>Register</button>
 
-      {errors.map((error) => (
-        <div className="error" key={`error-${error.message}`}>
-          <ErrorMessage>{error.message}</ErrorMessage>
-        </div>
-      ))}
-    </form>
+        {errors.map((error) => (
+          <div className="error" key={`error-${error.message}`}>
+            <ErrorMessage>{error.message}</ErrorMessage>
+          </div>
+        ))}
+      </form>
+    </>
   );
 }
diff --git a/app/events/[eventId]/page.tsx b/app/events/[eventId]/page.tsx
@@ -35,7 +35,7 @@ export default async function EventPage(props: Props) {
     <div className={styles.container}>
       <h1 className={styles.eventName}>{singleEvent.name}</h1>
       <div className={styles.eventCard}>
-        <img src={singleEvent.image} alt={singleEvent.name} />
+        {/* <img src={singleEvent.image} alt={singleEvent.name} /> */}
         <div className={styles.eventDetails}>
           <div className={styles.eventType}>{singleEvent.type}</div>
           <div className={styles.eventCategory}>{singleEvent.category}</div>

diff --git a/app/events/page.tsx b/app/events/page.tsx
@@ -20,7 +20,7 @@ export default async function EventsPage() {
             passHref
           >
             <div className={styles.eventCard}>
-              <img src={event.image} alt={event.name} />
+              {/* <img src={event.image} alt={event.name} /> */}
               <div className={styles.eventDetails}>
                 <div className={styles.eventName}>{event.name}</div>
                 <div className={styles.eventType}>{event.type}</div>

diff --git a/app/page.module.scss b/app/page.module.scss
@@ -1,7 +1,7 @@
 .homePage {
   width: 100%;
   min-height: 100vh;
-  padding: 1rem;
+  padding: 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -12,6 +12,44 @@
   }
 }
 
+.hgroupCentered {
+  text-align: center;
+}
+
+.imageTextContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem; // Adjust gap as needed
+  margin-top: 1rem;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+
+.imageTextContainer img {
+  max-width: 100%;
+  height: auto;
+}
+
+// .imageTextContainer {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   gap: 1rem; // Adjust gap as needed
+//   margin-top: 1rem;
+
+//   @media (max-width: 768px) {
+//     flex-direction: column;
+//   }
+// }
+
+// .imageTextContainer img {
+//   max-width: 100%;
+//   height: auto;
+// }
+
 // .homePage {
 //   width: 100%;
 //   min-height: 100vh;

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,19 +5,25 @@ export default function Home() {
   return (
     <div className={styles.homePage}>
       <main>
-        <hgroup>
+        <hgroup className={styles.hgroupCentered}>
           <h1>Welcome to the Event Network Project!</h1>
           <p>A place to find what might be happening around the city!</p>
         </hgroup>
-        <br />
-        <div>
+        <div className={styles.imageTextContainer}>
           <Image
             src="/images/outdoor-event.webp"
             alt="Outdoor event with crowd"
-            width={620}
-            height={620}
+            width={500}
+            height={500}
           />
         </div>
+        <div>
+          <p>
+            The Event Network Project aims to serve as a reference point for
+            finding out about events happening around the city, posted by our
+            registered users.
+          </p>
+        </div>
       </main>
     </div>
   );

diff --git a/public/images/registration.webp b/public/images/registration.webp