Styling _development_users.

assets/styles/_layout.scss

@@ -1,5 +1,6 @@
 @use './forms';
 @use 'partials/header';
+@use 'partials/development_users';
 @use 'partials/footer';
 
 // --------------------------------------------------

assets/styles/partials/_development_users.scss

@@ -0,0 +1,55 @@
+@use '../utilities';
+
+// --------------------------------------------------
+//
+// # Development Users
+//   Styles to apply directly to `views/partials/_development_users.erb`.
+//
+// ## Table of Contents
+//   1. Variables
+//   2. Container
+//   3. Form
+//
+// --------------------------------------------------
+
+// ******************** //
+// *** 1. VARIABLES *** //
+// ******************** //
+
+$class: "development-users";
+
+
+
+
+
+// ******************** //
+// *** 2. CONTAINER *** //
+// ******************** //
+
+.#{$class} {
+  margin-top: 1rem;
+  padding: 1rem;
+  @media print {
+    display: none;
+  }
+  & > *:first-child {
+    margin-top: 0;
+  }
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+
+
+
+
+// *************** //
+// *** 3. FORM *** //
+// *************** //
+
+.#{$class} form {
+  .development-users__inputs {
+    @include utilities.flex();
+  }
+}

views/layout.erb

@@ -80,7 +80,6 @@
         <%= erb :'partials/_development_users' %>
       <% end %>
     </div>
-
   </main>
   <%= erb :'partials/_footer' %>
   <% @presenter.scripts.flatten.each do |script| %>

views/partials/_development_users.erb

@@ -1,23 +1,26 @@
-<% test_users=[ { label: "Ann Arbor User" , value: 'mlibrary.acct.testing1@gmail.com' }, { label: 'Flint User' ,
-  value: 'mlibrary.acct.testing2@gmail.com' }, { label: "Dearborn User" , value: 'mlibrary.acct.testing3@gmail.com' }, ]
-  %>
+<% test_users=[
+  { label: "Ann Arbor User" , value: "mlibrary.acct.testing1@gmail.com" },
+  { label: "Flint User" , value: "mlibrary.acct.testing2@gmail.com" },
+  { label: "Dearborn User" , value: "mlibrary.acct.testing3@gmail.com" }
+] %>
 
-  <m-callout subtle>
-    <h2>Design &amp; Development Options</h2>
-    <form method="get" action="/session_switcher" class="prose owl">
-      <label for="test-user">
-        Active user account:
-      </label>
-      <input type="text" list="users" id="test-user" name="uniqname" autocomplete="on"
-        value="<%=session[:uniqname] || "" %>">
-      <datalist id="users">
-        <% test_users.each do |user| %>
-          <option value="<%=user[:value]%>">
-            <%=user[:label]%>
-          </option>
-          <% end %>
-      </datalist>
-      <button>Save</button>
-    </form>
-  </m-callout>
+<div class="container__rounded development-users">
+  <h2>Design &amp; Development Options</h2>
+  <form method="get" action="/session_switcher">
+    <label for="test-user">
+      Active user account:
+    </label>
+    <div class="development-users__inputs">
+      <input type="text" list="users" id="test-user" name="uniqname" autocomplete="on" value="<%=session[:uniqname] || "" %>">
+      <button type="submit">Save</button>
+    </div>
+    <datalist id="users">
+      <% test_users.each do |user| %>
+        <option value="<%=user[:value]%>">
+          <%=user[:label]%>
+        </option>
+      <% end %>
+    </datalist>
+  </form>
+</div>