From 44e92dd3d0dc8a0a5cd64d139703bbbba3d40c92 Mon Sep 17 00:00:00 2001 From: thekiba Date: Tue, 10 Dec 2024 19:46:51 +0400 Subject: [PATCH] fix(ui): adjust mobile layout for wallet icons, text, and wallet button --- packages/ui/src/app/assets/i18n/en.json | 8 +-- packages/ui/src/app/assets/i18n/ru.json | 6 +-- .../src/app/components/wallet-item/index.tsx | 10 +++- .../src/app/components/wallet-item/style.ts | 42 +++++++++++---- .../components/wallet-item/wallet-image.tsx | 5 +- .../all-wallets-list-modal/style.ts | 16 +++++- .../mobile-universal-modal/index.tsx | 15 ++---- .../mobile-universal-modal/style.ts | 52 ++----------------- 8 files changed, 76 insertions(+), 78 deletions(-) diff --git a/packages/ui/src/app/assets/i18n/en.json b/packages/ui/src/app/assets/i18n/en.json index 39756945..8174ddf9 100644 --- a/packages/ui/src/app/assets/i18n/en.json +++ b/packages/ui/src/app/assets/i18n/en.json @@ -40,15 +40,15 @@ "popular": "Popular" }, "walletModal": { - "loading": "Loading wallets", + "loading": "Loading wallets", "wallets": "Wallets", "mobileUniversalModal": { - "connectYourWallet": "Connect your TON wallet", + "connectYourWallet": "Connect your TON wallet", "openWalletOnTelegramOrSelect": "Use Wallet in Telegram or choose other application", "openWalletOnTelegram": "Connect Wallet in Telegram", "chooseOtherApplication": "Choose other application", "openLink": "Open Link", - "scan": "Scan with your mobile wallet" + "scan": "Scan with your mobile wallet" }, "desktopUniversalModal": { "connectYourWallet": "Connect your TON wallet", @@ -89,4 +89,4 @@ "transactionSent": "$notifications.transactionSent", "transactionCanceled": "$notifications.transactionCanceled" } -} +} \ No newline at end of file diff --git a/packages/ui/src/app/assets/i18n/ru.json b/packages/ui/src/app/assets/i18n/ru.json index 5207b3c9..d97846ca 100644 --- a/packages/ui/src/app/assets/i18n/ru.json +++ b/packages/ui/src/app/assets/i18n/ru.json @@ -2,7 +2,7 @@ "common": { "close": "Закрыть", "openWallet": "Открыть кошелёк", - "copyLink": "Копировать", + "copyLink": "Скопировать", "linkCopied": "Ссылка скопирована", "copied": "Скопировано", "yourWallet": "Ваш кошелёк", @@ -43,7 +43,7 @@ "loading": "Кошельки загружаются", "wallets": "Кошельки", "mobileUniversalModal": { - "connectYourWallet": "Подключите кошелёк", + "connectYourWallet": "Подключите TON кошелёк", "openWalletOnTelegramOrSelect": "Подключите Wallet в Telegram или выберете другое приложение", "openWalletOnTelegram": "Открыть Wallet в Telegram", "chooseOtherApplication": "Выберите другое приложение", @@ -89,4 +89,4 @@ "transactionSent": "$notifications.transactionSent", "transactionCanceled": "$notifications.transactionCanceled" } -} +} \ No newline at end of file diff --git a/packages/ui/src/app/components/wallet-item/index.tsx b/packages/ui/src/app/components/wallet-item/index.tsx index 4360d51e..2406a7ac 100644 --- a/packages/ui/src/app/components/wallet-item/index.tsx +++ b/packages/ui/src/app/components/wallet-item/index.tsx @@ -47,8 +47,14 @@ export const WalletItem: Component = props => { onClick={() => props.onClick()} data-tc-wallet-item="true" > - {typeof props.icon === 'string' ? : props.icon} - {props.badgeUrl && } + {typeof props.icon === 'string' ? ( + } + /> + ) : ( + props.icon + )}
(ctxRef = el)}> {props.name}
diff --git a/packages/ui/src/app/components/wallet-item/style.ts b/packages/ui/src/app/components/wallet-item/style.ts index 908a06db..358540f0 100644 --- a/packages/ui/src/app/components/wallet-item/style.ts +++ b/packages/ui/src/app/components/wallet-item/style.ts @@ -17,13 +17,42 @@ const badgeBorders: BorderRadiusConfig = { none: '0' }; +export const WalletUlContainer = styled.ul` + display: flex; + gap: 0; + width: 100%; + overflow-x: auto; + padding: 8px 12px 16px 12px; + margin: 0; + list-style: none; + flex-wrap: nowrap; + + &&::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; + + > li { + display: flex; + flex: 1; + min-width: 78px; + height: fit-content; + } + + > li > button { + width: 100%; + } +`; + export const WalletItemStyled = styled.button` position: relative; cursor: pointer; border: none; background-color: unset; padding: 8px 4px; - width: 92px; + width: 100%; + min-width: 78px; display: flex; flex-direction: column; align-items: center; @@ -40,11 +69,6 @@ export const WalletItemStyled = styled.button` transform: scale(0.96); } - ${media('mobile')} { - padding: 8px 0; - width: 78px; - } - ${mediaTouch} { &:active { transform: scale(0.92); @@ -56,14 +80,14 @@ export const ImageStyled = styled(WalletImage)` width: 60px; height: 60px; border-radius: ${props => borders[props.theme!.borderRadius]}; - margin-bottom: 8px; + position: relative; `; export const BadgeStyled = styled(Image)` position: absolute; - right: 10px; - top: 50px; + right: -6px; + bottom: -6px; width: 24px; height: 24px; border-radius: ${props => badgeBorders[props.theme!.borderRadius]}; diff --git a/packages/ui/src/app/components/wallet-item/wallet-image.tsx b/packages/ui/src/app/components/wallet-item/wallet-image.tsx index 811fb3e5..d4f49778 100644 --- a/packages/ui/src/app/components/wallet-item/wallet-image.tsx +++ b/packages/ui/src/app/components/wallet-item/wallet-image.tsx @@ -1,10 +1,11 @@ -import { Component } from 'solid-js'; +import { Component, JSXElement } from 'solid-js'; import { Image } from 'src/app/components'; import { styled } from 'solid-styled-components'; import { Styleable } from 'src/app/models/styleable'; export interface WalletImageProps extends Styleable { src: string; + badge?: JSXElement; } const ImageContainer = styled.div` @@ -19,7 +20,6 @@ const ImageContainer = styled.div` left: 0; right: 0; border: 0.5px solid rgba(0, 0, 0, 0.08); - border-radius: inherit; } `; @@ -34,6 +34,7 @@ export const WalletImage: Component = props => { return ( + {props.badge} ); }; diff --git a/packages/ui/src/app/views/modals/wallets-modal/all-wallets-list-modal/style.ts b/packages/ui/src/app/views/modals/wallets-modal/all-wallets-list-modal/style.ts index b56a7dcf..ef8faff3 100644 --- a/packages/ui/src/app/views/modals/wallets-modal/all-wallets-list-modal/style.ts +++ b/packages/ui/src/app/views/modals/wallets-modal/all-wallets-list-modal/style.ts @@ -37,6 +37,7 @@ export const WalletsUl = styled.ul` align-self: flex-start; max-width: 400px; margin: 0 auto; + list-style: none; > li { display: block; @@ -44,7 +45,20 @@ export const WalletsUl = styled.ul` } ${media('mobile')} { - grid-template-columns: repeat(auto-fit, 82px); + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0; + padding: 8px 12px 16px; + max-width: none; + + > li { + min-width: 78px; + display: flex; + } + + > li > * { + width: 100%; + } } `; diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/index.tsx b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/index.tsx index 80550122..d1832433 100644 --- a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/index.tsx +++ b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/index.tsx @@ -1,18 +1,12 @@ import { ConnectAdditionalRequest, isWalletInfoRemote, WalletInfo } from '@tonconnect/sdk'; import { Component, createMemo, createSignal, For, Show } from 'solid-js'; -import { - AtWalletIcon, - FourWalletsItem, - QRIcon, - WalletItem -} from 'src/app/components'; +import { AtWalletIcon, FourWalletsItem, QRIcon, WalletItem } from 'src/app/components'; import { H1Styled, H2Styled, StyledLeftActionButton, TelegramButtonStyled, - TGImageStyled, - UlStyled + TGImageStyled } from './style'; import { setLastSelectedWalletInfo } from 'src/app/state/modals-state'; import { appState } from 'src/app/state/app.state'; @@ -25,6 +19,7 @@ import { MobileUniversalQR } from './mobile-universal-qr'; import { Translation } from 'src/app/components/typography/Translation'; import { redirectToTelegram, redirectToWallet } from 'src/app/utils/url-strategy-helpers'; import { bridgesIsEqual, getUniqueBridges } from 'src/app/utils/bridge'; +import { WalletUlContainer } from 'src/app/components/wallet-item/style'; interface MobileUniversalModalProps { walletsList: WalletInfo[]; @@ -171,7 +166,7 @@ export const MobileUniversalModal: Component = props > Choose other application - + {wallet => (
  • @@ -195,7 +190,7 @@ export const MobileUniversalModal: Component = props />
    • -     + ); diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/style.ts b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/style.ts index 9286629b..4aea4e83 100644 --- a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/style.ts +++ b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/style.ts @@ -15,30 +15,6 @@ const tgBorders: BorderRadiusConfig = { none: '0' }; -export const UlStyled = styled.ul` - display: flex; - justify-content: space-between; - margin: 0 auto; - width: fit-content; - max-width: 100%; - min-width: 100%; - height: fit-content; - overflow-x: auto; - overflow-y: hidden; - padding: 8px 19px 16px 19px; - - &&::-webkit-scrollbar { - display: none; - } - - -ms-overflow-style: none; - scrollbar-width: none; - - > li { - height: fit-content; - } -`; - export const OtherOptionButton = styled.li` width: 82px; min-width: 82px; @@ -70,29 +46,6 @@ export const OtherOptionButton = styled.li` } `; -export const Divider = styled.div` - width: 1px; - margin: 0 10px; - height: 24px; - position: relative; - top: 26px; - - background-color: ${props => props.theme!.colors.icon.secondary}; - opacity: 0.2; -`; - -export const IconContainer = styled.div` - width: 60px; - height: 60px; - border-radius: ${props => borders[props.theme!.borderRadius]}; - display: flex; - align-items: center; - justify-content: center; - - background-color: ${props => props.theme!.colors.background.tint}; - margin-bottom: 8px; -`; - export const H1Styled = styled(H1)` margin-top: 38px; margin-bottom: 4px; @@ -129,6 +82,11 @@ export const TelegramButtonStyled = styled(Button)` font-weight: 500; font-size: 16px; line-height: 20px; + + @media (max-width: 375px) { + margin: 0 16px 24px; + width: calc(100% - 32px); + } `; export const TGImageStyled = styled(Image)`