Replaced old TextField component with new TextField component on unlock page

ui/components/component-library/text-field/text-field.js

@@ -3,14 +3,16 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import {
-  DISPLAY,
+  Display,
   Size,
   AlignItems,
   BorderRadius,
   BackgroundColor,
+  BorderStyle,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box';
+import { Box } from '../box';
 
 import { Input } from '../input';
 
@@ -101,7 +103,8 @@ export const TextField = ({
         },
         className,
       )}
-      display={DISPLAY.INLINE_FLEX}
+      width={BlockSize.Full}
+      display={Display.InlineFlex}
       backgroundColor={BackgroundColor.backgroundDefault}
       alignItems={AlignItems.center}
       borderWidth={1}
@@ -117,6 +120,7 @@ export const TextField = ({
         autoComplete={autoComplete}
         autoFocus={autoFocus}
         backgroundColor={BackgroundColor.transparent}
+        borderRadius={BorderStyle.dashed}
         data-testid={testId}
         defaultValue={defaultValue}
         disabled={disabled}

ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Unlock Page should match snapshot 1`] = `
+exports[`Unlock Page should match Received 1`] = `
 <div>
   <div
     class="unlock-page__container"
@@ -30,30 +30,107 @@ exports[`Unlock Page should match snapshot 1`] = `
         class="unlock-page__form"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+          class="mm-box mm-text-field mm-text-field--size-md mm-text-field--focused mm-text-field--truncate mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-width-1 box--border-style-solid"
         >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root TextField-materialLabel-1 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink Mui-focused Mui-focused TextField-materialFocused-2"
-            data-shrink="true"
-            for="password"
-            id="password-label"
-          >
-            Password
-          </label>
-          <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline TextField-materialUnderline-3 MuiInputBase-fullWidth MuiInput-fullWidth Mui-focused Mui-focused MuiInputBase-formControl MuiInput-formControl"
+          <input
+             autocomplete="on"
+                class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-dashed mm-box--border-style-none"
+                 data-testid="unlock-password"
+                 focused="true"
+                 id="password"
+                 placeholder="Password"
+                 type="password"
+                 value=""
+               />
+
+        </div>
+      </form>
+      <button
+        class="button btn--rounded btn-default"
+        data-testid="unlock-submit"
+        disabled=""
+        role="button"
+        style="margin-top: 20px; height: 60px; font-weight: 400; box-shadow: none; border-radius: 100px;"
+        tabindex="0"
+        variant="contained"
+      >
+        Unlock
+      </button>
+      <div
+        class="unlock-page__links"
+      >
+        <a
+          class="button btn-link unlock-page__link"
+          role="button"
+          tabindex="0"
+        >
+          Forgot password?
+        </a>
+      </div>
+      <div
+        class="unlock-page__support"
+      >
+        <span>
+
+          Need help? Contact
+          <a
+            href="https://support.metamask.io"
+            rel="noopener noreferrer"
+            target="_blank"
           >
-            <input
-              aria-invalid="false"
-              autocomplete="current-password"
-              class="MuiInputBase-input MuiInput-input"
-              data-testid="unlock-password"
-              dir="auto"
-              id="password"
-              type="password"
-              value=""
-            />
-          </div>
+            MetaMask support
+          </a>
+
+
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Unlock Page should match snapshot 1`] = `
+<div>
+  <div
+    class="unlock-page__container"
+  >
+    <div
+      class="unlock-page"
+      data-testid="unlock-page"
+    >
+      <div
+        class="unlock-page__mascot-container"
+      >
+        <div
+          style="z-index: 0;"
+        >
+          <svg />
+        </div>
+      </div>
+      <h1
+        class="unlock-page__title"
+      >
+        Welcome back!
+      </h1>
+      <div>
+        The decentralized web awaits
+      </div>
+      <form
+        class="unlock-page__form"
+      >
+        <div
+          class="mm-box mm-text-field mm-text-field--size-md mm-text-field--focused mm-text-field--truncate mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-width-1 box--border-style-solid"
+        >
+          <input
+            autocomplete="on"
+            class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-dashed mm-box--border-style-none"
+            data-testid="unlock-password"
+            focused="true"
+            id="password"
+            placeholder="Password"
+            type="password"
+            value=""
+          />
         </div>
       </form>
       <button

ui/pages/unlock-page/unlock-page.component.js

@@ -2,7 +2,7 @@ import { EventEmitter } from 'events';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../components/ui/button';
-import TextField from '../../components/ui/text-field';
+import { TextField } from '../../components/component-library/text-field';
 import Mascot from '../../components/ui/mascot';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 import {
@@ -181,16 +181,14 @@ export default class UnlockPage extends Component {
           <form className="unlock-page__form" onSubmit={this.handleSubmit}>
             <TextField
               id="password"
-              data-testid="unlock-password"
-              label={t('password')}
-              type="password"
+              testId="unlock-password"
               value={password}
+              type="password"
               onChange={(event) => this.handleInputChange(event)}
               error={error}
               autoFocus
-              autoComplete="current-password"
-              theme="material"
-              fullWidth
+              autoComplete
+              placeholder={t('password')}
             />
           </form>
           {this.renderSubmitButton()}