diff --git a/apps/site/src/assets/icons/open-new-window.svg b/apps/site/src/assets/icons/open-new-window.svg new file mode 100644 index 00000000..86f13072 --- /dev/null +++ b/apps/site/src/assets/icons/open-new-window.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/site/src/assets/images/api-reference-tag.png b/apps/site/src/assets/images/api-reference-tag.png deleted file mode 100644 index 0cf6b136..00000000 Binary files a/apps/site/src/assets/images/api-reference-tag.png and /dev/null differ diff --git a/apps/site/src/assets/images/clear_tape_left.svg b/apps/site/src/assets/images/clear_tape_left.svg deleted file mode 100644 index c0334c9a..00000000 --- a/apps/site/src/assets/images/clear_tape_left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/site/src/assets/images/clear_tape_right.svg b/apps/site/src/assets/images/clear_tape_right.svg deleted file mode 100644 index 7d90ba0f..00000000 --- a/apps/site/src/assets/images/clear_tape_right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/site/src/assets/images/flask_documentation_button.png b/apps/site/src/assets/images/flask_documentation_button.png deleted file mode 100644 index cbb0585d..00000000 Binary files a/apps/site/src/assets/images/flask_documentation_button.png and /dev/null differ diff --git a/apps/site/src/assets/images/flask_project_button.png b/apps/site/src/assets/images/flask_project_button.png deleted file mode 100644 index f7047c30..00000000 Binary files a/apps/site/src/assets/images/flask_project_button.png and /dev/null differ diff --git a/apps/site/src/assets/images/flask_tutorial_button.png b/apps/site/src/assets/images/flask_tutorial_button.png deleted file mode 100644 index 4ede6a11..00000000 Binary files a/apps/site/src/assets/images/flask_tutorial_button.png and /dev/null differ diff --git a/apps/site/src/assets/images/resource-link.svg b/apps/site/src/assets/images/resource-link.svg new file mode 100644 index 00000000..4e9ca6d4 --- /dev/null +++ b/apps/site/src/assets/images/resource-link.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/assets/images/tape.png b/apps/site/src/assets/images/tape.png deleted file mode 100644 index c309f384..00000000 Binary files a/apps/site/src/assets/images/tape.png and /dev/null differ diff --git a/apps/site/src/assets/index_cards/backend-description-card.svg b/apps/site/src/assets/index_cards/backend-description-card.svg index d9142554..2f9f8964 100644 --- a/apps/site/src/assets/index_cards/backend-description-card.svg +++ b/apps/site/src/assets/index_cards/backend-description-card.svg @@ -1,4 +1,4 @@ - + diff --git a/apps/site/src/views/Resources/components/ApiGroup/ApiGroup.tsx b/apps/site/src/views/Resources/components/ApiGroup/ApiGroup.tsx deleted file mode 100644 index a346e107..00000000 --- a/apps/site/src/views/Resources/components/ApiGroup/ApiGroup.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import styles from "./ApiGroup.module.scss"; - -export interface APIGroupProps { - title: string; - description: JSX.Element; - stickerSrc: string; - tagLink: string; - stickyNoteColor: string; -} - -export function ApiGroup({ - title, - description, - stickerSrc, - tagLink, - stickyNoteColor, -}: APIGroupProps) { - return ( -
-
-
- -

{title}

-
{description}
-
-
- ); -} diff --git a/apps/site/src/views/Resources/components/BackendGroup/BackendGroup.module.scss b/apps/site/src/views/Resources/components/BackendGroup/BackendGroup.module.scss deleted file mode 100644 index 7fb98b84..00000000 --- a/apps/site/src/views/Resources/components/BackendGroup/BackendGroup.module.scss +++ /dev/null @@ -1,79 +0,0 @@ -@use "bootstrap-utils" as utils; - -.wrapper { - width: 495px; - height: 510px; - position: relative; - margin-top: 50px; - box-shadow: 0 6px 5px -2px rgba(gray, 0.5); -} - -.text_flexbox { - position: absolute; - top: 8%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; -} - -.description { - width: 90%; - font-size: 23px; -} - -.tag { - width: 100%; - transition: - filter 0.13s ease, - transform 0.13s ease, - filter 0.13s ease; - - &:hover { - transform: translateX(-5px); - filter: drop-shadow(1px 0px 0px black) drop-shadow(-1px 0px 0px black) - drop-shadow(0px 1px 0px black) drop-shadow(0px -2px 0px black); - } -} - -.tag_flexbox { - position: absolute; - bottom: 5%; - left: -3%; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-end; -} - -.tape { - position: absolute; - width: 60%; -} - -.left_tape { - @extend .tape; - top: -10%; - left: -10%; -} - -.right_tape { - @extend .tape; - top: -10%; - right: -10%; -} - -@include utils.media-breakpoint-down(md) { - .description { - font-size: 20px; - } - - .left_tape { - top: -6%; - } - // adjustments to prevent right tape from extending beyond page in mobile view - .right_tape { - top: -6%; - right: -2%; - } -} diff --git a/apps/site/src/views/Resources/components/BackendGroup/BackendGroup.tsx b/apps/site/src/views/Resources/components/BackendGroup/BackendGroup.tsx deleted file mode 100644 index 7e328cbc..00000000 --- a/apps/site/src/views/Resources/components/BackendGroup/BackendGroup.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Link from "next/link"; - -import styles from "./BackendGroup.module.scss"; -import Clear_Tape_Left from "@/assets/images/clear_tape_left.svg"; -import Clear_Tape_Right from "@/assets/images/clear_tape_right.svg"; - -export interface tag { - link: string; - text: string; - className?: string; -} - -export interface BackendGroupProps { - stickyNoteColor: string; - title: string; - description: JSX.Element; - tags: tag[]; - tapeOrientation: string; - className?: string | undefined; -} - -export function BackendGroup({ - stickyNoteColor, - title, - description, - tags, - tapeOrientation, - className, -}: BackendGroupProps) { - let tapePosition; - switch (tapeOrientation) { - case "left": - tapePosition = ( - - ); - break; - case "right": - tapePosition = ( - - ); - break; - } - - return ( - <> - {/* height hardcoded for 3 tags */} -
- {tapePosition} -
-

{title}

-
{description}
-
-
- {tags?.map((tag) => ( - - ))} -
-
- - ); -} - -function Resource_Tag({ link, className, text }: tag) { - return ( -
- {text} -
- ); -} diff --git a/apps/site/src/views/Resources/components/ApiGroup/ApiGroup.module.scss b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss similarity index 57% rename from apps/site/src/views/Resources/components/ApiGroup/ApiGroup.module.scss rename to apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss index 5ad93f27..821ca89f 100644 --- a/apps/site/src/views/Resources/components/ApiGroup/ApiGroup.module.scss +++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss @@ -1,8 +1,10 @@ +@use "zothacks-theme" as theme; + .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 +13,7 @@ width: 238px; height: 60px; position: absolute; - top: -5%; + top: -12.5%; } .container { @@ -21,20 +23,31 @@ 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; - &:hover { - transform: translateX(-5px); + 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); } diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx new file mode 100644 index 00000000..11e82d01 --- /dev/null +++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx @@ -0,0 +1,61 @@ +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 ( +
+
+
+ {stickerSrc && Resource logo} +

{title}

+ {description} +
+ + {links.map(({ text, link }) => ( + + {text} +
+ Open link in new window +
+ + ))} +
+ ); +} diff --git a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx b/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx index 362e6a47..eec178ef 100644 --- a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx +++ b/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 }) => (
- } stickerSrc={imageUrlBuilder(client).image(logo).url()} - tagLink={link} + links={[{ text: "API Reference", link: link }]} stickyNoteColor={stickyNoteColor.hex} />
diff --git a/apps/site/src/views/Resources/sections/ApiResources/config.ts b/apps/site/src/views/Resources/sections/ApiResources/config.ts index 7544fbf9..d80c9527 100644 --- a/apps/site/src/views/Resources/sections/ApiResources/config.ts +++ b/apps/site/src/views/Resources/sections/ApiResources/config.ts @@ -1,7 +1,6 @@ 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 = [ { @@ -9,7 +8,6 @@ const ApiResourcesList = [ 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", }, diff --git a/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx b/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx index c677fe80..5e59a36a 100644 --- a/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx +++ b/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx @@ -1,7 +1,11 @@ -import styles from "./BackendResources.module.scss"; -import { BackendGroup } from "../../components/BackendGroup/BackendGroup"; -import { getResources } from "../../getResources"; import { PortableText } from "@portabletext/react"; +import urlImageBuilder from "@sanity/image-url"; + +import ResourceCard from "../../components/ResourceCard/ResourceCard"; +import { getResources } from "../../getResources"; +import { client } from "@/lib/sanity/client"; + +import styles from "./BackendResources.module.scss"; async function BackendResources() { const resources = await getResources("backend"); @@ -21,12 +25,12 @@ async function BackendResources() { {resources.map( ({ _id, title, description, link, logo, stickyNoteColor }) => (
- } - tags={[]} - tapeOrientation="left" + stickerSrc={urlImageBuilder(client).image(logo).url()} + stickyNoteColor={stickyNoteColor.hex} + links={[{ text: "Reference", link: link }]} />
), diff --git a/apps/site/src/views/Resources/sections/BackendResources/config.ts b/apps/site/src/views/Resources/sections/BackendResources/config.ts index b5cedd60..7705f43e 100644 --- a/apps/site/src/views/Resources/sections/BackendResources/config.ts +++ b/apps/site/src/views/Resources/sections/BackendResources/config.ts @@ -1,7 +1,3 @@ -import flask_tutorial_tag from "@/assets/images/flask_tutorial_button.png"; -import flask_documentation_tag from "@/assets/images/flask_documentation_button.png"; -import flask_project_tag from "@/assets/images/flask_project_button.png"; - const BackendResourcesList = [ { stickyNoteColor: "#FFDAF7", @@ -12,18 +8,15 @@ const BackendResourcesList = [ tags: [ { link: "https://hack.ics.uci.edu/", - src: flask_tutorial_tag.src, - alt: "Flask Tutorial Tag Link", + text: "Flask Tutorial", }, { link: "https://hack.ics.uci.edu/", - src: flask_documentation_tag.src, - alt: "Flask Documentation Tag Link", + text: "Flask Documentation", }, { link: "https://hack.ics.uci.edu/", - src: flask_project_tag.src, - alt: "Flask Project Tag Link", + text: "Flask Project", }, ], }, @@ -36,18 +29,15 @@ const BackendResourcesList = [ tags: [ { link: "https://hack.ics.uci.edu/", - src: flask_tutorial_tag.src, - alt: "Flask Tutorial Tag Link", + text: "Flask Tutorial", }, { link: "https://hack.ics.uci.edu/", - src: flask_documentation_tag.src, - alt: "Flask Documentation Tag Link", + text: "Flask Documentation", }, { link: "https://hack.ics.uci.edu/", - src: flask_project_tag.src, - alt: "Flask Project Tag Link", + text: "Flask Project", }, ], },