Refactored login modal

Added css rules that increased margin and padding on specific elements, horizontal rules with text in the middle and new translations. Signed-off-by: Carlos Coêlho <carlospecter@gmail.com> Signed-off-by: Sabryna Sousa <sabryna.sousa1323@gmail.com>

Refactored login modal
Added css rules that increased margin and padding on specific elements, horizontal rules with text in the middle and new translations. Signed-off-by: Carlos Coêlho <carlospecter@gmail.com> Signed-off-by: Sabryna Sousa <sabryna.sousa1323@gmail.com>
Carlos Coêlho
1 parent c3b50026
Showing 4 changed files with 78 additions and 9 deletions Show diff stats
src/app/login/login.html
src/app/login/login.scss
src/languages/en.json
src/languages/pt.json
@@ -18,11 +18,16 @@
         </label>
       </div>
       <div class="pull-right">
-        <a href="">{{"auth.form.forgotPasswd" | translate}}</a>
+        <a data-dismiss="modal-dialog">{{"auth.form.forgotPasswd" | translate}}</a>
       </div>
     </div>
     <button type="submit" class="btn btn-default btn-block" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
   </form>
+  <div class="strike">
+    <span>
+      {{"auth.social.alternative" | translate}}
+    </span>
+  </div>
   <div class="text-center">
     <span>{{"auth.social.connectWith" | translate}}</span>
@@ -40,7 +45,8 @@
         <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
       </span>
     </div>
-
-    <a href="">{{"auth.createAccount" | translate}}</a>
+    <div id="create-account">
+      <a href="">{{"auth.createAccount" | translate}}</a>
+    </div>
   </div>
 </div>
@@ -0,0 +1,55 @@
+.modal-content{
+  padding: 40px;
+}
+.modal-header {
+  border-bottom: 0;
+  text-align: center;
+}
+form {
+  margin-bottom: 30px;
+}
+form button {
+  margin-top: 20px;
+  text-transform: uppercase;
+}
+.strike {
+  display: block;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 25px 0;
+}
+
+.strike > span {
+  position: relative;
+  display: inline-block;
+}
+
+.strike > span:before,
+.strike > span:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 9999px;
+  height: 1px;
+  background: black;
+}
+
+.strike > span:before {
+  right: 100%;
+  margin-right: 15px;
+}
+
+.strike > span:after {
+  left: 100%;
+  margin-left: 15px;
+}
+.strike span {
+  text-transform: uppercase;
+}
+#oauth-block span {
+  margin: 5px;
+}
+#create-account {
+  padding: 30px 0 0;
+}
@@ -20,12 +20,13 @@
   "activities.create_article.description": "has published on",
   "activities.add_member_in_community.description": "has joined the community",
   "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
-  "auth.title": "Login",
-  "auth.form.login": "Login / Email address",
+  "auth.title": "Great to have you back!",
+  "auth.form.login": "Username or Email address",
   "auth.form.password": "Password",
   "auth.form.keepLoggedIn": "Keep me logged in",
   "auth.form.forgotPasswd": "Forgot your password?",
   "auth.form.login_button": "Login",
+  "auth.social.alternative": "Or",
   "auth.social.connectWith": "Connect with:",
   "auth.createAccount": "Create account",
   "navbar.content_viewer_actions.new_post": "New Post",
@@ -35,5 +36,8 @@
   "notification.http_error.401.message": "Unauthorized",
   "notification.http_error.500.message": "Server error",
   "comment.post": "Post a comment",
-  "comment.reply": "reply"
+  "comment.reply": "reply",
+  "forgotPwd.title": "Forgot your password?",
+  "forgotPwd.sendInstructions": "Send Instructions",
+  "forgotPwd.info": "Upon clicking on the button above, you'll receive an email with instructions on how to create a new password."
 }
@@ -20,12 +20,13 @@
   "activities.create_article.description": "publicou em",
   "activities.add_member_in_community.description": "entrou na comunidade",
   "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:",
-  "auth.title": "Login",
-  "auth.form.login": "Login / Email",
+  "auth.title": "Legal ter você de volta!",
+  "auth.form.login": "Nome de usuário ou Email",
   "auth.form.password": "Senha",
   "auth.form.keepLoggedIn": "Continuar logado",
   "auth.form.forgotPasswd": "Esqueceu sua senha?",
   "auth.form.login_button": "Login",
+  "auth.social.alternative": "Ou",
   "auth.social.connectWith": "Conectar com:",
   "auth.createAccount": "Criar conta",
   "navbar.content_viewer_actions.new_post": "Novo Artigo",
@@ -35,5 +36,8 @@
   "notification.http_error.401.message": "Não autorizado",
   "notification.http_error.500.message": "Erro no servidor",
   "comment.post": "Commentar",
-  "comment.reply": "responder"
+  "comment.reply": "responder",
+  "forgotPwd.title": "Esqueceu sua senha?",
+  "forgotPwd.sendInstructions": "Enviar Instruções",
+  "forgotPwd.info": "Ao clicar no botão acima, você receberá um email com instruções para criar uma nova senha."
 }
@@ -0,0 +1,55 @@		@@ -0,0 +1,55 @@
	1	+.modal-content{
	2	+ padding: 40px;
	3	+}
	4	+.modal-header {
	5	+ border-bottom: 0;
	6	+ text-align: center;
	7	+}
	8	+form {
	9	+ margin-bottom: 30px;
	10	+}
	11	+form button {
	12	+ margin-top: 20px;
	13	+ text-transform: uppercase;
	14	+}
	15	+.strike {
	16	+ display: block;
	17	+ text-align: center;
	18	+ overflow: hidden;
	19	+ white-space: nowrap;
	20	+ padding: 25px 0;
	21	+}
	22	+
	23	+.strike > span {
	24	+ position: relative;
	25	+ display: inline-block;
	26	+}
	27	+
	28	+.strike > span:before,
	29	+.strike > span:after {
	30	+ content: "";
	31	+ position: absolute;
	32	+ top: 50%;
	33	+ width: 9999px;
	34	+ height: 1px;
	35	+ background: black;
	36	+}
	37	+
	38	+.strike > span:before {
	39	+ right: 100%;
	40	+ margin-right: 15px;
	41	+}
	42	+
	43	+.strike > span:after {
	44	+ left: 100%;
	45	+ margin-left: 15px;
	46	+}
	47	+.strike span {
	48	+ text-transform: uppercase;
	49	+}
	50	+#oauth-block span {
	51	+ margin: 5px;
	52	+}
	53	+#create-account {
	54	+ padding: 30px 0 0;
	55	+}