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,6 +45,7 @@
 
         {% with messages = get_flashed_messages() %}
         {% if messages %}
+            <div class="text centered container ui">
                 <div class="ui info message">
                     <div class="header">
                         Information
@@ -55,7 +56,7 @@
                         {% endfor %}
                     </ul>
                 </div>
-            </ul>
+            </div>
         {% 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>
+        <div class="text center aligned container ui">
+            <a href="{{ url_for('register') }}"><button class="ui button">Register</button></a>
         </div>
 </div>
 {% endblock %}