add Sold out text to hover effect

rairprotocol · Jun 20, 2024 · 58c8bb2 · 58c8bb2
1 parent 92dfa49
commit 58c8bb2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/rair-front/src/components/MockUpPage/GeneralCollectionStyles.css b/rair-front/src/components/MockUpPage/GeneralCollectionStyles.css
@@ -77,8 +77,8 @@
   top: 0;
   z-index: 2;
   cursor: pointer;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
+  /* background: rgba(0, 0, 0, 0.5); */
+  display: none;
   justify-content: center;
   align-items: center;
 }
@@ -87,15 +87,15 @@
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
   text-transform: uppercase;
-  padding: 8px 10px;
+  padding: 1px 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 10px;
-  font-size: 14px;
+  font-size: 12px;
   position: absolute;
   top: 10px;
-  right: 10px;
+  right: 20px;
 }
 
 .zoom-event:hover {
@@ -611,6 +611,10 @@ img.single-token-block-img {
   display: none;
 }
 
+.nft-item-collection .description-wrapper:hover .nft-item-collection-sold-out {
+  display: flex;
+}
+
 .nft-item-collection .collection-block-price img {
   width: 16px;
   height: auto;

diff --git a/rair-front/src/components/MockUpPage/NftList/NftItemForCollectionView.tsx b/rair-front/src/components/MockUpPage/NftList/NftItemForCollectionView.tsx
@@ -357,11 +357,6 @@ const NftItemForCollectionViewComponent: React.FC<
             metadataFilter && 'with-modal'
           }`}
           id={id}>
-          {item && !resaleFlag && item.isMinted && !resalePrice && (
-            <div className="nft-item-collection-sold-out">
-              <div className="sold-out-box">Sold out</div>
-            </div>
-          )}
           <>
             {item && resaleFlag && currentUserAddress === userAddress && (
               <button
@@ -582,6 +577,11 @@ const NftItemForCollectionViewComponent: React.FC<
                         </div>
                       )}
                     </div>
+                    {item && !resaleFlag && item.isMinted && !resalePrice && (
+            <div className="nft-item-collection-sold-out">
+              <div className="sold-out-box">Sold out</div>
+            </div>
+          )}
                     <div
                       className="collection-block-price"
                       style={{ alignItems: 'flex-end' }}>