featured border and badge in search

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}
                       </span>
                     </div>
-                    {inSelectModal ? null : (
-                      <Button
-                        icon={faArrowRight}
-                        iconFlip={true}
-                        variant="link"
-                        label="Use"
-                        className="fs-7"
-                        onClick={handleSelectModalResultSelect}
-                      />
-                    )}
                   </div>
                 </div>
               </div>
@@ -217,6 +206,8 @@ export default function AudioCard({
                 makeBookmarksProps: bookmarks?.makeProps,
                 makeRatingsProps: ratings?.makeProps,
                 showCreator: true,
+                inSelectModal,
+                showUseButton: true,
               }}
             />
           )}

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%);
     }
   }
 

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",
         }}

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 && (
+              <div
+                className="fs-7 fw-medium fy-select-voice d-flex align-items-center justify-content-center rounded"
+                style={{ top: "14px", right: "14px" }}
+              >
+                Use
+              </div>
+            )}
           </div>
         ) : null}
       </div>

src/website/packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx

@@ -2,28 +2,51 @@ import React from "react";
 import { Link } from "react-router-dom";
 import getCardUrl from "components/common/Card/getCardUrl";
 import "./CardWrapper.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faStar } from "@fortawesome/pro-solid-svg-icons";
 
 interface Props {
-  canHover?: boolean,
-  card: React.ElementType,
-  data: any,
-  onClick?: (e:any) => any,
-  padding?: boolean,
-  preview: React.ElementType,
-  source?: string,
-  type: "media" | "weights"
+  canHover?: boolean;
+  card: React.ElementType;
+  data: any;
+  onClick?: (e: any) => any;
+  padding?: boolean;
+  preview: React.ElementType;
+  source?: string;
+  type: "media" | "weights";
+  featured?: boolean;
 }
 
-export default function CardWrapper({ canHover, card: Card, data, onClick, padding, source = "", type, ...rest }: Props) {
-  const linkUrl = getCardUrl(data,source,type);
-  const cardProps = { data, source, type, ...rest }
-  const className = `card ${ padding ? "p-3" : "" }${ onClick || canHover ? " card-clickable" : ""  }`;
+export default function CardWrapper({
+  canHover,
+  card: Card,
+  data,
+  onClick,
+  padding,
+  source = "",
+  type,
+  featured = true,
+  ...rest
+}: Props) {
+  const linkUrl = getCardUrl(data, source, type);
+  const cardProps = { data, source, type, ...rest };
+  const className = `card ${padding ? "p-3" : ""} ${
+    featured ? "card-featured" : ""
+  } ${onClick || canHover ? "card-clickable" : ""}`.trim();
 
-  return onClick ?
-  <div {...{ className, onClick: () => onClick(data) }}>
-    <Card { ...cardProps }/>
-  </div> : 
-  <Link {...{ className, to: linkUrl }}>
-    <Card { ...cardProps }/>
-  </Link>;
-};
+  return onClick ? (
+    <div {...{ className, onClick: () => onClick(data) }}>
+      <Card {...cardProps} />
+      {featured && (
+        <div className="card-featured-badge">
+          <FontAwesomeIcon icon={faStar} className="me-1" />
+          Featured
+        </div>
+      )}
+    </div>
+  ) : (
+    <Link {...{ className, to: linkUrl }}>
+      <Card {...cardProps} />
+    </Link>
+  );
+}

src/website/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx

@@ -13,6 +13,7 @@ import { EntityType } from "components/entities/EntityTypes";
 interface MediaCardsProps {
   props: any;
   type: string;
+  featured?: boolean;
 }
 
 interface Props {
@@ -22,23 +23,27 @@ interface Props {
   emptyContent?: React.ReactNode;
 }
 
-const Cards = ({ props, type }: MediaCardsProps) => {
+const Cards = ({ props, type, featured }: MediaCardsProps) => {
   switch (type) {
     case "audio":
-      return <CardWrapper {...{ ...props, card: AudioCard, padding: true }} />;
+      return (
+        <CardWrapper
+          {...{ ...props, card: AudioCard, padding: true, featured }}
+        />
+      );
     case "gif":
     case "image":
     case "jpg":
       return (
         <CardWrapper
-          {...{ ...props, card: OverlayCard, preview: ImagePreview }}
+          {...{ ...props, card: OverlayCard, preview: ImagePreview, featured }}
         />
       );
     case "mp4":
     case "video":
       return (
         <CardWrapper
-          {...{ ...props, card: OverlayCard, preview: VideoPreview }}
+          {...{ ...props, card: OverlayCard, preview: VideoPreview, featured }}
         />
       );
     case "bvh":
@@ -47,16 +52,24 @@ const Cards = ({ props, type }: MediaCardsProps) => {
     case "scene_ron":
       return (
         <CardWrapper
-          {...{ ...props, card: OverlayCard, preview: MocapPreview }}
+          {...{ ...props, card: OverlayCard, preview: MocapPreview, featured }}
         />
       );
     case "rvc_v2":
     case "so_vits_svc":
-      return <CardWrapper {...{ ...props, card: WeightCard, padding: true }} />;
+      return (
+        <CardWrapper
+          {...{ ...props, card: WeightCard, padding: true, featured }}
+        />
+      );
     case "tt2":
     case "tacotron2.5":
     case "gpt_so_vits":
-      return <CardWrapper {...{ ...props, card: WeightCard, padding: true }} />;
+      return (
+        <CardWrapper
+          {...{ ...props, card: WeightCard, padding: true, featured }}
+        />
+      );
     default:
       return <div>Unsupported type</div>;
   }
@@ -94,7 +107,13 @@ export default function MediaList({
               key,
             }}
           >
-            <Cards {...{ type: data.media_type || data.weight_type, props }} />
+            <Cards
+              {...{
+                type: data.media_type || data.weight_type,
+                props,
+                featured: data.is_featured,
+              }}
+            />
             {
               // [ null,
               //   <MediaCards {...{ type: data.media_type, props }} />,

src/website/packages/fakeyou.com/src/v2/view/pages/audio_gen/AudioGen.scss

@@ -29,6 +29,11 @@
   background-color: lighten($action, 5%);
   border-radius: 0.35rem;
   font-size: 13px !important;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: lighten($action, 10%);
+  }
 }
 
 .fy-weight-picker {