Fix code review notes, pass 2

Add the required CSS for the theme selector; improve test case to check
for proper rendering of theme selection options

tildes/scss/modules/_form.scss

@@ -38,6 +38,10 @@ select.form-select:not([multiple]) {
   }
 }
 
+.form-buttons.no-reverse {
+  flex-direction: row;
+}
+
 textarea.form-input {
   height: 8rem;
   line-height: 1.5;
@@ -73,3 +77,17 @@ textarea.form-input {
     font-size: 0.6rem;
   }
 }
+
+.form-oneline {
+  display: flex;
+  font-size: 0.6rem;
+  margin-bottom: 0.4rem;
+
+  .form-oneline-item {
+    flex: 2;
+  }
+
+  .form-oneline-item-double {
+    flex: 4;
+  }
+}

tildes/static/js/behaviors/theme-selector.js

@@ -2,6 +2,9 @@ $.onmount('[data-js-theme-selector]', function() {
     $(this).change(function(event) {
         event.preventDefault();
 
+        // hide any IC change message
+        $(this).parent().find('.form-status').hide();
+
         var new_theme = $(this).val();
         var selected_text = $(this).find('option:selected').text();
         var $setDefaultLink = $('#button-set-default-theme');

tildes/tests/webtests/test_user_settings.py

@@ -2,7 +2,6 @@ def test_render_theme_options(webtest):
     """Test that theme settings are being rendered."""
     settings = webtest.get("/settings")
     assert settings.status_int == 200
-    assert "White (site and account default)</" in settings.text
-    assert "Solarized Light</" in settings.text
-    assert "Solarized Dark</" in settings.text
-    assert "Black</" in settings.text
+    assert settings.text.count("(site and account default)") == 1
+    assert "(site default)" not in settings.text
+    assert "(account default)" not in settings.text

tildes/tildes/templates/settings.jinja2

@@ -8,40 +8,36 @@
   <ul class="settings-list">
     <li>
       <label for="theme">Choose a display theme:</label>
-      {#
-        2 styling changes needed:
-          - the select should be wider, as wide as it is now (roughly) on live
-          - the success message should be to the rigt of the label button
-      #}
-      <div class="">
-        <menu class="">
-          <select class="form-select" name="theme" id="theme" data-js-theme-selector>
-            {% for theme, description in theme_options.items() %}
-              <option
-                value="{{ theme }}"
-                {{ 'selected' if theme == current_theme else ''}}
-              >{{ description }}</option>
-            {% endfor %}
-          </select>
-        </menu>
-        <form
-          name="account-default-theme"
-          data-ic-patch-to="{{ request.route_url(
-            'ic_user',
-            username=request.user.username
-          ) }}"
-          class="form-listing-options"
-        >
-          <input type="hidden" name="theme" id="input-set-default-theme" value="{{ current_theme }}">
-          <div class="form-buttons no-flex-reverse">
-            <button id="button-set-default-theme"
-              class="btn btn-link
-              {% if current_theme == request.user.theme_default %}d-invisible{% endif %}"
+      <div class="form-oneline">
+        <select class="form-select form-oneline-item-double" name="theme" id="theme" data-js-theme-selector>
+          {% for theme, description in theme_options.items() %}
+            <option
+              value="{{ theme }}"
+              {{ 'selected' if theme == current_theme else '' }}
             >
-              Set as account default
-            </button>
-          </div>
-        </form>
+              {{ description }}
+            </option>
+          {% endfor %}
+        </select>
+        <div class="form-oneline-item">
+          <form
+            name="account-default-theme"
+            data-ic-patch-to="{{ request.route_url(
+              'ic_user',
+              username=request.user.username
+            ) }}"
+          >
+            <input type="hidden" name="theme" id="input-set-default-theme" value="{{ current_theme }}">
+            <div class="form-buttons no-reverse">
+              <button id="button-set-default-theme"
+                class="btn btn-link
+                {% if current_theme == request.user.theme_default %}d-invisible{% endif %}"
+              >
+                Set as account default
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
     </li>
     <li>