From 55dd3810581438c9a0b81f8d543e6eed1ee2e933 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 27 Jan 2025 17:05:37 -0800 Subject: [PATCH 1/2] chore: updating text component to use large typography only --- .../component-library/text/text.scss | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/ui/components/component-library/text/text.scss b/ui/components/component-library/text/text.scss index 4b5d8cbb0c76..381ef30c01ac 100644 --- a/ui/components/component-library/text/text.scss +++ b/ui/components/component-library/text/text.scss @@ -18,21 +18,14 @@ $brand-evolution-font-families: ( // screen size, type, size @mixin textVariables($type, $size) { - font-family: var(--typography-s-#{$type}-#{$size}-font-family); - font-weight: var(--typography-s-#{$type}-#{$size}-font-weight); - font-size: var(--typography-s-#{$type}-#{$size}-font-size); - line-height: var(--typography-s-#{$type}-#{$size}-line-height); - letter-spacing: var(--typography-s-#{$type}-#{$size}-letter-spacing); - - @include design-system.screen-md-min { - font-family: var(--typography-l-#{$type}-#{$size}-font-family); - font-weight: var(--typography-l-#{$type}-#{$size}-font-weight); - font-size: var(--typography-l-#{$type}-#{$size}-font-size); - line-height: var(--typography-l-#{$type}-#{$size}-line-height); - letter-spacing: var(--typography-l-#{$type}-#{$size}-letter-spacing); - } + font-family: var(--typography-l-#{$type}-#{$size}-font-family); + font-weight: var(--typography-l-#{$type}-#{$size}-font-weight); + font-size: var(--typography-l-#{$type}-#{$size}-font-size); + line-height: var(--typography-l-#{$type}-#{$size}-line-height); + letter-spacing: var(--typography-l-#{$type}-#{$size}-letter-spacing); } + // Brand evolution font mixin @mixin brand-evolution-font($type) { $font-family: map-get($brand-evolution-font-families, $type); From 91979182f24186bc4c2f22d82d5d7b60a37228a6 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 27 Jan 2025 17:10:03 -0800 Subject: [PATCH 2/2] chore: updating the extension dimensions to 400x600 --- app/popup-init.html | 2 +- app/popup.html | 4 ++-- ui/components/app/modals/modal.js | 2 +- ui/components/ui/mascot/mascot.stories.js | 2 +- ui/pages/unlock-page/index.scss | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/popup-init.html b/app/popup-init.html index 2fb79fefcfde..2914fbd62af0 100644 --- a/app/popup-init.html +++ b/app/popup-init.html @@ -25,7 +25,7 @@ * page may be a further UX improvement. */ html { - width: 357px; + width: 400px; height: 600px; background: #f2f4f6; } diff --git a/app/popup.html b/app/popup.html index 760ec6683203..fff2c7923163 100644 --- a/app/popup.html +++ b/app/popup.html @@ -1,5 +1,5 @@ - + @@ -7,7 +7,7 @@ - +
diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js index 753c01f21374..45ad5d3b4c26 100644 --- a/ui/components/app/modals/modal.js +++ b/ui/components/app/modals/modal.js @@ -123,7 +123,7 @@ const MODALS = { }, laptopModalStyle: { width: - getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '357px' : '449px', + getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '400px' : '449px', top: 'calc(33% + 45px)', paddingLeft: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '16px' : null, diff --git a/ui/components/ui/mascot/mascot.stories.js b/ui/components/ui/mascot/mascot.stories.js index b73d5cb50585..d45291579298 100644 --- a/ui/components/ui/mascot/mascot.stories.js +++ b/ui/components/ui/mascot/mascot.stories.js @@ -8,7 +8,7 @@ const animationEventEmitter = new EventEmitter(); const containerStyle = { height: '600px', - width: '357px', + width: '400px', border: '1px solid black', display: 'flex', flexFlow: 'column', diff --git a/ui/pages/unlock-page/index.scss b/ui/pages/unlock-page/index.scss index 7d98b84f96a9..e8c8fcc80c06 100644 --- a/ui/pages/unlock-page/index.scss +++ b/ui/pages/unlock-page/index.scss @@ -6,7 +6,7 @@ flex-direction: column; justify-content: flex-start; align-items: center; - width: 357px; + width: 400px; padding: 30px; font-weight: 400;