fix import account page layout (#11944)

* fix import account page layout

* cleanup

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">
+        <div className="page-container__header">
-          <span>{this.context.t('importAccountMsg')}</span>
+          <div className="page-container__title">Import Account</div>
-          <span
+          <div className="page-container__subtitle">
-            style={{
+            {t('importAccountMsg')}
-              cursor: 'pointer',
+            <span
-              textDecoration: 'underline',
+              className="new-account-info-link"
-            }}
+              onClick={() => {
-            onClick={() => {
+                global.platform.openTab({
-              global.platform.openTab({
+                  url:
-                url:
+                    'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
-                  'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
+                });
-              });
+              }}
-            }}
+            >
-          >
+              {t('here')}
-            {this.context.t('here')}
+            </span>
-          </span>
+          </div>
         </div>
-        <div className="new-account-import-form__select-section">
+        <div className="new-account-import-form">
-          <div className="new-account-import-form__select-label">
+          <div className="new-account-import-form__select-section">
-            {this.context.t('selectType')}
+            <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
+          {this.renderImportView()}
-            className="new-account-import-form__select"
-            options={menuItems.map((text) => ({ value: text }))}
-            selectedOption={type || menuItems[0]}
-            onChange={(value) => {
-              this.setState({ type: value });
-            }}
-          />
         </div>
-        {this.renderImportView()}
+      </>
-      </div>
     );
   }
 }

ui/pages/create-account/import-account/index.scss

@@ -1,11 +1,7 @@
-.new-account-import-disclaimer {
+.new-account-info-link {
-  @include H7;
+  cursor: pointer;
-
+  text-decoration: underline;
-  width: 120%;
+  color: $primary-blue;
-  background-color: #f4f9fc;
-  display: inline-block;
-  align-items: center;
-  padding: 20px 30px 20px;
 }
 
 .new-account-import-form {