From 5a278fcddf52596179f877bc527cfea97f58a3a6 Mon Sep 17 00:00:00 2001
From: ricola <ricola@poivron.org>
Date: Thu, 4 Dec 2025 01:00:19 +0100
Subject: [PATCH] Rewrite views with Bootstrap

---
 views/admin.erb                  |  47 +++++++-----
 views/admin_users.erb            |  20 +++---
 views/admin_votes.erb            |  12 ++--
 views/layout.erb                 |   2 +-
 views/login.erb                  |  24 +++----
 views/reset.erb                  |  12 ++--
 views/reset_change.erb           |  22 +++---
 views/reset_invalid.erb          |   4 +-
 views/reset_sent.erb             |   2 +-
 views/signup.erb                 |  26 +++----
 views/style.erb                  |  34 ++++-----
 views/votes.erb                  |  29 ++++++++
 views/votes_edit.erb             | 118 ++++++++++++++++++------------
 views/votes_edit_description.erb |  20 +++---
 views/votes_new.erb              |  20 +++---
 views/votes_open.erb             |  37 +++++++---
 views/votes_show_closed.erb      | 120 +++++++++++++++++++------------
 views/votes_show_draft.erb       |  37 +++++++---
 views/votes_show_open.erb        | 117 +++++++++++++++++-------------
 19 files changed, 424 insertions(+), 279 deletions(-)
 create mode 100644 views/votes.erb

diff --git a/views/admin.erb b/views/admin.erb
index 11da0bc..802627c 100644
--- a/views/admin.erb
+++ b/views/admin.erb
@@ -1,8 +1,8 @@
-<h1><%= _("Admin") %></h1>
+<h1 class="mb-5"><%= _("Admin") %></h1>
 
-<h2><%= _("Users") %></h2>
+<h2 class="mb-4"><%= _("Users") %></h2>
 
-<ul>
+<ul class="mb-5">
 <% @users.reverse.each do |user| %>
   <li>
   <a href="/admin/users/<%= user.id %>"><%= user.email %></a>
@@ -10,20 +10,31 @@
 <% end %>
 </ul>
 
-<h2><%= _("Votes") %></h2>
+<h2 class="mb-4"><%= _("Votes") %></h2>
 
-<ul>
-<% @votes.reverse.each do |vote| %>
-  <li>
-    <a href="/admin/votes/<%= vote.id %>"><%= vote.title %></a>
-    <% case vote.state
-       when 'draft' %>
-      <%= _("(Draft)") %>
-    <% when 'open' %>
-      <%= _("(Open)") %>
-    <% when 'closed' %>
-      <%= _("(Closed)") %>
+<table class="table table-striped mb-5">
+  <thead>
+    <tr>
+      <td></td>
+      <td></td>
+    </tr>
+  </thead>
+  <tbody>
+    <% @votes.reverse.each do |vote| %>
+      <tr>
+        <td><%= format_date(vote.created_at) %></td>
+        <td class="text-nowrap">
+          <% case vote.state
+             when 'draft' %>
+            <span class="badge bg-secondary"><%= _("Draft") %></span>
+          <% when 'open' %>
+            <span class="badge bg-primary"><%= _("Open") %></span>
+          <% when 'closed' %>
+            <SPAN class="badge bg-dark"><%= _("Closed") %></span>
+          <% end %>
+        </td>
+        <td><a href="/admin/votes/<%= vote.id %>"><%= vote.title %></a></td>
+      </tr>
     <% end %>
-  </li>
-<% end %>
-</ul>
+  </tbody>
+</table>
diff --git a/views/admin_users.erb b/views/admin_users.erb
index 05f7e1d..d8734a8 100644
--- a/views/admin_users.erb
+++ b/views/admin_users.erb
@@ -1,18 +1,18 @@
-<h1><%= _("Admin") %></h1>
+<h1 class="mb-5"><%= _("Admin") %></h1>
 
-<h2><%= @user.email %></h2>
+<h2 class="mb-4"><%= @user.email %></h2>
 
 <p><%= _("Created: %{date}") % { date: format_date(@user.created_at) } %></p>
 
 <p><%= _("Updated: %{date}") % { date: format_date(@user.updated_at) } %></p>
 
-<p><%= _("Admin: %{admin}") % { admin: @user.admin ? _("Yes") : _("No") } %></p>
+<p class="mb-5"><%= _("Admin: %{admin}") % { admin: @user.admin ? _("Yes") : _("No") } %></p>
 
-<h2><%= _("Organized votes") %></h2>
+<h2 class="mb-4"><%= _("Organized votes") %></h2>
 
 <% unless @user.organizers.blank? %>
 
-<ul>
+<ul class="mb-5">
 <% @user.organizers.each do |organizer| %>
   <li>
     <%= organizer.user.email %>
@@ -23,15 +23,15 @@
 
 <% else %>
 
-<p><%= _("No vote organized.") %></p>
+<p class="mb-5"><%= _("No vote organized.") %></p>
 
 <% end %>
 
-<h2><%= _("Ratings") %></h2>
+<h2 class="mb-4"><%= _("Ratings") %></h2>
 
 <% unless @user.ratings.blank? %>
 
-<ul>
+<ul class="mb-5">
 <% @user.ratings.collect { |rating| rating.vote }.uniq.each do |vote| %>
   <li>
     <%= vote.title %>
