Skip to content

Commit

Permalink
chore: removing unused css (#30214)
Browse files Browse the repository at this point in the history
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR removes unused CSS classes and files from the codebase to
improve maintainability and reduce CSS size by `~30kb`. The changes
include:

1. Removing unused CSS files:
   - network.scss
   - send.scss
2. Removing unused CSS classes from newui-sections.scss:
   - .lap-visible/.phone-visible classes
   - .fiat-amount
   - .token-balance__amount
   - .unlock-screen-container and related classes

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30214?quickstart=1)

## **Related issues**

Fixes: MetaMask/MetaMask-planning#4172

## **Manual testing steps**

1. Pull the branch and build the extension
2. Test all major UI flows to ensure no visual regressions:
   - Onboarding flow
   - Send flow
   - Network switching
   - Unlock flow
3. Verify removed classes are not used in any components
4. Check browser dev tools to confirm CSS bundle size reduction

## **Screenshots/Recordings**

### **Before**
![Screenshot 2025-02-07 at 12 10
41 PM](https://github.com/user-attachments/assets/24e48b05-dbaa-485e-8523-6189094d547e)

### **After**

![Screenshot 2025-02-07 at 12 08
17 PM](https://github.com/user-attachments/assets/3b5c71d0-4ee3-41fb-890a-5c16400a4cdd)


Not visual regressions to the following flows"

**Onboarding Flow**


https://github.com/user-attachments/assets/c6e5d87d-a2d3-4a3c-be6a-096db388f854

**Send Flow**


https://github.com/user-attachments/assets/3b5f37a1-262d-4a5c-b891-5b9c158958fb

**Changing Network Flow**


https://github.com/user-attachments/assets/98bc52d5-edc1-4f52-a91c-44621df25ec6

**Unlock flow**


https://github.com/user-attachments/assets/acde49ca-7273-4c0b-929c-94206e2c8267

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
  • Loading branch information
georgewrmarshall authored Feb 7, 2025
1 parent 2bd6abe commit 5b8c780
Show file tree
Hide file tree
Showing 6 changed files with 0 additions and 1,176 deletions.
4 changes: 0 additions & 4 deletions test/e2e/tests/transaction/send-eth.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,6 @@ describe('Send ETH', function () {
await inputAmount.press(driver.Key.BACK_SPACE);
await inputAmount.press(driver.Key.BACK_SPACE);

await driver.assertElementNotPresent('.send-v2__error-amount', {
waitAtLeastGuard: 100, // A waitAtLeastGuard of 100ms is the best choice here
});

const amountMax = await driver.findClickableElement(
'[data-testid="max-clear-button"]',
);
Expand Down
3 changes: 0 additions & 3 deletions ui/css/itcss/components/index.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1 @@
@import './network';
@import './newui-sections';
@import './send';

195 changes: 0 additions & 195 deletions ui/css/itcss/components/network.scss

This file was deleted.

42 changes: 0 additions & 42 deletions ui/css/itcss/components/newui-sections.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,6 @@
// main-container media queries

@include design-system.screen-sm-min {
.lap-visible {
display: flex;
}

.phone-visible {
display: none;
}

.main-container {
width: 85vw;
min-height: 90vh;
Expand All @@ -82,14 +74,6 @@
}

@include design-system.screen-sm-max {
.lap-visible {
display: none;
}

.phone-visible {
display: flex;
}

.main-container {
width: 100%;
overflow-y: auto;
Expand All @@ -101,14 +85,6 @@
}
}

.fiat-amount {
text-transform: uppercase;
}

.token-balance__amount {
padding: 0 6px;
}

// first time
.first-view-main {
display: flex;
Expand All @@ -132,24 +108,6 @@
}
}

.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;
}

.first-view-main-wrapper {
display: flex;
width: 100%;
Expand Down
Loading

0 comments on commit 5b8c780

Please sign in to comment.