From 236e1c33fc6257237eddd307bec5b8865708d178 Mon Sep 17 00:00:00 2001
From: Ian Dai <56898254+IanWearsHat@users.noreply.github.com>
Date: Wed, 30 Oct 2024 14:31:52 -0700
Subject: [PATCH] [Resources Page] Updated Island Buttons for Mobile (#199)

* update: mobile buttons updated to fit content

* chore: removed unused classes and comments

* update: aligned link icon for buttons

* Changed button text and svg colors to match figma. Also changed font weight for title.
---
 .../site/src/assets/icons/open-new-window.svg |  4 +-
 .../ResourceCard/ResourceCard.module.scss     | 84 +++++++------------
 .../components/ResourceCard/ResourceCard.tsx  |  5 +-
 3 files changed, 37 insertions(+), 56 deletions(-)

diff --git a/apps/site/src/assets/icons/open-new-window.svg b/apps/site/src/assets/icons/open-new-window.svg
index 86f13072..628604bb 100644
--- a/apps/site/src/assets/icons/open-new-window.svg
+++ b/apps/site/src/assets/icons/open-new-window.svg
@@ -1,4 +1,4 @@
 <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.1416 2H14.7611M21.1416 2L11.5708 11.7915M21.1416 2V8.52766" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M21.1416 12.8794V19.4071C21.1416 20.6088 20.1894 21.583 19.0147 21.583H4.12684C2.95222 21.583 2 20.6088 2 19.4071V4.17589C2 2.97418 2.95222 2 4.12684 2H10.5074" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M21.1416 2H14.7611M21.1416 2L11.5708 11.7915M21.1416 2V8.52766" stroke="#78638a" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.1416 12.8794V19.4071C21.1416 20.6088 20.1894 21.583 19.0147 21.583H4.12684C2.95222 21.583 2 20.6088 2 19.4071V4.17589C2 2.97418 2.95222 2 4.12684 2H10.5074" stroke="#78638a" stroke-width="3.5" stroke-linecap="round"/>
 </svg>
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
index babc1129..0845cc6c 100644
--- a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
+++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
@@ -2,25 +2,11 @@
 @use "bootstrap-utils" as utils;
 
 .group {
-	margin-top: 50px;
 	position: relative;
 	padding: 1rem 0;
 	width: 200px;
 }
 
-.tape {
-	background-image: url("~@/assets/images/tape.svg");
-	width: 238px;
-	height: 60px;
-	position: absolute;
-	top: 3%;
-	left: 15%;
-	z-index: 10;
-	@media screen and (max-width: 400px) {
-		left: 10%;
-	}
-}
-
 .container {
 	position: relative;
 	display: flex;
@@ -28,49 +14,25 @@
 	justify-content: center;
 	align-items: center;
 	gap: 10px;
-	height: 450px;
+}
+
+.buttonImage {
+	width: 50px;
 }
 
 .titleLink {
 	font-family: inherit;
 	text-decoration: none;
 	color: inherit;
+	font-weight: 600;
+	color: theme.$lighter-black;
 	:link {
 		text-decoration: none;
 	}
 }
 
-.tag {
-	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: theme.$black;
-	text-decoration: none;
-	font-weight: bold;
-
-	&:hover,
-	&:focus {
-		transform: translateX(-5px) translateZ(0);
-		filter: drop-shadow(1px 0px 0px black) drop-shadow(-2px 0px 0px black)
-			drop-shadow(0px 2px 0px black) drop-shadow(0px -2px 0px black);
-	}
-}
-
-.text {
-	width: 90%;
-	text-align: center;
-	font-family: utils.$font-family-base;
+.titleLinkIcon {
+	margin-bottom: 0.2rem;
 }
 
 .islandBackground {
@@ -90,8 +52,26 @@
 	min-width: 350px;
 }
 
-.description {
-	overflow: auto;
+.description > * {
+	margin: 0;
+	font-size: 1.05rem;
+	color: theme.$lighter-black;
+}
+
+@include utils.media-breakpoint-up(md) {
+	.container {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 10px;
+		height: 450px;
+	}
+
+	.buttonImage {
+		width: 100px;
+	}
 }
 
 @include utils.media-breakpoint-up(sm) {
@@ -99,16 +79,16 @@
 		width: 500px;
 		min-width: 500px;
 	}
+
 	.islandBackground {
 		width: 500px;
 	}
+
 	.group {
 		width: 300px;
 	}
-}
 
-@include utils.media-breakpoint-down(sm) {
-	.description {
-		max-height: 100px;
+	.description > * {
+		font-size: 24px;
 	}
 }
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
index d5903f06..0085d02e 100644
--- a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
+++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
@@ -69,7 +69,7 @@ export default function ResourceCard({
 							<motion.img
 								src={stickerSrc}
 								alt="Resource logo"
-								width="100"
+								className={styles.buttonImage}
 								variants={variant}
 							/>
 						)}
@@ -88,7 +88,7 @@ export default function ResourceCard({
 							)}{" "}
 							{links.map(({ text, link }) => (
 								<motion.a
-									className="d-inline ms-1 vertical-align-middle"
+									className={"d-inline ms-1 vertical-align-middle"}
 									variants={variant}
 									key={link}
 									href={link}
@@ -96,6 +96,7 @@ export default function ResourceCard({
 									rel="noopener noreferrer"
 								>
 									<Image
+										className={styles.titleLinkIcon}
 										src={openNewWindow}
 										width="20"
 										height="20"