From 7a8f65d642e41f28241fdb2c50a6b262456e7335 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Fri, 3 Sep 2021 10:56:43 -0500
Subject: [PATCH] fix import account page layout (#11944)

* fix import account page layout

* cleanup
---
 .../create-account/import-account/index.js    | 63 ++++++++++---------
 .../create-account/import-account/index.scss  | 12 ++--
 2 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/ui/pages/create-account/import-account/index.js b/ui/pages/create-account/import-account/index.js
index 9c2a38b44..4f94f0965 100644
--- a/ui/pages/create-account/import-account/index.js
+++ b/ui/pages/create-account/import-account/index.js
@@ -36,41 +36,44 @@ export default class AccountImportSubview extends Component {
   render() {
     const menuItems = this.getMenuItemTexts();
     const { type } = this.state;
+    const { t } = this.context;
 
     return (
-      <div className="new-account-import-form">
-        <div className="new-account-import-disclaimer">
-          <span>{this.context.t('importAccountMsg')}</span>
-          <span
-            style={{
-              cursor: 'pointer',
-              textDecoration: 'underline',
-            }}
-            onClick={() => {
-              global.platform.openTab({
-                url:
-                  'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
-              });
-            }}
-          >
-            {this.context.t('here')}
-          </span>
+      <>
+        <div className="page-container__header">
+          <div className="page-container__title">Import Account</div>
+          <div className="page-container__subtitle">
+            {t('importAccountMsg')}
+            <span
+              className="new-account-info-link"
+              onClick={() => {
+                global.platform.openTab({
+                  url:
+                    'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
+                });
+              }}
+            >
+              {t('here')}
+            </span>
+          </div>
         </div>
-        <div className="new-account-import-form__select-section">
-          <div className="new-account-import-form__select-label">
-            {this.context.t('selectType')}
+        <div className="new-account-import-form">
+          <div className="new-account-import-form__select-section">
+            <div className="new-account-import-form__select-label">
+              {t('selectType')}
+            </div>
+            <Dropdown
+              className="new-account-import-form__select"
+              options={menuItems.map((text) => ({ value: text }))}
+              selectedOption={type || menuItems[0]}
+              onChange={(value) => {
+                this.setState({ type: value });
+              }}
+            />
           </div>
-          <Dropdown
-            className="new-account-import-form__select"
-            options={menuItems.map((text) => ({ value: text }))}
-            selectedOption={type || menuItems[0]}
-            onChange={(value) => {
-              this.setState({ type: value });
-            }}
-          />
+          {this.renderImportView()}
         </div>
-        {this.renderImportView()}
-      </div>
+      </>
     );
   }
 }
diff --git a/ui/pages/create-account/import-account/index.scss b/ui/pages/create-account/import-account/index.scss
index 1e5efe7f0..91580b70a 100644
--- a/ui/pages/create-account/import-account/index.scss
+++ b/ui/pages/create-account/import-account/index.scss
@@ -1,11 +1,7 @@
-.new-account-import-disclaimer {
-  @include H7;
-
-  width: 120%;
-  background-color: #f4f9fc;
-  display: inline-block;
-  align-items: center;
-  padding: 20px 30px 20px;
+.new-account-info-link {
+  cursor: pointer;
+  text-decoration: underline;
+  color: $primary-blue;
 }
 
 .new-account-import-form {