Adjust frontend-ish code for setting default theme

tildes/scss/modules/_form.scss

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

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

@@ -7,8 +7,7 @@ $.onmount('[data-js-theme-selector]', function() {
 
         var new_theme = $(this).val();
         var selected_text = $(this).find('option:selected').text();
-        var $setDefaultLink = $('#button-set-default-theme');
-        var $formDefaultValue = $('#input-set-default-theme');
+        var $setDefaultButton = $('#button-set-default-theme');
 
         // persist the new theme for the user in their cookie
         document.cookie = 'theme=' + new_theme + ';' +
@@ -24,19 +23,14 @@ $.onmount('[data-js-theme-selector]', function() {
             }
         }
 
-        // if a non-default theme was chosen, add the class to the body
-        if (new_theme) {
+        // add the class for the new theme to the body
         $body.addClass('theme-' + new_theme);
-        }
-
-        // set the IC hidden input with the new value
-        $formDefaultValue.val(new_theme);
 
-        // set visibility of 'Set as account default' link
-        if (selected_text.indexOf('(account default)') !== -1) {
-            $setDefaultLink.css('visibility', 'hidden');
+        // set visibility of 'Set as account default' button
+        if (selected_text.indexOf('account default') === -1) {
+            $setDefaultButton.removeClass('d-none');
         } else {
-            $setDefaultLink.css('visibility', 'visible');
+            $setDefaultButton.addClass('d-none');
         }
     });
 });

tildes/tildes/templates/settings.jinja2

@@ -8,8 +8,16 @@
   <ul class="settings-list">
     <li>
       <label for="theme">Choose a display theme:</label>
-      <div class="form-oneline">
-        <select class="form-select form-oneline-item-double" name="theme" id="theme" data-js-theme-selector>
+
+      <form
+        class="form-inline"
+        name="account-default-theme"
+        data-ic-patch-to="{{ request.route_url(
+          'ic_user',
+          username=request.user.username
+        ) }}"
+      >
+        <select class="form-select col-8 col-sm-12" name="theme" id="theme" data-js-theme-selector>
           {% for theme, description in theme_options.items() %}
             <option
               value="{{ theme }}"
@@ -19,26 +27,11 @@
             </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 %}"
-              >
+
+        <button id="button-set-default-theme" class="btn btn-link d-none">
           Set as account default
         </button>
-            </div>
       </form>
-        </div>
-      </div>
     </li>
     <li>
       <form

tildes/tildes/views/settings.py

@@ -14,25 +14,28 @@ from tildes.schemas.user import EMAIL_ADDRESS_NOTE_MAX_LENGTH, UserSchema
 
 
 PASSWORD_FIELD = UserSchema(only=("password",)).fields["password"]
-DEFAULT_THEME_NAME = "white"
 
 
 @view_config(route_name="settings", renderer="settings.jinja2")
 def get_settings(request: Request) -> dict:
     """Generate the user settings page."""
-    current_theme = request.cookies.get("theme", "") or request.user.theme_default
-    user_default = request.user.theme_default or DEFAULT_THEME_NAME
+    site_default_theme = "white"
+    user_default_theme = request.user.theme_default or site_default_theme
+
+    current_theme = request.cookies.get("theme", "") or user_default_theme
+
     theme_options = {
         "white": "White",
         "light": "Solarized Light",
         "dark": "Solarized Dark",
         "black": "Black",
     }
-    if DEFAULT_THEME_NAME == user_default:
-        theme_options[DEFAULT_THEME_NAME] += " (site and account default)"
+
+    if site_default_theme == user_default_theme:
+        theme_options[site_default_theme] += " (site and account default)"
     else:
-        theme_options[user_default] += " (account default)"
-        theme_options[DEFAULT_THEME_NAME] += " (site default)"
+        theme_options[user_default_theme] += " (account default)"
+        theme_options[site_default_theme] += " (site default)"
 
     return {"current_theme": current_theme, "theme_options": theme_options}