style the send invitations page

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;

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 %}

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 %}