Rework settings for clarity, separation, and consistency

app/views/users/_transfer.html.erb

@@ -1,10 +1,11 @@
-<div class="flex flex-column align-center gap txt-medium--responsive txt-medium">
+<div class="flex flex-column gap align-center margin-block-double">
   <% url = session_transfer_url(user.identity.transfer_id, script_name: nil) %>
 
   <label class="flex flex-column gap full-width">
-    <div class="flex align-center gap justify-center">
-      <strong id="session_transfer_label" class="txt-medium">Link to automatically log in on another device</strong>
-    </div>
+    <header>
+      <strong class="divider txt-large">Devices</strong>
+      <p class="margin-none" id="session_transfer_label">Link to automatically log in on another device</strong>
+    </header>
     <span class="flex align-center gap margin-inline">
       <input type="text" class="input fill-white" id="session_transfer_url" value="<%= url %>" aria-labelledby="session_transfer_label" readonly>
     </span>

app/views/users/show.html.erb

@@ -37,15 +37,14 @@
 
   <% if Current.user == @user %>
     <section class="panel shadow" style="--panel-size: 45ch;">
+      <%= render "users/theme" %>
       <%= render "users/transfer", user: @user %>
 
-      <%= render "users/theme" %>
+      <hr class="separator--horizontal flex-item-grow margin-block" style="--border-color: var(--color-ink-light);" aria-hidden="true">
 
-      <div class="center margin-block-start-double">
-        <%= button_to session_url(script_name: nil), method: :delete, class: "btn btn--plain txt-link txt-small", data: { turbo: false } do %>
-        <span>Sign out</span>
+      <%= button_to session_url(script_name: nil), method: :delete, class: "btn txt-x-small center", data: { turbo: false } do %>
+        <span>Sign out of Fizzy on this device</span>
       <% end %>
-      </div>
     </section>
   <% end %>
 </div>