From 6eea6dcd697183ce3249fd8ae9320258a50aa177 Mon Sep 17 00:00:00 2001 From: lw-cdm Date: Wed, 25 Oct 2023 12:39:16 +0700 Subject: [PATCH 1/2] [Issue - 2014] Update responsive for dapps --- packages/extension-koni-ui/package.json | 5 +- .../CrowdloanContributionsResult.tsx | 5 +- .../src/Popup/DApps/DAppItem.tsx | 104 +++++++- .../src/Popup/DApps/FeatureDAppItem.tsx | 30 ++- .../src/Popup/DApps/index.tsx | 245 ++++++++++-------- .../extension-koni-ui/src/Popup/router.tsx | 11 +- .../src/components/Layout/base/Base.tsx | 12 +- .../Layout/parts/SideMenu/SideMenu.tsx | 7 +- packages/webapp/public/assets/reset.css | 3 +- yarn.lock | 46 +++- 10 files changed, 321 insertions(+), 147 deletions(-) diff --git a/packages/extension-koni-ui/package.json b/packages/extension-koni-ui/package.json index caf389fd54..1d422e158e 100644 --- a/packages/extension-koni-ui/package.json +++ b/packages/extension-koni-ui/package.json @@ -43,7 +43,6 @@ "@subwallet/keyring": "^0.1.1", "@subwallet/react-ui": "5.1.2-b73", "@subwallet/ui-keyring": "^0.1.1", - "@trendyol-js/react-carousel": "^3.0.2", "@walletconnect/types": "^2.8.4", "axios": "^1.2.1", "bip39": "^3.1.0", @@ -80,7 +79,8 @@ "redux-toolkit": "^1.1.2-1", "semantic-ui-react": "^2.1.4", "styled-components": "^5.3.6", - "usehooks-ts": "^2.9.1" + "usehooks-ts": "^2.9.1", + "react-slick": "^0.29.0" }, "devDependencies": { "@subwallet/extension-mocks": "^1.1.12-1", @@ -94,6 +94,7 @@ "@types/redux-persist": "^4.3.1", "@types/sinon-chrome": "^2.2.11", "@types/store": "^2.0.2", + "@types/react-slick": "^0.23.11", "@types/styled-components": "^5.1.26", "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0", "enzyme": "^3.11.0", diff --git a/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx b/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx index 36c2b22347..9087eba755 100644 --- a/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx +++ b/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx @@ -508,7 +508,10 @@ const Component: React.FC = ({ className = '' }: Props) => { )} {!!filteredTableItems.length && !loading && ( - + )} {!filteredTableItems.length && !loading && (
diff --git a/packages/extension-koni-ui/src/Popup/DApps/DAppItem.tsx b/packages/extension-koni-ui/src/Popup/DApps/DAppItem.tsx index cac4bb83af..efd09b3cbe 100644 --- a/packages/extension-koni-ui/src/Popup/DApps/DAppItem.tsx +++ b/packages/extension-koni-ui/src/Popup/DApps/DAppItem.tsx @@ -17,11 +17,13 @@ import { useTranslation } from 'react-i18next'; import styled, { ThemeContext } from 'styled-components'; import { useLocalStorage } from 'usehooks-ts'; -type Props = ThemeProps & DAppInfo; +type Props = ThemeProps & DAppInfo & { + compactMode?: boolean +}; function Component (props: Props): React.ReactElement { const { categories, categoryMap, chains, - className = '', description, icon, id, subtitle, + className = '', compactMode, description, icon, id, subtitle, title, url } = props; const { t } = useTranslation(); const [dAppsFavorite, setDAppsFavorite] = useLocalStorage(DAPPS_FAVORITE, DEFAULT_DAPPS_FAVORITE); @@ -37,14 +39,69 @@ function Component (props: Props): React.ReactElement { const isStared = dAppsFavorite[id]; + if (compactMode) { + return ( +
+ +
+
+
+ {title} +
+ + { + !!categories && !!categories.length && ( +
+ {categories.map((c) => ( + + {t(categoryMap[c]?.name || capitalize(c))} + + ))} +
+ ) + } +
+
+ {subtitle} +
+
+
+ ); + } + return (
{ const DAppItem = styled(Component)(({ theme: { token } }: Props) => { return { - padding: token.padding, overflow: 'hidden', - backgroundColor: token.colorBgSecondary, - borderRadius: token.borderRadiusLG, cursor: 'pointer', + '&.-normal-mode': { + padding: token.padding, + backgroundColor: token.colorBgSecondary, + borderRadius: token.borderRadiusLG + }, + '.__item-header': { display: 'flex', overflow: 'hidden', @@ -154,6 +214,13 @@ const DAppItem = styled(Component)(({ theme: { token } }: Props) => { overflow: 'hidden', marginBottom: token.marginSM }, + '.__item-tags-area': { + display: 'flex', + gap: token.sizeXS + }, + '.__item-tag': { + marginRight: 0 + }, '.__item-footer': { display: 'flex', justifyContent: 'space-between', @@ -168,8 +235,29 @@ const DAppItem = styled(Component)(({ theme: { token } }: Props) => { } }, - '&:hover': { + '&.-normal-mode:hover': { backgroundColor: token.colorBgInput + }, + + // compact + + '&.-compact-mode': { + display: 'flex', + overflow: 'hidden', + gap: token.sizeXS, + alignItems: 'center', + + '.ant-image': { + width: 44, + height: 44, + minWidth: 44 + }, + + '.__item-title-wrapper': { + display: 'flex', + alignItems: 'center', + gap: token.sizeXXS + } } }; }); diff --git a/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx b/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx index 9bd47db7ad..9193c2ec5f 100644 --- a/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx +++ b/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx @@ -12,16 +12,33 @@ import React, { Context, useContext } from 'react'; import { useTranslation } from 'react-i18next'; import styled, { ThemeContext } from 'styled-components'; -type Props = ThemeProps & DAppInfo; +type Props = ThemeProps & DAppInfo & { + compactMode?: boolean +}; function Component (props: Props): React.ReactElement { - const { className = '', description, icon, preview_image: previewImage, subtitle, + const { className = '', compactMode, description, icon, preview_image: previewImage, subtitle, title, url } = props; const logoMap = useContext(ThemeContext as Context).logoMap; const { t } = useTranslation(); + if (compactMode) { + return ( +
+
+
+
+ ); + } + return (
(({ theme: { token } }: Props) = '.__item-meta-area': { backgroundColor: token.colorBgInput } + }, + + // compact + + '&.-compact-mode': { + '.__item-preview-area': { + height: 120, + backgroundPosition: 'center' + } } }; }); diff --git a/packages/extension-koni-ui/src/Popup/DApps/index.tsx b/packages/extension-koni-ui/src/Popup/DApps/index.tsx index 0eff2fa6de..88c0b8a040 100644 --- a/packages/extension-koni-ui/src/Popup/DApps/index.tsx +++ b/packages/extension-koni-ui/src/Popup/DApps/index.tsx @@ -13,16 +13,14 @@ import FeatureDAppItem from '@subwallet/extension-koni-ui/Popup/DApps/FeatureDAp import { RootState } from '@subwallet/extension-koni-ui/stores'; import { ThemeProps } from '@subwallet/extension-koni-ui/types'; import { DAppCategory, DAppCategoryType, DAppInfo } from '@subwallet/extension-koni-ui/types/dapp'; -import { ButtonProps, Icon, ModalContext, SwHeader } from '@subwallet/react-ui'; -import { Carousel } from '@trendyol-js/react-carousel'; -import { ArrowCircleLeft, ArrowCircleRight, FadersHorizontal, X } from 'phosphor-react'; +import { Icon, ModalContext, SwSubHeader } from '@subwallet/react-ui'; +import { ArrowCircleLeft, ArrowCircleRight, FadersHorizontal } from 'phosphor-react'; import React, { SyntheticEvent, useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation } from 'react-router-dom'; +import Slider, { Settings } from 'react-slick'; import styled from 'styled-components'; -import useDefaultNavigate from '../../hooks/router/useDefaultNavigate'; - type Props = ThemeProps; const FILTER_MODAL_ID = 'dapp-filter-modal'; @@ -37,12 +35,46 @@ const Component: React.FC = ({ className }: Props) => { const [searchInput, setSearchInput] = useState(''); const { activeModal } = useContext(ModalContext); const { isWebUI } = useContext(ScreenContext); - const { goHome } = useDefaultNavigate(); const { categories, dApps, featureDApps } = useSelector((state: RootState) => state.dApp); const [sliderDisplayCount, setSliderDisplayCount] = useState(0); + const sliderSettings: Settings = useMemo(() => { + return { + dots: true, + infinite: sliderDisplayCount <= featureDApps.length, + speed: 500, + slidesToShow: sliderDisplayCount, + slidesToScroll: 1, + swipeToSlide: true, + waitForAnimate: true, + autoplay: true, + nextArrow: ( +
+
+ +
+
+ ), + prevArrow: ( +
+
+ +
+
+ ) + }; + }, [featureDApps.length, sliderDisplayCount]); + useEffect(() => { - if (location.pathname === '/dapps') { + if (location.pathname === '/home/dapps') { setTitle(t('DApps')); } }, [location.pathname, setTitle, t]); @@ -121,22 +153,6 @@ const Component: React.FC = ({ className }: Props) => { [activeModal] ); - const headerIcons = useMemo(() => { - return [ - { - icon: ( - - ), - onClick: goHome - } - ]; - }, [goHome]); - const updateSliderDisplayCount = () => { const element = document.getElementById('feature-dapp-slider-wrapper'); // Replace with your element's ID @@ -163,14 +179,13 @@ const Component: React.FC = ({ className }: Props) => {
{ !isWebUI && ( - - {t('DApps')} - + ) } @@ -184,43 +199,19 @@ const Component: React.FC = ({ className }: Props) => { > { !!featureDApps.length && !!sliderDisplayCount && ( - - -
- )} - responsive={true} - rightArrow={( -
- -
- )} - show={sliderDisplayCount} - slide={1} + {...sliderSettings} > - { - // [featureDApps[0]].map((i, index) => ( - featureDApps.map((i, index) => ( - - )) - } - + {featureDApps.map((i, index) => ( + + ))} + ) }
@@ -260,6 +251,7 @@ const Component: React.FC = ({ className }: Props) => { filteredItems.map((i) => ( = ({ className }: Props) => { const DApps = styled(Component)(({ theme: { token } }: Props) => { return { height: '100%', + display: 'flex', + flexDirection: 'column', + + '.__header-area': { + '.ant-sw-header-center-part': { + marginLeft: 0 + }, - '.ant-sw-header-container': { - paddingTop: token.padding, - paddingBottom: token.padding, - backgroundColor: token.colorBgDefault + '.ant-sw-sub-header-center-part-pl': { + textAlign: 'left' + } }, - '.ant-sw-header-center-part': { - color: token.colorTextLight1, - fontSize: token.fontSizeHeading4, - lineHeight: token.lineHeightHeading4, - fontWeight: token.headingFontWeight + '.slick-dots': { + display: 'flex !important', + listStyle: 'none', + gap: 6, + marginBottom: 0, + paddingLeft: 0, + position: 'absolute', + right: 28, + bottom: 8, + pointerEvents: 'none', + opacity: 0, + + li: { + width: 4, + height: 4, + backgroundColor: 'rgba(255, 255, 255, 0.30)', + borderRadius: 4 + }, + + 'li.slick-active': { + width: 16, + height: 4, + backgroundColor: token.colorWhite + }, + + button: { + display: 'none' + } }, '.__scroll-container': { - height: '100%', - marginLeft: -44, - marginRight: -44, - paddingLeft: 44, - paddingRight: 44, + flex: 1, overflow: 'auto' }, @@ -333,8 +350,7 @@ const DApps = styled(Component)(({ theme: { token } }: Props) => { '.filter-tabs-container': { flex: 1, - overflowX: 'auto', - flexBasis: 650 + overflowX: 'auto' }, '.search-container': { @@ -355,7 +371,6 @@ const DApps = styled(Component)(({ theme: { token } }: Props) => { '.__feature-dapp-item': { marginRight: token.size, - height: '100%', display: 'flex', flexDirection: 'column', @@ -381,40 +396,32 @@ const DApps = styled(Component)(({ theme: { token } }: Props) => { }, '.__carousel-container': { + position: 'relative', marginBottom: 40, - '> div:first-of-type, > div:last-of-type': { - '&:not(.styles-module_item-provider__YgMwz)': { - position: 'relative', - zIndex: 10 - } - }, - - '.styles-module_item-provider__YgMwz': { - cursor: 'default' - }, - - '.styles-module_item-tracker__3bypy': { - alignItems: 'stretch' - }, - - '.__left-arrow, .__right-arrow': { + '.slick-prev, .slick-next': { width: 40, - display: 'flex', position: 'absolute', top: 0, bottom: 0, - alignItems: 'center', - justifyContent: 'center', - cursor: 'pointer' + cursor: 'pointer', + zIndex: 20 }, - '.__left-arrow': { + '.slick-prev': { left: 0 }, - '.__right-arrow': { + '.slick-next': { right: token.size + }, + + '.__left-arrow, .__right-arrow': { + width: '100%', + height: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center' } }, @@ -444,8 +451,36 @@ const DApps = styled(Component)(({ theme: { token } }: Props) => { }, '@media (max-width: 767px)': { + '.__carousel-container': { + marginBottom: 24 + }, + + '.__dapp-list-area': { + marginTop: 24 + }, + '.__dapp-list-container': { gridTemplateColumns: 'repeat(1, 1fr)' + }, + + '.slick-arrow': { + opacity: 0 + }, + + '.slick-dots': { + opacity: 1 + }, + + '.__tool-area': { + '.filter-tabs-container': { + order: 1 + }, + + '.search-container': { + maxWidth: 'none', + order: -1, + flexBasis: '100%' + } } } }; diff --git a/packages/extension-koni-ui/src/Popup/router.tsx b/packages/extension-koni-ui/src/Popup/router.tsx index f3cc3ac641..503393073b 100644 --- a/packages/extension-koni-ui/src/Popup/router.tsx +++ b/packages/extension-koni-ui/src/Popup/router.tsx @@ -195,10 +195,7 @@ export const router = createBrowserRouter([ MissionPool.generateRouterObject('mission-pools'), History.generateRouterObject('history'), History.generateRouterObject('history/:chain/:extrinsicHashOrId'), - { - path: 'dapps', - element: - } + DApps.generateRouterObject('dapps') ] }, { @@ -300,12 +297,6 @@ export const router = createBrowserRouter([ ConnectionDetail.generateRouterObject('detail/:topic') ] }, - { - path: '/dapps', - children: [ - DApps.generateRouterObject('/dapps') - ] - }, { ...EarningOutlet.generateRouterObject('earning-demo'), children: [ 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 5c2e0df136..527d4c2be5 100644 --- a/packages/extension-koni-ui/src/components/Layout/base/Base.tsx +++ b/packages/extension-koni-ui/src/components/Layout/base/Base.tsx @@ -11,7 +11,7 @@ import { ThemeProps } from '@subwallet/extension-koni-ui/types'; import { SwScreenLayout } from '@subwallet/react-ui'; import { SwTabBarItem } from '@subwallet/react-ui/es/sw-tab-bar'; import CN from 'classnames'; -import { Aperture, Clock, Parachute, Rocket, Vault, Wallet } from 'phosphor-react'; +import { Aperture, Clock, Globe, Parachute, Rocket, Vault, Wallet } from 'phosphor-react'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate } from 'react-router-dom'; @@ -83,6 +83,16 @@ const Component = ({ children, className, headerIcons, isSetTitleContext = true, key: 'earning', url: '/home/earning' }, + { + icon: { + type: 'phosphor', + phosphorIcon: Globe, + weight: 'fill' + }, + label: t('DApps'), + key: 'dapps', + url: '/home/dapps' + }, { icon: { type: 'phosphor', diff --git a/packages/extension-koni-ui/src/components/Layout/parts/SideMenu/SideMenu.tsx b/packages/extension-koni-ui/src/components/Layout/parts/SideMenu/SideMenu.tsx index 87f2fc58e5..8a5fb30df5 100644 --- a/packages/extension-koni-ui/src/components/Layout/parts/SideMenu/SideMenu.tsx +++ b/packages/extension-koni-ui/src/components/Layout/parts/SideMenu/SideMenu.tsx @@ -47,11 +47,6 @@ function Component ({ className, value: '/home/crowdloans', icon: Rocket }, - // { - // label: t('Staking'), - // value: '/home/staking', - // icon: Database - // }, { label: t('Earning'), value: '/home/earning/', @@ -59,7 +54,7 @@ function Component ({ className, }, { label: t('DApps'), - value: '/dapps', + value: '/home/dapps', icon: Globe }, { diff --git a/packages/webapp/public/assets/reset.css b/packages/webapp/public/assets/reset.css index 4818195824..5fd341173f 100644 --- a/packages/webapp/public/assets/reset.css +++ b/packages/webapp/public/assets/reset.css @@ -638,4 +638,5 @@ div#popup-container { margin-inline-start: 12px; } - +/* slick */ +.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} diff --git a/yarn.lock b/yarn.lock index b152e737b6..8b2540dfdd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6044,7 +6044,6 @@ __metadata: "@subwallet/keyring": ^0.1.1 "@subwallet/react-ui": 5.1.2-b73 "@subwallet/ui-keyring": ^0.1.1 - "@trendyol-js/react-carousel": ^3.0.2 "@types/bn.js": ^5.1.1 "@types/enzyme": ^3.10.12 "@types/enzyme-adapter-react-16": ^1.0.6 @@ -6052,6 +6051,7 @@ __metadata: "@types/react-copy-to-clipboard": ^5.0.4 "@types/react-dom": ^18.0.9 "@types/react-lazy-load-image-component": ^1.5.3 + "@types/react-slick": ^0.23.11 "@types/redux-persist": ^4.3.1 "@types/sinon-chrome": ^2.2.11 "@types/store": ^2.0.2 @@ -6087,6 +6087,7 @@ __metadata: react-router-dom: ~6.9.0 react-select: ^5.7.0 react-share: ^4.4.1 + react-slick: ^0.29.0 react-tabs: ^6.0.0 react-tooltip: 4.5.1 react-transition-group: ^4.4.5 @@ -6362,15 +6363,6 @@ __metadata: languageName: node linkType: hard -"@trendyol-js/react-carousel@npm:^3.0.2": - version: 3.0.2 - resolution: "@trendyol-js/react-carousel@npm:3.0.2" - peerDependencies: - react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 - checksum: d55b0abea0684bf7550f7a6812cae8a598e1779374a7023fe4b748dee30eade988f78e495028c0c966e16589f444f2b07f702be3cff7032f822affb02dbcc899 - languageName: node - linkType: hard - "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14": version: 7.1.20 resolution: "@types/babel__core@npm:7.1.20" @@ -6857,6 +6849,15 @@ __metadata: languageName: node linkType: hard +"@types/react-slick@npm:^0.23.11": + version: 0.23.11 + resolution: "@types/react-slick@npm:0.23.11" + dependencies: + "@types/react": "*" + checksum: 33f7d7e1c116b4d59a75a7e4d775436bdc7bb15b8ca6968e22c4a0b6de360d853d25f1937fa26d8d2445e8c477f6569b739965ef7273ced75b3e62ca3c5308d8 + languageName: node + linkType: hard + "@types/react-transition-group@npm:^4.4.0": version: 4.4.5 resolution: "@types/react-transition-group@npm:4.4.5" @@ -12067,6 +12068,13 @@ __metadata: languageName: node linkType: hard +"enquire.js@npm:^2.1.6": + version: 2.1.6 + resolution: "enquire.js@npm:2.1.6" + checksum: bb094054ee2768edafc3b80fb2b65b79d63160d625085162e9c9016843b6eaa13d7430201bf593c2e31e1725b3208f47f57aa27e03b19729e7590d1ca2241451 + languageName: node + linkType: hard + "ensure-type@npm:^1.5.0": version: 1.5.1 resolution: "ensure-type@npm:1.5.1" @@ -21431,6 +21439,22 @@ __metadata: languageName: node linkType: hard +"react-slick@npm:^0.29.0": + version: 0.29.0 + resolution: "react-slick@npm:0.29.0" + dependencies: + classnames: ^2.2.5 + enquire.js: ^2.1.6 + json2mq: ^0.2.0 + lodash.debounce: ^4.0.8 + resize-observer-polyfill: ^1.5.0 + peerDependencies: + react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 + checksum: 67ce4981914da8a76c6efb4bc8ee7ab69e04c33bd4b3517419ab2165679a3c701dae781556149713fe2c542f84188b7ca101ea58883537be5c05756408f48c8b + languageName: node + linkType: hard + "react-superellipse@npm:^0.0.6": version: 0.0.6 resolution: "react-superellipse@npm:0.0.6" @@ -21981,7 +22005,7 @@ __metadata: languageName: node linkType: hard -"resize-observer-polyfill@npm:^1.5.1": +"resize-observer-polyfill@npm:^1.5.0, resize-observer-polyfill@npm:^1.5.1": version: 1.5.1 resolution: "resize-observer-polyfill@npm:1.5.1" checksum: 57e7f79489867b00ba43c9c051524a5c8f162a61d5547e99333549afc23e15c44fd43f2f318ea0261ea98c0eb3158cca261e6f48d66e1ed1cd1f340a43977094 From ce8d79d55149302b63903556ead95849a68bdd54 Mon Sep 17 00:00:00 2001 From: lw-cdm Date: Wed, 25 Oct 2023 18:37:49 +0700 Subject: [PATCH 2/2] [Issue - 2014] Fix UI issue related to header on small screen --- .../src/Popup/DApps/FeatureDAppItem.tsx | 9 ++++--- .../src/Popup/Settings/index.tsx | 27 +++++++++++-------- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx b/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx index 9193c2ec5f..14502e58c8 100644 --- a/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx +++ b/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx @@ -99,7 +99,7 @@ const FeatureDAppItem = styled(Component)(({ theme: { token } }: Props) = '.__item-preview-area': { backgroundSize: 'cover', - backgroundPosition: 'top center' + backgroundPosition: 'center' }, '.__item-overlay': { @@ -176,8 +176,11 @@ const FeatureDAppItem = styled(Component)(({ theme: { token } }: Props) = '&.-compact-mode': { '.__item-preview-area': { - height: 120, - backgroundPosition: 'center' + '&:before': { + content: '""', + display: 'block', + paddingTop: `${1 / 3 * 100}%` + } } } }; diff --git a/packages/extension-koni-ui/src/Popup/Settings/index.tsx b/packages/extension-koni-ui/src/Popup/Settings/index.tsx index 8ddb588006..798329deb3 100644 --- a/packages/extension-koni-ui/src/Popup/Settings/index.tsx +++ b/packages/extension-koni-ui/src/Popup/Settings/index.tsx @@ -287,14 +287,17 @@ function Component ({ className = '' }: Props): React.ReactElement { return ( <> - {!isWebUI && - {t('Settings')} - } + {!isWebUI && ( + + {t('Settings')} + + )}
{ @@ -360,9 +363,11 @@ export const Settings = styled(Component)(({ theme: { extendToken, token flexDirection: 'column', '.ant-sw-header-container': { - paddingTop: token.padding, - paddingBottom: token.padding, - backgroundColor: token.colorBgDefault + backgroundColor: token.colorBgDefault, + minHeight: 'auto', + position: 'sticky', + top: 0, + zIndex: 10 }, '.web-ui-enable &, .web-ui-enable & .ant-sw-header-container': {