diff --git a/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx
index 03c05a9054..8a03235cbc 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx
+++ b/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 (
+
+
(({ 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': {
diff --git a/packages/extension-koni-ui/src/Popup/Home/Leaderboard/LeaderboardTemp.tsx b/packages/extension-koni-ui/src/Popup/Home/Leaderboard/LeaderboardTemp.tsx
index b3195a573d..2e9a6339dc 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Leaderboard/LeaderboardTemp.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Leaderboard/LeaderboardTemp.tsx
@@ -76,8 +76,6 @@ const Component = ({ className }: Props): React.ReactElement => {
const Leaderboard = styled(Component)(({ theme: { extendToken, token } }: ThemeProps) => {
return {
- backgroundColor: '#000',
-
'.top-account-item-wrapper': {
maxWidth: 94,
flex: 1,
diff --git a/packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx b/packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx
index 652105c17f..19fd3ab64a 100644
--- a/packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx
+++ b/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 (
{
@@ -160,8 +171,6 @@ const Component = ({ className }: Props): React.ReactElement => {
const MissionTemp = styled(Component)
(({ theme: { extendToken, token } }: ThemeProps) => {
return {
- backgroundColor: '#0e8a6a',
-
'.task-section-title': {
fontFamily: extendToken.fontDruk,
fontSize: '28px',
diff --git a/packages/extension-koni-ui/src/Popup/Home/index.tsx b/packages/extension-koni-ui/src/Popup/Home/index.tsx
index c5cc150dcd..03d28b3766 100644
--- a/packages/extension-koni-ui/src/Popup/Home/index.tsx
+++ b/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 {
- 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 {
// @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();
+ const navigate = useNavigate();
useEffect(() => {
const handleMaintenance = (info: MaintenanceInfo) => {
@@ -67,37 +59,22 @@ function Component ({ className = '' }: Props): React.ReactElement {
};
}, [navigate]);
- const onTabSelected = useCallback(
- (key: string) => {
- //
- },
- []
- );
-
return (
<>
-
-
{firstBanner && }
>
);
diff --git a/packages/extension-koni-ui/src/components/FilterTabs.tsx b/packages/extension-koni-ui/src/components/FilterTabs.tsx
index b5607896a2..a4850f8dd2 100644
--- a/packages/extension-koni-ui/src/components/FilterTabs.tsx
+++ b/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)(({ theme: { token } }: Props) => {
+export const FilterTabs = styled(Component)(({ 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)(({ 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': {
diff --git a/packages/extension-koni-ui/src/components/Layout/base/Base.tsx b/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
index b36e3de5d8..c51f95e522 100644
--- a/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
+++ b/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)(({ theme: { extendToken, token } }: LayoutBaseProps) => ({
+ backgroundColor: extendToken.mythColorDark,
+
'.ant-sw-screen-layout-body': {
overflow: 'hidden'
},
@@ -193,11 +195,15 @@ const Base = styled(Component)(({ 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': {
diff --git a/packages/extension-koni-ui/src/components/Layout/base/Home.tsx b/packages/extension-koni-ui/src/components/Layout/base/Home.tsx
index ba4105bf46..228ab05f93 100644
--- a/packages/extension-koni-ui/src/components/Layout/base/Home.tsx
+++ b/packages/extension-koni-ui/src/components/Layout/base/Home.tsx
@@ -29,6 +29,7 @@ const Component = ({ backgroundStyle, children, className, onClickFilterIcon, on
return (
(({ theme: { extendToken, token } }: LayoutBaseProps) => ({
- '.invite-button': {
- position: 'relative'
- },
- '.invite-tooltip': {
- position: 'absolute',
- right: 0
- }
}));
diff --git a/packages/extension-koni-ui/src/components/Mythical/Common/MainScreenHeader.tsx b/packages/extension-koni-ui/src/components/Mythical/Common/MainScreenHeader.tsx
index 70d78c536d..6ee6a984ce 100644
--- a/packages/extension-koni-ui/src/components/Mythical/Common/MainScreenHeader.tsx
+++ b/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 (
+
+ {
+ !!rightPartNode && (
+
+ {rightPartNode}
+
+ )
+ }
);
};
const MainScreenHeader = styled(Component)(({ 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
+ }
};
});
diff --git a/packages/extension-koni-ui/src/types/context.ts b/packages/extension-koni-ui/src/types/context.ts
index d20a1989d9..ca9db22aa5 100644
--- a/packages/extension-koni-ui/src/types/context.ts
+++ b/packages/extension-koni-ui/src/types/context.ts
@@ -1,6 +1,7 @@
// 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';
@@ -8,4 +9,5 @@ export type HomeContextType = {
tokenGroupStructure: TokenGroupHookType,
accountBalance: AccountBalanceHookType,
setContainerClass: Dispatch>;
+ setBackgroundStyle: Dispatch>;
}
diff --git a/packages/webapp/public/images/mythical/layout/background-1.jpg b/packages/webapp/public/images/mythical/layout/background-1.jpg
new file mode 100644
index 0000000000..04498d8485
Binary files /dev/null and b/packages/webapp/public/images/mythical/layout/background-1.jpg differ
diff --git a/packages/webapp/public/images/mythical/layout/background-2.jpg b/packages/webapp/public/images/mythical/layout/background-2.jpg
new file mode 100644
index 0000000000..eaba7d8b0f
Binary files /dev/null and b/packages/webapp/public/images/mythical/layout/background-2.jpg differ