@@ -42,14 +42,14 @@
 
 <% else %>
 
-<p><%= _("No rating.") %></p>
+<p class="mb-5"><%= _("No rating.") %></p>
 
 <% end %>
 
 <% if @user.ratings.blank? and @user.organizers.blank? %>
 
 <form action="/admin/users/<%= @user.id %>/delete" method="post">
-  <button type="submit"><%= _("Delete user") %></button>
+  <button type="submit" class="btn btn-outline-danger"><%= _("Delete user") %></button>
 </form>
 
 <% end %>
diff --git a/views/admin_votes.erb b/views/admin_votes.erb
index 739adc1..e5a443a 100644
--- a/views/admin_votes.erb
+++ b/views/admin_votes.erb
@@ -1,6 +1,6 @@
-<h1><%= _("Admin") %></h1>
+<h1 class="mb-5"><%= _("Admin") %></h1>
 
-<h2><%= @vote.title %></h2>
+<h2 class="mb-4"><%= @vote.title %></h2>
 
 <p><a href="/votes/<%= @vote.secure_id %>"><%= _("View vote") %></a></p>
 
@@ -14,13 +14,13 @@
 
 <p><%= _("Closing date: %{date}") % { date: @vote.expire_on ? format_date_and_time(@vote.expire_on) : _("None") } %></p>
 
-<p><%= _("State: %{state}") % { state: @vote.state } %></p>
+<p class="mb-5"><%= _("State: %{state}") % { state: @vote.state } %></p>
 
-<h2><%= _("Organizers") %></h2>
+<h2 class="mb-4"><%= _("Organizers") %></h2>
 
 <% unless @vote.organizers.blank? %>
 
-<ul>
+<ul class="mb-5">
 <% @vote.organizers.each do |organizer| %>
   <li>
     <%= organizer.user.email %>
@@ -35,7 +35,7 @@
 
 <% end %>
 
-<h2><%= _("Ratings") %></h2>
+<h2 class="mb-4"><%= _("Ratings") %></h2>
 
 <% unless @vote.ratings.blank? %>
 
diff --git a/views/layout.erb b/views/layout.erb
index 5512363..d1c0b34 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -19,7 +19,7 @@
   });
   </script>
   <body>
-    <div class="container">
+    <div class="container py-4">
 
       <header class="d-flex flex-wrap justify-content-center py-3 border-bottom">
         <a href="/" class="d-flex align-items-center pe-5 mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
diff --git a/views/login.erb b/views/login.erb
index dc71df6..5a5f40c 100644
--- a/views/login.erb
+++ b/views/login.erb
@@ -1,19 +1,19 @@
-<h1><%= _("Login") %></h1>
+<h1 class="mb-5"><%= _("Login") %></h1>
 
 <% if @error %>
-  <p class="error"><%= @error %></p>
+  <p class="alert alert-warning mb-4"><%= @error %></p>
 <% end %>
 
-<form action="/login" method="post">
-  <p>
-    <label for="email"><%= _("Email") %></label>
-    <input type="text" name="email">
-  </p>
-  <p>
-    <label for="password"><%= _("Password") %></label>
-    <input type="password" name="password">
-  </p>
-  <button type="submit"><%= _("Login") %></button>
+<form action="/login" method="post" class="mb-5">
+  <div class="mb-3">
+    <label for="email" class="form-label"><%= _("Email") %></label>
+    <input type="text" name="email" class="form-control">
+  </div>
+  <div class="mb-3">
+    <label for="password" class="form-label"><%= _("Password") %></label>
+    <input type="password" name="password" class="form-control">
+  </div>
+  <button type="submit" class="btn btn-primary"><%= _("Login") %></button>
 </form>
 <p><a href="/signup"><%= _("Create account") %></a></p>
 <p><a href="/reset"><%= _("Reset password") %></a></p>
diff --git a/views/reset.erb b/views/reset.erb
index 4e9beb9..ae4bdc2 100644
--- a/views/reset.erb
+++ b/views/reset.erb
@@ -1,9 +1,9 @@
-<h1><%= _("Reset password") %></h1>
+<h1 class="mb-5"><%= _("Reset password") %></h1>
 
 <form action="/reset" method="post">
-  <p>
-    <label for="email"><%= _("Email") %></label>
-    <input type="text" name="email">
-  </p>
-  <button type="submit"><%= _("Reset password") %></button>
+  <div class="mb-3">
+    <label for="email" class="form-label"><%= _("Email") %></label>
+    <input type="text" name="email" class="form-control">
+  </div>
+  <button type="submit" class="btn btn-primary"><%= _("Reset password") %></button>
 </form>
diff --git a/views/reset_change.erb b/views/reset_change.erb
index 36caf8d..a8854cf 100644
--- a/views/reset_change.erb
+++ b/views/reset_change.erb
@@ -1,21 +1,21 @@
-<h1><%= _("Reset password") %></h1>
+<h1 class="mb-5"><%= _("Reset password") %></h1>
 
 <% if @errors %>
 <% @errors.each do |error| %>
   <% if error.attribute == :password and error.type == :blank %>
-  <p class="error"><%= _("Specify a password.") %></p>
+  <p class="alert alert-warning mb-4"><%= _("Specify a password.") %></p>
   <% end %>
 <% end %>
 <% end %>
 
 <form action="/reset/<%= params[:uuid] %>" method="post">
