chore(connect-popup): adjust ui on mobile

trezor · Aug 6, 2024 · 462e45e · 462e45e
1 parent 9a6ba2e
commit 462e45e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 45 deletions.
diff --git a/packages/connect-explorer/src/components/Method.tsx b/packages/connect-explorer/src/components/Method.tsx
@@ -5,7 +5,7 @@ import { useState, useCallback, useEffect } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { CopyToClipboard } from 'nextra/components';
 
-import { Button as TrezorButton, ButtonProps, H3, Card } from '@trezor/components';
+import { Button as TrezorButton, ButtonProps, H3, Card, variables } from '@trezor/components';
 import { spacingsPx } from '@trezor/theme';
 
 import type { Field, FieldWithBundle, FieldWithUnion } from '../types';
@@ -146,6 +146,10 @@ export const MethodContent = styled.div<{ $manualMode?: boolean }>(
     grid-template-columns: ${$manualMode ? '3fr 2fr' : '2fr 3fr'};
     gap: 20px;
 
+    @media screen and (max-width: ${variables.SCREEN_SIZE.MD}) {
+        grid-template-columns: 1fr;
+    }
+
     & > div {
         /* CSS grid obscurities */
         min-width: 0;

diff --git a/packages/connect-popup/src/static/popup.css b/packages/connect-popup/src/static/popup.css
@@ -85,8 +85,8 @@ section {
     display: none;
 }
 p {
-    font-size: 12px;
-    font-weight: 300;
+    font-size: 15px;
+    font-weight: 400;
     color: #757575;
 }
 h2 {
@@ -96,7 +96,7 @@ h2 {
     text-rendering: optimizeLegibility;
 }
 h3 {
-    font-size: 16px;
+    font-size: 19px;
     font-weight: 600;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
@@ -112,18 +112,6 @@ textarea:focus {
 #__lpform_input_idx_0 {
     display: none;
 }
-@media screen and (min-width: 768px) {
-    p {
-        font-size: 15px;
-        font-weight: 400px;
-    }
-    h2 {
-        font-size: 22px;
-    }
-    h3 {
-        font-size: 19px;
-    }
-}
 a:not(.button),
 a:visited {
     cursor: pointer;
@@ -165,7 +153,7 @@ a.button,
 button {
     padding: 12px 24px;
     border-radius: 3px;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 300;
     cursor: pointer;
     background: #01b757;
@@ -222,15 +210,13 @@ a.button.confirm,
 button.confirm {
     width: 100%;
     padding: 12px;
-    font-size: 14px;
     color: #ffffff;
     background-color: #01b757;
 }
 a.button.cancel,
 button.cancel {
     width: 100%;
     padding: 12px;
-    font-size: 14px;
     color: #757575;
     background-color: transparent;
     border: 1px solid #757575;
@@ -272,7 +258,7 @@ button.check-devices .plus::after {
 }
 a.button.check-devices .text,
 button.check-devices .text {
-    font-size: 14px;
+    font-size: 16px;
     color: #00ab51;
 }
 a.button.check-devices:hover,
@@ -337,20 +323,6 @@ button.notification-button:hover {
     color: white;
     background-color: #eb8a00;
 }
-@media screen and (min-width: 768px) {
-    a.button,
-    button {
-        font-size: 16px;
-    }
-    a.button.confirm,
-    button.confirm {
-        font-size: 16px;
-    }
-    a.button.cancel,
-    button.cancel {
-        font-size: 16px;
-    }
-}
 header {
     position: fixed;
     top: 0;
@@ -428,7 +400,7 @@ input[type='password']:focus {
     line-height: 1;
     cursor: pointer;
     font-weight: 300;
-    font-size: 12px;
+    font-size: 14px;
     color: #757575;
 }
 .custom-checkbox input {
@@ -500,11 +472,6 @@ input[type='password']:focus {
 .custom-checkbox.align-left .indicator:after {
     top: 0px;
 }
-@media screen and (min-width: 768px) {
-    .custom-checkbox {
-        font-size: 14px;
-    }
-}
 .loader {
     position: relative;
     width: 130px;
@@ -972,6 +939,10 @@ footer a:visited:hover {
         flex-direction: column;
         min-height: none;
     }
+    #react {
+        /* override element style set in JS */
+        flex: none !important;
+    }
     section,
     aside {
         width: 100%;
@@ -2117,7 +2088,7 @@ section > div .divider span:after {
     align-items: center;
     color: #1e7ff0;
     font-weight: 300;
-    font-size: 12px;
+    font-size: 14px;
 }
 .permissions .info-icon {
     width: 28px;
@@ -2158,9 +2129,6 @@ section > div .divider span:after {
     .permissions {
         height: 500px;
     }
-    .permissions .permission-item .content {
-        font-size: 14px;
-    }
 }
 @media screen and (max-width: 639px) {
     .permissions {

diff --git a/packages/connect-ui/src/views/Passphrase.tsx b/packages/connect-ui/src/views/Passphrase.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { analytics, EventType } from '@trezor/connect-analytics';
 import { UI, UiEvent, CoreRequestMessage } from '@trezor/connect';
 import { variables } from '@trezor/components';
+import { spacingsPx } from '@trezor/theme';
 
 import { View } from '../components/View';
 import { PassphraseTypeCard } from '../components/Passphrase/PassphraseTypeCard';
@@ -16,7 +17,7 @@ const Wrapper = styled.div`
     width: 600px;
 
     @media screen and (max-width: ${variables.SCREEN_SIZE.MD}) {
-        width: 100%;
+        width: calc(100vw - ${spacingsPx.xxxl});
     }
 `;