Merge pull request #26 from No-Country-simulation/frontend-fixes

fix(frontend): 💄 update description in photo details, and minor style fixes
No-Country-simulation · Sep 16, 2024 · bf5cd15 · bf5cd15
2 parents cb3c255 + 652418c
commit bf5cd15
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 15 deletions.
diff --git a/frontend/public/logo.svg b/frontend/public/logo.svg
diff --git a/frontend/public/logo.webp b/frontend/public/logo.webp
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -5,8 +5,8 @@ import "./globals.css";
 const inter = Poppins({ subsets: ["latin"], weight: ["300", "600"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Oh My Trip",
+  description: "Red Social por y para Viajeros",
 };
 
 export default function RootLayout({
@@ -17,7 +17,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <main className="max-w-[1000px] mx-auto">
+        <main className="max-w-[1000px] mx-auto text-TextPrimary">
           {children}
         </main>
       </body>

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,7 +1,7 @@
 import { CardFeed, SwiperUsers } from "@/components"
 import { AlbumFromFetch } from "@/interfaces/album"
 import { User } from "@/interfaces/user"
-import logo from "/public/logo.webp"
+import logo from "/public/logo.svg"
 import { Footer } from "@/ui"
 import { Suspense } from "react"
 import Image from "next/image"
@@ -25,9 +25,9 @@ export default async function Home() {
     // </main>
 
     <>
-      <div className="py-8 px-2">
-        <figure>
-          <Image src={logo} alt="" className="mx-auto py-6 h-[90px] w-auto" />
+      <div className="pb-8 px-2">
+        <figure className="w-full border-b">
+          <Image src={logo} alt="oh my trip logo" className="mx-auto h-8 w-48 my-6" />
         </figure>
         <Suspense fallback={<span>Cargando usuarios</span>}>
           <SwiperUsers users={userResults} />

diff --git a/frontend/src/app/photo/[id]/page.tsx b/frontend/src/app/photo/[id]/page.tsx
@@ -1,19 +1,26 @@
 import { getAlbumById } from "@/actions/albumActions";
 import { BackArrow, SwiperImages } from "@/components";
+import ReadOnlyEditor from "@/components/LexicalEditor/ReadOnly";
 import { AlbumFromFetch } from "@/interfaces/album";
 
 export default async function PhotoPage({ params }: { params: { id: string } }) {
 
     const album: AlbumFromFetch = await getAlbumById(params.id)
 
     return (
-        <div className="min-h-screen pt-8 ">
-            <div className="absolute inset-0 bg-black opacity-70" />
+        <div className="min-h-screen pt-8 bg-black/70">
+            <div className="absolute inset-0" />
             <BackArrow className="text-white relative z-50" />
 
             <div className="mt-10 relative z-50">
                 <SwiperImages images={album.photos} />
-                <p className="text-white mt-4 line-clamp-3 px-4">{album.description}</p>
+                <div className="text-white mt-4 line-clamp-3 px-4">
+                    {
+                        album.description.includes('"root":')
+                            ? <ReadOnlyEditor feed={false} savedContent={album.description} />
+                            : <p>{album.description}</p>
+                    }
+                </div>
             </div>
         </div>
     );

diff --git a/frontend/src/components/Cards/CardFeed.tsx b/frontend/src/components/Cards/CardFeed.tsx
@@ -42,8 +42,8 @@ export async function CardFeed({ album }: { album: AlbumFromFetch }) {
                 <AVisitar album={album} />
             </div>
 
-            <div className="flex flex-wrap px-10">
-                <Link href={'/perfil/' + album.userId}><strong>{album.userId}:</strong></Link>
+            <div className="flex flex-wrap px-4">
+                <Link href={'/perfil/' + album.userId} className="font-bold underline">{user?.username}:</Link>
                 {
                     album.description.includes('"root":')
                         ? <ReadOnlyEditor feed savedContent={album.description} />

diff --git a/frontend/src/components/swiper/SwiperUsers.tsx b/frontend/src/components/swiper/SwiperUsers.tsx
@@ -24,7 +24,7 @@ export function SwiperUsers({ users }: { users: User[] }) {
                     <SwiperSlide key={i} style={{ "display": "flex", "flexDirection": "column", "alignItems": "start", "minWidth": "80px", "overflow": "hidden" } as React.CSSProperties}>
                         <Link href={'/perfil/' + user._id}>
                             <Image src={user.imageUrl || imageAvatar} alt="foto" width={400} height={400} className="rounded-full object-cover size-20" />
-                            <h2 className="text-center flex-col truncate">{user.username}</h2>
+                            <h2 className="text-center flex-col truncate text-TextPrimary font-semibold">{user.username}</h2>
                         </Link>
                     </SwiperSlide>
                 ))

diff --git a/frontend/src/ui/perfil/TopMenu.tsx b/frontend/src/ui/perfil/TopMenu.tsx
@@ -10,11 +10,11 @@ export default function TopMenu({ id }: { id: string }) {
 
 
     return (
-        <div className="flex justify-between bg-[#D9D9D9] pt-10 pb-2 px-2 text-[#979797]">
+        <div className="flex justify-between bg-FondoPrimary pt-10 pb-2 px-2 text-white">
             <Link href={'/'}>
                 <BackArrow />
             </Link>
-            <h1 className=" font-bold text-xl text-black">
+            <h1 className=" font-bold text-xl">
                 {
                     token === id ? "Mi Perfil" : "Perfil"
                 }