card badge update

packages/fakeyou.com/package.json

@@ -27,13 +27,13 @@
     "@types/google.analytics": "^0.0.42",
     "@types/gtag.js": "^0.0.12",
     "@types/howler": "^2.1.2",
+    "@types/imagesloaded": "^4.1.6",
     "@types/jest": "^24.9.1",
     "@types/js-cookie": "^3.0.1",
     "@types/masonry-layout": "^4.2.7",
     "@types/node": "^12.12.47",
     "@types/react": "^16.9.36",
     "@types/react-dom": "^16.9.8",
-    "@types/imagesloaded": "^4.1.6",
     "axios": "^0.21.0",
     "bootstrap": "5.1.3",
     "bulma": "^0.9.0",

packages/fakeyou.com/src/components/common/Badge/Badge.scss

@@ -4,7 +4,7 @@
   font-weight: 600;
   border-radius: 0.35rem;
   font-size: 13px;
-  padding: 2px 6px;
+  padding: 4px 8px;
   transition: 0.2s;
   -moz-user-select: none;
   -khtml-user-select: none;
@@ -13,6 +13,10 @@
   user-select: none;
   height: 100%;
   margin-bottom: 10px;
+
+  &.shadow {
+    box-shadow: 0 0 12px rgba($bg, 0.2);
+  }
 }
 
 $colors: (
@@ -34,6 +38,6 @@ $colors: (
 @each $color, $value in $colors {
   .badge-#{$color} {
     background-color: $value;
-    color: contrast($value);
+    color: contrast($value) !important;
   }
 }

packages/fakeyou.com/src/components/common/Badge/Badge.tsx

@@ -1,11 +1,13 @@
 import React from "react";
+import "./Badge.scss";
 
 interface BadgeProps {
   label: string;
   color: string;
+  shadow?: boolean;
 }
 
-export default function Badge({ label, color }: BadgeProps) {
-  const badgeClass = `fy-badge badge-${color} mb-0`;
+export default function Badge({ label, color, shadow = false }: BadgeProps) {
+  const badgeClass = `fy-badge badge-${color} ${shadow ? shadow : null} mb-0`;
   return <span className={badgeClass}>{label}</span>;
 }

packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx

@@ -3,6 +3,7 @@ import { useHistory } from "react-router-dom";
 import Card from "../Card";
 import AudioPlayer from "components/common/AudioPlayer";
 import useTimeAgo from "hooks/useTimeAgo";
+import Badge from "components/common/Badge";
 
 interface AudioCardProps {
   data: any;
@@ -25,7 +26,8 @@ export default function AudioCard({ data, to }: AudioCardProps) {
   return (
     <Card padding={true} onClick={handleCardClick}>
       <div className="mb-3">
-        <h6 className="fw-semibold text-white mb-1">{data.weight_name}</h6>
+        <Badge label="Audio" color="teal" />
+        <h6 className="fw-semibold text-white mb-1 mt-3">{data.weight_name}</h6>
         <p className="fs-7 opacity-75">{timeAgo}</p>
       </div>
 

packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useHistory } from "react-router-dom";
 import Card from "../Card";
 import useTimeAgo from "hooks/useTimeAgo";
+import Badge from "components/common/Badge";
 
 interface ImageCardProps {
   data: any;
@@ -26,6 +27,7 @@ export default function ImageCard({ data, to }: ImageCardProps) {
       />
       <div className="card-img-overlay">
         <div className="card-img-gradient" />
+        <Badge label="Image" color="ultramarine" />
         <div className="card-img-overlay-text">
           <div>
             <h6 className="fw-semibold text-white mb-1">{data.weight_name}</h6>

packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx

@@ -29,7 +29,7 @@ export default function VideoCard({ data, to }: VideoCardProps) {
       />
       <div className="card-img-overlay">
         <div className="card-img-gradient" />
-        <Badge label="Hi" color="teal" />
+        <Badge label="Video" color="purple" />
         <FontAwesomeIcon icon={faPlayCircle} className="card-video-play" />
         <div className="card-img-overlay-text">
           <div>

yarn.lock

@@ -4432,6 +4432,7 @@ __metadata:
     "@types/google.analytics": ^0.0.42
     "@types/gtag.js": ^0.0.12
     "@types/howler": ^2.1.2
+    "@types/imagesloaded": ^4.1.6
     "@types/jest": ^24.9.1
     "@types/js-cookie": ^3.0.1
     "@types/masonry-layout": ^4.2.7
@@ -4453,6 +4454,7 @@ __metadata:
     i18next: ^21.6.11
     i18next-browser-languagedetector: ^7.1.0
     i18next-http-backend: ^2.2.1
+    imagesloaded: ^5.0.0
     js-cookie: ^3.0.1
     masonry-layout: ^4.2.2
     posthog-js: ^1.73.1
@@ -4577,10 +4579,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storyteller/root@workspace:."
   dependencies:
-    "@types/imagesloaded": ^4.1.6
     craco: ^0.0.3
     cross-env: ^7.0.3
-    imagesloaded: ^5.0.0
     lerna: ^4.0.0
     yarn: ^1.22.19
   languageName: unknown