[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.

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

@@ -2,75 +2,37 @@
 @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;
 	flex-direction: column;
 	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,25 +52,43 @@
 	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) {
 	.CardContainer {
 		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;
 	}
 }

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,14 +88,15 @@ 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}
 									target="_blank"
 									rel="noopener noreferrer"
 								>
 									<Image
+										className={styles.titleLinkIcon}
 										src={openNewWindow}
 										width="20"
 										height="20"