Switch to Bootstrap 4

app/views/problems/_problem_pagination.erb

@@ -1 +1 @@
-<%= will_paginate @problems, renderer: BootstrapPagination::Rails %>
+<%= will_paginate @problems, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>

app/views/problems/index.html.erb

@@ -1,9 +1,15 @@
 <% provide(:title, Problem.model_name.human(count: 2)) %>
 
-<div class="page-header"><h1><%= Problem.model_name.human(count: 2) %></h1></div>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1><%= Problem.model_name.human(count: 2) %></h1>
+</div>
 
 <p><%= t('problems.index.translated_count', translated: Problem.translated_count, total: Problem.count) %></p>
-<%= progress_bar percentage: @translated_percentage, label: true, striped: true %>
+<div class="progress mb-3">
+  <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: <%= @translated_percentage %>%" aria-valuenow="<%= @translated_percentage %>>" aria-valuemin="0" aria-valuemax="100">
+    <%= @translated_percentage %>%
+  </div>
+</div>
 
 <%= render 'problem_pagination' %>
 <table class="table table-striped table-bordered">
@@ -23,8 +29,8 @@
             <%= link_to problem.title, problem %>
           <% else %>
               <i><%= t 'problems.not_yet_translated' %></i>
-              <%= link_to new_problem_translation_path(problem), class: 'btn btn-default btn-xs' do %>
-                  <%= icon :pencil %> <%= t '.suggest_translation' %>
+              <%= link_to new_problem_translation_path(problem), class: 'btn btn-primary btn-sm' do %>
+                  <%= icon('fas', 'edit') %> <%= t '.suggest_translation' %>
               <% end %>
           <% end %>
 

app/views/problems/show.html.erb

@@ -1,6 +1,6 @@
 <% provide(:title, t('problems.show.problem_subtitle', id: @problem.id)) %>
 
-<div class="page-header">
+<div class="pb-2 mt-4 mb-2">
   <p class="text-muted">
     <%= render 'shared/authors', authors: @problem.authors, has_anonymous_author: @problem.has_anonymous_author? %>
   </p>
@@ -8,22 +8,24 @@
 </div>
 <% if Problem.exists?(@problem.id-1) %>
   <%= link_to problem_path(@problem.id-1), title: t('problems.show.problem_subtitle', id: @problem.id-1), class: 'problem-prev' do %>
-    <%= icon :menu_left %>
+    <%= icon('fas', 'chevron-left') %>
   <% end %>
 <% end %>
 <% if Problem.exists?(@problem.id+1) %>
   <%= link_to problem_path(@problem.id+1), title: t('problems.show.problem_subtitle', id: @problem.id+1), class: 'problem-next' do %>
-    <%= icon :menu_right %>
+    <%= icon('fas', 'chevron-right') %>
   <% end %>
 <% end %>
-<%= link_to new_problem_translation_path(@problem), class: 'btn btn-default btn-sm pull-right' do %>
-  <%= icon :pencil %> <%= t '.improve_translation' %>
-<% end %>
-<%= panel do %>
-    <div class="panel-body problem-content">
+<div class="problem-buttons">
+  <%= link_to new_problem_translation_path(@problem), class: 'problem-buttons-inner btn btn-primary btn-sm' do %>
+    <%= icon('fas', 'edit') %> <%= t '.improve_translation' %>
+  <% end %>
+</div>
+<div class="card mb-3">
+    <div class="card-body problem-content">
       <%= sanitize @problem.content, scrubber: TranslationContentScrubber.new %>
     </div>
-<% end %>
+</div>
 <div class="text-center">
   <%= link_to t('.view_original_problem'), @problem.original_url, target: '_blank' %>
 </div>

app/views/problems/untranslated.html.erb

@@ -1,10 +1,10 @@
 <% provide(:title, t('problems.show.problem_subtitle', id: @problem.id)) %>
 
-<div class="page-header">
+<div class="pb-2 mt-4 mb-2 border-bottom">
   <h1><%= t 'problems.show.problem_subtitle', id: @problem.id %></h1>
 </div>
 
 <%= t 'problems.not_yet_translated' %>
 <%= link_to new_problem_translation_path(@problem), class: 'btn btn-default btn-xs' do %>
-    <%= icon :pencil %> <%= t 'problems.index.suggest_translation' %>
+    <%= icon('fas', 'edit') %> <%= t 'problems.index.suggest_translation' %>
 <% end %>