feat: add done button and enhance design for reset password flow (WPB…

…-3157) (#4379)

* feat: add done button and enhance design for reset password flow (WPB-3157)

* fix: revert lock file

* fix: add line break

* bring back css

src/i18n/en-US.json

@@ -22,7 +22,8 @@
     "errorUnusedEmail": "This email is not in use.",
     "successDescription": "We sent you a link to reset your password. It is valid for 1 hour.",
     "successTitle": "Check your email",
-    "title": "Change Password"
+    "title": "Change Password",
+    "login": "Login"
   },
   "general": {
     "loading": "Please wait…"

src/script/Root.tsx

@@ -17,8 +17,7 @@
  *
  */
 
-import {Global} from '@emotion/react';
-import {COLOR, FlexBox, Loading, StyledApp, THEME_ID} from '@wireapp/react-ui-kit';
+import {FlexBox, Loading, StyledApp, THEME_ID} from '@wireapp/react-ui-kit';
 import createBrowserHistory from 'history/createBrowserHistory';
 import React, {lazy, Suspense, useEffect} from 'react';
 import {Redirect, Route, Router, Switch} from 'react-router-dom';
@@ -56,13 +55,6 @@ const Root: React.FC<Props> = () => {
 
   return (
     <StyledApp themeId={THEME_ID.DEFAULT}>
-      <Global
-        styles={{
-          'a:link,a:visited,a:active': {
-            color: COLOR.WHITE,
-          },
-        }}
-      />
       <Suspense
         fallback={
           <FlexBox justify="center" align="center" style={{minHeight: '100vh'}}>

src/script/component/DirectDownloadButton.tsx

@@ -30,9 +30,7 @@ import {
   WEBSITE_URL,
 } from 'script/Environment';
 
-interface Props extends ButtonProps<any> {
-  backgroundColor?: string;
-}
+interface Props extends ButtonProps<HTMLAnchorElement> {}
 
 const DirectDownloadButton = ({children, ...props}: Props) => {
   const [t] = useTranslation('open');

src/script/component/OpenWebappButton.tsx

@@ -17,10 +17,10 @@
  *
  */
 
-import {ButtonLink, COLOR, ButtonProps} from '@wireapp/react-ui-kit';
+import {ButtonLink, ButtonProps, COLOR} from '@wireapp/react-ui-kit';
 import {WEBAPP_URL} from 'script/Environment';
 
-interface Props extends ButtonProps<any> {}
+interface Props extends ButtonProps<HTMLAnchorElement> {}
 
 const OpenWebappButton = (props: Props) => {
   return (

src/script/component/OpenWireButtons.test.tsx

@@ -25,7 +25,7 @@ jest.mock('script/Environment', () => mockConfig);
 import {OpenWireButtons} from './OpenWireButtons';
 import {Runtime} from '@wireapp/commons';
 import {render} from '@testing-library/react';
-import {withTheme} from '../util/test/TestUtil';
+import {withTheme} from 'script/util/test/TestUtil';
 
 describe('OpenWireButtons', () => {
   const defaultParams = {

src/script/component/WebsiteDownloadButton.tsx

@@ -21,7 +21,7 @@ import {ButtonLink, ButtonProps, COLOR} from '@wireapp/react-ui-kit';
 import {useTranslation} from 'react-i18next';
 import {BRAND_NAME, WEBSITE_URL} from 'script/Environment';
 
-interface Props extends ButtonProps<any> {}
+interface Props extends ButtonProps<HTMLAnchorElement> {}
 
 const WebsiteDownloadButton = (props: Props) => {
   const [t] = useTranslation('open');

src/script/page/PasswordForgot.tsx

@@ -16,9 +16,10 @@
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-import {Button, COLOR, ContainerXS, Form, H1, Input, Text} from '@wireapp/react-ui-kit';
+import {Button, ButtonLink, ContainerXS, ErrorMessage, Form, H1, Input, Text} from '@wireapp/react-ui-kit';
 import React, {useContext, useRef, useState} from 'react';
 import {useTranslation} from 'react-i18next';
+import {WEBAPP_URL} from 'script/Environment';
 import Document from 'script/component/Document';
 import {ActionContext} from 'script/module/action';
 import ValidationError from 'script/module/action/ValidationError';
@@ -87,6 +88,9 @@ const PasswordForgot = () => {
           <React.Fragment>
             <H1>{t('successTitle')}</H1>
             <Text center>{t('successDescription')}</Text>
+            <ButtonLink href={`${WEBAPP_URL}/auth`} css={{marginTop: 40}} data-uie-name="do-go-back-to-login">
+              {t('login')}
+            </ButtonLink>
           </React.Fragment>
         ) : (
           <React.Fragment>
@@ -101,14 +105,13 @@ const PasswordForgot = () => {
                   setEmail(event.currentTarget.value);
                 }}
                 placeholder={t('emailPlaceholder')}
+                label={t('emailPlaceholder')}
                 name="email"
                 type="email"
                 required
                 data-uie-name="enter-email"
+                error={<ErrorMessage>{error}</ErrorMessage>}
               />
-              <Text center color={COLOR.RED} data-uie-name="error-message">
-                {error}
-              </Text>
               <Button
                 type="submit"
                 formNoValidate