Style read-only inputs, add nav menu tab-button

app/assets/stylesheets/application.css

@@ -51,7 +51,8 @@ input[type=checkbox] {
   width: 1.1rem;
   -webkit-appearance: none;
 }
-input:focus-visible, input:hover {
+input:focus-visible,
+input:hover {
   accent-color: #006c9b;
   background-color: #f3f3f3;
 }
@@ -59,6 +60,15 @@ input[type=checkbox]:checked {
   appearance: checkbox;
   -webkit-appearance: checkbox;
 }
+input[type=text]:read-only {
+  border: none;
+  padding-left: 0;
+  padding-right: 0;
+}
+input:read-only:focus-visible,
+input:read-only:hover {
+  background: white;
+}
 
 .app-menu {
   height: 2.2rem;
@@ -74,16 +84,18 @@ input[type=checkbox]:checked {
   margin: 0.4rem 0;
 }
 .nav-menu .image-button {
-  border: none;
-  border-radius: 0;
   font-size: 0.9rem;
-  margin: 0 0.8rem;
   padding: 0.6rem 1rem;
 }
 .nav-menu .right .image-button {
   float: right;
 }
-.nav-menu .image-button.active {
+.nav-menu .tab-button {
+  border: none;
+  border-radius: 0;
+  margin: 0 0.8rem;
+}
+.nav-menu .tab-button.active {
   border-bottom: solid 0.2rem;
   color: #009ade;
   fill: #009ade;
@@ -181,6 +193,7 @@ form table {
   border-spacing: 0.8rem;
 }
 form tr td:first-child {
+  color: #a0a0a0;
   font-size: 0.9rem;
   padding-right: 0.25rem;
   text-align: right;

app/views/users/edit.html.erb

@@ -1,10 +0,0 @@
-<h1>Editing user</h1>
-
-<%= render "form", user: @user %>
-
-<br>
-
-<div>
-  <%= link_to "Show this user", @user %> |
-  <%= link_to "Back to users", users_path %>
-</div>

app/views/users/registrations/edit.html.erb

@@ -1,43 +1,10 @@
-<h2>Edit <%= resource_name.to_s.humanize %></h2>
+<h1>Editing user</h1>
 
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
+<%= render "form", user: @user %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
+<br>
 
-  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
-    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
-  <% end %>
-
-  <div class="field">
-    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-    <% if @minimum_password_length %>
-      <br />
-      <em><%= @minimum_password_length %> characters minimum</em>
-    <% end %>
-  </div>
-
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
-
-  <div class="field">
-    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
-    <%= f.password_field :current_password, autocomplete: "current-password" %>
-  </div>
-
-  <div class="actions">
-    <%= f.submit "Update" %>
-  </div>
-<% end %>
-
-<h3>Cancel my account</h3>
-
-<div>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?" }, method: :delete %></div>
-
-<%= link_to "Back", :back %>
+<div>
+  <%= link_to "Show this user", @user %> |
+  <%= link_to "Back to users", users_path %>
+</div>