From af31ce6bf8be303fa3fa88f371c0cf745b6f8161 Mon Sep 17 00:00:00 2001
From: Ethan Bickel <notethanbickel@gmail.com>
Date: Fri, 26 Apr 2024 20:42:05 -0500
Subject: [PATCH] remove like button & add wide Wave

---
 src/app/directory/[id]/page.tsx  | 10 --------
 src/components/ClubDocuments.tsx | 43 --------------------------------
 src/components/DirectoryOrgs.tsx |  6 -----
 src/components/LikeButton.tsx    | 22 ----------------
 src/components/OrgHeader.tsx     | 15 +++++------
 5 files changed, 6 insertions(+), 90 deletions(-)
 delete mode 100644 src/components/ClubDocuments.tsx
 delete mode 100644 src/components/LikeButton.tsx

diff --git a/src/app/directory/[id]/page.tsx b/src/app/directory/[id]/page.tsx
index e603e5e9..51de93ad 100644
--- a/src/app/directory/[id]/page.tsx
+++ b/src/app/directory/[id]/page.tsx
@@ -1,10 +1,8 @@
-import ClubDocuments from '@src/components/ClubDocuments';
 import Header from '@src/components/BaseHeader';
 import OrgHeader from '@src/components/OrgHeader';
 import OrgInfoSegment from '@src/components/OrgInfoSegment';
 import OrgUpcomingEvents from '@src/components/OrgUpcomingEvents';
 import { api } from '@src/trpc/server';
-import { PlusIcon } from '@src/icons/Icons';
 import { db } from '@src/server/db';
 import { eq } from 'drizzle-orm';
 import { type Metadata } from 'next';
@@ -21,14 +19,6 @@ const OrganizationPage = async ({ params }: { params: { id: string } }) => {
         <OrgHeader club={club} />
         <OrgInfoSegment club={club} />
         <OrgUpcomingEvents clubId={club.id} />
-        <ClubDocuments />
-        <div className="flex h-full w-full flex-row items-center justify-between rounded-lg bg-blue-100 px-14 py-7">
-          <div className="text-lg font-bold text-blue-primary">Promo text</div>
-          <button className="flex w-fit flex-row items-center justify-center rounded-3xl bg-blue-primary py-2.5 pl-5 pr-6 text-center text-xs font-extrabold text-white transition-colors hover:bg-blue-700">
-            <PlusIcon />
-            <div>Apply</div>
-          </button>
-        </div>
       </div>
     </main>
   );
diff --git a/src/components/ClubDocuments.tsx b/src/components/ClubDocuments.tsx
deleted file mode 100644
index e2c53a24..00000000
--- a/src/components/ClubDocuments.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { type FC } from 'react';
-
-const ClubDocuments: FC = () => {
-  return (
-    <div className=" rounded-lg bg-slate-100 p-10">
-      <h1 className="mt-5 text-2xl font-medium">Club Documents</h1>
-      <p className="text-md mt-5 font-thin">
-        Here you can find all the documents related to this club. You can view
-        them or download them.
-      </p>
-      <div className="mt-5 flex flex-col gap-5 md:grid md:grid-cols-2">
-        {[
-          'Constitution',
-          'Agreement',
-          'Voting',
-          'Random1',
-          'Random2',
-          'Random3',
-        ].map((documentName) => (
-          <Document key={documentName} name={documentName} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const Document: FC<{ name: string }> = ({ name }) => {
-  return (
-    <div className="mt-5 flex flex-row items-center rounded-lg bg-slate-200 p-7">
-      {/* Document Icon empty div for now*/}
-      <div className="flex flex-col items-center md:flex-row">
-        <h1 className="text-xs font-medium">{name}</h1>
-      </div>
-      <div className="ml-auto flex flex-col items-start justify-center">
-        <button className="rounded-full bg-blue-primary bg-opacity-10 px-3 py-1 text-xs font-semibold text-blue-primary transition-colors hover:bg-blue-300 hover:bg-opacity-40 hover:text-blue-700">
-          View
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default ClubDocuments;
diff --git a/src/components/DirectoryOrgs.tsx b/src/components/DirectoryOrgs.tsx
index 3d96c939..882b0410 100644
--- a/src/components/DirectoryOrgs.tsx
+++ b/src/components/DirectoryOrgs.tsx
@@ -2,7 +2,6 @@ import { type FC } from 'react';
 import Image from 'next/image';
 import type { SelectClub as Club } from '@src/server/db/models';
 import JoinButton from './JoinButton';
-import LikeButton from './LikeButton';
 import Link from 'next/link';
 import { type Session } from 'next-auth';
 
@@ -25,11 +24,6 @@ const OrgDirectoryCards: FC<Props> = ({ club, session, priority }) => {
           priority={priority}
           className="select-none object-cover"
         />
-        <div className="absolute left-2 right-2 top-2 flex h-fit flex-row items-center space-x-2">
-          <button className="ml-auto rounded-full bg-black bg-opacity-50 p-1.5 font-bold text-white transition-colors">
-            <LikeButton />
-          </button>
-        </div>
       </div>
       <div className="flex flex-col space-y-2 p-6">
         <h1 className="line-clamp-1 text-2xl font-medium text-slate-800 md:text-xl">
diff --git a/src/components/LikeButton.tsx b/src/components/LikeButton.tsx
deleted file mode 100644
index e2ee3e2d..00000000
--- a/src/components/LikeButton.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client';
-import { useState } from 'react';
-import { HeartIcon, HeartOutline } from '../icons/Icons';
-
-const LikeButton = () => {
-  const [liked, setLiked] = useState(false);
-  return (
-    <div
-      className="h-7 w-7"
-      onClick={() => {
-        setLiked(!liked);
-      }}
-    >
-      {liked ? (
-        <HeartIcon fill="fill-red-600" />
-      ) : (
-        <HeartOutline fill="fill-white" />
-      )}
-    </div>
-  );
-};
-export default LikeButton;
diff --git a/src/components/OrgHeader.tsx b/src/components/OrgHeader.tsx
index aa3cb227..4b17dcb0 100644
--- a/src/components/OrgHeader.tsx
+++ b/src/components/OrgHeader.tsx
@@ -6,7 +6,6 @@ import type {
 } from '@src/server/db/models';
 import JoinButton from './JoinButton';
 import { getServerAuthSession } from '@src/server/auth';
-import LikeButton from './LikeButton';
 import Link from 'next/link';
 import { api } from '@src/trpc/server';
 
@@ -21,10 +20,14 @@ const OrgHeader = async ({ club }: { club: Club }) => {
     <div className="relative">
       <div className="h-full w-full">
         <Image
-          src={club.image}
+          src={'/images/wideWave.jpg'}
           alt="Picture of the club"
-          width={400}
+          style={{
+            width: '100%',
+            height: 'auto',
+          }}
           height={150}
+          width={450}
           className="rounded-lg object-cover"
           priority
         />
@@ -70,12 +73,6 @@ const OrgHeader = async ({ club }: { club: Club }) => {
                   clubID={club.id}
                   isJoined={memberType !== undefined}
                 />
-                <button
-                  className="rounded-full bg-blue-primary p-2.5 transition-colors hover:bg-blue-700"
-                  type="button"
-                >
-                  <LikeButton />
-                </button>
               </>
             )}
             <ContactButtons contacts={club.contacts || []} />