diff --git a/src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx index 6c444bec6a..58403b8ba5 100644 --- a/src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -5,8 +5,7 @@ import AudioPlayer from "components/common/AudioPlayer"; import useTimeAgo from "hooks/useTimeAgo"; import { CardFooter } from "components/entities"; import Badge from "components/common/Badge"; -import { faArrowRight, faThumbsUp } from "@fortawesome/pro-solid-svg-icons"; -import Button from "components/common/Button"; +import { faThumbsUp } from "@fortawesome/pro-solid-svg-icons"; import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo"; import WeightCoverImage from "components/common/WeightCoverImage"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; @@ -183,16 +182,6 @@ export default function AudioCard({ {data?.stats?.positive_rating_count} - {inSelectModal ? null : ( - - )} @@ -217,6 +206,8 @@ export default function AudioCard({ makeBookmarksProps: bookmarks?.makeProps, makeRatingsProps: ratings?.makeProps, showCreator: true, + inSelectModal, + showUseButton: true, }} /> )} diff --git a/src/website/packages/fakeyou.com/src/components/common/Card/Card.scss b/src/website/packages/fakeyou.com/src/components/common/Card/Card.scss index 987df2ffa2..f668ff2362 100644 --- a/src/website/packages/fakeyou.com/src/components/common/Card/Card.scss +++ b/src/website/packages/fakeyou.com/src/components/common/Card/Card.scss @@ -2,7 +2,7 @@ .card { background-color: $panel-inner; - border: 1px solid $panel-inner-border; + border: 2px solid $panel-inner-border; border-radius: 0.5rem; overflow: hidden; transition: 0.2s; @@ -97,11 +97,30 @@ text-shadow: 0 0 4px rgba(#000, 0.75); } + .card-featured-badge { + position: absolute; + display: flex; + align-items: center; + top: 0; + left: 0; + font-size: 13px; + font-weight: 600; + background-color: $primary; + border-radius: 0 0 6px 0; + padding: 2px 8px 2px 4px; + box-shadow: 0 0 12px rgba(#000, 0.3); + + svg { + font-size: 11px; + margin-bottom: 1px; + } + } + &.card-clickable { &:hover { background-color: lighten($panel-inner, 2%); cursor: pointer; - border: 1px solid lighten($panel-inner-border, 15%); + border: 2px solid lighten($panel-inner-border, 15%); } &:hover > .card-img { @@ -118,13 +137,22 @@ &.card-hover-border-red { &:hover { - border: 1px solid $primary; + border: 2px solid $primary; } } &.bottom-text-hover { background-color: lighten($panel-inner, 2%); - border: 1px solid $primary; + border: 2px solid $primary; + } + } + + &.card-featured { + border: 2px solid $primary; + + &:hover { + cursor: pointer; + border: 2px solid lighten($primary, 6%); } } diff --git a/src/website/packages/fakeyou.com/src/components/common/Card/Card.tsx b/src/website/packages/fakeyou.com/src/components/common/Card/Card.tsx index a8b68229b2..b36851c407 100644 --- a/src/website/packages/fakeyou.com/src/components/common/Card/Card.tsx +++ b/src/website/packages/fakeyou.com/src/components/common/Card/Card.tsx @@ -45,7 +45,7 @@ export default function Card({ // } // : {}), height: height || "auto", - borderWidth: borderWidth || "1px", + borderWidth: borderWidth || "2px", borderStyle: "solid", aspectRatio: aspectRatio || "auto", }} diff --git a/src/website/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx b/src/website/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx index 2e3d80df8f..8980716742 100644 --- a/src/website/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx +++ b/src/website/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx @@ -15,8 +15,10 @@ interface CardFooterProps { makeRatingsProps?: MakeRatingsProps; // this is MakeBatchProps extended to include likeCount showCreator?: boolean; showDivider?: boolean; + showUseButton?: boolean; creatorLink?: boolean; showGravatar?: boolean; + inSelectModal?: boolean; } export default function CardFooter({ @@ -27,8 +29,10 @@ export default function CardFooter({ makeRatingsProps, showCreator, showDivider = true, + showUseButton = false, creatorLink, showGravatar, + inSelectModal, }: CardFooterProps) { const { default_avatar, @@ -66,6 +70,14 @@ export default function CardFooter({ {...makeBookmarksProps({ entityToken, entityType })} /> )} + {!inSelectModal && showUseButton && ( +