Merge pull request #290 from Itheum/fix-nftunes

fix: fixed prop name on nftunes, moved ytembed component into compone…
Itheum · Feb 13, 2024 · c36fa3d · c36fa3d
2 parents ef538a2 + 97d8c7a
commit c36fa3d
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 16 deletions.
diff --git a/src/components/DataNftCard.tsx b/src/components/DataNftCard.tsx
@@ -22,7 +22,7 @@ export function DataNftCard({
   modalTitleStyle,
   hasFilter,
   filterData,
-  className,
+  cardStyles,
 }: {
   index: number;
   dataNft: DataNft;
@@ -36,7 +36,7 @@ export function DataNftCard({
   modalTitleStyle?: string;
   hasFilter?: boolean;
   filterData?: Array<IFilterData>;
-  className?: string;
+  cardStyles?: string;
 }) {
   const {
     network: { explorerAddress },
@@ -49,7 +49,7 @@ export function DataNftCard({
     <div className="mb-3">
       <Card
         className={cn(
-          className,
+          cardStyles,
           "border-[0.5px]  dark:border-slate-100/30 border-slate-300  bg-transparent rounded-[2.37rem] base:w-[18.5rem] md:w-[20.6rem]"
         )}>
         <CardContent className="flex flex-col p-3">

diff --git a/src/libComponents/YouTubeEmbed.tsx → src/components/YouTubeEmbed.tsx b/src/libComponents/YouTubeEmbed.tsx → src/components/YouTubeEmbed.tsx
@@ -6,13 +6,7 @@ const YouTubeEmbed = ({ embedId, title }: { embedId: string; title: string }) =>
       className="h-full w-full"
       src={`https://www.youtube.com/embed/${embedId}?controls=1&playsinline=1&color=white&autoplay=0`}
       title={title}
-      frameborder="0"
-      allowfullscreen="allowfullscreen"
-      mozallowfullscreen="mozallowfullscreen"
-      msallowfullscreen="msallowfullscreen"
-      oallowfullscreen="oallowfullscreen"
-      webkitallowfullscreen="webkitallowfullscreen"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
   );
 };
 

diff --git a/src/index.css b/src/index.css
@@ -173,3 +173,9 @@ h6 {
 .dapp-core-component__confirmAddressStyles__ledger-confirm-address-heading {
   @apply text-black !important;
 }
+
+.bg-manu-image {
+  background-image: url("./assets/img/nf-tunes/bg-manu.jpg");
+  background-size: cover;
+  background-position: top;
+}
diff --git a/src/pages/AppMarketplace/NFTunes/index.tsx b/src/pages/AppMarketplace/NFTunes/index.tsx
@@ -40,7 +40,7 @@ import benefitsLogo1 from "../../../assets/img/nf-tunes/benefits-logo1.png";
 import benefitsLogo2 from "../../../assets/img/nf-tunes/benefits-logo2.png";
 import benefitsLogo3 from "../../../assets/img/nf-tunes/benefits-logo3.png";
 import { motion } from "framer-motion";
-import YouTubeEmbed from "libComponents/YouTubeEmbed";
+import YouTubeEmbed from "components/YouTubeEmbed";
 import { useTheme } from "libComponents/ThemeProvider";
 
 interface ExtendedViewDataReturnType extends ViewDataReturnType {
@@ -272,7 +272,7 @@ export const NFTunes = () => {
         {/* Featured Artist Section */}
         <div
           id="featured-artist"
-          className="bg-manu-image bg-cover bg-top flex flex-col xl:flex-row  justify-center items-center xl:items-start w-full h-full gap-12 mb-16 xl:mb-32">
+          className="bg-manu-image flex flex-col xl:flex-row  justify-center items-center xl:items-start w-full h-full gap-12 mb-16 xl:mb-32">
           <div className="py-8 flex flex-col w-[100%] justify-center items-center xl:items-start p-8 xl:p-12">
             <div className="flex flex-row rounded-lg mb-4 px-8 xl:px-16 text-center gap-4 bg-foreground md:text-2xl xl:text-3xl justify-center items-center ">
               <Music className="text-secondary" />
@@ -343,7 +343,7 @@ export const NFTunes = () => {
                 <div className="scale-[0.9] -mt-6 pt-4 xl:pt-0 rounded-[2.37rem]">
                   {featuredArtistDataNft ? (
                     <DataNftCard
-                      className="text-white"
+                      cardStyles="text-white"
                       index={featuredDataNftIndex}
                       dataNft={featuredArtistDataNft}
                       isLoading={isLoading}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -91,9 +91,6 @@ module.exports = {
         "gradient": "gradient 10s linear infinite",
         "cube-down": "cube-down 1s ease-in-out infinite",
       },
-      backgroundImage: (theme) => ({
-        "manu-image": "url('../src/assets/img/nf-tunes/bg-manu.jpg')",
-      }),
     },
   },