diff --git a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java index 118c532a36..ef52e4facf 100644 --- a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java +++ b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java @@ -118,6 +118,8 @@ public void setDarkTheme(boolean isDark) { } } + private int currentZoom; + @SuppressLint("SetJavaScriptEnabled") @Override protected void onCreate(Bundle savedInstanceState) { @@ -173,7 +175,33 @@ protected void onCreate(Bundle savedInstanceState) { // vw.setWebContentsDebuggingEnabled(true); // enable remote debugging in chrome://inspect/#devices - vw.setWebViewClient(new BitBoxWebViewClient(BASE_URL, getAssets(), getApplication())); + // Retrieve the current text zoom setting to adjust the base font size in the WebView. + currentZoom = vw.getSettings().getTextZoom(); + + vw.setWebViewClient(new BitBoxWebViewClient(BASE_URL, getAssets(), getApplication()) { + @Override + public void onPageFinished(WebView view, String url) { + super.onPageFinished(view, url); + + // Calculate the base font size for html as a percentage. + // This percentage dynamically adjusts to ensure 1rem = 10px, scaled according to the current zoom level. + double baseFontSizePercentage = 62.5 * ((double) currentZoom / 100.0); + + // The default body font size in rem, which is independent of the zoom level. + // This size does not scale dynamically with zoom adjustments and is fixed at 1.6rem. + double defaultFontSizeREM = 1.6; + + // Reset the WebView's text zoom to 100% to ensure that the scaling is controlled via CSS + // and not by the WebView's default scaling behavior. + view.getSettings().setTextZoom(100); + + String cssSetup = "document.documentElement.style.fontSize='" + baseFontSizePercentage + "%';" + + "document.body.style.fontSize='" + defaultFontSizeREM + "rem';"; + + // Execute the CSS setup in the WebView. + view.evaluateJavascript(cssSetup, null); + } + }); ActivityResultLauncher fileChooser = registerForActivityResult(new ActivityResultContracts.GetContent(), uri -> webChrome.onFilePickerResult(uri)); BitBoxWebChromeClient.CameraPermissionDelegate cameraPermissionDelegate = () -> ActivityCompat.requestPermissions( @@ -253,7 +281,6 @@ public void noAuthConfigured() { getWindow().clearFlags(WindowManager.LayoutParams.FLAG_SECURE); } })); - } @Override diff --git a/frontends/web/src/components/actionable-item/actionable-item.module.css b/frontends/web/src/components/actionable-item/actionable-item.module.css index 5322d8c7bb..e783b23674 100644 --- a/frontends/web/src/components/actionable-item/actionable-item.module.css +++ b/frontends/web/src/components/actionable-item/actionable-item.module.css @@ -1,5 +1,4 @@ .container { - --size-default: 14px; align-items: center; background-color: var(--background-secondary); border: none; diff --git a/frontends/web/src/components/amount/amount-with-unit.module.css b/frontends/web/src/components/amount/amount-with-unit.module.css index 754d8d60ff..885372a5ce 100644 --- a/frontends/web/src/components/amount/amount-with-unit.module.css +++ b/frontends/web/src/components/amount/amount-with-unit.module.css @@ -1,6 +1,5 @@ .rates { cursor: default; - line-height: 1; margin: 0; max-width: 100%; white-space: nowrap; @@ -8,6 +7,8 @@ .unit { font-weight: 400; + flex-grow: 0; + flex-shrink: 0; color: var(--color-secondary); font-variant: normal; position: relative; @@ -15,11 +16,24 @@ } .availableFiatAmount { + align-items: baseline; color: var(--color-default); - padding-right: var(--space-quarter) !important; + display: inline-flex; + flex-grow: 0; /* all-accounts */ + justify-content: flex-end; /* all-accounts */ + justify-content: flex-start; /* account/send */ + gap: 0.4ch; text-align: right; } +.availableFiatAmount.textStart { + justify-content: flex-start; /* account/send */ +} + +.availableFiatAmount.textEnd { + justify-content: flex-end; /* all-accounts */ +} + .rotatable { cursor: default; font-size: inherit; @@ -43,9 +57,4 @@ .fiatRow { bottom: 0; } - - .availableFiatAmount, - .availableFiatUnit { - line-height: 24px; - } } \ No newline at end of file diff --git a/frontends/web/src/components/amount/amount-with-unit.tsx b/frontends/web/src/components/amount/amount-with-unit.tsx index 603f1a6f56..ffe778a19a 100644 --- a/frontends/web/src/components/amount/amount-with-unit.tsx +++ b/frontends/web/src/components/amount/amount-with-unit.tsx @@ -24,7 +24,6 @@ import style from './amount-with-unit.module.css'; type TAmountWithUnitProps = { amount: TAmountWithConversions | undefined; - tableRow?: boolean; enableRotateUnit?: boolean; sign?: string; alwaysShowAmounts?: boolean; @@ -34,12 +33,11 @@ type TAmountWithUnitProps = { export const AmountWithUnit = ({ amount, - tableRow, enableRotateUnit: rotateUnit, sign, convertToFiat, alwaysShowAmounts = false, - unitClassName = '' + unitClassName = '', }: TAmountWithUnitProps) => { const { rotateDefaultCurrency, defaultCurrency, rotateBtcUnit } = useContext(RatesContext); @@ -64,35 +62,27 @@ export const AmountWithUnit = ({ } const enableClick = rotateUnit && (convertToFiat || isBitcoinCoin(amount.unit)); - const formattedAmount = !!displayedAmount ? - ( - - ) : '---'; - - const amountUnit = ; - if (tableRow) { - return ( - - {formattedAmount} - {amountUnit} - - ); - } return ( {!!displayedAmount ? sign : ''} - {formattedAmount} + {!!displayedAmount ? ( + + ) : '---'} {' '} - {amountUnit} + ); }; diff --git a/frontends/web/src/components/amount/amount.module.css b/frontends/web/src/components/amount/amount.module.css index 67ac30fc00..3ba56b9c15 100644 --- a/frontends/web/src/components/amount/amount.module.css +++ b/frontends/web/src/components/amount/amount.module.css @@ -1,7 +1,16 @@ .amount { + align-items: baseline; + display: inline-flex; + display: flow-root; /* all-account */ flex-shrink: 1; + flex-basis: auto; + flex-grow: 0; font-variant: tabular-nums; + max-width: 100%; + /* max-width: calc(100% - 2ch); */ overflow: hidden; + /* TODO: keep clip? */ + /* overflow: clip; */ text-overflow: ellipsis; } diff --git a/frontends/web/src/components/amount/conversion-amount.module.css b/frontends/web/src/components/amount/conversion-amount.module.css index ad4d2b1f7d..268aaf43ab 100644 --- a/frontends/web/src/components/amount/conversion-amount.module.css +++ b/frontends/web/src/components/amount/conversion-amount.module.css @@ -14,19 +14,20 @@ .txPrefix, .txUnit { color: var(--color-secondary); - font-size: 14px; - line-height: 1.285714; + font-size: var(--size-small); + /* line-height: 1.285714; */ white-space: nowrap; } .txConversionAmount .txUnit { - font-size: 12px; + font-size: var(--size-smaller); flex-shrink: 0; + max-width: 100%; } .txSmallInlineIcon img { - max-height: 15px; - max-width: 15px; + max-height: 1.5rem; + max-width: 1.5rem; vertical-align: text-bottom; } .txConversionAmount .txSmallInlineIcon { diff --git a/frontends/web/src/components/aopp/aopp.module.css b/frontends/web/src/components/aopp/aopp.module.css index e9e8a89472..c6d4d1437b 100644 --- a/frontends/web/src/components/aopp/aopp.module.css +++ b/frontends/web/src/components/aopp/aopp.module.css @@ -42,6 +42,6 @@ } @media (min-width: 1200px) { .message { - --size-default: 18px; + --size-default: 1.8rem; } } diff --git a/frontends/web/src/components/badge/badge.module.css b/frontends/web/src/components/badge/badge.module.css index bf3f9fd06a..cfa4022436 100644 --- a/frontends/web/src/components/badge/badge.module.css +++ b/frontends/web/src/components/badge/badge.module.css @@ -2,7 +2,7 @@ border-radius: var(--space-half); border: 1px solid; display: inline-block; - font-size: var(--size-small); + font-size: var(--size-smaller); flex-shrink: 0; line-height: 1; padding: var(--space-eight) 10px; @@ -19,7 +19,7 @@ } .badgeIcon { - max-width: 10px; + max-width: 1rem; } .withChildren .badgeIcon { @@ -28,7 +28,7 @@ @media (max-width: 382px) { .badge { - font-size: 10px; + font-size: 1rem; } } diff --git a/frontends/web/src/components/balance/balance.module.css b/frontends/web/src/components/balance/balance.module.css index 2094f70785..724a013191 100644 --- a/frontends/web/src/components/balance/balance.module.css +++ b/frontends/web/src/components/balance/balance.module.css @@ -1,33 +1,28 @@ -.balanceTable { +.balanceContainer { + margin-bottom: var(--space-half); + max-width: 100%; + /* min-height: var(--button-height); */ +} + +.balance { align-items: flex-end; - border-collapse: collapse; - border-spacing: 0; display: flex; flex-direction: row; - position: relative; -} - -.balanceTable tr { - display: inline-block; - vertical-align: bottom; - padding-right: var(--space-half); -} - -.balanceTable td { + flex-wrap: wrap; font-size: var(--size-large); font-weight: 400; - line-height: 1.2; - padding: 0; - vertical-align: baseline; + gap: var(--space-half); + line-height: 0.8125; + position: relative; } -.balanceTable td:last-child { +.unit { font-size: var(--size-default); } .pendingBalance { color: var(--color-secondary); - font-size: var(--size-small); + font-size: var(--size-smaller); line-height: 1; margin: 0; padding-top: var(--space-half); diff --git a/frontends/web/src/components/balance/balance.tsx b/frontends/web/src/components/balance/balance.tsx index 0e0d566586..af919e3a0b 100644 --- a/frontends/web/src/components/balance/balance.tsx +++ b/frontends/web/src/components/balance/balance.tsx @@ -39,22 +39,20 @@ export const Balance = ({ } return ( -
- - - - - -
+
+
+ + +
{ balance.hasIncoming && (

diff --git a/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css index 8db8f81cbb..2a584d3d51 100644 --- a/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css +++ b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css @@ -18,7 +18,7 @@ align-items: center; color: var(--color-text); display: flex; - font-size: 12px; + font-size: min(1.2rem, 20px); flex-direction: column; gap: 4px; justify-content: center; diff --git a/frontends/web/src/components/copy/Copy.module.css b/frontends/web/src/components/copy/Copy.module.css index e5b00911fd..ebfa3e8f29 100644 --- a/frontends/web/src/components/copy/Copy.module.css +++ b/frontends/web/src/components/copy/Copy.module.css @@ -6,21 +6,20 @@ cursor: pointer; display: flex; flex-direction: row; - height: 18px; + height: var(--size-default); justify-content: center; margin-top: var(--spacing-half); - min-width: 18px !important; + max-width: var(--size-default); padding: 0; position: absolute; right: var(--spacing-default); top: 10px; transition: background-color ease 0.2s; - width: 18px; will-change: background-color; } .button img { - width: 18px; + height: var(--size-default); } .button:focus { @@ -36,6 +35,10 @@ } .container { + align-items: flex-start; + display: flex; + flex-direction: row; + justify-content: flex-start; position: relative; } diff --git a/frontends/web/src/components/copy/Copy.tsx b/frontends/web/src/components/copy/Copy.tsx index 4cc9c223ae..6914bb2a74 100644 --- a/frontends/web/src/components/copy/Copy.tsx +++ b/frontends/web/src/components/copy/Copy.tsx @@ -92,7 +92,6 @@ export const CopyableInput = ({ return (

diff --git a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css index bffd8bc5d2..121992a62a 100644 --- a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css +++ b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css @@ -8,22 +8,21 @@ .progressInfo { display: flex; - font-size: 16px; + font-size: 1.6rem; justify-content: space-between; margin: 0 0 var(--space-default); } .additionalUpgrade { - font-size: 16px; + font-size: 1.6rem; margin: 0; margin-top: var(--space-eight); } @media (max-width: 768px) { .content, - .additionalUpgrade - { - font-size: 14px; + .additionalUpgrade { + font-size: var(--size-small); } } diff --git a/frontends/web/src/components/dialog/dialog.module.css b/frontends/web/src/components/dialog/dialog.module.css index 387058a058..67adbaba66 100644 --- a/frontends/web/src/components/dialog/dialog.module.css +++ b/frontends/web/src/components/dialog/dialog.module.css @@ -33,15 +33,9 @@ } /* guard dialog and wait-dialog from view styles */ @media (min-width: 1200px) { - .header .title { - --size-subheader: 16px; - } .modal { margin-left: var(--sidebar-width-large); } - .modal .contentContainer p { - --size-default: 14px; - } } .modal.small { @@ -96,13 +90,11 @@ .header .closeButton, .header .closeButton img { - width: 18px; - height: 18px; + width: var(--size-subheader); + height: var(--size-subheader); } .contentContainer { - font-size: var(--size-default); - font-weight: 400; padding: var(--space-half); } @@ -139,55 +131,6 @@ font-weight: 400; } -.modalContent p { - font-size: var(--size-default); - font-weight: 400; -} - -.modalContent > *:first-child { - margin-top: 0; -} - -.detail { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - min-height: var(--item-height); - padding: var(--space-half); -} - -.detail:not(:first-child) { - border-bottom: solid 1px var(--background); -} - -.detail label { - white-space: nowrap; - margin-right: var(--space-half) !important; -} - -.detail label, -.detail p { - margin: 0; - line-height: 1; -} - -.detail.description > span { - text-align: right; -} - -.buttons { - padding: var(--space-quarter); -} - -.buttons button:first-child { - margin-right: 10px; -} - -.buttons button { - width: 50%; -} - .dialogButtons { display: flex; flex-direction: row-reverse; @@ -239,4 +182,4 @@ .contentContainer.slim { padding-bottom: calc(env(safe-area-inset-bottom, 0)); } -} \ No newline at end of file +} diff --git a/frontends/web/src/components/dropdown/dropdown.module.css b/frontends/web/src/components/dropdown/dropdown.module.css index e194365f34..a4339834e3 100644 --- a/frontends/web/src/components/dropdown/dropdown.module.css +++ b/frontends/web/src/components/dropdown/dropdown.module.css @@ -56,7 +56,9 @@ .select :global(.react-select__control) { background-color: var(--background-secondary); - border-radius: 2px; + border-radius: 0.2rem; + border-width: var(--border-width); + min-height: var(--input-height); padding: var(--space-quarter) var(--space-eight); } diff --git a/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css b/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css index 1b44160753..3ec28ee1bf 100644 --- a/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css +++ b/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css @@ -78,6 +78,7 @@ text-align: center; left: 50%; transform: translateX(-50%); + width: calc(100% - 87px); } .searchContainer { diff --git a/frontends/web/src/components/forms/button.module.css b/frontends/web/src/components/forms/button.module.css index d467cbdc51..df4c969a02 100644 --- a/frontends/web/src/components/forms/button.module.css +++ b/frontends/web/src/components/forms/button.module.css @@ -4,7 +4,7 @@ border-color: transparent; border-radius: 2px; border-style: solid; - border-width: 1px; + border-width: var(--border-width); cursor: default; display: inline-flex; flex-direction: row; @@ -12,8 +12,8 @@ font-size: var(--size-default); font-weight: 400; justify-content: center; + min-height: var(--button-height); min-width: 100px; - height: 50px; outline: none; padding: 0 var(--space-default); position: relative; @@ -87,7 +87,6 @@ border-color: transparent; color: var(--color-blue); display: inline-block; - height: 50px; min-width: 0; } diff --git a/frontends/web/src/components/forms/checkbox.module.css b/frontends/web/src/components/forms/checkbox.module.css index 6e824b72de..c891489aca 100644 --- a/frontends/web/src/components/forms/checkbox.module.css +++ b/frontends/web/src/components/forms/checkbox.module.css @@ -7,7 +7,7 @@ .checkbox input + label { display: inline-block; max-width: 100%; - padding-left: 2em; + padding-left: 2rem; position: relative; } @@ -27,7 +27,7 @@ } .checkbox input + label::before { - border: 1px solid var(--background-tertiary); + border: var(--border-width) solid var(--background-tertiary); border-radius: 2px; top: 2px; } @@ -37,22 +37,22 @@ } .warning input + label::before { border-color: var(--background-secondary); - outline: 1px solid var(--color-warning); + outline: var(--border-width) solid var(--color-warning); } .info input + label::before { border-color: var(--background-secondary); - outline: 1px solid var(--color-info); + outline: var(--border-width) solid var(--color-info); } .checkbox input + label::after { background: transparent; border: solid var(--background-secondary); - border-width: 0px 2px 2px 0; + border-width: 0 2px 2px 0; width: 0.35em; height: 0.55em; position: absolute; - top: 6px; - left: 6px; + top: min(0.6rem, 9px); + left: min(0.6rem, 10px); margin-left: -1px; margin-top: -2px; opacity: 0; diff --git a/frontends/web/src/components/forms/input-with-dropdown.module.css b/frontends/web/src/components/forms/input-with-dropdown.module.css index 2e86907ff3..1a0b821b55 100644 --- a/frontends/web/src/components/forms/input-with-dropdown.module.css +++ b/frontends/web/src/components/forms/input-with-dropdown.module.css @@ -16,12 +16,12 @@ input.inputField { font-family: var(--font-family); font-size: var(--size-default); font-weight: 400; - height: 52px !important; + height: var(--input-height); padding: 0 var(--space-half); width: 100%; transition: border-color .2s ease-out; will-change: border-color; - padding-left: 50px; + padding-left: var(--input-qr-button); padding-right: 0; } @@ -79,7 +79,7 @@ input.inputField::placeholder { .dropdown :global(.react-select__single-value) { color: var(--color-blue); display: flex; - font-size: 14px; + font-size: var(--size-small); justify-content: flex-end; max-width: 100%; overflow: hidden; @@ -117,7 +117,7 @@ input.inputField::placeholder { border: 1px solid var(--background-quaternary); border-left: hidden; display: flex; - height: 52px; + height: var(--input-height); justify-content: center; padding-left: 0; transition: border-color .2s ease-out; diff --git a/frontends/web/src/components/forms/input.module.css b/frontends/web/src/components/forms/input.module.css index 4c37a232c0..9ea5d7e584 100644 --- a/frontends/web/src/components/forms/input.module.css +++ b/frontends/web/src/components/forms/input.module.css @@ -28,11 +28,11 @@ border-color: var(--background-quaternary); border-radius: 2px; border-style: solid; - border-width: 1px; + border-width: var(--border-width); font-family: var(--font-family); font-size: var(--size-default); font-weight: 400; - height: 52px; + height: var(--input-height); padding: 0 var(--space-half); width: 100%; transition: border-color .2s ease-out; diff --git a/frontends/web/src/components/forms/radio.module.css b/frontends/web/src/components/forms/radio.module.css index 1513737b3e..ef6527b310 100644 --- a/frontends/web/src/components/forms/radio.module.css +++ b/frontends/web/src/components/forms/radio.module.css @@ -1,5 +1,4 @@ .radio { - --size-default: 14px; line-height: 1.5; } @@ -13,7 +12,7 @@ flex-direction: column; font-size: var(--size-default); margin-right: var(--space-half); - padding-left: calc(var(--space-half) + var(--space-quarter)); + padding-left: calc(var(--size-default) + var(--space-quarter)); position: relative; } @@ -22,29 +21,29 @@ background: var(--background-secondary); content: ''; display: inline-block; - width: 12px; - height: 12px; - position: absolute; - top: 4px; + height: var(--size-smaller); left: 0; + position: absolute; + top: .4rem; transition: all 100ms ease; + width: var(--size-smaller); } .radio input + label::before { - border: 1px solid var(--background-tertiary); + border: var(--border-width) solid var(--background-tertiary); border-radius: 1em; } .radio input + label::after { background: var(--color-blue); border-radius: 1em; - width: 10px; - height: 10px; - position: absolute; - top: 6px; - left: 2px; + height: min(1rem, 14px); + left: .2rem; opacity: 0; + position: absolute; + top: .6rem; transform: scale(0); + width: min(1rem, 14px); } /* checked */ diff --git a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css index 5828fefddf..992b73f301 100644 --- a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css +++ b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css @@ -6,6 +6,7 @@ } .balanceSingleValue { + margin-left: var(--space-quarter); margin-right: var(--space-quarter); } @@ -26,12 +27,13 @@ } .select { + font-size: min(var(--size-default), 24px); margin-bottom: var(--space-half); } .select :global(.react-select__group-heading) { color: var(--color-default); - font-size: var(--size-default); + font-size: min(var(--size-default), 24px); margin: 0; padding-right: var(--space-quarter); text-transform: unset; @@ -72,6 +74,7 @@ .select :global(.react-select__control) { background-color: var(--background-secondary); + min-height: var(--input-height); padding: var(--space-quarter) var(--space-eight); } diff --git a/frontends/web/src/components/guide/entry.tsx b/frontends/web/src/components/guide/entry.tsx index b356cf563e..a9ee90292b 100644 --- a/frontends/web/src/components/guide/entry.tsx +++ b/frontends/web/src/components/guide/entry.tsx @@ -47,10 +47,12 @@ export const Entry = (props: TProps) => { return (
-
{shown ? '–' : '+'}
-
-

{entry.title}

+
+ {shown ? '–' : '+'}
+

+ {entry.title} +

{shown ? ( diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css index 67cdacd66f..e2bb003268 100644 --- a/frontends/web/src/components/guide/guide.module.css +++ b/frontends/web/src/components/guide/guide.module.css @@ -12,15 +12,16 @@ .close { display: flex; - height: 24px; + height: 2.4rem; + margin-left: var(--space-eight); + min-height: 0; padding: 4px; - width: 24px; + width: 2.4rem; } .close img { - height: 20px; - margin-left: calc(var(--space-quarter) / 2); - width: 20px; + height: min(2rem, 36px); + width: min(2rem, 36px); } .wrapper { @@ -61,11 +62,6 @@ margin: 0; } -.header a { - cursor: pointer; - font-size: 20px; -} - .content { display: flex; flex-direction: column; @@ -74,18 +70,6 @@ padding-bottom: env(safe-area-inset-bottom, 0); } -.content h1 { - font-size: 1.5em; - margin-top: 0px; -} - -.content h2 { - font-size: 1.1em; - font-weight: 400; - line-height: 1.2em; - margin: 0px; -} - .guide p { font-size: var(--size-default); margin: 0.4em 0; @@ -95,35 +79,39 @@ margin-right: 0; } -.entry { - margin-top: var(--space-default); -} - .appendix { padding-top: var(--space-half); margin-top: auto; } +.entry { + margin-top: var(--space-default); +} + .entryTitle { align-items: flex-start; cursor: default; display: flex; flex-direction: row; + font-size: var(--size-subheader); justify-content: flex-start; } -.entryTitle .entryToggle { +.entryToggle { align-items: center; display: flex; - flex-direction: row; font-weight: bold; + flex-direction: row; justify-content: flex-start; - line-height: 1.2em; - width: 16px; + line-height: 1.2; + width: var(--size-small); } -.entryTitle .entryTitleText { +.entryTitleText { flex: 1; + font-size: var(--size-subheader); + font-weight: 400; + margin: 0; } .entryContent { @@ -131,7 +119,7 @@ display: flex; flex-direction: row; justify-content: flex-start; - padding-left: 16px; + padding-left: var(--size-small); } .expanded { @@ -195,9 +183,3 @@ padding-right: var(--space-half); } } - -@media screen and (max-width: 640px) { - .guide h2 { - font-size: 1.05em; - } -} diff --git a/frontends/web/src/components/headerssync/headerssync.module.css b/frontends/web/src/components/headerssync/headerssync.module.css index e8d88ad0f6..34f9268af4 100644 --- a/frontends/web/src/components/headerssync/headerssync.module.css +++ b/frontends/web/src/components/headerssync/headerssync.module.css @@ -19,10 +19,10 @@ } .syncMessage { - height: 16px; + height: var(--size-default); width: 100%; max-width: var(--content-width); - font-size: var(--size-small); + font-size: var(--size-smaller); color: var(--color-secondary); text-align: right; margin: 0 auto; @@ -32,7 +32,6 @@ .syncText { display: inline-block; - height: 100%; font-variant: tabular-nums; } @@ -51,7 +50,7 @@ animation: changeContent .8s linear infinite; display: block; content: "⠋"; - font-size: 14px; + font-size: var(--size-small); margin-left: 3px; } diff --git a/frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css b/frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css index 14268ba5f4..f530ae5ab0 100644 --- a/frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css +++ b/frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css @@ -6,8 +6,8 @@ } .button img { - width: 18px; - height: 18px; + max-height: var(--size-default); + width: var(--size-default); } .buttonText { diff --git a/frontends/web/src/components/icon/combined.module.css b/frontends/web/src/components/icon/combined.module.css index d1eac139ea..11a9552b31 100644 --- a/frontends/web/src/components/icon/combined.module.css +++ b/frontends/web/src/components/icon/combined.module.css @@ -9,7 +9,7 @@ .bitbox02 { display: inline-block; - max-width: 264px; + max-width: min(264px, 80%); position: relative; right: -16px; } diff --git a/frontends/web/src/components/icon/icon.module.css b/frontends/web/src/components/icon/icon.module.css deleted file mode 100644 index 1caed53d7c..0000000000 --- a/frontends/web/src/components/icon/icon.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.expandIcon { - stroke: var(--color-gray); - width: 18px; - height: 18px; -} diff --git a/frontends/web/src/components/icon/icon.tsx b/frontends/web/src/components/icon/icon.tsx index 5c53ba3047..37e842acb2 100644 --- a/frontends/web/src/components/icon/icon.tsx +++ b/frontends/web/src/components/icon/icon.tsx @@ -98,44 +98,6 @@ import statusSuccessSVG from './assets/icons/icon-success.svg'; import statusWarningSVG from './assets/icons/icon-warning.svg'; import statusErrorSVG from './assets/icons/icon-error.svg'; import plusSVG from './assets/icons/plus.svg'; -import style from './icon.module.css'; - -export const ExpandOpen = () => ( - - - - - - -); - -export const ExpandClose = () => ( - - - - - -); type SVGProps = JSX.IntrinsicElements['svg']; @@ -152,16 +114,6 @@ export const CaretDown = ({ className, ...props }: SVGProps) => ( ); -type ExpandIconProps = { - expand: boolean; -}; - -export const ExpandIcon = ({ - expand = true, -}: ExpandIconProps) => ( - expand ? : -); - type ImgProps = JSX.IntrinsicElements['img']; export const Abort = (props: ImgProps) => (); diff --git a/frontends/web/src/components/keystore/connected-keystore.module.css b/frontends/web/src/components/keystore/connected-keystore.module.css index 6b76ac3828..cdd5bb5e99 100644 --- a/frontends/web/src/components/keystore/connected-keystore.module.css +++ b/frontends/web/src/components/keystore/connected-keystore.module.css @@ -15,6 +15,6 @@ @media (min-width: 1200px) { .keystore { - --size-default: 20px; + --size-default: 2rem; } } diff --git a/frontends/web/src/components/keystore/connected-keystore.tsx b/frontends/web/src/components/keystore/connected-keystore.tsx index 6bd8405492..f1dfc964a7 100644 --- a/frontends/web/src/components/keystore/connected-keystore.tsx +++ b/frontends/web/src/components/keystore/connected-keystore.tsx @@ -53,7 +53,12 @@ export const ConnectedKeystore = ({ <> {' '} } + icon={props => ( + + )} title={t('device.keystoreConnected')} type="success"> {connectedIconOnly ? undefined : t('device.keystoreConnected')} diff --git a/frontends/web/src/components/keystoreconnectprompt.module.css b/frontends/web/src/components/keystoreconnectprompt.module.css index 654d3c5de9..05f3197794 100644 --- a/frontends/web/src/components/keystoreconnectprompt.module.css +++ b/frontends/web/src/components/keystoreconnectprompt.module.css @@ -36,7 +36,7 @@ } .text { - font-size: 16px; + font-size: 1.6rem; } .dialogButtonsContainer { diff --git a/frontends/web/src/components/language/language.module.css b/frontends/web/src/components/language/language.module.css index 30ab6217d6..7b482f3f89 100644 --- a/frontends/web/src/components/language/language.module.css +++ b/frontends/web/src/components/language/language.module.css @@ -50,10 +50,6 @@ @media (max-width: 768px) { .link { - font-size: var(--size-small); - } - - .language { - font-size: var(--size-small) !important; + font-size: var(--size-smaller); } } \ No newline at end of file diff --git a/frontends/web/src/components/layout/footer.module.css b/frontends/web/src/components/layout/footer.module.css index 422254aa69..54929adc13 100644 --- a/frontends/web/src/components/layout/footer.module.css +++ b/frontends/web/src/components/layout/footer.module.css @@ -24,7 +24,7 @@ .footer p { text-align: right; - font-size: var(--size-small); + font-size: var(--size-smaller); } .footer img { diff --git a/frontends/web/src/components/layout/header.module.css b/frontends/web/src/components/layout/header.module.css index 02468bb69e..bb2f2221a5 100644 --- a/frontends/web/src/components/layout/header.module.css +++ b/frontends/web/src/components/layout/header.module.css @@ -28,9 +28,9 @@ } .guideClose img { - width: 18px; - height: 18px; color: var(--color-blue); + max-height: var(--size-default); + width: var(--size-default); } .guideCloseText { diff --git a/frontends/web/src/components/message/message.module.css b/frontends/web/src/components/message/message.module.css index 490c4943d8..842b497640 100644 --- a/frontends/web/src/components/message/message.module.css +++ b/frontends/web/src/components/message/message.module.css @@ -19,8 +19,8 @@ } .message img { - margin-right: 4px; - max-width: 30px; + margin-right: var(--space-quarter); + max-width: var(--size-header); } .message p:last-child { diff --git a/frontends/web/src/components/password.module.css b/frontends/web/src/components/password.module.css index 313232864d..09fda96a40 100644 --- a/frontends/web/src/components/password.module.css +++ b/frontends/web/src/components/password.module.css @@ -4,5 +4,5 @@ line-height: 42px; position: absolute; right: 0; - width: 2rem; + width: 32px; } diff --git a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css index f0c72a8581..f415d5e2e8 100644 --- a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css +++ b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css @@ -3,31 +3,27 @@ display: flex; flex-wrap: wrap; flex-grow: 1; + gap: var(--spacing-half); } .pillbuttongroup button { appearance: none; background: var(--background-secondary); - border: 2px solid var(--background-secondary); - border-radius: 2rem; + border: 0.1rem solid var(--background-secondary); + border-radius: 36px; color: var(--color-default); - font-size: var(--size-default); + font-size: min(var(--size-default), 18px); line-height: 1.75; margin-bottom: var(--spacing-half); - margin-left: var(--spacing-half); } .pillbuttongroup.medium button { - padding: 0 calc(var(--spacing-default) * .75); + padding: 0 12px; } .pillbuttongroup.large button { - font-size: calc(var(--size-default) + 1px); - padding: 2px calc(var(--spacing-default) * 1.5); -} - -.pillbuttongroup button:first-child { - margin-left: 0; + font-size: min(calc(var(--size-default) + 1px), 24px); + padding: 2px 24px; } .pillbuttongroup button:hover:not([disabled]) { @@ -60,10 +56,3 @@ border-color: var(--background-secondary); color: var(--color-disabled); } - -@media (max-width: 768px) { - .pillbuttongroup.lg button { - font-size: calc(var(--size-default)); - padding: 2px calc(var(--spacing-default) * 1.25); - } -} \ No newline at end of file diff --git a/frontends/web/src/components/settingsButton/outlined-settings-button.module.css b/frontends/web/src/components/settingsButton/outlined-settings-button.module.css index f21cacf8df..e8ad54bf51 100644 --- a/frontends/web/src/components/settingsButton/outlined-settings-button.module.css +++ b/frontends/web/src/components/settingsButton/outlined-settings-button.module.css @@ -7,6 +7,6 @@ } .button img { - width: 22px; - height: 22px; + height: var(--size-default); + width: var(--size-default); } diff --git a/frontends/web/src/components/settingsButton/settingsButton.module.css b/frontends/web/src/components/settingsButton/settingsButton.module.css index 884fe3a5e2..9637ecbff8 100644 --- a/frontends/web/src/components/settingsButton/settingsButton.module.css +++ b/frontends/web/src/components/settingsButton/settingsButton.module.css @@ -35,7 +35,7 @@ .optionalText { margin-left: auto; margin-right: var(--space-quarter); - font-size: var(--size-small); + font-size: var(--size-smaller); color: var(--color-secondary); white-space: nowrap; max-width: 300px; @@ -45,7 +45,7 @@ .secondaryText { color: var(--color-secondary); - font-size: var(--size-small); + font-size: var(--size-smaller); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; diff --git a/frontends/web/src/components/sidebar/sidebar.module.css b/frontends/web/src/components/sidebar/sidebar.module.css index 3a01efcbce..ddde005919 100644 --- a/frontends/web/src/components/sidebar/sidebar.module.css +++ b/frontends/web/src/components/sidebar/sidebar.module.css @@ -93,9 +93,8 @@ } .sidebarHeader { - font-size: 12px; - line-height: 1.3333; color: var(--color-secondary); + font-size: var(--size-smaller); } .sidebarIconVisible { @@ -112,15 +111,15 @@ .sidebarItem > a, .sidebarItem > button { - background-color: transparent; align-items: center; + background-color: transparent; border-radius: 2px; color: white; cursor: default; display: flex; flex-direction: row; - height: var(--sidebar-item-height); justify-content: center; + min-height: var(--sidebar-item-height); overflow: hidden; position: relative; text-decoration: none; @@ -180,15 +179,12 @@ a.sidebarActive .single img, } .sidebarLabel { - background-color: transparent; color: var(--color-light); - line-height: 1; flex: 1; - padding-top: 0; - padding-right: var(--space-default); font-size: var(--size-default); font-weight: 400; - transition: all 0.2s ease; + padding-right: var(--space-half); + padding-top: 0; word-break: break-word; } diff --git a/frontends/web/src/components/spinner/ascii.module.css b/frontends/web/src/components/spinner/ascii.module.css index 3d5b24310d..849a24bf7b 100644 --- a/frontends/web/src/components/spinner/ascii.module.css +++ b/frontends/web/src/components/spinner/ascii.module.css @@ -8,13 +8,13 @@ } .spinner:after { - position: relative; - top: 2px; animation: changeContent .8s linear infinite; display: block; content: "⠋"; - font-size: 14px; + font-size: var(--size-small); margin-left: 3px; + position: relative; + top: 2px; } @keyframes changeContent { diff --git a/frontends/web/src/components/status/status.module.css b/frontends/web/src/components/status/status.module.css index b208875a3a..207178ddd6 100644 --- a/frontends/web/src/components/status/status.module.css +++ b/frontends/web/src/components/status/status.module.css @@ -7,17 +7,16 @@ display: flex; width: 100%; } -.container.withCloseBtn { - padding-right: 60px; -} .closeButton { background-color: transparent; border: none; margin-left: auto; + padding: 0; } .closeButton img { - width: 16px; - height: 16px; + height: var(--size-default); + margin-right: 0; + width: var(--size-default); } diff --git a/frontends/web/src/components/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css index 8ca16394e5..52d879c96f 100644 --- a/frontends/web/src/components/terms/terms.module.css +++ b/frontends/web/src/components/terms/terms.module.css @@ -1,4 +1,5 @@ .disclaimerContainer { + --size-default: min(1.4rem, 24px); align-items: center; display: flex; flex-basis: 100%; @@ -12,12 +13,6 @@ width: 100%; } -.title { - font-size: 2rem; - font-weight: 400; - text-align: center; -} - .disclaimer { background-color: var(--background-secondary); flex-basis: 100%; @@ -27,22 +22,22 @@ margin: 0 0 var(--space-default) 0; max-width: 660px; overflow: auto; - padding: var(--space-quarter) 1em 1em 1em; + padding: var(--space-quarter) var(--space-half) var(--space-half) var(--space-half); } -.disclaimer .title { - font-size: .875rem; +.title { + font-size: var(--size-default); font-weight: bold; text-align: left; } .disclaimer p { - font-size: .875rem; + font-size: var(--size-default); line-height: 1.5; } .disclaimer p + .title { - margin: 2.5rem 0 0 0; + margin: 64px 0 0 0; } .table { @@ -51,7 +46,7 @@ .table table { border-collapse: collapse; - font-size: .875rem; + font-size: var(--size-default); text-align: left; } @@ -70,6 +65,11 @@ padding-left: 0; } +.table td:last-child, +.table th:last-child { + padding-right: 0; +} + .nowrap { white-space: nowrap; } diff --git a/frontends/web/src/components/title/subtitle.module.css b/frontends/web/src/components/title/subtitle.module.css index 7fa169080b..78fdae9c0b 100644 --- a/frontends/web/src/components/title/subtitle.module.css +++ b/frontends/web/src/components/title/subtitle.module.css @@ -7,6 +7,6 @@ @media (min-width: 1200px) { .subtitle { - --size-subheader: 20px; + --size-subheader: 2rem; } } diff --git a/frontends/web/src/components/toggle/toggle.module.css b/frontends/web/src/components/toggle/toggle.module.css index 5b31763c36..5cdb65379a 100644 --- a/frontends/web/src/components/toggle/toggle.module.css +++ b/frontends/web/src/components/toggle/toggle.module.css @@ -3,14 +3,17 @@ flex-shrink: 0; margin: 0; min-height: var(--item-height-xsmall); + height: min(2.4rem, 28px); position: relative; width: 60px; } .container input { - height: 0; - opacity: 0; - width: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; } .container input[disabled] + .slider { @@ -35,7 +38,7 @@ border-radius: 2px; bottom: 4px; content: ""; - height: 16px; + height: min(1.6rem, 20px); left: 4px; position: absolute; width: 26px; diff --git a/frontends/web/src/components/transactions/components/details.module.css b/frontends/web/src/components/transactions/components/details.module.css new file mode 100644 index 0000000000..0baecc6ad9 --- /dev/null +++ b/frontends/web/src/components/transactions/components/details.module.css @@ -0,0 +1,90 @@ +.currencyUnit { + color: var(--color-secondary); + font-variant: normal; +} + +.detail, +.detailInput { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + min-height: var(--item-height); + padding: var(--space-half); +} + +.detailInput { + padding: 0 0 0 var(--space-half); +} + +.detailInput label { + flex-shrink: 0; + margin-bottom: 0; +} + +.textOnlyInput { + margin: 0; +} + +.textOnlyInput input { + border: none; +} + +.editButton { + background: none; + border: none; + min-height: 20px; + margin-right: var(--space-half); + padding: 0; + -webkit-appearance: none; + width: 20px; +} + +.editButton:focus { + outline: none; +} + +.editButton img { + opacity: 0.4; + vertical-align: text-bottom; + outline: none; +} + +.editButton:hover img { + opacity: 0.55; +} + + +.detail:not(:first-child) { + border-top: solid 1px var(--background); +} + +.detail label { + margin-right: var(--space-half) !important; + word-break: keep-all; +} + +.detail label, +.detail p { + margin: 0; + line-height: 1; +} + +.detail.addresses { + align-items: baseline; + padding-bottom: 0; + padding-right: 0; + padding-top: 0; +} + +.addresses label { + padding: var(--space-half) 0; +} + +.detailAddresses { + flex-grow: 1; +} + +.detailAddress + .detailAddress { + margin-top: calc(var(--space-quarter) * -1); +} diff --git a/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css b/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css index 860daa54a1..1b792d25f0 100644 --- a/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css +++ b/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css @@ -4,14 +4,19 @@ .label { color: var(--color-default); - font-size: 14px; + font-size: var(--size-small); font-weight: 600; margin: 0; } +.nowrap { + flex-shrink: 0; +} + .row { align-items: center; display: flex; + flex-wrap: wrap; justify-content: space-between; } @@ -28,7 +33,7 @@ .detailAddress { padding: 0; margin: 0; - height: 20px; + height: 2rem; } .container { @@ -51,26 +56,26 @@ } .amount { - font-size: 24px; + font-size: var(--size-header); margin: var(--space-quarter) 0; - font-weight: 600; } .headerAmountUnit { - font-size: 21px; + font-size: var(--size-subheader); } .headerFiatUnit { - font-size: 16px; + font-size: var(--size-small); } .rowUnit { - font-size: 13px; + font-size: var(--size-small); } .statusContainer { align-items: center; display: flex; + flex-wrap: wrap; justify-content: space-between; margin-bottom: calc(var(--space-half) + var(--space-quarter)); width: 100%; @@ -92,7 +97,7 @@ .amountFiat { align-items: center; display: flex; - font-size: 18px; + font-size: var(--size-subheader); margin-bottom: var(--space-quarter); } @@ -114,13 +119,13 @@ .note { margin: 0; - height: 20px; width: 85%; } .note input { border: none; - height: 20px; + height: auto; + min-height: 20px; padding: 0; } @@ -128,12 +133,14 @@ align-items: center; display: flex; flex-direction: row; + flex-wrap: wrap; justify-content: space-between; padding: 0; } .unit { font-weight: 400; + font-size: var(--size-small); color: var(--color-secondary); font-variant: normal; position: relative; @@ -162,6 +169,10 @@ text-decoration: none; } +.explorerLink img { + max-height: var(--size-default); +} + .addressOrTxIdContainer { display: flex; flex-direction: column; diff --git a/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.tsx b/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.tsx index eeeefbc964..94649d83d6 100644 --- a/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.tsx +++ b/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.tsx @@ -155,7 +155,10 @@ export const TxDetailsDialog = ({ {/* tx id */} -

{t('transaction.explorer')}

+

{t('transaction.explorer')}

 @@ -167,7 +170,7 @@ export const TxDetailsDialog = ({ className={styles.explorerLink} href={explorerURL + transactionInfo.txID} title={`${t('transaction.explorerTitle')}\n${explorerURL}${transactionInfo.txID}`}> - + {' '} {t('transaction.explorerTitle')} diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css index b8445c3bf3..f720aff729 100644 --- a/frontends/web/src/components/transactions/transaction.module.css +++ b/frontends/web/src/components/transactions/transaction.module.css @@ -59,12 +59,17 @@ flex-direction: column; flex-grow: 1; flex-shrink: 0; - font-size: 14px; + font-size: var(--size-small); line-height: 1.285714; padding: 0 var(--space-quarter) 0 48px; text-align: right; white-space: nowrap; } +@media (max-width: 768px) { + .txAmountsColumn { + padding-right: var(--space-half); + } +} @media (max-width: 560px) { .txAmountsColumn { flex-shrink: 1; @@ -73,15 +78,15 @@ padding-left: 24px; } } -@media (max-width: 768px) { +@media (max-width: 425px) { .txAmountsColumn { - padding-right: var(--space-half); + padding-left: 12px; } } .txAmount { align-items: baseline; - font-size: 16px; + font-size: var(--size-default); font-variant: tabular-nums; gap: 3px; justify-content: flex-end; @@ -105,7 +110,7 @@ .txUnit { color: var(--color-secondary); - font-size: 14px; + font-size: var(--size-small); line-height: 1.285714; } @@ -116,7 +121,7 @@ } .txNoteText { color: var(--color-default); - font-size: 16px; + font-size: var(--size-default); line-height: 1.25; } @media (max-width: 560px) { @@ -130,7 +135,7 @@ align-items: center; color: var(--color-secondary); display: flex; - font-size: 14px; + font-size: var(--size-small); line-height: 1.285714; padding-bottom: 6px; } @@ -174,13 +179,13 @@ } .addresses { color: var(--color-secondary); - font-size: 14px; + font-size: var(--size-small); font-weight: normal; line-height: 1.285714; } .txType { color: var(--color-default); - font-size: 16px; + font-size: var(--size-default); line-height: 1.25; } diff --git a/frontends/web/src/components/view/view.module.css b/frontends/web/src/components/view/view.module.css index cf346ba774..027f95ca9f 100644 --- a/frontends/web/src/components/view/view.module.css +++ b/frontends/web/src/components/view/view.module.css @@ -293,22 +293,6 @@ margin: 0 auto; } -@media (min-width: 1200px) { - .title { - --size-subheader: 28px; - } - .header, - .inner p { - --size-default: 20px; - } - .fullscreen { - --size-default: 18px; - } - .inner footer p { - --size-default: 14px; - } -} - .footer { align-items: center; display: flex; @@ -346,7 +330,7 @@ .footer p { text-align: right; - font-size: var(--size-small); + font-size: var(--size-smaller); } .footer img { diff --git a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css index 2e81e69c03..88cf966b6f 100644 --- a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css +++ b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css @@ -1,5 +1,5 @@ .accountName { - font-size: 16px; + font-size: 1.6rem; margin: 0 var(--space-half) 0 0; } @@ -9,7 +9,7 @@ .address { color: var(--color-secondary); - font-size: 16px; + font-size: 1.6rem; margin: 0; } @@ -55,7 +55,7 @@ } .itemText { - font-size: 16px; + font-size: 1.6rem; margin: 0; } diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css index 64d50f5c46..4f6a6e860a 100644 --- a/frontends/web/src/routes/account/account.module.css +++ b/frontends/web/src/routes/account/account.module.css @@ -32,11 +32,7 @@ } .loupe { - width: 17px; -} - -.button { - height: 37px; + width: var(--size-default); } @media (max-width: 768px) { @@ -45,27 +41,34 @@ } .button { - height: 50px; + min-height: var(--button-height); } } +.subTitle { + font-size: var(--size-subheader); + font-weight: normal; + margin-bottom: var(--space-quarter); + margin-top: 0; +} + .balanceHeader { - align-items: center; + align-items: flex-start; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: var(--space-half); + min-height: var(--button-height); } .actionsContainer { - --size-default: 14px; display: flex; flex-grow: 1; flex-shrink: 0; flex-wrap: nowrap; gap: var(--space-quarter); justify-content: flex-end; - margin-top: var(--space-half); + margin-top: 0; padding-bottom: 0; } @@ -92,9 +95,9 @@ } .accountIcon { - width: 18px; - height: 18px; + height: var(--size-default); margin-right: var(--space-eight); + width: var(--size-default); } .errorLoadTransactions { @@ -106,7 +109,7 @@ color: var(--color-secondary); display: flex; justify-content: space-between; - margin-bottom: var(--space-quarter) !important; /* overwrite default subTitle margin */ + margin-bottom: 0 !important; /* overwrite default subTitle margin */ } .titleWithButton button { padding-left: var(--space-half); @@ -132,6 +135,7 @@ .actionsContainer { justify-content: center; margin-bottom: var(--space-half); + margin-top: var(--space-half); padding-bottom: 0; width: 100%; } @@ -185,10 +189,6 @@ width: 100%; } -.searchInput input { - height: 40px; -} - .searchInput:focus { outline: none; border-color: var(--color-primary); @@ -205,7 +205,7 @@ } .searchButton { - font-size: 14px; + font-size: var(--size-small); height: var(--item-height-small); text-align: left; } diff --git a/frontends/web/src/routes/account/account.tsx b/frontends/web/src/routes/account/account.tsx index e1e6345326..c4f427f89b 100644 --- a/frontends/web/src/routes/account/account.tsx +++ b/frontends/web/src/routes/account/account.tsx @@ -258,9 +258,9 @@ const RemountAccount = ({ )} - +
{!isAccountEmpty && } diff --git a/frontends/web/src/routes/account/add/add.module.css b/frontends/web/src/routes/account/add/add.module.css index 070334489c..96f48416bf 100644 --- a/frontends/web/src/routes/account/add/add.module.css +++ b/frontends/web/src/routes/account/add/add.module.css @@ -1,8 +1,8 @@ .manageContainer { - flex-basis: 490px; + /* flex-basis: 490px; */ flex-shrink: 1; margin-bottom: var(--header-height); - min-height: 390px; + min-height: 490px; max-height: 100%; } @@ -13,7 +13,7 @@ .successCheck { background-color: var(--color-success); - border: .5rem solid var(--color-success); + border: 8px solid var(--color-success); border-radius: 100px; } diff --git a/frontends/web/src/routes/account/add/components/steps.module.css b/frontends/web/src/routes/account/add/components/steps.module.css index e77d2b93ea..680e85b565 100644 --- a/frontends/web/src/routes/account/add/components/steps.module.css +++ b/frontends/web/src/routes/account/add/components/steps.module.css @@ -48,7 +48,7 @@ content: ""; display: inline-block; flex-shrink: 0; - font-size: 14px; + font-size: var(--size-small); height: var(--icon-size); line-height: var(--icon-size); position: relative; diff --git a/frontends/web/src/routes/account/components/insuredtag.module.css b/frontends/web/src/routes/account/components/insuredtag.module.css index 632d719294..a59ae6bc0c 100644 --- a/frontends/web/src/routes/account/components/insuredtag.module.css +++ b/frontends/web/src/routes/account/components/insuredtag.module.css @@ -1,16 +1,15 @@ .insured { - padding: 4px 10px; - border-radius: var(--space-half); - border: 1px solid; - font-size: var(--size-small); - line-height: 14px; - background: var(--color-palegreen); - border-color: var(--color-lightgreen); - color: var(--color-darkgreen); - margin: 0px 10px; - text-decoration: none; - white-space: nowrap; - max-height: 24px; + background: var(--color-palegreen); + border-radius: var(--space-half); + border: 1px solid; + border-color: var(--color-lightgreen); + color: var(--color-darkgreen); + font-size: var(--size-smaller); + margin: 0px 10px; + max-height: 2.4rem; + padding: .4rem 10px; + text-decoration: none; + white-space: nowrap; } .insured div { diff --git a/frontends/web/src/routes/account/info/buy-receive-cta.module.css b/frontends/web/src/routes/account/info/buy-receive-cta.module.css index 6344c21a81..a3b2ff24e9 100644 --- a/frontends/web/src/routes/account/info/buy-receive-cta.module.css +++ b/frontends/web/src/routes/account/info/buy-receive-cta.module.css @@ -16,6 +16,6 @@ @media (max-width: 425px) { .buttons button { padding: var(--space-quarter); - font-size: 14px; + font-size: var(--size-small); } } diff --git a/frontends/web/src/routes/account/info/info.module.css b/frontends/web/src/routes/account/info/info.module.css index 26b0e0b507..e3dd4546b3 100644 --- a/frontends/web/src/routes/account/info/info.module.css +++ b/frontends/web/src/routes/account/info/info.module.css @@ -33,7 +33,7 @@ clear: both; display: flex; justify-content: space-between; - min-height: 3.5rem; + min-height: 56px; } .verifyButton { @@ -43,6 +43,7 @@ .entry { align-items: baseline; display: flex; + flex-wrap: wrap; justify-content: space-between; margin-bottom: var(--space-half); } @@ -101,7 +102,7 @@ } .addressField input { - font-size: var(--size-small); + font-size: var(--size-smaller); } .qrCode { diff --git a/frontends/web/src/routes/account/receive/receive.module.css b/frontends/web/src/routes/account/receive/receive.module.css index e2578d1cdd..02c17887d0 100644 --- a/frontends/web/src/routes/account/receive/receive.module.css +++ b/frontends/web/src/routes/account/receive/receive.module.css @@ -19,21 +19,6 @@ min-height: 260px; } -.arrowLeft, -.arrowRight { - width: 16px; - position: relative; - top: 3px; -} - -.arrowLeft { - margin-right: 3px; -} - -.arrowRight { - margin-left: 3px; -} - .previous, .next { appearance: none; @@ -46,6 +31,13 @@ text-decoration: none; } +.previous img, +.next img { + display: block; + height: min(2.4rem, 36px); + width: min(2.4rem, 36px); +} + .hide { position: absolute; top: 0; @@ -62,11 +54,12 @@ color: var(--color-secondary); cursor: pointer; display: inline-block; + font-size: var(--size-small); text-align: center; text-decoration: underline; padding: var(--space-quarter); } .messageContainer { - margin-top: var(--spacing-default); + margin-top: var(--spacing-half); } \ No newline at end of file diff --git a/frontends/web/src/routes/account/receive/receive.tsx b/frontends/web/src/routes/account/receive/receive.tsx index ce9351d8be..1a278519c2 100644 --- a/frontends/web/src/routes/account/receive/receive.tsx +++ b/frontends/web/src/routes/account/receive/receive.tsx @@ -75,11 +75,9 @@ const AddressTypeDialog = ({ {t(`receive.scriptType.${scriptType}`)} {scriptType === 'p2tr' && addressType === i && ( -
- - {t('receive.taprootWarning')} - -
+ + {t('receive.taprootWarning')} + )}
))} @@ -237,9 +235,9 @@ export const Receive = ({ className={style.previous} onClick={previous}> {(verifying || activeIndex === 0) ? ( - + ) : ( - + )} )} @@ -251,9 +249,9 @@ export const Receive = ({ className={style.next} onClick={e => next(e, currentAddresses.length)}> {(verifying || activeIndex >= currentAddresses.length - 1) ? ( - + ) : ( - + )} )} diff --git a/frontends/web/src/routes/account/send/coin-control.module.css b/frontends/web/src/routes/account/send/coin-control.module.css new file mode 100644 index 0000000000..59bc2de0a4 --- /dev/null +++ b/frontends/web/src/routes/account/send/coin-control.module.css @@ -0,0 +1,6 @@ +.coinControlButton { + font-size: var(--size-subheader); + min-height: 0; + padding-left: 0; + padding-right: 0; +} diff --git a/frontends/web/src/routes/account/send/coin-control.tsx b/frontends/web/src/routes/account/send/coin-control.tsx index 48e124d13d..d369ff9aba 100644 --- a/frontends/web/src/routes/account/send/coin-control.tsx +++ b/frontends/web/src/routes/account/send/coin-control.tsx @@ -21,6 +21,7 @@ import { getConfig } from '@/utils/config'; import { Button } from '@/components/forms'; import { TSelectedUTXOs, UTXOs } from './utxos'; import { isBitcoinBased } from '../utils'; +import style from './coin-control.module.css'; type TProps = { account: TAccount; @@ -68,7 +69,7 @@ export const CoinControl = ({ }} onChange={onSelectedUTXOsChange} />
-
- -
- -
- -
- +
+
+ + {t('send.availableBalance')} + +
+ + {t('send.transactionDetails')} + +
diff --git a/frontends/web/src/routes/account/send/utxos.module.css b/frontends/web/src/routes/account/send/utxos.module.css index 2022ce08dc..2eb1a82452 100644 --- a/frontends/web/src/routes/account/send/utxos.module.css +++ b/frontends/web/src/routes/account/send/utxos.module.css @@ -1,6 +1,10 @@ +.utxoContainer { + color: var(--color-default); +} + .utxosList { list-style: none; - padding: 0 0 var(--space-half) 0; + padding: 0 0 var(--space-half) 0 !important; } .utxosList label { @@ -41,17 +45,25 @@ } .utxoExplorer img { - width: 18px; - height: 18px; + display: block; + height: var(--size-subheader); + width: var(--size-subheader); } .amounts { + display: flex; + flex-wrap: wrap; + gap: var(--space-half); line-height: 1; padding-bottom: var(--space-quarter); } .amount { - margin-right: var(--space-quarter); + align-items: baseline; + display: flex; + flex-basis: auto; + gap: var(--space-eight); + margin-right: var(--sfpace-quarter); } .label, diff --git a/frontends/web/src/routes/account/send/utxos.tsx b/frontends/web/src/routes/account/send/utxos.tsx index 67e32b7e3c..1a4f2fee57 100644 --- a/frontends/web/src/routes/account/send/utxos.tsx +++ b/frontends/web/src/routes/account/send/utxos.tsx @@ -103,7 +103,7 @@ export const UTXOs = ({ return null; } return ( -
+

{ getScriptName(scriptType) }

    { filteredUTXOs.map(utxo => ( diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css index d65da56922..11a7ba6ead 100644 --- a/frontends/web/src/routes/account/summary/accountssummary.module.css +++ b/frontends/web/src/routes/account/summary/accountssummary.module.css @@ -33,7 +33,7 @@ .openFileText { color: var(--color-primary); cursor: pointer; - font-size: var(--size-small); + font-size: var(--size-smaller); } .table { @@ -76,11 +76,11 @@ padding-left: calc(24px + var(--space-default)); } -.table tr td, +/* .table tr td, .table tr td { font-size: var(--size-default) !important; line-height: 1.5714; -} +} */ .table tbody td { background-color: var(--background-secondary); @@ -91,6 +91,8 @@ } .summaryTableBalance { + display: flex; + gap: var(--space-eight); white-space: nowrap; } @@ -101,13 +103,13 @@ } .coinName { + align-items: center; display: flex; } .coinName img { flex-shrink: 0; margin-right: var(--spacing-default); - vertical-align: middle; } .coinUnit { @@ -169,6 +171,7 @@ .table tbody td { display: flex; + flex-wrap: wrap; justify-content: space-between; height: auto; padding-bottom: 0; @@ -188,13 +191,4 @@ padding-bottom: var(--spacing-default); } - .coinName { - position: relative; - } - - .coinName img { - left: -2rem; - position: absolute; - top: -3px; - } } diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css index 5ee251b2be..6c94aa0ecd 100644 --- a/frontends/web/src/routes/account/summary/chart.module.css +++ b/frontends/web/src/routes/account/summary/chart.module.css @@ -82,17 +82,17 @@ } .totalValue { - font-size: 2rem; - display: flex; align-items: flex-end; + display: flex; + font-size: min(3.2rem, 40px); } .totalUnit { color: var(--color-secondary); display: inline-block; + font-size: min(2rem, 25px); margin-bottom: 3px; - font-size: 1.4rem; - padding: 0 .25rem; + padding: 0 4px; } .chartCanvas { @@ -110,10 +110,10 @@ background: var(--background-secondary); border: 1px solid var(--background); border-radius: 3px; - font-size: var(--size-small); + font-size: var(--size-smaller); margin-top: -25px; min-width: 140px; - padding: .75rem .6rem; + padding: 12px 10px; pointer-events: none; position: absolute; text-align: center; @@ -123,14 +123,14 @@ .toolTipValue { font-weight: normal; - font-size: 1rem; - margin: 0 0 .25rem 0; + font-size: 1.6rem; + margin: 0 0 4px 0; } .toolTipUnit { color: var(--color-secondary); - font-size: var(--size-small); - padding: 0 .125rem; + font-size: var(--size-smaller); + padding: 0 2px; } .toolTipTime { diff --git a/frontends/web/src/routes/account/summary/percentage-diff.module.css b/frontends/web/src/routes/account/summary/percentage-diff.module.css index fb032d8493..f4b591229d 100644 --- a/frontends/web/src/routes/account/summary/percentage-diff.module.css +++ b/frontends/web/src/routes/account/summary/percentage-diff.module.css @@ -1,9 +1,15 @@ -.arrow img { - margin-right: .25rem; +.arrow { + line-height: 1; vertical-align: text-bottom; } +.arrow img { + height: min(2rem, 25px); + margin-right: 4px; + width: min(2rem, 25px); +} + .up { color: var(--color-green); } @@ -13,10 +19,10 @@ } .diffValue { - font-size: 1.2rem; + font-size: min(2rem, 25px); } .diffUnit { - font-size: 1rem; - padding: 0 .25rem; + font-size: min(1.6rem, 20px); /* var(--size-default); */ + padding: 0 4px; } diff --git a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css index 9571b5834a..d103000949 100644 --- a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css +++ b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css @@ -26,11 +26,11 @@ } .accountName { - font-size: 20px; + font-size: 2rem; } .receiveAddress { - font-size: 16px; + font-size: 1.6rem; } @media (max-width: 768px) { @@ -42,7 +42,7 @@ font-size: var(--size-subheader); } .headerContainer p { - font-size: var(--size-small); + font-size: var(--size-smaller); } .headerContainer img { width: 36px; diff --git a/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css b/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css index 3bb896e223..0ebec549f8 100644 --- a/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css +++ b/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css @@ -8,7 +8,7 @@ .container p { color: var(--color-default); - font-size: 16px; + font-size: 1.6rem; line-height: 1.9; margin-bottom: 0; } diff --git a/frontends/web/src/routes/account/walletconnect/dashboard.module.css b/frontends/web/src/routes/account/walletconnect/dashboard.module.css index 55ec3937e6..9ae9bbe09e 100644 --- a/frontends/web/src/routes/account/walletconnect/dashboard.module.css +++ b/frontends/web/src/routes/account/walletconnect/dashboard.module.css @@ -16,12 +16,12 @@ .headerContainer p.receiveAddress { color: var(--color-secondary); margin-top: var(--space-quarter); - font-size: 16px; + font-size: 1.6rem; } .noConnectedSessions { color: var(--color-secondary); - font-size: 16px; + font-size: 1.6rem; margin: 0; margin-top: var(--space-large); text-align: center; @@ -41,7 +41,7 @@ .allSessionsHeading { color: var(--color-secondary); - font-size: 16px; + font-size: 1.6rem; margin: 0; margin-top: var(--space-half); } @@ -54,7 +54,7 @@ } .headerContainer p { - font-size: 16px; + font-size: 1.6rem; } .headerContainer p.receiveAddress, diff --git a/frontends/web/src/routes/accounts/all-accounts.module.css b/frontends/web/src/routes/accounts/all-accounts.module.css index 29d8204416..eb02d4436e 100644 --- a/frontends/web/src/routes/accounts/all-accounts.module.css +++ b/frontends/web/src/routes/accounts/all-accounts.module.css @@ -1,7 +1,6 @@ .container { display: flex; flex-direction: column; - font-size: 14px; gap: var(--space-half); width: 100%; } @@ -22,17 +21,16 @@ } .accountItem { - display: flex; align-items: center; - text-decoration: none; - gap: 0; + display: flex; color: var(--color-text); + gap: var(--space-quarter); + text-decoration: none; } .accountIcon { display: block; flex: 0 0 auto; - margin-right: var(--space-quarter); } .accountIcon img { @@ -40,11 +38,11 @@ } .accountName { - flex-basis: auto; - flex-grow: 0; + flex-basis: 100%; + flex-grow: 1; flex-shrink: 1; margin: 0; - margin-right: var(--space-half); + margin-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -54,23 +52,36 @@ align-items: baseline; color: var(--color-secondary); display: flex; - flex-basis: auto; - flex-shrink: 0; + flex-shrink: 1; flex-grow: 1; - font-size: 16px; + font-size: var(--size-default); justify-content: flex-end; margin-left: auto; + max-width: 60%; /**/ overflow: hidden; + overflow: clip; + padding-right: var(--space-quarter); text-align: right; } +.accountBalanceContainer.textEnd { + +} + +.unit { + font-size: var(--size-smaller); +} + .chevron { color: var(--color-mediumgray); flex-shrink: 0; - font-size: 18px; - margin-left: 4px; - margin-top: 6px; - margin-right: -8px; + margin-right: 0; + position: absolute; + right: var(--space-eight); +} + +.chevron img { + display: block; } .emptyState { diff --git a/frontends/web/src/routes/accounts/all-accounts.tsx b/frontends/web/src/routes/accounts/all-accounts.tsx index 060189b7ab..a6f293f03e 100644 --- a/frontends/web/src/routes/accounts/all-accounts.tsx +++ b/frontends/web/src/routes/accounts/all-accounts.tsx @@ -74,7 +74,7 @@ const AccountItem = ({ account }: TAccountItemProp) => {

    - +
    diff --git a/frontends/web/src/routes/bitsurance/bitsurance.module.css b/frontends/web/src/routes/bitsurance/bitsurance.module.css index 4e53332efa..91d65c1eae 100644 --- a/frontends/web/src/routes/bitsurance/bitsurance.module.css +++ b/frontends/web/src/routes/bitsurance/bitsurance.module.css @@ -1,10 +1,10 @@ .cardBody { - font-size: 16px; + font-size: 1.6rem; margin-bottom: calc(var(--space-half) + var(--space-quarter)); } .cardBody2 { - font-size: 14px; + font-size: var(--size-small); margin-bottom: var(--space-default); } @@ -49,7 +49,7 @@ } .title { - font-size: 20px; + font-size: 2rem; font-weight: 400; margin: 0; margin-bottom: var(--space-half); @@ -67,7 +67,7 @@ ul.clean { } .cardBody2 { - font-size: var(--size-small); + font-size: var(--size-smaller); } .clean li { @@ -84,6 +84,6 @@ ul.clean { } .title { - font-size: 16px; + font-size: 1.6rem; } } diff --git a/frontends/web/src/routes/bitsurance/dashboard.module.css b/frontends/web/src/routes/bitsurance/dashboard.module.css index 3c85b7687a..0aa9f83068 100644 --- a/frontends/web/src/routes/bitsurance/dashboard.module.css +++ b/frontends/web/src/routes/bitsurance/dashboard.module.css @@ -1,5 +1,5 @@ .text { - font-size: 16px; + font-size: 1.6rem; margin: 0; } @@ -16,16 +16,25 @@ .button { font-size: var(--size-default); - height: calc(var(--space-default) + var(--space-quarter)); padding: 0 24px; } .button span { - font-size: 20px; + font-size: 2rem; margin-bottom: 2px; margin-right: var(--space-quarter); } +.externalLink { + align-items: baseline; + display: flex; +} + +.externalLink img { + max-height: var(--size-default); + max-width: var(--size-default); +} + .coverageContainer { margin: var(--space-half) 0; } @@ -66,7 +75,7 @@ } .keystore > span { - font-size: var(--size-small); + font-size: var(--size-smaller); } @media (max-width: 768px) { diff --git a/frontends/web/src/routes/bitsurance/dashboard.tsx b/frontends/web/src/routes/bitsurance/dashboard.tsx index e8c59662cd..5070a838d7 100644 --- a/frontends/web/src/routes/bitsurance/dashboard.tsx +++ b/frontends/web/src/routes/bitsurance/dashboard.tsx @@ -50,16 +50,16 @@ type TInsurancesByCode = { const AccountStatusIcon = ({ status }: TAccountStatusIconProps) => { switch (status) { case 'active': - return ; + return ; case 'processing': case 'waitpayment': - return ; + return ; case 'refused': - return ; + return ; case 'inactive': - return ; + return ; case 'canceled': - return ; + return ; } }; @@ -200,8 +200,8 @@ export const BitsuranceDashboard = ({ accounts }: TProps) => { className={`${style.text || ''} ${style.link || ''} m-top-quarter-on-small`} href={insurance.details.support} > -
    - +
    + {t('bitsurance.dashboard.supportLink')} diff --git a/frontends/web/src/routes/device/bitbox01/check.jsx b/frontends/web/src/routes/device/bitbox01/check.jsx index f34a14270d..c829018178 100644 --- a/frontends/web/src/routes/device/bitbox01/check.jsx +++ b/frontends/web/src/routes/device/bitbox01/check.jsx @@ -99,7 +99,7 @@ class Check extends Component { onClose={this.abort}> { message ? (
    -

    {message}

    +

    {message}