fix(nfts): snaefell fixes, v3 (#17401)

taikoxyz · May 28, 2024 · 7f40e3a · 7f40e3a
1 parent cca2358
commit 7f40e3a
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 31 deletions.
diff --git a/packages/snaefell-ui/src/components/Mint/EligibilityPanel.svelte b/packages/snaefell-ui/src/components/Mint/EligibilityPanel.svelte
@@ -39,7 +39,7 @@
 
   const texts: Record<IStep, string> = {
     eligible: 'You are eligible to mint Snaefell NFT',
-    'non-eligible': 'Unfortunately, you were not an Alpha-1 testnet contributors.',
+    'non-eligible': 'Unfortunately, you were not an Alpha-1 testnet contributor.',
     success: 'You’ve successfully minted your Snaefell NFT. Thank you for being here from the start!',
   };
 

diff --git a/packages/snaefell-ui/src/components/Mint/Mint.svelte b/packages/snaefell-ui/src/components/Mint/Mint.svelte
@@ -13,7 +13,7 @@
   import getConfig from '../../lib/wagmi/getConfig';
   import type { IAddress } from '../../types';
   import { NftRenderer } from '../NftRenderer';
-  import { leftHalfPanel, rightHalfPanel, wrapperClasses } from './classes';
+  import { leftHalfPanel, nftRendererWrapperMobileClasses, rightHalfPanel, wrapperClasses } from './classes';
   import { default as EligibilityPanel } from './EligibilityPanel.svelte';
   import { default as MintForm } from './MintForm.svelte';
 
@@ -117,25 +117,12 @@
     </div>
   {/if}
   <div class={rightHalfPanel}>
-    <!-- proper tree-->
-
-    <!--
-      {#if isReady && canMint}
-      <MintForm
-    {totalSupply}
-    {gasCost}
-    {mintMax}
-    {isCalculating}
-    {progress}
-    isReady={isReady} />
-    {:else if isReady && !canMint}
-    <EligibilityPanel step="non-eligible" />
-    {:else}
-
+    {#if windowSize === 'sm'}
+      <div class={nftRendererWrapperMobileClasses}>
+        <NftRenderer />
+      </div>
     {/if}
 
-    -->
-
     {#if isReady && (canMint || mintStep > 0)}
       {#if mintStep === 0}
         <EligibilityPanel

diff --git a/packages/snaefell-ui/src/components/Mint/MintForm.svelte b/packages/snaefell-ui/src/components/Mint/MintForm.svelte
@@ -12,15 +12,13 @@
   import type { IMint } from '$stores/mint';
   import { Spinner } from '$ui/Spinner';
 
-  import { NftRenderer } from '../NftRenderer';
   import {
     counterClasses,
     currentMintedClasses,
     infoRowClasses,
     maxMintedClasses,
     mintContentClasses,
     mintTitleClasses,
-    nftRendererWrapperMobileClasses,
   } from './classes';
 
   const dispatch = createEventDispatcher();
@@ -39,11 +37,6 @@
 
 <div class={classNames('w-full', 'h-full')}>
   <!-- svelte-ignore missing-declaration -->
-  {#if windowSize === 'sm'}
-    <div class={nftRendererWrapperMobileClasses}>
-      <NftRenderer />
-    </div>
-  {/if}
 
   <div class={mintTitleClasses}>{$t('content.mint.title')}</div>
 

diff --git a/packages/snaefell-ui/src/components/Mint/classes.ts b/packages/snaefell-ui/src/components/Mint/classes.ts
@@ -16,7 +16,7 @@ export const wrapperClasses = classNames(
 );
 
 export const halfPanel = classNames(
-  'h-full',
+  'h-max',
   'md:w-max',
   'flex flex-col',
   'items-center',
@@ -41,7 +41,7 @@ export const counterClasses = classNames(
 );
 
 export const nftRendererWrapperClasses = 'rounded-3xl overflow-hidden';
-export const nftRendererWrapperMobileClasses = 'rounded-3xl my-8 overflow-hidden';
+export const nftRendererWrapperMobileClasses = 'rounded-3xl lg:my-8 my-4 overflow-hidden aspect-square';
 
 export const mintTitleClasses = classNames(
   'text-[45px]/[52px]',

diff --git a/packages/snaefell-ui/src/components/core/Section/Section.svelte b/packages/snaefell-ui/src/components/core/Section/Section.svelte
@@ -18,8 +18,8 @@
     'flex flex-col',
     'items-center',
     'justify-center',
-    background === 'none' ? 'bg-background-body' : null,
-    background !== 'none' ? 'bg-cover bg-center' : null,
+    background === 'none' ? '' : null,
+    background !== 'none' ? 'bg-cover bg-bottom' : null,
     background === 'general' ? 'bg-custom' : null,
     'carousel-item',
   );

diff --git a/packages/snaefell-ui/src/routes/+page.svelte b/packages/snaefell-ui/src/routes/+page.svelte
@@ -16,7 +16,7 @@
     width={windowSize === 'sm' ? 'full' : 'md'}
     background="general"
     class="items-center justify-center"
-    height={'full'}>
+    height={'fit'}>
     <Mint />
   </Section>