-  <p>
-    <label for="email"><%= _("Email") %></label>
-    <span><%= @user.email %></span>
-  </p>
-  <p>
-    <label for="password"><%= _("Password") %></label>
-    <input type="password" name="password" value="<%= params[:password] %>">
-  </p>
-  <button type="submit"><%= _("Reset password") %></button>
+  <div class="mb-3">
+    <label for="email" class="form-label"><%= _("Email") %></label>
+    <p><strong><%= @user.email %></strong></p>
+  </div>
+  <div class="mb-3">
+    <label for="password" class="form-label"><%= _("Password") %></label>
+    <input type="password" name="password" value="<%= params[:password] %>" class="form-control">
+  </div>
+  <button type="submit" class="btn btn-primary"><%= _("Reset password") %></button>
 </form>
diff --git a/views/reset_invalid.erb b/views/reset_invalid.erb
index 47255cd..19e5ede 100644
--- a/views/reset_invalid.erb
+++ b/views/reset_invalid.erb
@@ -1,5 +1,5 @@
-<h1><%= _("Reset password") %></h1>
+<h1 class="mb-5"><%= _("Reset password") %></h1>
 
-<p class="error"><%= _("This password reset link has expired or is invalid.") %></p>
+<p class="alert alert-warning mb-4"><%= _("This password reset link has expired or is invalid.") %></p>
 
 <p><a href="/reset"><%= _("Try resetting your password again.") %></p>
