Fix: Nft preview unavailable box (#351)

HathorNetwork · Dec 17, 2024 · 818dfaf · 818dfaf
1 parent f3de5a1
commit 818dfaf
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/src/components/token/TokenConfig.js b/src/components/token/TokenConfig.js
@@ -13,6 +13,7 @@ import NewHathorAlert from '../NewHathorAlert';
 import { useNewUiEnabled } from '../../hooks';
 import { ReactComponent as CopyIcon } from '../../assets/images/copy-icon.svg';
 import { ReactComponent as DownloadIcon } from '../../assets/images/download-icon.svg';
+import HathorAlert from '../HathorAlert';
 
 const TokenConfig = props => {
   const newUiEnabled = useNewUiEnabled();
@@ -101,7 +102,7 @@ const TokenConfig = props => {
             </a>
           </p>
         </div>
-        <NewHathorAlert ref={alertSuccess} text={successMessage} type="success" />
+        <HathorAlert ref={alertSuccess} text={successMessage} type="success" />
       </>
     );
   };

diff --git a/src/components/token/TokenNFTPreview.js b/src/components/token/TokenNFTPreview.js
@@ -6,9 +6,11 @@ import {
   VIDEO_MEDIA_TYPES_BY_EXTENSION,
   AUDIO_MEDIA_TYPES_BY_EXTENSION,
 } from '../../constants';
+import { useNewUiEnabled } from '../../hooks';
 
 const TokenNFTPreview = props => {
   const [token, setToken] = useState(props.token);
+  const isNewUiEnabled = useNewUiEnabled();
 
   useEffect(() => {
     // ensure data binding with props.token re rendering when changed
@@ -105,6 +107,19 @@ const TokenNFTPreview = props => {
     media = <p> Preview Unavailable </p>;
   }
 
+  if (isNewUiEnabled) {
+    return (
+      <div className="token-nft-preview">
+        <p>
+          <strong>NFT PREVIEW</strong>
+        </p>
+        <figure className="figure flex-fill p-4 d-flex align-items-center justify-content-center">
+          {media}
+        </figure>
+      </div>
+    );
+  }
+
   return (
     <div className="d-flex flex-column token-nft-preview">
       <p>

diff --git a/src/newUi.scss b/src/newUi.scss
@@ -582,6 +582,37 @@ nav {
       height: 28px;
     }
   }
+
+  .token-nft-preview {
+    padding: 32px;
+    background-color: var(--secondary-color);
+    border: 1px solid var(--border-color);
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+    min-width: 100%;
+
+    p {
+      border: none;
+    }
+
+    strong {
+      color: $purpleHathorButton;
+      font-size: 16px;
+    }
+
+    figure p {
+        color: var(--bold-text-color);
+        font-size: 16px;
+        font-weight: 700;
+        line-height: 20px;
+        letter-spacing: 0.03em;
+        text-align: center;
+    }
+  }
 }
 
 .container-title-page {