style the send invitations page

3 files changed, 24 insertions, 4 deletions

diff --git a/budget/static/main.css b/budget/static/main.css
index 8445aa5..279054b 100644
--- a/budget/static/main.css
+++ b/budget/static/main.css
@@ -73,6 +73,11 @@ div.topbar ul.secondary-nav { padding-right: 75px; }
     margin-right: 100px;
 }
 
+.invites textarea{
+    width: 800px;
+    height: 100px;
+}
+
 .footer{
     position: absolute;
     bottom: 0px;
diff --git a/budget/templates/forms.html b/budget/templates/forms.html
index 690f59d..8ac458f 100644
--- a/budget/templates/forms.html
+++ b/budget/templates/forms.html
@@ -74,3 +74,12 @@
     <button class="btn">Add a new user</button>
 
 {% endmacro %}
+
+{% macro invites(form) %}
+    {{ form.hidden_tag() }}
+    {{ input(form.emails) }}
+    <div class="actions">
+        <button class="btn">Send the invitations</button>
+        <a href="{{ url_for("list_bills") }}">No, thanks</a>
+    </div>
+{% endmacro %}
diff --git a/budget/templates/send_invites.html b/budget/templates/send_invites.html
index fa46c81..bf018e2 100644
--- a/budget/templates/send_invites.html
+++ b/budget/templates/send_invites.html
@@ -1,4 +1,12 @@
 {% extends "layout.html" %}
+
+{% block sidebar %}
+<ol>
+    <li>Create the project</li>
+    <li><strong>Invite people</strong></li>
+    <li><a href="{{ url_for("list_bills") }}">Use it!</a></li>
+</ol>
+{% endblock %}
 {% block content %}
 <h2>Invite people to join this project</h2>
 <p>Specify a (coma separated) list of email adresses you want to notify about the 
@@ -6,9 +14,7 @@ creation of this budget management project and we will send them an email for yo
 <p>If you prefer, you can <a href="{{ url_for("list_bills") }}">skip this step</a> and notify them yourself</p>
 
 {% include "display_errors.html" %}
-<form method="post" accept-charset="utf-8">
-    {{ form.hidden_tag() }}
-    <p>{{ form.emails.label }}<br /> {{ form.emails }}</p>
-    <p>{{ form.submit }} <a href="{{ url_for("list_bills") }}">No, thanks</a></p>
+<form class="invites" method="post" accept-charset="utf-8">
+    {{ forms.invites(form) }}
 </form>
 {% endblock %}