Redesign the app passwords page

app/views/app_passwords/show.html.erb

@@ -14,54 +14,47 @@
   <%= link_to t(:back), app_passwords_path %>
 <% else %>
 
-  <p>
+<div class="alert alert-info" role="alert">
   <%= t(:app_passwords_help) %>
-  </p>
+</div>
 
   <% if @passwords.present? %>
-
-    <br />
-    <hr />
-    <ul>
+    <table class="table table-hover">
+      <thead>
+        <tr class="border">
+          <th scope="col"><%= t(:app_name) %></th>
+          <th scope="col"><%= t(:last_used) %></th>
+          <th scope="col"></th>
+        </tr>
+      </thead>
+      <tbody>
       <% @passwords.each do |pw, lastlogin| %>
-        <li>
-          <%= form_tag(app_passwords_path, method: "post") do %>
-            <%= pw %> (
-            <%- if lastlogin %>
-            <%= t(:last_used) %>: <%= lastlogin %>
-            <%- else %>
-            <%= t(:never_used) %>
-            <%- end %>)
-
-            <%= hidden_field_tag(:delete, '', value: pw) %>
-            &nbsp;<%= submit_tag t(:delete) %>
-          <% end %>
-        </li>
-    <% end %>
-    </ul>
-
-  <hr/ >
-  <% end %>
-  <br />
-
-  <p>
-  <b><%= t(:new_app_passwords) %>:</b>
-  </p>
-  <%= form_tag(app_passwords_path, method: "post") do %>
-    <table>
-      <tr><td>
-        <%= label_tag(:app_name, t(:app_name)) %>
-      </td><td>
-        <%= text_field_tag(:app_name, '', value: t(:app_name), autocomplete: 'off') %>
-      </td></tr><tr><td>
-        <%= label_tag(:password, t(:your_main_pw)) %>
-      </td><td>
-        <%= password_field_tag(:password, nil, placeholder: t(:enter_your_current_pw)) %>
-      </td></tr>
+        <tr class="border">
+          <td class="align-middle"><%= pw %></td>
+          <td class="align-middle"><%- if lastlogin %><%= t(:last_used) %>: <%= lastlogin %><%- else %><%= t(:never_used) %><%- end %></td>
+          <td><%= form_tag(app_passwords_path, method: "post") do %><%= hidden_field_tag(:delete, '', value: pw) %><%= submit_tag(t(:delete), class: "btn btn-danger") %><% end %></td>
+        </tr>
+      <% end %>
+      </tbody>
     </table>
-    <p>
-    <%= submit_tag t(:generate) %>
-    <%= link_to t(:back), root_path %>
-    </p>
   <% end %>
+
+  <div class="card">
+    <div class="card-body">
+      <h5 class="card-title"><%= t(:new_app_passwords) %></h5>
+        <%= form_tag(app_passwords_path, method: "post") do %>
+          <div class="row mb-2">
+            <div class="col">
+              <%= label_tag(:app_name, t(:app_name)) %>
+              <%= text_field_tag(:app_name, '', value: t(:app_name), autocomplete: 'off', class: "form-control") %>
+            </div>
+            <div class="col">
+              <%= label_tag(:password, t(:your_main_pw)) %>
+              <%= password_field_tag(:password, nil, placeholder: t(:enter_your_current_pw), class: "form-control") %>
+            </div>
+          </div>
+          <%= submit_tag(t(:generate), class: "btn btn-primary") %>
+        <% end %>
+    </div>
+  </div>
 <% end %>