Update forgot password link text and style

res/css/structures/auth/_Login.scss

@@ -87,14 +87,6 @@ limitations under the License.
     font-size: 13px;
 }
 
-.mx_Login_forgot {
-    font-size: 15px;
-}
-
-.mx_Login_forgot:link {
-    color: $primary-fg-color;
-}
-
 .mx_Login_sso_link {
     display: block;
     text-align: center;

res/css/views/auth/_AuthBody.scss

@@ -20,4 +20,13 @@ limitations under the License.
     border-radius: 0 4px 4px 0;
     padding: 25px 60px;
     box-sizing: border-box;
+    font-size: 12px;
+    color: $authpage-body-color;
+}
+
+.mx_AuthBody a:link,
+.mx_AuthBody a:hover,
+.mx_AuthBody a:visited {
+    color: $accent-color;
+    text-decoration: none;
 }

res/themes/dharma/css/_dharma.scss

@@ -217,6 +217,7 @@ $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
 $authpage-body-bg-color: #ffffff;
 $authpage-lang-color: #4e5054;
+$authpage-body-color: #61708b;
 
 /*** form elements ***/
 

res/themes/light/css/_base.scss

@@ -213,6 +213,7 @@ $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
 $authpage-body-bg-color: #ffffff;
 $authpage-lang-color: #4e5054;
+$authpage-body-color: #61708b;
 
 // ***** Mixins! *****
 

src/components/views/auth/PasswordLogin.js

@@ -245,11 +245,16 @@ class PasswordLogin extends React.Component {
         let forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {
-            forgotPasswordJsx = (
-                <a className="mx_Login_forgot" onClick={this.props.onForgotPasswordClick} href="#">
-                    { _t('Forgot your password?') }
-                </a>
-            );
+            forgotPasswordJsx = <span>
+                {_t('Not sure of your password? <a>Set a new one</a>', {}, {
+                    a: sub => <a className="mx_Login_forgot"
+                        onClick={this.props.onForgotPasswordClick}
+                        href="#"
+                    >
+                        {sub}
+                    </a>,
+                })}
+            </span>;
         }
 
         let matrixIdText = _t('Matrix ID');

src/i18n/strings/en_EN.json

@@ -1092,7 +1092,7 @@
     "Username on %(hs)s": "Username on %(hs)s",
     "User name": "User name",
     "Mobile phone number": "Mobile phone number",
-    "Forgot your password?": "Forgot your password?",
+    "Not sure of your password? <a>Set a new one</a>": "Not sure of your password? <a>Set a new one</a>",
     "%(serverName)s Matrix ID": "%(serverName)s Matrix ID",
     "Sign in with": "Sign in with",
     "Sign in": "Sign in",