Update style for Event screen

packages/extension-koni-ui/src/Popup/Home/Events/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { FilterTabItemType, FilterTabs } from '@subwallet/extension-koni-ui/components/FilterTabs';
-import { EventDifficulty, EventItem, EventStatus } from '@subwallet/extension-koni-ui/components/Mythical';
+import { EventDifficulty, EventItem, EventStatus, MainScreenHeader } from '@subwallet/extension-koni-ui/components/Mythical';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
@@ -77,6 +77,10 @@ const Component = ({ className }: Props): React.ReactElement => {
 
   return (
     <div className={className}>
+      <MainScreenHeader
+        title={t('Events')}
+      />
+
       <FilterTabs
         className={'filter-tabs-container'}
         items={filterTabItems}
@@ -105,14 +109,19 @@ const Event = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }:
     overflow: 'hidden',
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: '#000',
+    height: '100%',
+
+    '.filter-tabs-container': {
+      marginBottom: 16
+    },
 
     '.event-list-container': {
       flex: 1,
       overflow: 'auto',
+      paddingTop: 12,
       paddingLeft: 16,
       paddingRight: 16,
-      paddingBottom: 34
+      paddingBottom: 12
     },
 
     '.event-item + .event-item': {

packages/extension-koni-ui/src/Popup/Home/Leaderboard/LeaderboardTemp.tsx

@@ -76,8 +76,6 @@ const Component = ({ className }: Props): React.ReactElement => {
 
 const Leaderboard = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
   return {
-    backgroundColor: '#000',
-
     '.top-account-item-wrapper': {
       maxWidth: 94,
       flex: 1,

packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx

@@ -1,8 +1,9 @@
 // Copyright 2019-2022 @subwallet/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import React, { useMemo } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { TaskItem, TaskItemType } from './TaskItem';
@@ -15,6 +16,8 @@ type TaskSectionType = {
 }
 
 const Component = ({ className }: Props): React.ReactElement => {
+  const { setBackgroundStyle } = useContext(HomeContext);
+
   const taskSections: TaskSectionType[] = useMemo(() => {
     return [
       {
@@ -130,6 +133,14 @@ const Component = ({ className }: Props): React.ReactElement => {
     ] as TaskSectionType[];
   }, []);
 
+  useEffect(() => {
+    setBackgroundStyle('style-2');
+
+    return () => {
+      setBackgroundStyle(undefined);
+    };
+  }, [setBackgroundStyle]);
+
   return (
     <div className={className}>
       {
@@ -160,8 +171,6 @@ const Component = ({ className }: Props): React.ReactElement => {
 
 const MissionTemp = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
   return {
-    backgroundColor: '#0e8a6a',
-
     '.task-section-title': {
       fontFamily: extendToken.fontDruk,
       fontSize: '28px',

packages/extension-koni-ui/src/Popup/Home/index.tsx

@@ -3,15 +3,14 @@
 
 import { CampaignBanner } from '@subwallet/extension-base/background/KoniTypes';
 import { CampaignBannerModal, Layout } from '@subwallet/extension-koni-ui/components';
-import { GlobalSearchTokenModal } from '@subwallet/extension-koni-ui/components/Modal/GlobalSearchTokenModal';
+import { LayoutBaseProps } from '@subwallet/extension-koni-ui/components/Layout/base/Base';
 import { MaintenanceInfo, MetadataHandler } from '@subwallet/extension-koni-ui/connector/booka/metadata';
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { useAccountBalance, useGetBannerByScreen, useGetChainSlugsByAccountType, useTokenGroup } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { ModalContext } from '@subwallet/react-ui';
 import CN from 'classnames';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Outlet } from 'react-router';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -23,7 +22,6 @@ const apiSDK = BookaSdk.instance;
 const metadataHandler = MetadataHandler.instance;
 
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
-  const { activeModal, inactiveModal } = useContext(ModalContext);
   const chainsByAccountType = useGetChainSlugsByAccountType();
   const tokenGroupStructure = useTokenGroup(chainsByAccountType);
   const accountBalance = useAccountBalance(tokenGroupStructure.tokenGroupMap);
@@ -34,15 +32,9 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   const firstBanner = useMemo((): CampaignBanner | undefined => banners[0], [banners]);
-  const navigate = useNavigate();
-
-  const onOpenGlobalSearchToken = useCallback(() => {
-    activeModal(GlobalSearchTokenModalId);
-  }, [activeModal]);
 
-  const onCloseGlobalSearchToken = useCallback(() => {
-    inactiveModal(GlobalSearchTokenModalId);
-  }, [inactiveModal]);
+  const [backgroundStyle, setBackgroundStyle] = useState<LayoutBaseProps['backgroundStyle'] | undefined>();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const handleMaintenance = (info: MaintenanceInfo) => {
@@ -67,37 +59,22 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     };
   }, [navigate]);
 
-  const onTabSelected = useCallback(
-    (key: string) => {
-      //
-    },
-    []
-  );
-
   return (
     <>
       <HomeContext.Provider value={{
         tokenGroupStructure,
         accountBalance,
-        setContainerClass
+        setContainerClass,
+        setBackgroundStyle
       }}
       >
         <Layout.Home
+          backgroundStyle={backgroundStyle}
           className={CN('home', 'home-container', className, containerClass)}
-          onClickSearchIcon={onOpenGlobalSearchToken}
-          onTabSelected={onTabSelected}
-          showGiftIcon
         >
           <Outlet />
         </Layout.Home>
       </HomeContext.Provider>
-
-      <GlobalSearchTokenModal
-        id={GlobalSearchTokenModalId}
-        onCancel={onCloseGlobalSearchToken}
-        sortedTokenSlugs={tokenGroupStructure.sortedTokenSlugs}
-        tokenBalanceMap={accountBalance.tokenBalanceMap}
-      />
       {firstBanner && <CampaignBannerModal banner={firstBanner} />}
     </>
   );

packages/extension-koni-ui/src/components/FilterTabs.tsx

@@ -46,10 +46,12 @@ function Component ({ className = '', items, onSelect, selectedItem }: Props): R
   );
 }
 
-export const FilterTabs = styled(Component)<Props>(({ theme: { token } }: Props) => {
+export const FilterTabs = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
   return {
     display: 'flex',
     gap: token.size,
+    paddingLeft: 16,
+    paddingRight: 16,
 
     '.__tab-item': {
       cursor: 'pointer',
@@ -58,13 +60,16 @@ export const FilterTabs = styled(Component)<Props>(({ theme: { token } }: Props)
     },
 
     '.__tab-item-label': {
-      fontSize: token.fontSizeLG,
-      lineHeight: token.lineHeightLG,
-      paddingTop: token.sizeXS + 2,
-      paddingBottom: token.sizeXS,
-      fontWeight: token.headingFontWeight,
+      fontFamily: extendToken.fontDruk,
+      fontSize: '24px',
+      fontStyle: 'normal',
+      fontWeight: 500,
+      lineHeight: '26px',
+      letterSpacing: '-0.72px',
       textTransform: 'uppercase',
-      'white-space': 'nowrap'
+      'white-space': 'nowrap',
+      paddingTop: 4,
+      paddingBottom: 2
     },
 
     '.__tab-item:after': {

packages/extension-koni-ui/src/components/Layout/base/Base.tsx

@@ -181,6 +181,8 @@ const Component = ({ backgroundStyle = 'style-1', children, className, headerIco
 };
 
 const Base = styled(Component)<LayoutBaseProps>(({ theme: { extendToken, token } }: LayoutBaseProps) => ({
+  backgroundColor: extendToken.mythColorDark,
+
   '.ant-sw-screen-layout-body': {
     overflow: 'hidden'
   },
@@ -193,11 +195,15 @@ const Base = styled(Component)<LayoutBaseProps>(({ theme: { extendToken, token }
   },
 
   '&.-background-style-1': {
-
+    backgroundImage: 'url(/images/mythical/layout/background-1.jpg)',
+    backgroundPosition: 'center bottom',
+    backgroundSize: 'cover'
   },
 
   '&.-background-style-2': {
-
+    backgroundImage: 'url(/images/mythical/layout/background-2.jpg)',
+    backgroundPosition: 'center bottom',
+    backgroundSize: 'cover'
   },
 
   '> .ant-sw-screen-layout-header .ant-sw-header-bg-default': {

packages/extension-koni-ui/src/components/Layout/base/Home.tsx

@@ -29,6 +29,7 @@ const Component = ({ backgroundStyle, children, className, onClickFilterIcon, on
 
   return (
     <Layout.Base
+      backgroundStyle={backgroundStyle}
       className={className}
       headerCenter={false}
       headerLeft={'default'}
@@ -45,12 +46,5 @@ const Component = ({ backgroundStyle, children, className, onClickFilterIcon, on
 };
 
 export const Home = styled(Component)<LayoutBaseProps>(({ theme: { extendToken, token } }: LayoutBaseProps) => ({
-  '.invite-button': {
-    position: 'relative'
-  },
 
-  '.invite-tooltip': {
-    position: 'absolute',
-    right: 0
-  }
 }));

packages/extension-koni-ui/src/components/Mythical/Common/MainScreenHeader.tsx

@@ -5,19 +5,53 @@ import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import React from 'react';
 import styled from 'styled-components';
 
-type Props = ThemeProps;
+type Props = ThemeProps & {
+  title: string;
+  rightPartNode?: React.ReactNode
+};
 
-const Component = ({ className }: Props): React.ReactElement => {
+const Component = ({ className, rightPartNode, title }: Props): React.ReactElement => {
   return (
     <div className={className}>
+      <div className='__left-part'>
+        <div className='__screen-title'>
+          {title}
+        </div>
+      </div>
 
+      {
+        !!rightPartNode && (
+          <div className='__right-part'>
+            {rightPartNode}
+          </div>
+        )
+      }
     </div>
   );
 };
 
 const MainScreenHeader = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
   return {
+    display: 'flex',
+    padding: '20px 16px',
+
+    '.__left-part': {
+      flex: 1
+    },
+
+    '.__screen-title': {
+      color: token.colorWhite,
+      fontFamily: extendToken.fontPermanentMarker,
+      fontSize: '28px',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      lineHeight: '34px',
+      textTransform: 'uppercase'
+    },
 
+    '.__right-part': {
+      flex: 1
+    }
   };
 });
 

packages/extension-koni-ui/src/types/context.ts

@@ -1,11 +1,13 @@
 // Copyright 2019-2022 @polkadot/extension authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { LayoutBaseProps } from '@subwallet/extension-koni-ui/components/Layout/base/Base';
 import { AccountBalanceHookType, TokenGroupHookType } from '@subwallet/extension-koni-ui/types/hook';
 import { Dispatch, SetStateAction } from 'react';
 
 export type HomeContextType = {
   tokenGroupStructure: TokenGroupHookType,
   accountBalance: AccountBalanceHookType,
   setContainerClass: Dispatch<SetStateAction<string | undefined>>;
+  setBackgroundStyle: Dispatch<SetStateAction<LayoutBaseProps['backgroundStyle'] | undefined>>;
 }