Add login form text

Sacret · Sacret · commit 8dc55200034c · 2015-12-18T01:11:00.000+03:00
diff --git a/img/example.png b/img/example.png
diff --git a/js/components/blocks/LoadingBlock.js b/js/components/blocks/LoadingBlock.js
@@ -11,7 +11,7 @@ const LoadingBlock = React.createClass({
     return (
       <div className="content-block">
         <img
-          src="img/animated_loading_icon.gif"
+          src="build/img/animated_loading_icon.gif"
           className="center-block loading-icon"
         />
       </div>
diff --git a/js/components/blocks/LoginForm.js b/js/components/blocks/LoginForm.js
@@ -4,6 +4,9 @@ import React from 'react';
 import Reflux from 'reflux';
 //
 import { Input, Button, Alert } from 'react-bootstrap';
+import FontAwesome from 'react-fontawesome';
+//
+import ShareBlock from './ShareBlock';
 //
 import UserActions from '../../actions/UserActions';
 //
@@ -25,29 +28,50 @@ const LoginForm = React.createClass({
     console.log('userStore', userStore);
     //
     return (
-      <div className="login-form">
-        {
-          !userStore ?
-            <form className="form-horizontal">
-              {
-                userStore && userStore.alertType ?
-                  <div className="clearfix">
-                    <Alert bsStyle={userStore.alertType}>
-                      {userStore.alertMessage}
-                    </Alert>
-                  </div> :
-                  null
-              }
-              <Button
-                bsStyle="primary"
-                className="pull-right"
-                onClick={this.handleLoginClick}
-              >
-                Login with Github
-              </Button>
-            </form> :
-            null
-        }
+      <div className="container login-container">
+        <p className="login-header">
+          GITHUBIFY.<span className="header-title">me</span>
+        </p>
+        <h4 className="login-page-paragraph">
+          Welcome to the place where you can easily manage and organize tags for your Github repositories. You will have ability to set tags for your own repos, repositories that you have been added to as a collaborator and even starred repos!
+        </h4>
+        <h4 className="login-page-paragraph">
+          <strong>Note:</strong> maximum count of tags per user is 30
+        </h4>
+        <img
+          src="build/img/example.png"
+          className="center-block example-tags img-responsive"
+        />
+        <div className="login-form">
+          {
+            !userStore ?
+              <form className="form-horizontal">
+                {
+                  userStore && userStore.alertType ?
+                    <div className="clearfix">
+                      <Alert bsStyle={userStore.alertType}>
+                        {userStore.alertMessage}
+                      </Alert>
+                    </div> :
+                    null
+                }
+                <Button
+                  bsStyle="primary"
+                  className="center-block text-center"
+                  onClick={this.handleLoginClick}
+                >
+                  Login with Github
+                  <FontAwesome
+                    className="login-button-icon"
+                    name="github"
+                  />
+                </Button>
+                Tell your friends:
+                <ShareBlock />
+              </form> :
+              null
+          }
+        </div>
       </div>
     );
   }
diff --git a/js/components/blocks/ShareBlock.js b/js/components/blocks/ShareBlock.js
@@ -29,7 +29,7 @@ const ShareBlock = React.createClass({
 
   render() {
     let shareUrl = 'http://githubify.me/';
-    let title = 'Githubify.me';
+    let title = 'Githubify.me (place to manage and organize tags for your repos)';
     //
     return (
       <div className="share-block center-block">
diff --git a/less/components.less b/less/components.less
@@ -79,13 +79,15 @@
 .tag {
   font-size: @font-size-h4;
   margin-right: 5px;
+  margin-bottom: 5px;
   background: lighten(@brand-primary, 37%);
   border: 1px solid @brand-primary;
   border-radius: 7px;
   color: darken(@brand-primary, 10%);
   padding: 4px 10px 5px;
   cursor: pointer;
   position: relative;
+      display: inline-table;
   &:hover, &.active {
     color: #fff;
     background: @brand-primary;
@@ -190,3 +192,25 @@
   display: table-cell;
   margin-left: 5px;
 }
+
+.login-button-icon {
+  margin-left: 5px;
+}
+
+.login-header {
+  margin: 30px 0;
+  font-size: 42px;
+}
+
+.login-page-paragraph {
+  text-indent: 45px;
+  margin-bottom: 20px;
+  line-height: 28px;
+}
+
+.example-tags {
+  margin-bottom: 40px;
+  &:hover {
+    .box-shadow(0 0 20px -5px rgba(0,0,0,.2));
+  }
+}
