Fix frontend issues on resources page

apps/site/src/views/Resources/components/ApiGroup/ApiGroup.module.scss → apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss

@@ -1,8 +1,8 @@
 .group {
 	margin-top: 50px;
 	width: 344px;
-	height: 500px;
 	position: relative;
+	padding: 1rem 0;
 	box-shadow: 0 6px 5px -2px rgba(gray, 0.5);
 }
 
@@ -11,7 +11,7 @@
 	width: 238px;
 	height: 60px;
 	position: absolute;
-	top: -5%;
+	top: -12.5%;
 }
 
 .container {
@@ -21,18 +21,28 @@
 	justify-content: center;
 	align-items: center;
 	gap: 10px;
-	height: 450px;
+	height: 350px;
 }
 
 .tag {
-	position: absolute;
-	left: -5%;
-	bottom: 5%;
+	background-image: url("~@/assets/images/resource-link.svg");
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+	background-position: left;
+	display: inline-block;
+	padding: 1rem;
+	padding-right: 3rem;
+	margin-left: -6px;
+	margin-bottom: 0.5rem;
 	transition:
 		filter 0.13s ease,
 		transform 0.13s ease,
 		filter 0.13s ease;
 
+	color: black;
+	text-decoration: none;
+	font-weight: bold;
+
 	&:hover {
 		transform: translateX(-5px);
 		filter: drop-shadow(1px 0px 0px black) drop-shadow(-2px 0px 0px black)

apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx

@@ -0,0 +1,63 @@
+import Image from "next/image";
+
+import openNewWindow from "@/assets/icons/open-new-window.svg";
+import styles from "./ResourceCard.module.scss";
+
+type Tag = {
+	text: string;
+	link: string;
+};
+
+interface ResourceCardProps {
+	title: string;
+	description: JSX.Element;
+	stickerSrc?: string;
+	links: Tag[];
+	stickyNoteColor: string;
+}
+
+export default function ResourceCard({
+	title,
+	description,
+	stickerSrc,
+	links,
+	stickyNoteColor,
+}: ResourceCardProps) {
+	return (
+		<div
+			className={styles.group}
+			style={{
+				backgroundColor: `${stickyNoteColor}`,
+			}}
+		>
+			<div className={styles.container + " text-center px-3"}>
+				<div className={styles.tape}></div>
+				{stickerSrc ? (
+					<img src={stickerSrc} alt="Resource logo" width="100" />
+				) : null}
+				<h3>{title}</h3>
+				{description}
+			</div>
+
+			{links.map(({ text, link }) => (
+				<a
+					key={link}
+					href={link}
+					target="_blank"
+					rel="noopener noreferrer"
+					className={styles.tag}
+				>
+					{text}
+					<div className="d-inline ms-1 vertical-align-middle">
+						<Image
+							src={openNewWindow}
+							width="20"
+							height="20"
+							alt="Open link in new window"
+						/>
+					</div>
+				</a>
+			))}
+		</div>
+	);
+}

apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx

@@ -3,7 +3,7 @@ import imageUrlBuilder from "@sanity/image-url";
 
 import styles from "./ApiResources.module.scss";
 
-import { ApiGroup } from "../../components/ApiGroup/ApiGroup";
+import ResourceCard from "../../components/ResourceCard/ResourceCard";
 import { getResources } from "../../getResources";
 import { client } from "@/lib/sanity/client";
 
@@ -27,11 +27,11 @@ async function ApiResources() {
 				{resources.map(
 					({ _id, title, description, link, logo, stickyNoteColor }) => (
 						<div className={styles.column + " col"} key={_id}>
-							<ApiGroup
+							<ResourceCard
 								title={title}
 								description={<PortableText value={description} />}
 								stickerSrc={imageUrlBuilder(client).image(logo).url()}
-								tagLink={link}
+								links={[{ text: "API Reference", link: link }]}
 								stickyNoteColor={stickyNoteColor.hex}
 							/>
 						</div>

apps/site/src/views/Resources/sections/ApiResources/config.ts

@@ -1,15 +1,13 @@
 import google_cloud_sticker from "@/assets/icons/google-cloud-logo.png";
 import twitter_sticker from "@/assets/icons/twitter-logo.png";
 import spotify_sticker from "@/assets/icons/spotify-logo.png";
-import api_tag from "@/assets/images/api-reference-tag.png";
 
 const ApiResourcesList = [
 	{
 		title: "Google Cloud API",
 		description:
 			"API that allows users to access Google services such as storage access and machine-learning",
 		stickerSrc: google_cloud_sticker.src,
-		tagSrc: api_tag.src,
 		tagLink: "https://hack.ics.uci.edu/",
 		stickyNoteColor: "#FFFFA9",
 	},
@@ -18,7 +16,6 @@ const ApiResourcesList = [
 		description:
 			"API that retrieves data on tweets, direct messages, trends, users, and many more of Twitter's features",
 		stickerSrc: twitter_sticker.src,
-		tagSrc: api_tag.src,
 		tagLink: "https://hack.ics.uci.edu/",
 		stickyNoteColor: "#DFFFFD",
 	},
@@ -27,7 +24,6 @@ const ApiResourcesList = [
 		description:
 			"API that retrieves data on Spotify music, playlists, artists, users for your software applications",
 		stickerSrc: spotify_sticker.src,
-		tagSrc: api_tag.src,
 		tagLink: "https://hack.ics.uci.edu/",
 		stickyNoteColor: "#D8FFA6",
 	},