From 16bc4df34fa3b49385ba20964cdc50e1eaacc977 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu <72752718+iuliacimpeanu@users.noreply.github.com> Date: Tue, 8 Jul 2025 13:03:30 +0300 Subject: [PATCH 1/2] UI fixes on scrollbar, icons and unlock panel. (#150) * Fixed transactions order * Added changelog. * Updated styles. * Updated UX for unlock panel * Updated styles on transaction item. * Updated changelog. --- CHANGELOG.md | 2 + src/components.d.ts | 222 ++++++++++++++++++ .../notifications-feed.scss | 69 +++--- .../unlock-panel-footer.scss | 2 +- .../functional/unlock-panel/unlock-panel.tsx | 4 +- .../transaction-list-item.scss | 3 +- src/global/variables.css | 2 + 7 files changed, 267 insertions(+), 37 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d33cae9..0835be76 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- [UI fixes on scrollbar, icons and unlock panel.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/150) + ## [[0.0.10](https://github.com/multiversx/mx-sdk-dapp-ui/pull/149)] - 2025-07-04 - [Fixed batch transactions order in toast.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/148) diff --git a/src/components.d.ts b/src/components.d.ts index 45b3512d..c70dce86 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -64,8 +64,14 @@ export namespace Components { interface MvxCloseIcon { } interface MvxCopyButton { + /** + * @default 'copy-button' + */ "class"?: string; "copyIcon"?: IconDefinition | string; + /** + * @default 'copy-button-icon' + */ "iconClass"?: string; "successIcon"?: IconDefinition | string; "text": string; @@ -91,6 +97,9 @@ export namespace Components { "width"?: number; } interface MvxFaIcon { + /** + * @default 'fa-icon' + */ "class"?: string; "description"?: string; "icon": IconDefinition | string; @@ -102,6 +111,9 @@ export namespace Components { "isValid": boolean; "label"?: string; "labelClass"?: string; + /** + * @default true + */ "showLabel"?: boolean; "valueDecimal": string; "valueInteger": string; @@ -113,6 +125,9 @@ export namespace Components { "confirmScreenData": IConfirmScreenData; } interface MvxLedgerConnect { + /** + * @default { accountScreenData: null, confirmScreenData: null, connectScreenData: {}, } + */ "data": ILedgerConnectPanelData; "getEventBus": () => Promise; } @@ -121,6 +136,9 @@ export namespace Components { } interface MvxLedgerIntro { "connectScreenData"?: IConnectScreenData; + /** + * @default false + */ "isAwaiting"?: boolean; } interface MvxLedgerProviderIcon { @@ -141,14 +159,26 @@ export namespace Components { } interface MvxPagination { "class"?: string; + /** + * @default 1 + */ "currentPage": number; + /** + * @default false + */ "isDisabled"?: boolean; "totalPages": number; } interface MvxPaginationEllipsis { + /** + * @default false + */ "isActive": boolean; } interface MvxPaginationEllipsisForm { + /** + * @default false + */ "isVisible": boolean; "maxPageToSearchFor": number; } @@ -166,27 +196,54 @@ export namespace Components { "class"?: string; } interface MvxProviderIdleScreen { + /** + * @default '' + */ "introText": string; + /** + * @default 'Requesting Connection' + */ "introTitle": string; + /** + * @default null + */ "provider": IProviderBase | null; } interface MvxSidePanel { "hasBackButton"?: boolean; + /** + * @default false + */ "isOpen": boolean; "panelClassName"?: string; "panelTitle": string; + /** + * @default true + */ "showHeader"?: boolean; } interface MvxSidePanelHeader { + /** + * @default true + */ "hasLeftButton"?: boolean; + /** + * @default true + */ "hasRightButton"?: boolean; "panelClassName"?: string; "panelTitle": string; } interface MvxSidePanelSwiper { "close": () => Promise; + /** + * @default false + */ "open": boolean; "openToSnapPoint": (snapIndex?: number) => Promise; + /** + * @default '' + */ "sidePanelIdentifier": string; } interface MvxSignTransactionsAdvanced { @@ -198,7 +255,13 @@ export namespace Components { "highlight"?: string; } interface MvxSignTransactionsAdvancedDataDecode { + /** + * @default DecodeMethodEnum.decimal + */ "currentDecodeMethod": DecodeMethodEnum; + /** + * @default false + */ "isToggled": boolean; } interface MvxSignTransactionsFooter { @@ -211,7 +274,13 @@ export namespace Components { "identifier": string; "interactor": string; "interactorIconUrl": string; + /** + * @default false + */ "isApp": boolean; + /** + * @default '~$0.00078' + */ "networkFee": string; "tokenIconUrl": string; "usdValue": string; @@ -240,8 +309,14 @@ export namespace Components { } interface MvxTooltip { "class"?: string; + /** + * @default 'top' + */ "position": 'top' | 'bottom'; "trigger": HTMLElement; + /** + * @default false + */ "triggerOnClick"?: boolean; } interface MvxTransactionAccount { @@ -249,6 +324,9 @@ export namespace Components { "class"?: string; "dataTestId"?: string; "scope": 'receiver' | 'sender'; + /** + * @default false + */ "showLockedAccounts": boolean; } interface MvxTransactionAccountName { @@ -293,10 +371,19 @@ export namespace Components { } interface MvxTransactionToast { "fullWidth"?: boolean; + /** + * @default '' + */ "processedTransactionsStatus": string | JSX.Element; "toastDataState": IToastDataState; + /** + * @default '' + */ "toastId": string; "transactionProgressState"?: ITransactionProgressState; + /** + * @default [] + */ "transactions": ITransactionListItem[]; "wrapperClass": string; } @@ -307,6 +394,9 @@ export namespace Components { "transactions": ITransactionListItem[]; } interface MvxTransactionToastDetails { + /** + * @default 5 + */ "maxShownTransactions": number; "processedTransactionsStatus"?: string | JSX.Element; "transactionClass": string; @@ -317,6 +407,9 @@ export namespace Components { "index": string; "link": string; "status"?: string; + /** + * @default 'transaction-details-list-item' + */ "transactionClass"?: string; } interface MvxTransactionToastProgress { @@ -355,6 +448,9 @@ export namespace Components { } interface MvxUnlockPanelGroup { "class"?: string; + /** + * @default [] + */ "providers": IProviderBase[]; } interface MvxUnlockProviderButton { @@ -362,8 +458,14 @@ export namespace Components { "provider": IProviderBase; } interface MvxWalletConnect { + /** + * @default { wcURI: '' } + */ "data": IWalletConnectPanelData; "getEventBus": () => Promise; + /** + * @default '' + */ "qrCodeSvg": string; } interface MvxWalletConnectAppGalleryIcon { @@ -380,7 +482,13 @@ export namespace Components { } interface MvxWalletConnectScan { "class"?: string; + /** + * @default '' + */ "qrCodeSvg": string; + /** + * @default '' + */ "walletConnectDeepLink"?: string; } interface MvxWalletProviderIcon { @@ -389,6 +497,9 @@ export namespace Components { interface MvxXaliasProviderIcon { } interface MvxXportalDownloadQrIcon { + /** + * @default '' + */ "class"?: string; } interface MvxXportalQrCodePreloader { @@ -1286,8 +1397,14 @@ declare namespace LocalJSX { interface MvxCloseIcon { } interface MvxCopyButton { + /** + * @default 'copy-button' + */ "class"?: string; "copyIcon"?: IconDefinition | string; + /** + * @default 'copy-button-icon' + */ "iconClass"?: string; "successIcon"?: IconDefinition | string; "text"?: string; @@ -1314,6 +1431,9 @@ declare namespace LocalJSX { "width"?: number; } interface MvxFaIcon { + /** + * @default 'fa-icon' + */ "class"?: string; "description"?: string; "icon"?: IconDefinition | string; @@ -1325,6 +1445,9 @@ declare namespace LocalJSX { "isValid"?: boolean; "label"?: string; "labelClass"?: string; + /** + * @default true + */ "showLabel"?: boolean; "valueDecimal"?: string; "valueInteger"?: string; @@ -1337,6 +1460,9 @@ declare namespace LocalJSX { "confirmScreenData"?: IConfirmScreenData; } interface MvxLedgerConnect { + /** + * @default { accountScreenData: null, confirmScreenData: null, connectScreenData: {}, } + */ "data"?: ILedgerConnectPanelData; } interface MvxLedgerIcon { @@ -1344,6 +1470,9 @@ declare namespace LocalJSX { } interface MvxLedgerIntro { "connectScreenData"?: IConnectScreenData; + /** + * @default false + */ "isAwaiting"?: boolean; "onConnect"?: (event: MvxLedgerIntroCustomEvent) => void; } @@ -1363,15 +1492,27 @@ declare namespace LocalJSX { } interface MvxPagination { "class"?: string; + /** + * @default 1 + */ "currentPage"?: number; + /** + * @default false + */ "isDisabled"?: boolean; "onPageChange"?: (event: MvxPaginationCustomEvent) => void; "totalPages"?: number; } interface MvxPaginationEllipsis { + /** + * @default false + */ "isActive"?: boolean; } interface MvxPaginationEllipsisForm { + /** + * @default false + */ "isVisible"?: boolean; "maxPageToSearchFor"?: number; "onSearch"?: (event: MvxPaginationEllipsisFormCustomEvent) => void; @@ -1388,23 +1529,44 @@ declare namespace LocalJSX { "class"?: string; } interface MvxProviderIdleScreen { + /** + * @default '' + */ "introText"?: string; + /** + * @default 'Requesting Connection' + */ "introTitle"?: string; "onAccess"?: (event: MvxProviderIdleScreenCustomEvent) => void; "onClose"?: (event: MvxProviderIdleScreenCustomEvent) => void; + /** + * @default null + */ "provider"?: IProviderBase | null; } interface MvxSidePanel { "hasBackButton"?: boolean; + /** + * @default false + */ "isOpen"?: boolean; "onBack"?: (event: MvxSidePanelCustomEvent) => void; "onClose"?: (event: MvxSidePanelCustomEvent) => void; "panelClassName"?: string; "panelTitle"?: string; + /** + * @default true + */ "showHeader"?: boolean; } interface MvxSidePanelHeader { + /** + * @default true + */ "hasLeftButton"?: boolean; + /** + * @default true + */ "hasRightButton"?: boolean; "onLeftButtonClick"?: (event: MvxSidePanelHeaderCustomEvent) => void; "onRightButtonClick"?: (event: MvxSidePanelHeaderCustomEvent) => void; @@ -1414,7 +1576,13 @@ declare namespace LocalJSX { interface MvxSidePanelSwiper { "onSheetDismiss"?: (event: MvxSidePanelSwiperCustomEvent) => void; "onSheetSnapChange"?: (event: MvxSidePanelSwiperCustomEvent<{ index: number; snapPoint: string }>) => void; + /** + * @default false + */ "open"?: boolean; + /** + * @default '' + */ "sidePanelIdentifier"?: string; } interface MvxSignTransactionsAdvanced { @@ -1426,7 +1594,13 @@ declare namespace LocalJSX { "highlight"?: string; } interface MvxSignTransactionsAdvancedDataDecode { + /** + * @default DecodeMethodEnum.decimal + */ "currentDecodeMethod"?: DecodeMethodEnum; + /** + * @default false + */ "isToggled"?: boolean; } interface MvxSignTransactionsFooter { @@ -1439,7 +1613,13 @@ declare namespace LocalJSX { "identifier"?: string; "interactor"?: string; "interactorIconUrl"?: string; + /** + * @default false + */ "isApp"?: boolean; + /** + * @default '~$0.00078' + */ "networkFee"?: string; "tokenIconUrl"?: string; "usdValue"?: string; @@ -1467,8 +1647,14 @@ declare namespace LocalJSX { interface MvxTooltip { "class"?: string; "onTriggerRender"?: (event: MvxTooltipCustomEvent) => void; + /** + * @default 'top' + */ "position"?: 'top' | 'bottom'; "trigger"?: HTMLElement; + /** + * @default false + */ "triggerOnClick"?: boolean; } interface MvxTransactionAccount { @@ -1476,6 +1662,9 @@ declare namespace LocalJSX { "class"?: string; "dataTestId"?: string; "scope"?: 'receiver' | 'sender'; + /** + * @default false + */ "showLockedAccounts"?: boolean; } interface MvxTransactionAccountName { @@ -1521,10 +1710,19 @@ declare namespace LocalJSX { interface MvxTransactionToast { "fullWidth"?: boolean; "onDeleteToast"?: (event: MvxTransactionToastCustomEvent) => void; + /** + * @default '' + */ "processedTransactionsStatus"?: string | JSX.Element; "toastDataState"?: IToastDataState; + /** + * @default '' + */ "toastId"?: string; "transactionProgressState"?: ITransactionProgressState; + /** + * @default [] + */ "transactions"?: ITransactionListItem[]; "wrapperClass"?: string; } @@ -1536,6 +1734,9 @@ declare namespace LocalJSX { "transactions"?: ITransactionListItem[]; } interface MvxTransactionToastDetails { + /** + * @default 5 + */ "maxShownTransactions"?: number; "processedTransactionsStatus"?: string | JSX.Element; "transactionClass"?: string; @@ -1546,6 +1747,9 @@ declare namespace LocalJSX { "index"?: string; "link"?: string; "status"?: string; + /** + * @default 'transaction-details-list-item' + */ "transactionClass"?: string; } interface MvxTransactionToastProgress { @@ -1583,6 +1787,9 @@ declare namespace LocalJSX { interface MvxUnlockPanelGroup { "class"?: string; "onLogin"?: (event: MvxUnlockPanelGroupCustomEvent) => void; + /** + * @default [] + */ "providers"?: IProviderBase[]; } interface MvxUnlockProviderButton { @@ -1590,7 +1797,13 @@ declare namespace LocalJSX { "provider"?: IProviderBase; } interface MvxWalletConnect { + /** + * @default { wcURI: '' } + */ "data"?: IWalletConnectPanelData; + /** + * @default '' + */ "qrCodeSvg"?: string; } interface MvxWalletConnectAppGalleryIcon { @@ -1608,7 +1821,13 @@ declare namespace LocalJSX { interface MvxWalletConnectScan { "class"?: string; "onDownloadClick"?: (event: MvxWalletConnectScanCustomEvent) => void; + /** + * @default '' + */ "qrCodeSvg"?: string; + /** + * @default '' + */ "walletConnectDeepLink"?: string; } interface MvxWalletProviderIcon { @@ -1617,6 +1836,9 @@ declare namespace LocalJSX { interface MvxXaliasProviderIcon { } interface MvxXportalDownloadQrIcon { + /** + * @default '' + */ "class"?: string; } interface MvxXportalQrCodePreloader { diff --git a/src/components/functional/notifications-feed/notifications-feed.scss b/src/components/functional/notifications-feed/notifications-feed.scss index 770f417c..387ffda9 100644 --- a/src/components/functional/notifications-feed/notifications-feed.scss +++ b/src/components/functional/notifications-feed/notifications-feed.scss @@ -12,6 +12,42 @@ @media (min-width: 375px) { @apply mvx:max-w-110; } + + &::-webkit-scrollbar, + &::-webkit-scrollbar-track, + &::-webkit-scrollbar-track:hover + &::-webkit-scrollbar-corner + { + @apply mvx:bg-transparent; + } + + &::-webkit-scrollbar { + @apply mvx:w-1.5; + } + + &::-webkit-scrollbar-track, + &::-webkit-scrollbar-track:hover { + @apply mvx:bg-clip-padding; + border: 4px solid transparent; + border-radius: 9999px; + } + + &::-webkit-scrollbar-thumb, + &::-webkit-scrollbar-thumb:hover { + @apply mvx:bg-clip-padding; + border: 4px solid transparent; + background: var(--mvx-scrollbar-thumb) !important; + border-radius: 9999px; + } + + &::-webkit-scrollbar-button { + @apply mvx:hidden; + } + + &::-webkit-resizer { + @apply mvx:bg-transparent; + } + } .notifications-info { @@ -61,39 +97,6 @@ color: var(--mvx-neutral-500); } - &::-webkit-scrollbar, - &::-webkit-scrollbar-track, - &::-webkit-scrollbar-track:hover, - &::-webkit-scrollbar-corner { - @apply mvx:bg-transparent; - } - - &::-webkit-scrollbar { - @apply mvx:w-4; - } - - &::-webkit-scrollbar-track, - &::-webkit-scrollbar-track:hover { - @apply mvx:bg-transparent mvx:bg-clip-padding; - border: 4px solid transparent; - border-radius: 9999px; - } - - &::-webkit-scrollbar-thumb, - &::-webkit-scrollbar-thumb:hover { - @apply mvx:bg-clip-padding; - border: 4px solid transparent; - background-color: var(--mvx-neutral-700); - border-radius: 9999px; - } - - &::-webkit-scrollbar-button { - @apply mvx:hidden; - } - - &::-webkit-resizer { - @apply mvx:bg-transparent; - } // Ensure children don't cause horizontal scroll > * { diff --git a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss b/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss index d2fee893..1ca4b312 100644 --- a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss +++ b/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss @@ -1,5 +1,5 @@ .unlock-panel-footer { - @apply mvx:mt-auto mvx:flex mvx:cursor-pointer mvx:relative mvx:p-6 mvx:z-1 mvx:rounded-2xl mvx:overflow-hidden; + @apply mvx:mt-12 mvx:flex mvx:cursor-pointer mvx:relative mvx:p-6 mvx:z-1 mvx:rounded-2xl mvx:overflow-hidden; border: 1px solid var(--mvx-border-color-primary); background: var(--mvx-bg-accent-color); box-shadow: 0px -8px 12px 12px var(--mvx-bg-color-primary); diff --git a/src/components/functional/unlock-panel/unlock-panel.tsx b/src/components/functional/unlock-panel/unlock-panel.tsx index 4aba67eb..d1cc3aa1 100644 --- a/src/components/functional/unlock-panel/unlock-panel.tsx +++ b/src/components/functional/unlock-panel/unlock-panel.tsx @@ -206,9 +206,9 @@ export class UnlockPanel { - - + + )} diff --git a/src/components/visual/transaction-list-item/transaction-list-item.scss b/src/components/visual/transaction-list-item/transaction-list-item.scss index f1cb4414..3462aa98 100644 --- a/src/components/visual/transaction-list-item/transaction-list-item.scss +++ b/src/components/visual/transaction-list-item/transaction-list-item.scss @@ -13,7 +13,8 @@ } .transaction-icon { - @apply mvx:w-10 mvx:h-10 mvx:rounded-full mvx:flex mvx:items-center mvx:justify-center mvx:shrink-0 mvx:overflow-hidden; + @apply mvx:w-8 mvx:h-8 mvx:rounded-full; + color: var(--mvx-text-color-primary); img { @apply mvx:w-full mvx:h-full mvx:object-cover; diff --git a/src/global/variables.css b/src/global/variables.css index 7f0b12ab..16b42fc7 100644 --- a/src/global/variables.css +++ b/src/global/variables.css @@ -91,6 +91,7 @@ --mvx-progress-color: var(--mvx-gray-650); --mvx-progress-accent-color: var(--mvx-teal-350); --mvx-icon-bg: var(--mvx-gray-750); + --mvx-scrollbar-thumb: var(--mvx-neutral-750); } /* Light Theme Variables */ @@ -132,4 +133,5 @@ --mvx-progress-color: var(--mvx-gray-350); --mvx-progress-accent-color: var(--mvx-black); --mvx-icon-bg: var(--mvx-neutral-250); + --mvx-scrollbar-thumb: var(--mvx-neutral-400); } From 0ad2ad348b974e51525112ece7b5902a609a4e07 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu <72752718+iuliacimpeanu@users.noreply.github.com> Date: Tue, 8 Jul 2025 15:57:36 +0300 Subject: [PATCH 2/2] Updated version (#151) * Upgraded version * Updated changelog * Update CHANGELOG.md --------- Co-authored-by: Tudor Morar --- CHANGELOG.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0835be76..ef1e811e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [[0.0.11](https://github.com/multiversx/mx-sdk-dapp-ui/pull/152)] - 2025-07-08 + - [UI fixes on scrollbar, icons and unlock panel.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/150) ## [[0.0.10](https://github.com/multiversx/mx-sdk-dapp-ui/pull/149)] - 2025-07-04 diff --git a/package.json b/package.json index ca8d0397..25c602bd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@multiversx/sdk-dapp-ui", - "version": "0.0.10", + "version": "0.0.11", "description": "A library to hold UI components for a dApp on the MultiversX blockchain", "author": "MultiversX", "license": "MIT",