From a92a0f373c2aee7c19639f1403d9e8d2f8d88eb3 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Thu, 31 Oct 2024 15:21:36 -0230
Subject: [PATCH] fix: Fix left-aligned fullscreen UI (#28218)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

The Home screen was recently updated to make the overview left-aligned.
However the fullscreen UI was not considered, and it ended up looking
ugly/broken.

The fullscreen UI has been updated to be centered, as it was before. The
Home screen remains left-aligned in the popup.

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

## **Related issues**

Fixes #27593

## **Manual testing steps**

Compare how the Home screen overview looks on the fullscreen UI and the
popup. It should be centered on the fullscreen UI, left-aligned on the
popup.

## **Screenshots/Recordings**

### **Before**

![Screenshot 2024-10-31 at 11 32
12](https://github.com/user-attachments/assets/989ebd4e-90a5-42ae-a522-f7e4d77f0685)

### **After**

![Screenshot 2024-10-31 at 11 28
35](https://github.com/user-attachments/assets/6802bfab-b462-4168-8536-cabb49aceb53)

## **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/develop/.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/develop/.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.
---
 ui/components/app/wallet-overview/index.scss     |  8 ++++++++
 .../app/wallet-overview/wallet-overview.js       | 16 +++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/wallet-overview/index.scss b/ui/components/app/wallet-overview/index.scss
index 4759af1ffa8c..318c26501097 100644
--- a/ui/components/app/wallet-overview/index.scss
+++ b/ui/components/app/wallet-overview/index.scss
@@ -9,6 +9,10 @@
   flex-direction: column;
   width: 100%;
 
+  &-fullscreen {
+    align-items: center;
+  }
+
   &__balance {
     flex: 1;
     display: flex;
@@ -16,6 +20,10 @@
     flex-direction: column;
     align-items: start;
     width: 100%;
+
+    .wallet-overview-fullscreen > & {
+      align-items: center;
+    }
   }
 
   &__icon_button {
diff --git a/ui/components/app/wallet-overview/wallet-overview.js b/ui/components/app/wallet-overview/wallet-overview.js
index 213a7b2f2317..04127276acaf 100644
--- a/ui/components/app/wallet-overview/wallet-overview.js
+++ b/ui/components/app/wallet-overview/wallet-overview.js
@@ -2,9 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
+// TODO: Move this function to shared
+// eslint-disable-next-line import/no-restricted-paths
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
+
 const WalletOverview = ({ balance, buttons, className }) => {
   return (
-    <div className={classnames('wallet-overview', className)}>
+    <div
+      className={classnames(
+        'wallet-overview',
+        {
+          'wallet-overview-fullscreen':
+            getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN,
+        },
+        className,
+      )}
+    >
       <div className="wallet-overview__balance">{balance}</div>
       <div className="wallet-overview__buttons">{buttons}</div>
     </div>