Merge pull request #42 from birongliu/dev

Dev
birongliu · Sep 16, 2024 · 7a9e239 · 7a9e239
2 parents c4c703c + bc77337
commit 7a9e239
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 23 deletions.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -5,7 +5,7 @@ import Header from "./ui/navigation/Header";
 import { ThemeContext } from "./ui/navigation/ThemeProvider";
 import { ClerkLoaded, ClerkProvider } from "@clerk/nextjs";
 import Footer from "./ui/navigation/Footer";
-import { cn } from "./utils/functions";
+import AnnouncementBanner from "./ui/shared/AnnouncementBanner";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -25,6 +25,7 @@ export default function RootLayout({
       <body className={inter.className}>
         <ThemeContext>
           <ClerkLoaded> 
+          {process.env.NEXT_PUBLIC_BETA === "true" && <AnnouncementBanner text="We are currently in beta. Please report any bugs "  />}
           <Header />
           {children}
           <Footer />

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -2,6 +2,7 @@ import Hero from "./ui/landing/Hero";
 import About from "./ui/landing/About";
 import Explore from "./ui/landing/Explore";
 import Team from "./ui/landing/Team";
+import AnnouncementBanner from "./ui/shared/AnnouncementBanner";
 
 export default function Home() {
   return (

diff --git a/frontend/src/app/ui/landing/About.tsx b/frontend/src/app/ui/landing/About.tsx
@@ -26,12 +26,12 @@ export default function About() {
   return (
     <section
       id="About"
-     className="flex items-center px-12 md:px-24 py-28 lg:hidden my-48 justify-center  bg-lightBeige">
+     className="flex items-center px-12 md:px-24 py-28 my-48 justify-center  bg-lightBeige">
       <div className="max-w-7xl w-full flex flex-col items-center ">
       <h1 className="text-4xl md:text-5xl font-bold font-poppins text-primary leading-tight">
       What is Petpals?
       </h1>
-      <p className="text-primary text-lg font-poppins pt-10">
+      <p className="text-primary text-lg font-poppins pt-10 text-center">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam
         velit, vulputate eu pharetra nec, mattis ac neque. Lorem ipsum dolor sit
         amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu

diff --git a/frontend/src/app/ui/landing/Explore.tsx b/frontend/src/app/ui/landing/Explore.tsx
@@ -3,19 +3,19 @@ import Arrow from "./components/Arrow";
 
 const images = [
   {
-    src: "/dog.png",
+    src: "/explore/dog.png",
     alt: "Happy dog",
   },
   {
-    src: "/rabbit.png",
+    src: "/explore/rabbit.png",
     alt: "Cute rabbit",
   },
   {
-    src: "/rat.png",
+    src: "/explore/rat.png",
     alt: "Curious hamster",
   },
   {
-    src: "/cat.png",
+    src: "/explore/cat.png",
     alt: "Fluffy cat",
   },
 ];

diff --git a/frontend/src/app/ui/landing/Hero.tsx b/frontend/src/app/ui/landing/Hero.tsx
@@ -18,7 +18,7 @@ export default function Hero() {
           <h1 className="text-3xl md:text-3xl font-bold font-poppins text-primary leading-tight">
             Adopt, Grow, and Build a Community—One Paw at a Time
           </h1>
-          <p className="text-primary text-lg font-poppins">
+          <p className="text-primary text-lg font-poppins text-left">
             Adopt, connect, and grow together at Petpals. We bring pet lovers
             together by creating a community where you can find your perfect
             companion and connect with others who share the same passion for

diff --git a/frontend/src/app/ui/landing/Team.tsx b/frontend/src/app/ui/landing/Team.tsx
@@ -40,12 +40,6 @@ const members: Member[] = [
   },
 ];
 
-type SocialKey = "linkedinUrl" | "githubUrl";
-
-type ISocial = {
-  [key in SocialKey]: (...args: any[]) => React.JSX.Element;
-};
-
 export default function Team() {
   return (
     <section

diff --git a/frontend/src/app/ui/navigation/Header.tsx b/frontend/src/app/ui/navigation/Header.tsx
@@ -20,7 +20,7 @@ export default function Header() {
 
   return (
     <div
-      className={`flex lg:justify-evenly justify-between items-center lg:mb-auto pt-2  ${
+      className={`flex lg:justify-evenly relative justify-between items-center lg:mb-auto pt-2  ${
         isOpen ? "mb-48" : ""
       }`}
     >
@@ -42,13 +42,13 @@ export default function Header() {
         />
       )}
       <ul
-        className={`items-center absolute gap-2 w-full lg:relative lg:justify-center lg:top-auto top-20 flex-col flex lg:w-auto ${
+        className={`items-center absolute gap-2 lg:mt-0 mt-5 w-full lg:relative lg:justify-center lg:top-auto top-20 flex-col flex lg:w-auto ${
           isOpen ? "block" : "hidden"
         } lg:flex lg:flex-row `}
       >
         {navigationItems.map((item, index) => (
           <li
-            className="w-full px-10 py-5 inset-0 z-10 cursor-pointer hover:bg-text-secondary lg:hover:bg-in"
+            className="w-full px-10 py-4  inset-0  z-10 cursor-pointer hover:bg-text-secondary lg:hover:bg-in"
             key={index}
           >
             <Link href={`#${item}`}>{item}</Link>
@@ -57,7 +57,7 @@ export default function Header() {
       </ul>
       <div className="flex justify-center items-center gap-1 px-5 lg:px-0">
         <SignedOut>
-          <Button className="bg-black text-white rounded-xl py-2 px-5">
+          <Button className="text-white rounded-xl py-2 px-5">
             <SignInButton />
           </Button>
         </SignedOut>

diff --git a/frontend/src/app/ui/navigation/icons/Close.tsx b/frontend/src/app/ui/navigation/icons/Close.tsx
@@ -1,12 +1,13 @@
+import { cn } from "@/app/utils/functions";
 import React from "react";
 
-export default function CloseIcon() {
+export default function CloseIcon({ className }: { className?: string }) {
   return (
     <svg
       height={43}
       width={50}
       viewBox="0 0 43 43"
-      className="stroke-black dark:stroke-slate-300"
+      className={cn("stroke-black dark:stroke-slate-300", className)}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

diff --git a/frontend/src/app/ui/shared/AnnouncementBanner.tsx b/frontend/src/app/ui/shared/AnnouncementBanner.tsx
@@ -0,0 +1,32 @@
+"use client";
+import React, { useState } from "react";
+import CloseIcon from "../navigation/icons/Close";
+import Button from "./Button";
+
+export default function AnnouncementBanner({ text }: { text: string }) {
+  const [open, setOpen] = useState(true);
+
+  function handleClick() {
+    setOpen((prev) => !prev);
+  }
+
+  return (
+    <div
+      className={`bg-lightBeige w-full z-30 py-3 flex shadow-md md:text-center items-center px-5  sticky top-0 ${
+        open ? "block" : "hidden"
+      }`}
+    >
+      <div className="flex items-center flex-col flex-1">
+        <p className="font-poppins text-primary text-center font-semibold">
+          Public Announcement: {text}
+        </p>
+        <a rel="noopener noreferrer" href="https://github.com/birongliu/CISC-4900/issues">
+          Link: https://github.com/birongliu/CISC-4900/issues
+        </a>
+      </div>
+      <Button onClick={handleClick} className="bg-transparent">
+        <CloseIcon className="w-6 h-6" />
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/src/app/ui/shared/Button.tsx b/frontend/src/app/ui/shared/Button.tsx
@@ -1,8 +1,13 @@
 import { cn } from '@/app/utils/functions'
-import React, { ReactNode } from 'react'
+import React, { ButtonHTMLAttributes, ReactNode } from 'react'
 
-export default function Button({ children, className }: { children: ReactNode, className?: string }) {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  className?: string;
+}
+
+export default function Button({ children, className, ...rest }: ButtonProps) {
   return (
-    <button className={cn('bg-darkMaroon rounded-xl p-3 text-button-primary', className)}>{children}</button>
+    <button {...rest} className={cn('bg-darkMaroon rounded-xl p-3 text-button-primary', className)}>{children}</button>
   )
 }