Improve login page UI

app/forms.py

@@ -5,10 +5,11 @@ from app.models import User
 
 
 class LoginForm(FlaskForm):
+    style={'class': 'ui primary button'}
     username = StringField('Username', validators=[DataRequired()])
     password = PasswordField('Password', validators=[DataRequired()])
     remember_me = BooleanField('Remember Me')
-    submit = SubmitField('Sign In')
+    submit = SubmitField('Sign In', render_kw=style)
 
 class SearchForm(FlaskForm):
     username = StringField('Username')

app/templates/base.html

@@ -45,17 +45,18 @@
 
         {% with messages = get_flashed_messages() %}
         {% if messages %}
-            <div class="ui info message">
-                <div class="header">
-                    Information
+            <div class="text centered container ui">
+                <div class="ui info message">
+                    <div class="header">
+                        Information
+                    </div>
+                    <ul class="list">
+                        {% for message in messages %}
+                            <li>{{ message }}</li>
+                        {% endfor %}
+                    </ul>
                 </div>
-                <ul class="list">
-                    {% for message in messages %}
-                        <li>{{ message }}</li>
-                    {% endfor %}
-                </ul>
             </div>
-            </ul>
         {% endif %}
         {% endwith %}
         

app/templates/login.html

@@ -11,13 +11,13 @@
         </div>
     </div>
     {% endif %}
-    <h2 class="ui centered header">Login</h2>
-    <div class="ui grid">
-    <div class="ui one column stackable center aligned page grid" id="container">
-        <div class="row">
+    <h2 class="ui centered header">LOGIN</h2>
+    <div class="text center aligned container ui" id="container">
+        <div class="text center aligned container ui">
             <form class="ui form" action="" method="post" novalidate>
                 {{ form.hidden_tag() }}
                 <p>
+                    <i class="user icon"></i>
                     {{ form.username.label }}<br>
                     {{ form.username(size=32) }}<br>
                     {% for error in form.username.errors %}
@@ -25,6 +25,7 @@
                     {% endfor %}
                 </p>
                 <p>
+                    <i class="key icon"></i>
                     {{ form.password.label }}<br>
                     {{ form.password(size=32) }}<br>
                     {% for error in form.password.errors %}
@@ -35,11 +36,8 @@
                 <p>{{ form.submit() }}</p>
             </form>
         </div>
-        <div class="row">
-            <div class="ui compact centered message">
-                <p>New user? <a href="{{ url_for('register') }}">Click to Register!</a></p>
-            </div>
+        <div class="text center aligned container ui">
+            <a href="{{ url_for('register') }}"><button class="ui button">Register</button></a>
         </div>
-    </div>
 </div>
 {% endblock %}