feat(ui): adjust letter spacing for wallet's names and update text we…

…ight as per new design
ton-connect · Jul 31, 2024 · 5b3a5cb · 5b3a5cb
1 parent c244c8c
commit 5b3a5cb
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 12 deletions.
diff --git a/packages/ui/src/app/components/button/style.ts b/packages/ui/src/app/components/button/style.ts
@@ -43,7 +43,7 @@ export const ButtonStyled = styled.button<{
     cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
 
     font-size: 14px;
-    font-weight: 590;
+    font-weight: 510;
     line-height: 18px;
 
     transition: transform 0.125s ease-in-out;

diff --git a/packages/ui/src/app/components/typography/h1/style.ts b/packages/ui/src/app/components/typography/h1/style.ts
@@ -2,7 +2,7 @@ import { styled } from 'solid-styled-components';
 
 export const H1Styled = styled.h1`
     font-style: normal;
-    font-weight: 700;
+    font-weight: 590;
     font-size: 20px;
     line-height: 28px;
 

diff --git a/packages/ui/src/app/components/typography/h2/style.ts b/packages/ui/src/app/components/typography/h2/style.ts
@@ -2,7 +2,7 @@ import { styled } from 'solid-styled-components';
 
 export const H2Styled = styled.h2`
     font-style: normal;
-    font-weight: 510;
+    font-weight: 400;
     font-size: 16px;
     line-height: 22px;
 

diff --git a/packages/ui/src/app/components/typography/h3/style.ts b/packages/ui/src/app/components/typography/h3/style.ts
@@ -2,7 +2,7 @@ import { styled } from 'solid-styled-components';
 
 export const H3Styled = styled.h3`
     font-style: normal;
-    font-weight: 590;
+    font-weight: 510;
     font-size: 16px;
     line-height: 20px;
 

diff --git a/packages/ui/src/app/components/wallet-item/index.tsx b/packages/ui/src/app/components/wallet-item/index.tsx
@@ -1,4 +1,4 @@
-import { Component, JSXElement } from 'solid-js';
+import { Component, createEffect, JSXElement, onMount } from 'solid-js';
 import { BadgeStyled, ImageStyled, StyledSecondLine, StyledText, WalletItemStyled } from './style';
 import { Styleable } from 'src/app/models/styleable';
 
@@ -12,6 +12,35 @@ export interface WalletItemProps extends Styleable {
 }
 
 export const WalletItem: Component<WalletItemProps> = props => {
+    let ctxRef: HTMLDivElement | null = null;
+
+    // adjust letter spacing to fit the wallet name in the item
+    const adjustLetterSpacing = (): void => {
+        // we can't set `ref` on the `StyledText` directly, so we use a context ref
+        const name = ctxRef?.querySelector('div');
+        if (name && name.scrollWidth > name.clientWidth) {
+            let spacing = 0;
+            const minSpacing = -0.4;
+            const step = 0.05;
+            // reduce letter spacing until the text fits
+            while (name.scrollWidth > name.clientWidth && spacing >= minSpacing) {
+                spacing -= step;
+                name.style.letterSpacing = `${spacing}px`;
+            }
+            // adjust spacing one more time to make sure the text fits
+            if (spacing !== 0) {
+                spacing -= step;
+                name.style.letterSpacing = `${spacing}px`;
+            }
+        }
+    };
+
+    onMount(() => adjustLetterSpacing());
+
+    createEffect(() => {
+        adjustLetterSpacing();
+    });
+
     return (
         <WalletItemStyled
             class={props.class}
@@ -20,7 +49,9 @@ export const WalletItem: Component<WalletItemProps> = props => {
         >
             {typeof props.icon === 'string' ? <ImageStyled src={props.icon} /> : props.icon}
             {props.badgeUrl && <BadgeStyled src={props.badgeUrl} />}
-            <StyledText>{props.name}</StyledText>
+            <div ref={el => (ctxRef = el)}>
+                <StyledText>{props.name}</StyledText>
+            </div>
             {props.secondLine && (
                 <StyledSecondLine colorPrimary={props.secondLineColorPrimary ?? true}>
                     {props.secondLine}

diff --git a/packages/ui/src/app/components/wallet-item/style.ts b/packages/ui/src/app/components/wallet-item/style.ts
@@ -72,7 +72,7 @@ export const BadgeStyled = styled(Image)`
 
 export const StyledText = styled(Text)`
     max-width: 90px;
-    font-weight: 590;
+    font-weight: 510;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -83,7 +83,7 @@ export const StyledText = styled(Text)`
 `;
 
 export const StyledSecondLine = styled(Text)<{ colorPrimary: boolean }>`
-    font-weight: 510;
+    font-weight: ${props => (props.colorPrimary ? '510' : '400')};
     max-width: 90px;
     white-space: nowrap;
     text-overflow: ellipsis;

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
@@ -21,7 +21,6 @@ import {
     TGImageStyled,
     UlStyled
 } from './style';
-import { openLinkBlank } from 'src/app/utils/web-api';
 import { setLastSelectedWalletInfo } from 'src/app/state/modals-state';
 import { appState } from 'src/app/state/app.state';
 import { IMG } from 'src/app/env/IMG';
@@ -150,7 +149,10 @@ export const MobileUniversalModal: Component<MobileUniversalModalProps> = props
                 <H1Styled translationKey="walletModal.mobileUniversalModal.connectYourWallet">
                     Connect your wallet
                 </H1Styled>
-                <H2Styled translationKey="walletModal.mobileUniversalModal.openWalletOnTelegramOrSelect">
+                <H2Styled
+                    translationKey="walletModal.mobileUniversalModal.openWalletOnTelegramOrSelect"
+                    maxWidth={342}
+                >
                     Open Wallet in Telegram or select your wallet to connect
                 </H2Styled>
                 <TelegramButtonStyled

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
@@ -99,10 +99,13 @@ export const H1Styled = styled(H1)`
     padding: 0 24px;
 `;
 
-export const H2Styled = styled(H2)`
+export const H2Styled = styled(H2)<{ maxWidth?: number }>`
     margin-bottom: 24px;
     padding: 0 24px;
     min-height: 44px;
+    max-width: ${props => props.maxWidth}px;
+    margin-left: ${props => (props.maxWidth ? 'auto' : '0px')};
+    margin-right: ${props => (props.maxWidth ? 'auto' : '0px')};
 `;
 
 export const ButtonStyled = styled(Button)`
@@ -118,12 +121,13 @@ export const TelegramButtonStyled = styled(Button)`
     background-color: ${props => props.theme!.colors.telegramButton};
 
     color: ${props => props.theme!.colors.constant.white};
-    font-weight: 590;
+    font-weight: 510;
     font-size: 16px;
     line-height: 20px;
 `;
 
 export const TGImageStyled = styled(Image)`
+    background-color: transparent;
     border-radius: ${props => tgBorders[props.theme!.borderRadius]};
     width: 24px;
     height: 24px;