diff --git a/views/reset_sent.erb b/views/reset_sent.erb
index 57ec828..a632f46 100644
--- a/views/reset_sent.erb
+++ b/views/reset_sent.erb
@@ -1,4 +1,4 @@
-<h1><%= _("Reset password") %></h1>
+<h1 class="mb-5"><%= _("Reset password") %></h1>
 
 <p><%= _("If an account exists for %{email}, you will get an email with a link
 to reset your password.") % { email: params[:email] } %></p>
diff --git a/views/signup.erb b/views/signup.erb
index 7eb7ff3..8c759ef 100644
--- a/views/signup.erb
+++ b/views/signup.erb
@@ -1,9 +1,9 @@
-<h1><%= _("Create account") %></h1>
+<h1 class="mb-5"><%= _("Create account") %></h1>
 
 <% if @errors %>
 <% @errors.each do |error| %>
   <% if error.attribute == :password and error.type == :blank %>
-  <p class="error"><%= _("Specify a password.") %></p>
+    <p class="alert alert-warning mb-4"><%= _("Specify a password.") %></div>
   <% end %>
 <% end %>
 <% end %>
@@ -11,22 +11,22 @@
 <% if @user and @user.errors.any? %>
 <% @user.errors.each do |error| %>
   <% if error.attribute == :email and error.type == :invalid %>
-  <p class="error"><%= _("Email is not a valid email address.") %></p>
+  <div class="alert alert-warning mb-4"><%= _("Email is not a valid email address.") %></div>
   <% end %>
   <% if error.attribute == :email and error.type == :taken %>
-  <p class="error"><%= _("An account already exists for %{email}.") % { email: @user.email } %></p>
+  <div class="alert alert-warning mb-4"><%= _("An account already exists for %{email}.") % { email: @user.email } %></div>
   <% end %>
 <% end %>
 <% end %>
 
 <form action="/signup" method="post">
-  <p>
-    <label for="email"><%= _("Email") %></label>
-    <input type="text" name="email" value="<%= params[:email] %>">
-  </p>
-  <p>
-    <label for="password"><%= _("Password") %></label>
-    <input type="password" name="password" value="<%= params[:password] %>">
-  </p>
-  <button type="submit"><%= _("Create account") %></button>
+  <div class="mb-3">
+    <label for="email" class="form-label"><%= _("Email") %></label>
+    <input type="text" name="email" value="<%= params[:email] %>" class="form-control">
+  </div>
+  <div class="mb-3">
+    <label for="password" class="form-label"><%= _("Password") %></label>
+    <input type="password" name="password" value="<%= params[:password] %>" class="form-control">
+  </div>
+  <button type="submit" class="btn btn-primary"><%= _("Create account") %></button>
 </form>
diff --git a/views/style.erb b/views/style.erb
index 8b07e38..32d5dec 100644
--- a/views/style.erb
+++ b/views/style.erb
@@ -1,18 +1,20 @@
-.error {
-  color: red;
-}
-
-p, li {
-  max-width: 50em;
-}
-
-textarea {
-  width: 80em;
-  height: 20em;
-}
-
 <% settings.values.each do |v| %>
-.value-<%= v[:id] %> {
-  background: <%= v[:color] %>;
-}
+
+  .btn-check + .btn-radio-<%= v[:id] %> {
+    border-color: <%= v[:color] %>;
+    background: <%= v[:color] %>;
+    opacity: 0.3;
+  }
+
+  .btn-check:checked + .btn-radio-<%= v[:id] %>,
+  .btn-check:hover + .btn-radio-<%= v[:id] %> {
+    background: <%= v[:color] %>;
+    opacity: 1;
+  }
+
+  .bg-<%= v[:id] %> {
+    color: black;
+    background-color: <%= v[:color] %>;
+  }
+
 <% end %>
diff --git a/views/votes.erb b/views/votes.erb
new file mode 100644
index 0000000..fe1f7a7
--- /dev/null
+++ b/views/votes.erb
@@ -0,0 +1,29 @@
+<h1 class="mb-5"><%= _("Votes") %></h1>
+
+<table class="table table-striped mb-5">
+  <tbody>
+    <% @votes.reverse.each do |vote| %>
+      <tr>
+        <td><%= format_date(vote.created_at) %></td>
+        <td class="text-nowrap">
+          <% case vote.state
+             when 'draft' %>
+            <span class="badge bg-secondary"><%= _("Draft") %></span>
+          <% when 'open' %>
+            <span class="badge bg-primary"><%= _("Open") %></span>
+          <% when 'closed' %>
+            <SPAN class="badge bg-dark"><%= _("Closed") %></span>
+          <% end %>
+          <% if vote.users.exists?(current_user.id) %>
+            <span class="badge bg-warning text-bg-warning"><%= _("Organizer") %></span>
+          <% end %>
+        </td>
+        <td><a href="/votes/<%= vote.secure_id %>"><%= vote.title %></a></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<form action="/votes/new" method="get">
+  <button type="submit" class="btn btn-primary"><%= _("Create new vote") %></button>
+</form>
diff --git a/views/votes_edit.erb b/views/votes_edit.erb
index b4ddc38..03073a5 100644
--- a/views/votes_edit.erb
+++ b/views/votes_edit.erb
@@ -1,38 +1,76 @@
-<h1><%= @vote.title %></h1>
+<div class="mb-5">
+  <h1><%= @vote.title %></h1>
+  <ul class="list-unstyled">
+    <li>
+      <span class="badge bg-secondary"><%= _("Draft") %></span>
+      <span class="badge bg-warning text-bg-warning"><%= _("Organizer") %></span>
+    </li>
+  </ul>
+</div>
 
-<p><span class="badge bg-primary">Draft</span></p>
+<div class="mb-5">
+  <div class="lead">
+    <%= markdown(@vote.description) %>
+  </div>
+  <form action="/votes/<%= @vote.secure_id %>/edit" method="get" class="mb-5">
+    <button type="submit" class="btn btn-outline-primary"><%= _("Edit") %></button>
+  </form>
+</div>
 
-<%= markdown(@vote.description) %>
-
-<form action="/votes/<%= @vote.secure_id %>/edit" method="get">
-  <button type="submit"><%= _("Edit") %></button>
-</form>
-
-<h2><%= _("Candidates") %></h2>
+<h2 class="mb-4"><%= _("Candidates") %></h2>
 
 <% @vote.candidates.each do |candidate| %>
-<h3><%= candidate.name %></h3>
-<%= markdown(candidate.description) %>
-<form action="/votes/<%= @vote.secure_id %>/candidates/<%= candidate.id %>/delete" method="post">
-  <button type="submit"><%= _("Delete") %></button>
-</form>
+  <div class="card mb-4">
+    <div class="card-body">
+      <h3 class="mb-3"><%= candidate.name %></h3>
+      <%= markdown(candidate.description) %>
+      <form action="/votes/<%= @vote.secure_id %>/candidates/<%= candidate.id %>/delete" method="post">
+        <button type="submit" class="btn btn-outline-danger"><%= _("Delete") %></button>
+      </form>
+    </div>
+  </div>
 <% end %>
 
-<h3><%= _("Add candidate") %></h3>
+<div class="card mb-4">
+  <div class="card-body">
+    <h3 class="mb-3"><%= _("Add candidate") %></h3>
+    <% if @vote.candidates.empty? %>
+      <div class="alert alert-primary mb-4"><%= _("This vote has no candidates yet. Add a first candidate.") %></div>
+    <% end %>
+    <form action="/votes/<%= @vote.secure_id %>/candidates" method="post">
+      <div class="mb-3">
+       <label for="name" class="form-label"><%= _("Name") %></label>
+        <input type="text" name="name" class="form-control">
+      </div>
+      <div class="mb-3">
+        <label for="description" class="form-label"><%= _("Description") %></label>
+        <textarea type="text" name="description" class="form-control"></textarea>
+      </div>
+    <% if @vote.candidates.length < 2 %>
+      <button type="submit" class="btn btn-primary"><%= _("Add candidate") %></button>
+    <% else %>
+      <button type="submit" class="btn btn-outline-primary"><%= _("Add candidate") %></button>
+    <% end %>
+    </form>
+  </div>
+</div>
 
-<form action="/votes/<%= @vote.secure_id %>/candidates" method="post">
-  <p>
-    <label for="name"><%= _("Name") %></label>
-    <input type="text" name="name">
-  </p>
-  <p>
-    <label for="description"><%= _("Description") %></label>
-    <textarea type="text" name="description"></textarea>
-  </p>
-  <button type="submit"><%= _("Add candidate") %></button>
+<form action="/votes/<%= @vote.secure_id %>/open" method="get" class="mb-3">
+  <% if @vote.candidates.length < 2 %>
+    <p class="alert alert-warning mb-4"><%= _("Add at least 2 candidates before opening the vote to participants.") %></p>
+    <fieldset disabled="">
+  <% end %>
+  <button type="submit" class="btn btn-primary"><%= _("Open vote to participants") %></button>
+  <% if @vote.candidates.length < 2 %>
+    </fieldset>
+  <% end %>
 </form>
 
-<h2><%= _("Organizers") %></h2>
+<form action="/votes/<%= @vote.secure_id %>/delete" method="post" class="mb-5">
+  <button type="submit" class="btn btn-outline-danger"><%= _("Delete vote") %></button>
+</form>
+
+<h2 class="mb-4"><%= _("Organizers") %></h2>
 
 <ul>
   <% @vote.organizers.each do |organizer| %>
@@ -40,26 +78,12 @@
   <% end %>
 </ul>
 
-<h3><%= _("Add organizer") %></h3>
+<h3 class="mb-3"><%= _("Add organizer") %></h3>
 
-<form action="/votes/<%= @vote.secure_id %>/organizers" method="post">
-  <p>
-    <label for="email"><%= _("Email") %></label>
-    <input type="text" name="email">
-  </p>
-  <button type="submit"><%= _("Add organizer") %></button>
-</form>
-
-<h3><%= _("Actions for organizers") %></h2>
-
-<form action="/votes/<%= @vote.secure_id %>/open" method="get">
-  <% if @vote.candidates.length < 2 %>
-  <button type="submit" disabled><%= _("Open vote to participants") %></button>
-  <p><%= _("Add at least 2 candidates before opening the vote to participants.") %></p>
-  <% else %>
-  <button type="submit"><%= _("Open vote to participants") %></button>
-  <% end %>
-</form>
-<form action="/votes/<%= @vote.secure_id %>/delete" method="post">
-  <button type="submit"><%= _("Delete vote") %></button>
+<form action="/votes/<%= @vote.secure_id %>/organizers" method="post" class="mb-5">
+  <div class="mb-3">
+    <label for="email" class="form-label"><%= _("Email") %></label>
+    <input type="text" name="email" class="form-control">
+  </div>
+  <button type="submit" class="btn btn-outline-primary"><%= _("Add organizer") %></button>
 </form>
diff --git a/views/votes_edit_description.erb b/views/votes_edit_description.erb
index 9429f1b..a4af2a5 100644
--- a/views/votes_edit_description.erb
+++ b/views/votes_edit_description.erb
@@ -1,13 +1,13 @@
-<h1><%= _("Edit vote description") %></h1>
+<h1 class="mb-5"><%= _("Edit vote description") %></h1>
 
 <form action="/votes/<%= @vote.secure_id %>/edit" method="post">
-  <p>
-    <label for="title"><%= _("Title") %></label>
-    <input type="text" name="title" value="<%= @vote.title %>">
-  </p>
-  <p>
-    <label for="description"><%= _("Description") %></label>
-    <textarea type="text" name="description"><%= @vote.description %></textarea>
-  </p>
-  <button type="submit"><%= _("Save") %></button>
+  <div class="mb-3">
+    <label for="title" class="form-label"><%= _("Title") %></label>
+    <input type="text" name="title" value="<%= @vote.title %>" class="form-control">
+  </div>
+  <div class="mb-3">
+    <label for="description" class="form-label"><%= _("Description") %></label>
+    <textarea type="text" name="description" class="form-control"><%= @vote.description %></textarea>
+  </div>
+  <button type="submit" class="btn btn-primary"><%= _("Save") %></button>
 </form>
diff --git a/views/votes_new.erb b/views/votes_new.erb
index 381eed8..2ef0ddf 100644
--- a/views/votes_new.erb
+++ b/views/votes_new.erb
@@ -1,13 +1,13 @@
-<h1><%= _("New vote") %></h1>
+<h1 class="mb-5"><%= _("New vote") %></h1>
 
 <form action="/votes/new" method="post">
-  <p>
-    <label for="title"><%= _("Title") %></label>
-    <input type="text" name="title">
-  </p>
-  <p>
-    <label for="description"><%= _("Description") %></label>
-    <textarea type="text" name="description"></textarea>
-  </p>
-  <button type="submit"><%= _("Create new vote") %></button>
+  <div class="mb-3">
+    <label for="title" class="form-label"><%= _("Title") %></label>
+    <input type="text" name="title" class="form-control">
+  </div>
+  <div class="mb-3">
+    <label for="description" class="form-label"><%= _("Description") %></label>
+    <textarea type="text" name="description" class="form-control"></textarea>
+  </div>
+  <button type="submit" class="btn btn-primary"><%= _("Create new vote") %></button>
 </form>
diff --git a/views/votes_open.erb b/views/votes_open.erb
index 6e3670e..25da43c 100644
--- a/views/votes_open.erb
+++ b/views/votes_open.erb
@@ -1,6 +1,15 @@
-<h1><%= _("Open vote") %></h1>
+<div class="mb-5">
+  <h1><%= @vote.title %></h1>
+  <ul class="list-unstyled">
+    <li>
+      <span class="badge bg-secondary"><%= _("Draft") %></span>
+    </li>
+  </ul>
+</div>
 
-<p><%= _("Closing date: %{date}") % { date: format_date_and_time(@expire_on) } %></p>
+<div class="alert alert-warning mb-5">
+
+<p><strong><%= _("Closing date: %{date}") % { date: format_date_and_time(@expire_on) } %></strong></p>
 
 <p><%= _("The vote will automatically close on that date and the results will
 be sent to all users by email.") %></p>
@@ -8,21 +17,29 @@ be sent to all users by email.") %></p>
 <p><%= _("You won't be able to modify or delete this vote anymore after
 opening it.") %></p>
 
-<form action="/votes/<%= @vote.secure_id %>/open" method="post">
-  <button type="submit"><%= _("Open vote to participants") %></button>
+<form action="/votes/<%= @vote.secure_id %>/open" method="post" class="mb-3">
+  <button type="submit" class="btn btn-primary"><%= _("Open vote to participants") %></button>
 </form>
 
 <form action="/votes/<%= @vote.secure_id %>" method="get">
-  <button type="submit"><%= _("Cancel") %></button>
+  <button type="submit" class="btn btn-outline-secondary"><%= _("Cancel") %></button>
 </form>
 
-<h2><%= @vote.title %></h2>
+</div>
 
-<%= markdown(@vote.description) %>
+<div class="mb-5">
+  <div class="lead">
+    <%= markdown(@vote.description) %>
+  </div>
+</div>
 
-<h2><%= _("Candidates") %></h2>
+<h2 class="mb-4"><%= _("Candidates") %></h2>
 
 <% @vote.candidates.each do |candidate| %>
-<h3><%= candidate.name %></h3>
-<%= markdown(candidate.description) %>
+  <div class="card mb-4">
+    <div class="card-body">
+      <h3 class="mb-3"><%= candidate.name %></h3>
+      <%= markdown(candidate.description) %>
+    </div>
+  </div>
 <% end %>
diff --git a/views/votes_show_closed.erb b/views/votes_show_closed.erb
index 788f38c..59e7441 100644
--- a/views/votes_show_closed.erb
+++ b/views/votes_show_closed.erb
@@ -1,38 +1,46 @@
-<h1><%= @vote.title %></h1>
+<div class="mb-5">
+  <h1><%= @vote.title %></h1>
+  <ul class="list-unstyled">
+    <li>
+      <span class="badge bg-dark text-bg-dark"><%= _("Closed") %></span>
+      <% if @vote.users.exists?(current_user.id) %>
+        <span class="badge bg-warning text-bg-warning"><%= _("Organizer") %></span>
+      <% end %>
+    </li>
+    <% if @vote.expire_on %>
+      <li><%= _("Closed on %{date}") % { date: format_date_and_time(@vote.expire_on) } %></li>
+    <% end %>
+  </ul>
+</div>
 
-<% if @vote.expire_on %>
-<p><%= _("Closing date: %{date}") % { date: format_date_and_time(@vote.expire_on) } %></p>
+<div class="mb-5">
+  <div class="lead">
+    <%= markdown(@vote.description) %>
+  </div>
+</div>
+
+<h2 class="mb-4"><%= _("Options") %></h2>
+
+<% @vote.candidates.each do |candidate| %>
+  <div class="card mb-4">
+    <div class="card-body">
+      <h3 class="mb-3"><%= candidate.name %></h3>
+      <%= markdown(candidate.description) %>
+    </div>
+  </div>
 <% end %>
 
-<%= markdown(@vote.description) %>
+<div class="mb-5"></div>
 
-<% unless @vote.ratings.blank? %>
+<h2 class="mb-4"><%= _("Results") %></h2>
 
-<h2><%= _("All ratings") %></h2>
+<% if @vote.ratings.blank? %>
 
-<table>
-  <tr>
-    <th><%= _("Participant") %></th>
-    <% @vote.candidates.each do |candidate| %>
-    <th><%= candidate.name %></th>
-    <% end %>
-  </tr>
-  <% @vote.ratings.collect { |rating| rating.user }.uniq.each do |user| %>
-  <tr>
-    <td><%= user.email %></td>
-    <% @vote.candidates.each do |candidate| %>
-    <% if rating = @vote.ratings.find { |rating| rating.user == user and rating.candidate == candidate } %>
-    <% value = settings.values.select { |e| e[:id] == rating.value }.first %>
-    <td class="value-<%= value[:id] %>"><%= _(value[:label]) %></td>
-    <% end %>
-    <% end %>
-  </tr>
-  <% end %>
-</table>
+<%= _("No results are available because nobody voted on this vote.") %>
 
-<h2><%= _("Results") %></h2>
+<% else %>
 
-<table>
+<table class="table mb-4">
   <tr>
     <th><%= _("Rank") %></th>
     <th><%= _("Candidate") %></th>
@@ -47,7 +55,7 @@
     <td><%= i %></td>
     <td><%= candidate.name %></td>
     <% value = settings.values.select { |e| e[:id] == candidate.mj.mj }.first %>
-    <td class="value-<%= value[:id] %>"><%= _(value[:label]) %></td>
+    <td class="h5"><span class="badge bg-<%= value[:id] %>"><%= _(value[:label]) %></span></td>
     <td><%= candidate.mj.proponents %></td>
     <td><%= candidate.mj.opponents %></td>
   </tr>
@@ -68,15 +76,43 @@ end
 %>
 <%= bar_chart data, colors: colors, stacked: true, legend: 'bottom' %>
 
-<% else %>
+<div class="mb-5"></div>
 
-<h2><%= _("Results") %></h2>
+<h2 class="mb-4"><%= _("Ratings") %></h2>
 
-<%= _("No results are available because nobody voted on this vote.") %>
+<table class="table table-striped mb-5">
+  <thead>
+    <tr>
+      <th><%= _("Participant") %></th>
+      <% @vote.candidates.each do |candidate| %>
+        <th><%= candidate.name %></th>
+      <% end %>
+    </tr>
+  </thead>
+  <% @vote.ratings.collect { |rating| rating.user }.uniq.each do |user| %>
+  <tr>
+    <td><%= user.email %></td>
+    <% @vote.candidates.each do |candidate| %>
+    <% if rating = @vote.ratings.find { |rating| rating.user == user and rating.candidate == candidate } %>
+    <% value = settings.values.select { |e| e[:id] == rating.value }.first %>
+    <td class="h5"><span class="badge bg-<%= value[:id] %>"><%= _(value[:label]) %></td>
+    <% end %>
+    <% end %>
+  </tr>
+  <% end %>
+</table>
 
 <% end %>
 
-<h2><%= _("Organizers") %></h2>
+<% if @vote.users.exists?(current_user.id) and @vote.expire_on.nil? %>
+
+<form action="/votes/<%= @vote.secure_id %>/reopen" method="post" class="mb-5">
+  <button type="submit" class="btn btn-outline-primary"><%= _("Reopen voting period") %></button>
+</form>
+
+<% end %>
+
+<h2 class="mb-4"><%= _("Organizers") %></h2>
 
 <ul>
   <% @vote.organizers.each do |organizer| %>
@@ -86,20 +122,14 @@ end
 
 <% if @vote.users.exists?(current_user.id) and @vote.expire_on.nil? %>
 
-<h3><%= _("Actions for organizers") %></h3>
+<h3 class="mb-3"><%= _("Add organizer") %></h3>
 
-<form action="/votes/<%= @vote.secure_id %>/reopen" method="post">
-  <button type="submit"><%= _("Reopen voting period") %></button>
-</form>
-
-<h3><%= _("Add organizer") %></h3>
-
-<form action="/votes/<%= @vote.secure_id %>/organizers" method="post">
-  <p>
-    <label for="email"><%= _("Email") %></label>
-    <input type="text" name="email">
-  </p>
-  <button type="submit"><%= _("Add organizer") %></button>
+<form action="/votes/<%= @vote.secure_id %>/organizers" method="post" class="mb-5">
+  <div class="mb-3">
+    <label for="email" class="form-label"><%= _("Email") %></label>
+    <input type="text" name="email" class="form-control">
+  </div>
+  <button type="submit" class="btn btn-outline-primary"><%= _("Add organizer") %></button>
 </form>
 
 <% end %>
diff --git a/views/votes_show_draft.erb b/views/votes_show_draft.erb
index c521143..19d114f 100644
--- a/views/votes_show_draft.erb
+++ b/views/votes_show_draft.erb
@@ -1,18 +1,35 @@
-<h1><%= @vote.title %> <%= _("(Draft)") %></h1>
+<div class="mb-5">
+  <h1><%= @vote.title %></h1>
+  <ul class="list-unstyled">
+    <li>
+      <span class="badge bg-secondary"><%= _("Draft") %></span>
+    </li>
+  </ul>
+</div>
 
-<%= markdown(@vote.description) %>
+<div class="mb-5">
+  <div class="lead">
+    <%= markdown(@vote.description) %>
+  </div>
+</div>
 
-<h2><%= _("Organizers") %></h2>
+<h2 class="mb-4"><%= _("Candidates") %></h2>
+
+<% @vote.candidates.each do |candidate| %>
+  <div class="card mb-4">
+    <div class="card-body">
+      <h3 class="mb-3"><%= candidate.name %></h3>
+      <%= markdown(candidate.description) %>
+    </div>
+  </div>
+<% end %>
+
+<div class="mb-5"></div>
+
+<h2 class="mb-4"><%= _("Organizers") %></h2>
 
 <ul>
   <% @vote.organizers.each do |organizer| %>
   <li><%= organizer.user.email %></li>
   <% end %>
 </ul>
-
-<h2><%= _("Candidates") %></h2>
-
-<% @vote.candidates.each do |candidate| %>
-<h3><%= candidate.name %></h3>
-<%= markdown(candidate.description) %>
-<% end %>
diff --git a/views/votes_show_open.erb b/views/votes_show_open.erb
index 9935f43..3596b3b 100644
--- a/views/votes_show_open.erb
+++ b/views/votes_show_open.erb
@@ -1,57 +1,82 @@
-<h1><%= @vote.title %></h1>
+<div class="mb-5">
+  <h1><%= @vote.title %></h1>
+  <ul class="list-unstyled">
+    <li>
+      <span class="badge bg-primary"><%= _("Open") %></span>
+    </li>
+    <% if @vote.expire_on %>
+      <li><%= _("Closes on %{date}") % { date: format_date_and_time(@vote.expire_on) } %></li>
+    <% end %>
+  </ul>
+</div>
+
+<div class="mb-5">
+  <div class="lead">
+    <%= markdown(@vote.description) %>
+  </div>
+</div>
+
+<h2 class="mb-4"><%= _("Options") %></h2>
 
 <% if @errors %>
 <% @errors.each do |error| %>
   <% if error.attribute == :rating and error.type == :blank %>
-  <p class="error"><%= _("Missing rating for candidate <i>%{name}</i>.") % { name: error.candidate.name } %></p>
+  <p class="alert alert-warning mb-4"><%= _("Missing rating for candidate <i>%{name}</i>.") % { name: error.candidate.name } %></p>
   <% end %>
 <% end %>
 <% end %>
 
-<% if @vote.expire_on %>
-<p><%= _("Closing date: %{date}") % { date: format_date_and_time(@vote.expire_on) } %></p>
-<% end %>
+<form action="/votes/<%= @vote.secure_id %>/ratings" method="post" class="mb-5">
 
-<%= markdown(@vote.description) %>
-
-<h2><%= _("Your ratings") %></h2>
-
-<form action="/votes/<%= @vote.secure_id %>/ratings" method="post">
-<ul>
   <% @vote.candidates.each do |candidate| %>
-  <% rating = @vote.ratings.find { |rating| rating.user == current_user and rating.candidate == candidate } %>
-  <% if rating
-       value = rating.value
-     elsif @params[candidate.id.to_s]
-       value = params[candidate.id.to_s].to_i
-     else
-       value = 0
-     end %>
-  <li>
-    <p><b><%= candidate.name %></b></p>
-    <%= markdown(candidate.description) %>
-    <ul>
-      <% settings.values.reverse.each do |v| %>
-      <li><input type="radio" name="<%= candidate.id %>" id="<%= candidate.id %>-<%= v[:id] %>" value="<%= v[:id] %>" <% if value == v[:id] %>checked<% end %>><label for="<%= candidate.id %>-<%= v[:id] %>" class="value-<%= v[:id] %>"><%= _(v[:label]) %></label></li>
-      <% end %>
-    </ul>
-  </li>
+    <div class="card mb-4">
+      <div class="card-body">
+        <h3 class="mb-3"><%= candidate.name %></h3>
+        <%= markdown(candidate.description) %>
+        <% rating = @vote.ratings.find { |rating| rating.user == current_user and rating.candidate == candidate } %>
+        <% if rating
+             value = rating.value
+           elsif @params[candidate.id.to_s]
+             value = params[candidate.id.to_s].to_i
+           else
+             value = 0
+           end %>
+        <div class="btn-group">
+          <% settings.values.reverse.each do |v| %>
+            <input type="radio" name="<%= candidate.id %>" id="<%= candidate.id %>-<%= v[:id] %>" value="<%= v[:id] %>" class="btn-check" <% if value == v[:id] %>checked<% end %>>
+            <label for="<%= candidate.id %>-<%= v[:id] %>" class="btn btn-radio-<%= v[:id] %>"><%= _(v[:label]) %></label>
+          <% end %>
+        </div>
+      </div>
+    </div>
   <% end %>
-</ul>
-<button type="submit"><%= _("Save") %></button>
+
+  <button type="submit" class="btn btn-primary"><%= _("Vote") %></button>
 </form>
 
-<h2><%= _("Participants") %></h2>
+<h2 class="mb-4"><%= _("Participants") %></h2>
 
-<ul>
+<ul class="mb-5">
 <% @vote.ratings.collect { |rating| rating.user }.uniq.each do |user| %>
   <li><%= user.email %></li>
 <% end %>
 </ul>
 
+<% if @vote.users.exists?(current_user.id) and @vote.expire_on.nil? %>
+
+<form action="/votes/<%= @vote.secure_id %>/draft" method="post">
+  <button type="submit" class="btn btn-outline-danger mb-3"><%= _("Change back to draft vote") %></button>
+</form>
+
+<form action="/votes/<%= @vote.secure_id %>/close" method="post" class="mb-5">
+  <button type="submit" class="btn btn-outline-primary mb-3"><%= _("Close votes and show results") %></button>
+</form>
+
+<% end %>
+
 <% unless @vote.organizers.blank? %>
 
-<h2><%= _("Organizers") %></h2>
+<h2 class="mb-4"><%= _("Organizers") %></h2>
 
 <ul>
   <% @vote.organizers.each do |organizer| %>
@@ -61,26 +86,16 @@
 
 <% end %>
 
-<% if @vote.users.exists?(current_user.id) and @vote.expire_on.nil? %>
+<% if @vote.users.exists?(current_user.id) or @vote.expire_on.nil? %>
 
-<h3><%= _("Actions for organizers") %></h3>
+<h3 class="mb-3"><%= _("Add organizer") %></h3>
 
-<form action="/votes/<%= @vote.secure_id %>/draft" method="post">
-  <button type="submit"><%= _("Change back to draft vote") %></button>
-</form>
-
-<form action="/votes/<%= @vote.secure_id %>/close" method="post">
-  <button type="submit"><%= _("Close votes and show results") %></button>
-</form>
-
-<h3><%= _("Add organizer") %></h3>
-
-<form action="/votes/<%= @vote.secure_id %>/organizers" method="post">
-  <p>
-    <label for="email"><%= _("Email") %></label>
-    <input type="text" name="email">
-  </p>
-  <button type="submit"><%= _("Add organizer") %></button>
+<form action="/votes/<%= @vote.secure_id %>/organizers" method="post" class="mb-5">
+  <div class="mb-3">
+    <label for="email" class="form-label"><%= _("Email") %></label>
+    <input type="text" name="email" class="form-control">
+  </div>
+  <button type="submit" class="btn btn-outline-primary"><%= _("Add organizer") %></button>
 </form>
 
 <% end %>