[Issue-105] Update coming soon style for game and airdrop

Koniverse · Aug 1, 2024 · 0956d21 · 0956d21
1 parent a7ae987
commit 0956d21
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 40 deletions.
diff --git a/packages/extension-koni-ui/src/components/Airdrop/AirdropCardItem.tsx b/packages/extension-koni-ui/src/components/Airdrop/AirdropCardItem.tsx
@@ -97,7 +97,7 @@ function Component ({ className, item, onExplore }: Props) {
             shape={'round'}
             size={'xs'}
           >
-            {t('Explore')}
+            {isComingSoon ? t('Coming soon') : t('Explore')}
           </Button>
 
           {
@@ -123,14 +123,6 @@ function Component ({ className, item, onExplore }: Props) {
           className={'__banner'}
           style={{ backgroundImage: `url("${item.banner}")` }}
         />
-
-        {
-          isComingSoon && (
-            <div className={'__coming-soon-tag'}>
-              {t('Coming soon')}
-            </div>
-          )
-        }
       </div>
     </div>
   );
@@ -217,34 +209,12 @@ export const AirdropCardItem = styled(Component)<Props>(({ theme: { extendToken,
       position: 'relative'
     },
 
-    '.__coming-soon-tag': {
-      position: 'absolute',
-      right: 0,
-      bottom: 20,
-      paddingLeft: token.padding,
-      paddingRight: token.paddingSM,
-      borderTopLeftRadius: 20,
-      borderBottomLeftRadius: 20,
-      backgroundColor: extendToken.colorBgSecondary2,
-      color: token.colorPrimary,
-      fontSize: token.fontSize,
-      lineHeight: token.lineHeight,
-      paddingTop: 6,
-      paddingBottom: 6
-    },
-
     '.__banner': {
       width: 153,
       backgroundSize: 'cover',
       backgroundPosition: 'center right',
       height: '100%',
       clipPath: 'path("M24.9302 20.5871C26.6276 8.77198 36.7499 0 48.6863 0H153V215H24.6944C10.0815 215 -1.13975 202.051 0.938259 187.587L24.9302 20.5871Z")'
-    },
-
-    '&.-is-coming-soon': {
-      '.__banner': {
-        filter: 'blur(8px)'
-      }
     }
   });
 });

diff --git a/packages/extension-koni-ui/src/components/Games/GameCardItem.tsx b/packages/extension-koni-ui/src/components/Games/GameCardItem.tsx
@@ -6,7 +6,7 @@ import useTranslation from '@subwallet/extension-koni-ui/hooks/common/useTransla
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { Button, Icon } from '@subwallet/react-ui';
 import CN from 'classnames';
-import { ChartBar, Lightning } from 'phosphor-react';
+import { Lightning } from 'phosphor-react';
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
@@ -19,6 +19,7 @@ type Props = ThemeProps & {
 function Component ({ className, item, onOpenLeaderboard, onPlay }: Props) {
   const { t } = useTranslation();
 
+  // @ts-ignore
   const _openLeaderboard = useCallback(() => {
     onOpenLeaderboard(item);
   }, [item, onOpenLeaderboard]);
@@ -40,7 +41,7 @@ function Component ({ className, item, onOpenLeaderboard, onPlay }: Props) {
     })}
     >
       <div className='__left-part'>
-        <div className='__game-name'>{isComingSoon ? t('Coming soon') : item.name}</div>
+        <div className='__game-name'>{item.name}</div>
         <div className={'__energy-consume'}>
           <span className='__energy-consume-value-wrapper'>
             <Icon
@@ -69,7 +70,7 @@ function Component ({ className, item, onOpenLeaderboard, onPlay }: Props) {
             shape={'round'}
             size={'xs'}
           >
-            {t('Play now')}
+            {isComingSoon ? t('Coming soon') : t('Play now')}
           </Button>
 
           {
@@ -171,12 +172,6 @@ export const GameCardItem = styled(Component)<Props>(({ theme: { token } }: Prop
       gap: token.sizeXS
     },
 
-    '&.-is-coming-soon': {
-      '.__game-banner': {
-        filter: 'blur(8px)'
-      }
-    },
-
     '@media (max-width: 369px)': {
       '.__game-banner': {
         width: 160