Merge pull request #1443 from basecamp/settings-cleanup

Clean up account and collection settings screens

app/assets/stylesheets/settings.css

@@ -45,7 +45,7 @@
 
     display: flex;
     flex-direction: column;
-    gap: calc(var(--settings-spacer) / 4);
+    gap: calc(var(--settings-spacer) / 2);
     min-height: 0;
   }
 

app/views/account/settings/_entropy_configuration.html.erb

@@ -1,7 +1,8 @@
 <div class="settings__panel settings__panel--entropy panel shadow center">
-  <h2 class="divider txt-large">Auto close</h2>
-
-  <p class="margin-none-block-start">BOXCAR doesn’t let stale cards stick around forever. Cards automatically close as “Not Now” without activity for specific period of time. <em>This is the default, global setting — you can override it on each board.</em></p>
+  <header>
+    <h2 class="divider txt-large">Auto close</h2>
+    <p class="margin-none-block-start">BOXCAR doesn’t let stale cards stick around forever. Cards automatically close as “Not Now” without activity for specific period of time. <em>This is the default, global setting — you can override it on each board.</em></p>
+  </header>
 
   <%= render "entropy/auto_close", model: account.default_entropy_configuration, url: account_entropy_configuration_path %>
 </div>

app/views/account/settings/_name.html.erb

@@ -1,8 +1,10 @@
-<h2 class="divider txt-large">Account</h2>
 <%= form_with model: account, url: account_settings_path, method: :put, scope: :account, data: { controller: "form" }, class: "flex gap-half" do |form| %>
-  <%= form.text_field :name, required: true, class: "input input--transparent full-width", placeholder: "Account name",data: { action: "input->form#disableSubmitWhenInvalid" } %>
-  <%= form.button class: "btn btn--circle btn--link", data: { form_target: "submit" }, disabled: form.object do %>
-    <%= icon_tag "arrow-right" %>
-    <span class="for-screen-reader">Save changes</span>
+  <strong class="full-width"><%= form.text_field :name, required: true, class: "input input--transparent full-width txt-medium", placeholder: "Account name…", data: { action: "input->form#disableSubmitWhenInvalid" }, readonly: !Current.user.can_administer? %></strong>
+
+  <% if Current.user.can_administer? %>
+    <%= form.button class: "btn btn--circle btn--link txt-medium", data: { form_target: "submit" }, disabled: form.object do %>
+      <%= icon_tag "arrow-right" %>
+      <span class="for-screen-reader">Save changes</span>
+    <% end %>
   <% end %>
 <% end %>

app/views/account/settings/_users.html.erb

@@ -1,15 +1,13 @@
-<%= tag.div class: "margin-block-start flex flex-column gap-half", data: {
+<header>
+  <h2 class="divider txt-medium margin-block-start">People on this account</h2>
+</header>
+
+<%= tag.div class: "flex flex-column gap settings__user-filter", data: {
   controller: "filter navigable-list",
   action: "keydown->navigable-list#navigate filter:changed->navigable-list#reset",
   navigable_list_focus_on_selection_value: true,
   navigable_list_actionable_items_value: true
 } do %>
-  <h2 class="divider txt-large">People on the account</h2>
-
-  <%= link_to account_join_code_path, class: "btn btn--link center txt-small" do %>
-    <%= icon_tag "add" %>
-    <span>Add people</span>
-  <% end %>
 
   <div class="settings__user-filter">
     <input placeholder="Filter…" class="input input--transparent full-width txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
@@ -18,4 +16,9 @@
       <%= render partial: "account/settings/user", collection: users %>
     </ul>
   </div>
+
+  <%= link_to account_join_code_path, class: "btn btn--link center txt-small" do %>
+    <%= icon_tag "add" %>
+    <span>Invite people</span>
+  <% end %>
 <% end %>

app/views/account/settings/show.html.erb

@@ -1,14 +1,12 @@
-<% @page_title = "Account Settings for #{Account.sole.name}" %>
+<% @page_title = "Account Settings" %>
 
 <% content_for :header do %>
   <h1 class="header__title"><%= @page_title %></h1>
 <% end %>
 
-<section class="settings">
+<section class="settings margin-block-start-half">
   <div class="settings__panel settings__panel--users panel shadow center">
-    <% if Current.user.can_administer? %>
-      <%= render "account/settings/name", account: @account %>
-    <% end%>
+    <%= render "account/settings/name", account: @account %>
     <%= render "account/settings/users", users: @users %>
   </div>
 

app/views/collections/edit.html.erb

@@ -15,11 +15,6 @@
 
 <section class="settings">
   <div class="settings__panel settings__panel--users panel shadow center">
-    <header>
-      <h2 class="divider txt-large">Name and access</h2>
-      <div>Choose who can access this board</div>
-    </header>
-
     <%= form_with model: @collection, class: "display-contents", data: {
           controller: "form collections-form",
           collections_form_self_removal_prompt_message_value: "Are you sure you want to remove yourself from this collection? You won’t be able to get back in unless someone invites you.",
@@ -27,8 +22,7 @@
       <%= render "collections/edit/name", form: form %>
       <%= render "collections/edit/users", collection: @collection, selected_users: @selected_users, unselected_users: @unselected_users, form: form %>
 
-      <button type="submit" id="log_in" class="btn btn--reversed center txt-normal">
-        <%= icon_tag "check" %>
+      <button type="submit" id="log_in" class="btn btn--link center txt-normal">
         <span>Save changes</span>
       </button>
 

app/views/collections/edit/_name.html.erb

@@ -1,7 +1,7 @@
 <div class="flex align-center gap">
   <label class="flex-item-grow">
     <strong><%= form.text_field :name, name: "collection[name]", class: "input full-width txt-medium",
-          required: true, autofocus: false, placeholder: "Give it a name…",
+          required: true, autofocus: false, placeholder: "Board name…",
           data: { action: "keydown.enter->form#submit:prevent, keydown.esc->form#cancel" } %></strong>
   </label>
 </div>

app/views/collections/edit/_users.html.erb

@@ -1,12 +1,16 @@
-<%= access_menu_tag collection, class: "settings__user-filter settings__user-filter--bg" do %>
-  <li class="flex align-center gap">
-    <figure class="avatar" style="--avatar-border-radius: 0; --avatar-size: 3.5ch; margin-inline: 0.3em;">
+<header>
+  <h2 class="divider txt-medium margin-block-start">Who can access this board?</h2>
+</header>
+
+<%= access_menu_tag collection, class: "settings__user-filter unpad margin-none" do %>
+  <li class="flex align-center gap-half">
+    <figure class="avatar fill-selected">
       <%= icon_tag "everyone" %>
       <span class="for-screen-reader">Everyone</span>
     </figure>
 
     <div class="min-width">
-      <div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
+      <div class="overflow-ellipsis"><strong>Everyone</strong></div>
     </div>
 
     <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />

app/views/my/menus/_hotkeys.html.erb

@@ -4,5 +4,5 @@
   <%= filter_hotkey_link "Added by me", cards_path(creator_ids: [Current.user.id]), 3, "person-add" %>
   <%= filter_hotkey_link "New board", new_collection_path, 4, "collection-add" %>
   <%= filter_hotkey_link "Notifications", notifications_path, 5, "bell" %>
-  <%= filter_hotkey_link "Account #{tag.span("Settings", class: "visually-hidden")}", account_settings_path, 6, "settings" %>
+  <%= filter_hotkey_link "Settings", account_settings_path, 6, "settings" %>
 </div>