chore: removing unused css #30214
Merged
chore: removing unused css #30214
+0
−1,176
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
georgewrmarshall
added
the
team-design-system
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-52
to
-55
| await driver.assertElementNotPresent('.send-v2__error-amount', { | ||
| waitAtLeastGuard: 100, // A waitAtLeastGuard of 100ms is the best choice here | ||
| }); | ||
|
|
There was a problem hiding this comment.
Removing test looking for unused CSS classname
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-1
to
-4
| @import './network'; | ||
| @import './newui-sections'; | ||
| @import './send'; | ||
|
|
There was a problem hiding this comment.
Removing deleted file imports
georgewrmarshall
commented
Feb 7, 2025
| @@ -1,195 +0,0 @@ | |||
| @use "design-system"; | |||
|
|
|||
| .network-component--disabled { | |||
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-11
to
-37
| .network-component.pointer { | ||
| border: 1px solid var(--color-border-muted); | ||
| border-radius: 82px; | ||
| padding: 6px 3px; | ||
| flex: 0 0 auto; | ||
| display: flex; | ||
|
|
||
| &.ethereum-network .menu-icon-circle div { | ||
| background-color: rgba(3, 135, 137, 0.7) !important; | ||
| } | ||
|
|
||
| &.goerli-test-network .menu-icon-circle div { | ||
| background-color: rgba(48, 153, 242, 0.7) !important; | ||
| } | ||
|
|
||
| &.sepolia-test-network .menu-icon-circle div { | ||
| background-color: rgba(207, 181, 240, 0.7) !important; | ||
| } | ||
|
|
||
| &.linea-test-network .menu-icon-circle div { | ||
| background-color: rgba(0, 0, 0, 0.7) !important; | ||
| } | ||
|
|
||
| &.localhost-network .menu-icon-circle div { | ||
| background-color: rgba(3, 135, 137, 0.7) !important; | ||
| } | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-39
to
-54
| .dropdown-menu-item { | ||
| .menu-icon-circle, | ||
| .menu-icon-circle--active { | ||
| margin: 0 14px; | ||
| } | ||
| } | ||
|
|
||
| .dropdown-menu-item .fa.delete { | ||
| color: var(--color-icon-default); | ||
| margin-right: 10px; | ||
| display: none; | ||
| } | ||
|
|
||
| .dropdown-menu-item:hover .fa.delete { | ||
| display: inherit; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-56
to
-76
| .network-droppo { | ||
| background-color: var(--color-background-default); | ||
| border-radius: 4px; | ||
| right: 2px; | ||
|
|
||
| .color-indicator { | ||
| margin: 0 14px 0 4px; | ||
| } | ||
|
|
||
| @include design-system.screen-sm-min { | ||
| right: calc(((100% - 85vw) / 2) + 2px); | ||
| } | ||
|
|
||
| @include design-system.screen-md-min { | ||
| right: calc(((100% - 80vw) / 2) + 2px); | ||
| } | ||
|
|
||
| @include design-system.screen-lg-min { | ||
| right: calc(((100% - 65vw) / 2) + 2px); | ||
| } | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-78
to
-83
| .network-name-item { | ||
| flex: 1; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-85
to
-88
| .network-check__transparent { | ||
| opacity: 0; | ||
| width: 24px; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-90
to
-115
| .menu-icon-circle, | ||
| .menu-icon-circle--active { | ||
| background: none; | ||
| border-radius: 22px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border: 1px solid transparent; | ||
| margin: 0 4px; | ||
| } | ||
|
|
||
| .menu-icon-circle--active { | ||
| border: 1px solid var(--color-border-default); | ||
| background: var(--color-background-default); | ||
| } | ||
|
|
||
| .menu-icon-circle div, | ||
| .menu-icon-circle--active div { | ||
| height: 12px; | ||
| width: 12px; | ||
| border-radius: 17px; | ||
| } | ||
|
|
||
| .menu-icon-circle--active div { | ||
| opacity: 1; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-117
to
-170
| .network-dropdown-header { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .network-dropdown-list { | ||
| max-height: 330px; | ||
| overflow-y: auto; | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .network-dropdown-divider { | ||
| width: 100%; | ||
| height: 1px; | ||
| margin: 10px 0; | ||
| background-color: var(--color-border-default); | ||
| } | ||
|
|
||
| .network-dropdown-title { | ||
| @include design-system.H4; | ||
|
|
||
| height: 25px; | ||
| width: 120px; | ||
| color: var(--color-text-default); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .network-dropdown-content { | ||
| @include design-system.H6; | ||
|
|
||
| min-height: 36px; | ||
| width: 265px; | ||
| color: var(--color-text-default); | ||
|
|
||
| &--link { | ||
| color: var(--color-primary-default); | ||
| cursor: pointer; | ||
| text-decoration: underline; | ||
|
|
||
| &:hover { | ||
| color: var(--color-primary-alternative); | ||
| } | ||
| } | ||
|
|
||
| &--dismiss { | ||
| position: absolute; | ||
| top: 63px; | ||
| right: 10px; | ||
| padding: 2px 8px; | ||
| width: auto; | ||
| } | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-172
to
-174
| .network-caret { | ||
| margin: 0 8px; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-176
to
-191
| .network-loading-spinner { | ||
| display: flex; | ||
| flex-flow: row nowrap; | ||
| align-items: center; | ||
| position: relative; | ||
| height: 16px; | ||
| width: 16px; | ||
| margin-left: 5px; | ||
|
|
||
| img { | ||
| height: 26px; | ||
| position: absolute; | ||
| top: -5px; | ||
| left: -6px; | ||
| } | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-193
to
-195
| .network__add-network-button { | ||
| padding: 0 16px; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-53
to
-55
| .lap-visible { | ||
| display: flex; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-57
to
-59
| .phone-visible { | ||
| display: none; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-104
to
-106
| .fiat-amount { | ||
| text-transform: uppercase; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-108
to
-110
| .token-balance__amount { | ||
| padding: 0 6px; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-135
to
-151
| .unlock-screen-container { | ||
| z-index: design-system.$main-container-z-index; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex: 1 0 auto; | ||
| background: var(--color-background-alternative); | ||
| width: 100%; | ||
| } | ||
|
|
||
| .unlock-screen { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex: 1 0 auto; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-3
to
-47
| .send-screen-wrapper { | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| z-index: 25; | ||
|
|
||
| @include design-system.screen-sm-max { | ||
| width: 100%; | ||
| overflow-y: auto; | ||
| } | ||
|
|
||
| section { | ||
| flex: 0 0 auto; | ||
| } | ||
| } | ||
|
|
||
| .send-screen-card { | ||
| background-color: var(--color-background-default); | ||
| box-shadow: var(--shadow-size-xs) var(--color-shadow-default); | ||
| padding: 46px 40.5px 26px; | ||
| position: relative; | ||
| align-items: center; | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| width: 498px; | ||
| flex: 1 0 auto; | ||
|
|
||
| @include design-system.screen-sm-max { | ||
| top: 0; | ||
| width: 100%; | ||
| box-shadow: none; | ||
| padding: 12px; | ||
| } | ||
| } | ||
|
|
||
| /* Send Screen */ | ||
|
|
||
| .send-screen section { | ||
| margin: 4px 16px; | ||
| } | ||
|
|
||
| .send-screen input { | ||
| @include design-system.H7; | ||
|
|
||
| width: 100%; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-49
to
-65
| .send-eth-icon { | ||
| border-radius: 50%; | ||
| width: 70px; | ||
| height: 70px; | ||
| border: 1px solid var(--color-border-muted); | ||
| box-shadow: var(--shadow-size-xs) var(--color-shadow-default); | ||
| position: absolute; | ||
| top: -35px; | ||
| z-index: 25; | ||
| padding: 4px; | ||
| background-color: var(--color-background-default); | ||
|
|
||
| @include design-system.screen-sm-max { | ||
| position: relative; | ||
| top: 0; | ||
| } | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-67
to
-108
| .send-screen-input-wrapper { | ||
| width: 95%; | ||
| position: relative; | ||
|
|
||
| .fa-bolt { | ||
| padding-right: 4px; | ||
| } | ||
|
|
||
| .send-screen-gas-input { | ||
| border: 1px solid transparent; | ||
| } | ||
|
|
||
| &__error-message { | ||
| display: none; | ||
| } | ||
|
|
||
| &--error { | ||
| input, | ||
| .send-screen-gas-input { | ||
| border-color: var(--color-error-default) !important; | ||
| } | ||
|
|
||
| .send-screen-input-wrapper__error-message { | ||
| @include design-system.H7; | ||
|
|
||
| display: block; | ||
| position: absolute; | ||
| bottom: 4px; | ||
| left: 8px; | ||
| color: var(--color-error-default); | ||
| } | ||
| } | ||
|
|
||
| .send-screen-input-wrapper__error-message { | ||
| @include design-system.H7; | ||
|
|
||
| display: block; | ||
| position: absolute; | ||
| bottom: 4px; | ||
| left: 8px; | ||
| color: var(--color-error-default); | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-111
to
-142
| .send-screen-input { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .send-screen-gas-input { | ||
| @include design-system.Paragraph; | ||
|
|
||
| width: 100%; | ||
| height: 41px; | ||
| border-radius: 3px; | ||
| background-color: var(--color-background-default); | ||
| border-width: 0; | ||
| border-style: none; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding-left: 10px; | ||
| padding-right: 12px; | ||
| color: var(--color-text-alternative); | ||
| } | ||
|
|
||
| .send-screen-amount-labels { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .send-screen-gas-labels { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-144
to
-154
| .currency-toggle { | ||
| &__item { | ||
| color: var(--color-primary-default); | ||
| cursor: pointer; | ||
|
|
||
| &--selected { | ||
| color: var(--color-text-default); | ||
| cursor: default; | ||
| } | ||
| } | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-156
to
-161
| .send-screen-gas-input-customize { | ||
| @include design-system.H7; | ||
|
|
||
| color: var(--color-primary-default); | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
Not used "send-screen" screenshot above
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-163
to
-232
| .gas-tooltip-close-area { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: 1000; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .gas-tooltip-arrow { | ||
| height: 25px; | ||
| width: 25px; | ||
| z-index: 1200; | ||
| background: var(--color-background-default); | ||
| position: absolute; | ||
| transform: rotate(45deg); | ||
| left: 107px; | ||
| top: 294px; | ||
| box-shadow: var(--shadow-size-xs) var(--color-shadow-default); | ||
| } | ||
|
|
||
| .gas-tooltip { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .gas-tooltip-label { | ||
| @include design-system.Paragraph; | ||
|
|
||
| color: var(--color-text-alternative); | ||
| } | ||
|
|
||
| .gas-tooltip-header { | ||
| padding-bottom: 12px; | ||
| } | ||
|
|
||
| .gas-tooltip-input-label { | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .gas-tooltip-input-label i { | ||
| color: var(--color-icon-muted); | ||
| margin-left: 6px; | ||
| } | ||
|
|
||
| .gas-tooltip-input-detail { | ||
| @include design-system.H7; | ||
|
|
||
| position: absolute; | ||
| top: 4px; | ||
| right: 26px; | ||
| color: var(--color-text-muted); | ||
| } | ||
|
|
||
| .gas-tooltip-input-arrows { | ||
| @include design-system.H6; | ||
|
|
||
| position: absolute; | ||
| top: 0; | ||
| right: 4px; | ||
| width: 17px; | ||
| height: 28px; | ||
| border: 1px solid var(--color-icon-muted); | ||
| border-left: 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| color: var(--color-text-muted); | ||
| padding: 1px 4px; | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
Not used as a className only a data-testid
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-234
to
-243
| .token-gas { | ||
| &__amount { | ||
| display: inline-block; | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| &__symbol { | ||
| display: inline-block; | ||
| } | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-245
to
-268
| .send-screen { | ||
| &__title { | ||
| @include design-system.H4; | ||
|
|
||
| color: var(--color-text-alternative); | ||
| } | ||
|
|
||
| &__subtitle { | ||
| @include design-system.H6; | ||
|
|
||
| margin: 10px 0 20px; | ||
| } | ||
|
|
||
| &__send-button, | ||
| &__cancel-button { | ||
| width: 163px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| &__send-button__disabled { | ||
| opacity: 0.5; | ||
| cursor: auto; | ||
| } | ||
| } |
There was a problem hiding this comment.
Not used see "send-screen" screenshot above
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-270
to
-346
| .send-token { | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| z-index: 25; | ||
|
|
||
| &__content { | ||
| width: 498px; | ||
| height: 605px; | ||
| background-color: var(--color-background-default); | ||
| box-shadow: var(--shadow-size-xs) var(--color-shadow-default); | ||
| padding: 46px 40.5px 26px; | ||
| position: relative; | ||
| align-items: center; | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| flex: 1 0 auto; | ||
|
|
||
| @include design-system.screen-sm-max { | ||
| top: 0; | ||
| width: 100%; | ||
| box-shadow: none; | ||
| padding: 12px; | ||
| } | ||
| } | ||
|
|
||
| .identicon { | ||
| position: absolute; | ||
| top: -35px; | ||
| z-index: 25; | ||
|
|
||
| @include design-system.screen-sm-max { | ||
| position: relative; | ||
| top: 0; | ||
| flex: 0 0 auto; | ||
| } | ||
| } | ||
|
|
||
| &__title { | ||
| @include design-system.H4; | ||
|
|
||
| color: var(--color-text-alternative); | ||
| } | ||
|
|
||
| &__description, | ||
| &__balance-text, | ||
| &__token-symbol { | ||
| @include design-system.H6; | ||
|
|
||
| margin-top: 10px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| &__token-balance { | ||
| @include design-system.H1; | ||
|
|
||
| margin-top: 13px; | ||
|
|
||
| .token-balance__amount { | ||
| padding-right: 12px; | ||
| } | ||
| } | ||
|
|
||
| &__button-group { | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| align-items: center; | ||
| flex: 0 0 auto; | ||
|
|
||
| @include design-system.screen-sm-max { | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| button { | ||
| width: 163px; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Not used as a classname
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-348
to
-352
| .confirm-send-token { | ||
| &__hero-amount-wrapper { | ||
| width: 100%; | ||
| } | ||
| } |
There was a problem hiding this comment.
Not used as a classname
georgewrmarshall
commented
Feb 7, 2025
| } | ||
| } | ||
|
|
||
| .send-v2 { |
There was a problem hiding this comment.
Not used "send-v2" everything from here down to line 880 is under this classname
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-882
to
-890
| .advanced-gas-options-btn { | ||
| @include design-system.H6; | ||
|
|
||
| display: flex; | ||
| justify-content: flex-end; | ||
| color: var(--color-primary-default); | ||
| cursor: pointer; | ||
| margin-top: 5px; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-892
to
-907
| .sliders-icon-container { | ||
| @include design-system.Paragraph; | ||
|
|
||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 24px; | ||
| width: 24px; | ||
| border: 1px solid var(--color-primary-default); | ||
| border-radius: 4px; | ||
| background-color: var(--color-background-default); | ||
| position: absolute; | ||
| right: 15px; | ||
| top: 14px; | ||
| cursor: pointer; | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-909
to
-923
| .gas-fee-reset { | ||
| @include design-system.H6; | ||
|
|
||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 24px; | ||
| border-radius: 4px; | ||
| background-color: var(--color-background-default); | ||
| position: absolute; | ||
| right: 12px; | ||
| top: 14px; | ||
| cursor: pointer; | ||
| color: var(--color-primary-default); | ||
| } |
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-925
to
-927
| .sliders-icon { | ||
| color: var(--color-primary-default); | ||
| } |
Builds ready [a085117]
Page Load Metrics (1605 ± 54 ms)
Bundle size diffs
|
georgewrmarshall
commented
Feb 7, 2025
Comment on lines
-51
to
-54
| .dropdown-menu-item { | ||
| font-size: 14px !important; | ||
| padding: 8px !important; | ||
| } |
7 tasks
brianacnguyen
approved these changes
Feb 7, 2025
metamaskbot
added
the
release-12.13.0
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR removes unused CSS classes and files from the codebase to improve maintainability and reduce CSS size by
~30kb. The changes include:Related issues
Fixes: https://github.com/MetaMask/MetaMask-planning/issues/4172
Manual testing steps
Screenshots/Recordings
Before
After
Not visual regressions to the following flows"
Onboarding Flow
after.onboarding.mov
Send Flow
after.send.mov
Changing Network Flow
after.networks.mov
Unlock flow
after.password.mov
Pre-merge author checklist
Pre-merge reviewer checklist