From 937ac8abae2d230badad2f9cc9667d950c7d2a8c Mon Sep 17 00:00:00 2001 From: birongliu Date: Mon, 16 Sep 2024 13:18:55 -0400 Subject: [PATCH 1/4] Refactor landing page components: Update styles for mobile view in About section --- frontend/src/app/ui/landing/About.tsx | 4 ++-- frontend/src/app/ui/landing/Explore.tsx | 8 ++++---- frontend/src/app/ui/landing/Hero.tsx | 2 +- frontend/src/app/ui/landing/Team.tsx | 6 ------ 4 files changed, 7 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/ui/landing/About.tsx b/frontend/src/app/ui/landing/About.tsx index 3ff5492..a99221c 100644 --- 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 (
+ className="flex items-center px-12 md:px-24 py-28 my-48 justify-center bg-lightBeige">

What is Petpals?

-

+

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 index 4825266..dfb2c02 100644 --- 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 index a4978a4..668b55c 100644 --- a/frontend/src/app/ui/landing/Hero.tsx +++ b/frontend/src/app/ui/landing/Hero.tsx @@ -18,7 +18,7 @@ export default function Hero() {

Adopt, Grow, and Build a Community—One Paw at a Time

-

+

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 index 7adcb73..445fde2 100644 --- 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 (

Date: Mon, 16 Sep 2024 16:03:19 -0400 Subject: [PATCH 2/4] Refactor landing page components: Add AnnouncementBanner component --- frontend/src/app/layout.tsx | 1 + frontend/src/app/page.tsx | 2 ++ frontend/src/app/ui/navigation/Header.tsx | 8 +++--- .../src/app/ui/navigation/icons/Close.tsx | 5 ++-- .../src/app/ui/shared/AnnouncementBanner.tsx | 27 +++++++++++++++++++ frontend/src/app/ui/shared/Button.tsx | 11 +++++--- 6 files changed, 45 insertions(+), 9 deletions(-) create mode 100644 frontend/src/app/ui/shared/AnnouncementBanner.tsx diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 71a2fca..5e7cd71 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -6,6 +6,7 @@ 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"] }); diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index e19e47b..7d51f3e 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -2,10 +2,12 @@ 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/navigation/Header.tsx b/frontend/src/app/ui/navigation/Header.tsx index d1f1c46..2a30fc6 100644 --- 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 (
@@ -42,13 +42,13 @@ export default function Header() { /> )}
    {navigationItems.map((item, index) => (
  • {item} @@ -57,7 +57,7 @@ export default function Header() {
- diff --git a/frontend/src/app/ui/navigation/icons/Close.tsx b/frontend/src/app/ui/navigation/icons/Close.tsx index 93cb28f..03b937c 100644 --- 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 ( !prev); + } + + return ( +
+

+ Public Announcement: We are currently in beta. Please report any bugs +

+ +
+ ); +} diff --git a/frontend/src/app/ui/shared/Button.tsx b/frontend/src/app/ui/shared/Button.tsx index 62b5844..6a155fb 100644 --- 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 { + children: ReactNode; + className?: string; +} + +export default function Button({ children, className, ...args }: ButtonProps) { return ( - + ) } From a0e2d5adc0bcad64f274d0c7047d1cf6b42f1ae5 Mon Sep 17 00:00:00 2001 From: birongliu Date: Mon, 16 Sep 2024 16:33:09 -0400 Subject: [PATCH 3/4] Refactor landing page components: Update AnnouncementBanner component and Button component --- .../src/app/ui/shared/AnnouncementBanner.tsx | 17 +++++++++++------ frontend/src/app/ui/shared/Button.tsx | 4 ++-- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/ui/shared/AnnouncementBanner.tsx b/frontend/src/app/ui/shared/AnnouncementBanner.tsx index e6c1450..385c93d 100644 --- a/frontend/src/app/ui/shared/AnnouncementBanner.tsx +++ b/frontend/src/app/ui/shared/AnnouncementBanner.tsx @@ -1,9 +1,9 @@ -"use client" +"use client"; import React, { useState } from "react"; import CloseIcon from "../navigation/icons/Close"; import Button from "./Button"; -export default function AnnouncementBanner() { +export default function AnnouncementBanner({ text }: { text: string }) { const [open, setOpen] = useState(true); function handleClick() { @@ -12,13 +12,18 @@ export default function AnnouncementBanner() { return (
-

- Public Announcement: We are currently in beta. Please report any bugs -

+
+

+ Public Announcement: {text} +

+ + Link: https://github.com/birongliu/CISC-4900/issues + +
diff --git a/frontend/src/app/ui/shared/Button.tsx b/frontend/src/app/ui/shared/Button.tsx index 6a155fb..7c2d409 100644 --- a/frontend/src/app/ui/shared/Button.tsx +++ b/frontend/src/app/ui/shared/Button.tsx @@ -6,8 +6,8 @@ interface ButtonProps extends ButtonHTMLAttributes { className?: string; } -export default function Button({ children, className, ...args }: ButtonProps) { +export default function Button({ children, className, ...rest }: ButtonProps) { return ( - + ) } From bc77337c7dd29c3de7f583802c70fa16290dfc04 Mon Sep 17 00:00:00 2001 From: birongliu Date: Mon, 16 Sep 2024 16:33:50 -0400 Subject: [PATCH 4/4] Refactor landing page components: Update AnnouncementBanner component and Button component --- frontend/src/app/layout.tsx | 2 +- frontend/src/app/page.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 5e7cd71..306d4d5 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -5,7 +5,6 @@ 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"] }); @@ -26,6 +25,7 @@ export default function RootLayout({ + {process.env.NEXT_PUBLIC_BETA === "true" && }
{children}