super_settings 2.3.1 → 2.4.0

data/lib/super_settings/application/scripts.js

@@ -1,8 +1,8 @@
 (function() {
-  // Return the table row element for a setting.
-  function findSettingRow(id) {
+  // Return the card element for a setting.
+  function findSettingCard(id) {
     if (id) {
-      return document.querySelector('#settings-table tr[data-id="' + id + '"]');
+      return document.querySelector('#settings-container .super-settings-card[data-id="' + id + '"]');
     } else {
       return null;
     }
@@ -10,7 +10,7 @@
 
   // Return the number of settings that have been edited.
   function changesCount() {
-    return document.querySelectorAll("#settings-table tbody tr[data-edited=true]").length;
+    return document.querySelectorAll("#settings-container .super-settings-card[data-edited=true]").length;
   }
 
   // Set the enabled status of the save button for submitting the form.
@@ -55,11 +55,11 @@
   }
 
   // Get the value of a setting from the edit form field.
-  function getSettingEditValue(row) {
-    if (row.querySelector(".super-settings-value input.js-setting-value[type=checkbox]")) {
-      return row.querySelector(".super-settings-value input.js-setting-value[type=checkbox]").checked;
+  function getSettingEditValue(card) {
+    if (card.querySelector(".super-settings-card-value input.js-setting-value[type=checkbox]")) {
+      return card.querySelector(".super-settings-card-value input.js-setting-value[type=checkbox]").checked;
     } else {
-      return row.querySelector(".super-settings-value .js-setting-value").value;
+      return card.querySelector(".super-settings-card-value .js-setting-value").value;
     }
   }
 
@@ -94,39 +94,39 @@
     return template.content.firstChild;
   }
 
-  // Create a table row element for displaying a setting.
-  function settingRow(setting) {
-    const row = elementFromSettingTemplate(setting, "#setting-row-template");
-    row.dataset.id = setting.id
-    row.dataset.key = setting.key
-    row.querySelector(".js-setting-key").value = setting.key;
+  // Create a card element for displaying a setting.
+  function settingCard(setting) {
+    const card = elementFromSettingTemplate(setting, "#setting-card-template");
+    card.dataset.id = setting.id
+    card.dataset.key = setting.key
+    card.querySelector(".js-setting-key").value = setting.key;
     if (setting.deleted) {
-      row.dataset.edited = true
-      row.dataset.deleted = true
-      row.querySelector(".js-setting-deleted").value = "1";
+      card.dataset.edited = true
+      card.dataset.deleted = true
+      card.querySelector(".js-setting-deleted").value = "1";
     }
     if (setting.key !== null && setting.key !== undefined) {
-      row.querySelector(".super-settings-key .js-value-placeholder").innerText = setting.key;
+      card.querySelector(".super-settings-card-key .js-value-placeholder").innerText = setting.key;
     }
     if (setting.value !== null && setting.value !== undefined) {
-      setSettingDisplayValue(row.querySelector(".super-settings-value .js-value-placeholder"), setting);
+      setSettingDisplayValue(card.querySelector(".super-settings-card-value .js-value-placeholder"), setting);
     }
     if (setting.value_type !== null && setting.value_type !== undefined) {
-      row.querySelector(".super-settings-value-type .js-value-placeholder").innerText = setting.value_type;
+      card.querySelector(".super-settings-card-type .js-value-placeholder").innerText = setting.value_type;
     }
     if (setting.description !== null && setting.description !== undefined) {
-      row.querySelector(".super-settings-description .js-value-placeholder").innerHTML = escapeHTML(setting.description).replaceAll("\n", "<br>");
+      card.querySelector(".super-settings-card-description .js-value-placeholder").innerHTML = escapeHTML(setting.description).replaceAll("\n", "<br>");
     }
     if (setting.updated_at !== null && setting.updated_at !== undefined) {
       const lastModified = new Date(Date.parse(setting.updated_at));
       const lastModifiedFormatter = new Intl.DateTimeFormat(navigator.language, {month: "short", day: "numeric",  year: "numeric"});
       const lastModifiedString = lastModifiedFormatter.format(lastModified);
-      const lastModifiedElement = row.querySelector(".super-settings-last-modified .js-value-placeholder")
+      const lastModifiedElement = card.querySelector(".super-settings-card-modified .js-value-placeholder")
       lastModifiedElement.innerText = lastModifiedString;
       lastModifiedElement.title = dateFormatter().format(lastModified);
     }
 
-    return row
+    return card
   }
 
   // Create an input element from a template depending on the value type.
@@ -186,23 +186,23 @@
     return element;
   }
 
-  // Create a table row with form elements for editing a setting.
-  function editSettingRow(setting) {
-    const row = elementFromSettingTemplate(setting, "#setting-row-edit-template");
-    row.dataset.id = setting.id
-    row.dataset.key = setting.key
+  // Create a card with form elements for editing a setting.
+  function editSettingCard(setting) {
+    const card = elementFromSettingTemplate(setting, "#setting-card-edit-template");
+    card.dataset.id = setting.id
+    card.dataset.key = setting.key
 
-    row.querySelector(".super-settings-key input").value = setting.key;
+    card.querySelector(".super-settings-card-key input").value = setting.key;
     if (setting.description) {
-      row.querySelector(".super-settings-description textarea").value = setting.description;
+      card.querySelector(".super-settings-card-description textarea").value = setting.description;
     }
 
     const valueInput = valueInputElement(setting);
-    const valuePlaceholder = row.querySelector(".super-settings-value .js-value-placeholder");
+    const valuePlaceholder = card.querySelector(".super-settings-card-value .js-value-placeholder");
     valuePlaceholder.innerHTML = "";
     valuePlaceholder.appendChild(valueInput);
 
-    const valueType = row.querySelector(".super-settings-value-type select");
+    const valueType = card.querySelector(".super-settings-card-type select");
     for (let i = 0; i < valueType.options.length; i++) {
       if (valueType.options[i].value === setting.value_type) {
         valueType.selectedIndex = i;
@@ -215,49 +215,52 @@
       setting.errors.forEach(function(error) {
         errorsHTML += `<div>${escapeHTML(error)}</div>`
       });
-      row.querySelector(".js-setting-errors").innerHTML = errorsHTML;
+      card.querySelector(".js-setting-errors").innerHTML = errorsHTML;
     }
 
     if (setting.new_record) {
-      row.dataset.newrecord = "true";
+      card.dataset.newrecord = "true";
     }
 
-    const timezone = row.querySelector(".timezone");
+    const timezone = card.querySelector(".timezone");
     if (timezone) {
       tzName = Intl.DateTimeFormat().resolvedOptions().timeZone;
       timezone.innerText = tzName;
     }
 
-    return row
+    return card
   }
 
-  // Create a table row with form elements for creating a new setting.
-  function newSettingRow(key) {
+  // Create a card with form elements for creating a new setting.
+  function newSettingCard(key, valueType) {
     if (!key) {
       key = "";
     }
+    if (!valueType) {
+      valueType = "string";
+    }
     const randomId = "new" + Math.floor((Math.random() * 0xFFFFFFFFFFFFFF)).toString(16);
-    const setting = {id: randomId, key: key, value: "", value_type: "string", new_record: true}
-    row = editSettingRow(setting);
-    return row;
+    const setting = {id: randomId, key: key, value: "", value_type: valueType, new_record: true}
+    card = editSettingCard(setting);
+    return card;
   }
 
-  // Add a setting table row the table of settings.
-  function addRowToTable(row) {
-    const existingRow = findSettingRow(row.dataset.id);
-    if (existingRow) {
-      existingRow.replaceWith(row);
+  // Add a setting card to the container of settings.
+  function addCardToContainer(card) {
+    const existingCard = findSettingCard(card.dataset.id);
+    if (existingCard) {
+      existingCard.replaceWith(card);
     } else {
-      document.querySelector("#settings-table tbody").prepend(row);
+      document.querySelector("#settings-container").prepend(card);
     }
-    bindSettingControlEvents(row);
+    bindSettingControlEvents(card);
     filterSettings(document.querySelector("#super-settings-filter").value);
-    row.scrollIntoView({block: "nearest"});
+    card.scrollIntoView({block: "nearest"});
     enableSaveButton();
-    return row;
+    return card;
   }
 
-  // Update the window location URL to reflect the current filter text.
+  // Update the filter URL and settings count display.
   function updateFilterURL(filter) {
     const queryParams = new URLSearchParams(window.location.search);
     if (filter === "") {
@@ -272,23 +275,28 @@
     }
   }
 
+  // Update the settings count display.
+  function updateSettingsCount(count) {
+    document.querySelector(".js-settings-count").textContent = `${count} ${count === 1 ? "Setting" : "Settings"}`;
+  }
+
   // Apply the given filter to only show settings that have a key, value, or description
   // that includes the filter text. Settings that are currently being edited will also be shown.
   function filterSettings(filterText) {
     const filters = [];
     filterText.split(" ").forEach(function(filter) {
       filter = filter.toUpperCase();
-      filters.push(function(tr) {
+      filters.push(function(card) {
         let text = "";
-        const settingKey = tr.querySelector(".super-settings-key");
+        const settingKey = card.querySelector(".super-settings-card-key");
         if (settingKey) {
           text += " " + settingKey.textContent.toUpperCase();
         }
-        const settingValue = tr.querySelector(".super-settings-value");
+        const settingValue = card.querySelector(".super-settings-card-value");
         if (settingValue) {
           text += " " + settingValue.textContent.toUpperCase();
         }
-        const settingDescription = tr.querySelector(".setting-description");
+        const settingDescription = card.querySelector(".super-settings-card-description");
         if (settingDescription) {
           text += " " + settingDescription.textContent.toUpperCase();
         }
@@ -296,19 +304,24 @@
       });
     });
 
-    document.querySelectorAll("#settings-table tbody tr").forEach(function(tr) {
+    let visibleCount = 0;
+    document.querySelectorAll("#settings-container .super-settings-card").forEach(function(card) {
       let matched = true;
-      if (!tr.dataset.edited) {
+      if (!card.dataset.edited) {
         filters.forEach(function(filter) {
-          matched = matched && filter(tr);
+          matched = matched && filter(card);
         });
       }
       if (matched) {
-        tr.style.display = "table-row";
+        card.style.display = "";
+        visibleCount++;
       } else {
-        tr.style.display = "none";
+        card.style.display = "none";
       }
     });
+
+    updateFilterURL(filterText);
+    updateSettingsCount(visibleCount);
   }
 
   // Programatically apply the filter again to keep it up to date with other changes.
@@ -323,12 +336,12 @@
 
   // Display validation errors on settings form.
   function showValidationErrors(errors) {
-    const table = document.querySelector("#settings-table");
+    const container = document.querySelector("#settings-container");
     Object.keys(errors).forEach(function(key) {
-      table.querySelectorAll(".super-settings-edit-row").forEach(function(row) {
-        const settingKey = row.querySelector(".js-setting-key");
+      container.querySelectorAll(".super-settings-card-edit").forEach(function(card) {
+        const settingKey = card.querySelector(".js-setting-key");
         if (settingKey && settingKey.value === key) {
-          const errorsElement = row.querySelector(".js-setting-errors");
+          const errorsElement = card.querySelector(".js-setting-errors");
           if (errorsElement) {
             errorsElement.innerText = errors[key].join("; ");
             errorsElement.style.display = "block";
@@ -379,15 +392,19 @@
   function renderHistoryTable(parent, payload) {
     parent.innerHTML = document.querySelector("#setting-history-table").innerHTML.trim();
     parent.querySelector(".super-settings-history-key").innerText = payload.key;
-    const tbody = parent.querySelector("tbody");
-    let rowsHTML = "";
+    const historyItems = parent.querySelector("#super-settings-history");
+    let itemsHTML = "";
     payload.histories.forEach(function(history) {
       const date = new Date(Date.parse(history.created_at));
       const dateString = dateFormatter().format(date);
       const value = (history.deleted ? '<em class="super-settings-text-danger">deleted</em>' : escapeHTML(history.value));
-      rowsHTML += `<tr><td class="super-settings-text-nowrap">${escapeHTML(dateString)}</td><td>${escapeHTML(history.changed_by)}</td><td>${value}</td></tr>`;
+      itemsHTML += `<div class="super-settings-history-item">
+        <div class="super-settings-history-time">${escapeHTML(dateString)}</div>
+        <div class="super-settings-history-user">${escapeHTML(history.changed_by)}</div>
+        <div class="super-settings-history-value">${value}</div>
+      </div>`;
     });
-    tbody.insertAdjacentHTML("beforeend", rowsHTML);
+    historyItems.insertAdjacentHTML("beforeend", itemsHTML);
 
     if (payload.previous_page_params || payload.next_page_params) {
       let paginationHTML = `<div class="super-settings-align-center">`;
@@ -398,7 +415,7 @@
         paginationHTML += `<div style="float:right;"><a href="#" class="js-show-history" title="Older" data-offset="${payload.next_page_params.offset}" data-limit="${payload.next_page_params.limit}" data-key="${payload.next_page_params.key}")>Older &#8594;</a></div>`;
       }
       paginationHTML += '<div style="clear:both;"></div>';
-      parent.querySelector("table").insertAdjacentHTML("afterend", paginationHTML);
+      parent.querySelector(".super-settings-history-container").insertAdjacentHTML("afterend", paginationHTML);
     }
     addListener(parent.querySelectorAll(".js-show-history"), "click", showHistoryModal);
   }
@@ -472,17 +489,17 @@
   }
 
   // Add a new setting.
-  function addSetting(key) {
-    const row = addRowToTable(newSettingRow(key));
-    row.querySelector(".super-settings-key input").focus();
+  function addSetting(key, valueType) {
+    const card = addCardToContainer(newSettingCard(key, valueType));
+    card.querySelector(".super-settings-card-key input").focus();
   }
 
   function editSetting(setting) {
-    const row = addRowToTable(editSettingRow(setting));
-    if (row.querySelector(".super-settings-value .js-date-input")) {
-      row.querySelector(".super-settings-value .js-date-input").focus();
+    const card = addCardToContainer(editSettingCard(setting));
+    if (card.querySelector(".super-settings-card-value .js-date-input")) {
+      card.querySelector(".super-settings-card-value .js-date-input").focus();
     } else {
-      row.querySelector(".super-settings-value .js-setting-value").focus();
+      card.querySelector(".super-settings-card-value .js-setting-value").focus();
     }
   }
 
@@ -499,9 +516,9 @@
     const content = document.querySelector(".super-settings-modal-content");
     let key = event.target.dataset.key;
     if (!key) {
-      const row = event.target.closest("tr");
-      if (row) {
-        const id = row.dataset.id;
+      const card = event.target.closest(".super-settings-card");
+      if (card) {
+        const id = card.dataset.id;
         const setting = findSetting(id);
         if (setting) {
           key = setting.key;
@@ -541,21 +558,21 @@
   // different input elements for the setting value.
   function changeSettingType(event) {
     event.preventDefault();
-    const row = event.target.closest("tr");
+    const card = event.target.closest(".super-settings-card");
     const valueType = event.target.options[event.target.selectedIndex].value;
     var setting = {
-      id: row.dataset.id,
-      key: row.querySelector(".super-settings-key input").value,
-      value: getSettingEditValue(row),
+      id: card.dataset.id,
+      key: card.querySelector(".super-settings-card-key input").value,
+      value: getSettingEditValue(card),
       value_type: valueType,
-      description: row.querySelector(".super-settings-description textarea").value,
-      new_record: row.dataset.newrecord
+      description: card.querySelector(".super-settings-card-description textarea").value,
+      new_record: card.dataset.newrecord
     }
-    const addedRow = addRowToTable(editSettingRow(setting));
-    if (addedRow.querySelector(".super-settings-value .js-date-input")) {
-      addedRow.querySelector(".super-settings-value .js-date-input").focus();
+    const addedCard = addCardToContainer(editSettingCard(setting));
+    if (addedCard.querySelector(".super-settings-card-value .js-date-input")) {
+      addedCard.querySelector(".super-settings-card-value .js-date-input").focus();
     } else {
-      addedRow.querySelector(".super-settings-value .js-setting-value").focus();
+      addedCard.querySelector(".super-settings-card-value .js-setting-value").focus();
     }
   }
 
@@ -580,7 +597,7 @@
   // Listener for the edit setting button.
   function editSettingListener(event) {
     event.preventDefault();
-    const id = event.target.closest("tr").dataset.id;
+    const id = event.target.closest(".super-settings-card").dataset.id;
     setting = findSetting(id);
     editSetting(setting);
   }
@@ -588,15 +605,19 @@
   // Listener for the restore setting button.
   function restoreSetting(event) {
     event.preventDefault();
-    const row = event.target.closest("tr");
-    const id = row.dataset.id;
+    const card = event.target.closest(".super-settings-card");
+    const id = card.dataset.id;
     const setting = findSetting(id);
     if (setting) {
-      const newRow = settingRow(setting);
-      bindSettingControlEvents(newRow);
-      row.replaceWith(newRow);
+      const newCard = settingCard(setting);
+      bindSettingControlEvents(newCard);
+      card.replaceWith(newCard);
     } else {
-      row.remove();
+      card.remove();
+      // Update the settings count after removing the card
+      setTimeout(function() {
+        filterSettings(document.querySelector("#super-settings-filter").value);
+      }, 0);
     }
     enableSaveButton();
   }
@@ -604,15 +625,19 @@
   // Listener for the remove setting button.
   function removeSetting(event) {
     event.preventDefault();
-    const settingRow = event.target.closest("tr");
-    if (settingRow.dataset["id"]) {
-      settingRow.querySelector("input.js-setting-deleted").value = "1";
-      settingRow.dataset.edited = true;
-      settingRow.dataset.deleted = true;
-      settingRow.querySelector(".js-remove-setting").style.display = "none";
-      settingRow.querySelector(".js-restore-setting").style.display = "inline-block";
+    const settingCard = event.target.closest(".super-settings-card");
+    if (settingCard.dataset["id"]) {
+      settingCard.querySelector("input.js-setting-deleted").value = "1";
+      settingCard.dataset.edited = true;
+      settingCard.dataset.deleted = true;
+      settingCard.querySelector(".js-remove-setting").style.display = "none";
+      settingCard.querySelector(".js-restore-setting").style.display = "inline-block";
     } else {
-      settingRow.remove();
+      settingCard.remove();
+      // Update the settings count after removing an unsaved setting
+      setTimeout(function() {
+        filterSettings(document.querySelector("#super-settings-filter").value);
+      }, 0);
     }
     enableSaveButton();
   }
@@ -622,28 +647,28 @@
     event.preventDefault();
     event.target.disabled = true;
     const settingsData = [];
-    document.querySelectorAll("#settings-table tbody tr[data-edited=true]").forEach(function(row) {
+    document.querySelectorAll("#settings-container .super-settings-card[data-edited=true]").forEach(function(card) {
       const data = {};
       settingsData.push(data);
 
-      data.key = row.querySelector(".js-setting-key").value;
-      if (data.key != row.dataset.key) {
-        data.key_was = row.dataset.key;
+      data.key = card.querySelector(".js-setting-key").value;
+      if (data.key != card.dataset.key) {
+        data.key_was = card.dataset.key;
       }
 
-      const deleted = row.querySelector(".js-setting-deleted");
+      const deleted = card.querySelector(".js-setting-deleted");
       if (deleted && deleted.value === "1") {
         data.deleted = true;
       } else {
-        if (row.querySelector(".js-setting-value")) {
-          data.value = getSettingEditValue(row);
+        if (card.querySelector(".js-setting-value")) {
+          data.value = getSettingEditValue(card);
         }
-        if (row.querySelector(".js-setting-value-type")) {
-          const valueTypeSelect = row.querySelector(".js-setting-value-type");
+        if (card.querySelector(".js-setting-value-type")) {
+          const valueTypeSelect = card.querySelector(".js-setting-value-type");
           data.value_type = valueTypeSelect.options[valueTypeSelect.selectedIndex].value;
         }
-        if (row.querySelector(".super-settings-description textarea")) {
-          data.description = row.querySelector(".super-settings-description textarea").value;
+        if (card.querySelector(".super-settings-card-description textarea")) {
+          data.description = card.querySelector(".super-settings-card-description textarea").value;
         }
       }
     });
@@ -680,16 +705,29 @@
     window.location = url;
   }
 
-  // Open the setting if the URL hash includes #edit=setting.
-  function fetchEditHash() {
+  // Parse URL hash looking for URL-style parameters like #edit=setting&type=string.
+  function fetchURLHash() {
     const hash = window.location.hash;
-    if (hash.startsWith("#edit=")) {
-      const name = hash.replace("#edit=", "");
-      window.location.hash = "";
-      return name;
-    } else {
-      return null;
+    if (hash.length <= 1) {
+      return {};
     }
+
+    // Remove the # and check if it looks like URL parameters
+    const hashParams = hash.substring(1);
+    if (!hashParams.includes('=')) {
+      return {};
+    }
+
+    const params = {};
+    hashParams.split('&').forEach(function(param) {
+      const [key, value] = param.split('=', 2);
+      if (key && value) {
+        params[decodeURIComponent(key)] = decodeURIComponent(value);
+      }
+    });
+
+    window.location.hash = "";
+    return params;
   }
 
   // Support integration into single page applications where OAuth2 access tokens are used.
@@ -739,20 +777,20 @@
     addListener(parent.querySelectorAll(".js-time-input"), "change", changeDateTime);
   }
 
-  // Initialize the table with all the settings plus any changes from a failed form submission.
-  function renderSettingsTable(settings) {
-    const tbody = document.querySelector("#settings-table tbody");
-    tbody.innerHTML = "";
+  // Initialize the container with all the settings plus any changes from a failed form submission.
+  function renderSettingsContainer(settings) {
+    const container = document.querySelector("#settings-container");
+    container.innerHTML = "";
     let count = settings.length;
 
     sortSettings(settings).forEach(function(setting) {
       const randomId = "setting" + Math.floor((Math.random() * 0xFFFFFFFFFFFFF)).toString(16);
       setting.id = (setting.id || randomId);
-      const row = settingRow(setting);
-      tbody.appendChild(row);
-      bindSettingControlEvents(row);
+      const card = settingCard(setting);
+      container.appendChild(card);
+      bindSettingControlEvents(card);
     });
-    document.querySelector(".js-settings-count").textContent = `${count} ${count === 1 ? "Setting" : "Settings"}`;
+    updateSettingsCount(count);
 
     const filter = document.querySelector("#super-settings-filter");
     if (filter) {
@@ -805,7 +843,7 @@
 
     selectSortElement(target, true);
 
-    renderSettingsTable(activeSettings);
+    renderSettingsContainer(activeSettings);
   }
 
   function selectSortElement(element, selected) {
@@ -838,17 +876,17 @@
     }
   }
 
-  function fetchActiveSettings(editKey) {
+  function fetchActiveSettings(hashParams) {
     SuperSettingsAPI.fetchSettings(function(settings_hash) {
       const settings = settings_hash["settings"];
       activeSettings = settings;
-      renderSettingsTable(settings);
-      if (editKey) {
-        const setting = findSettingByKey(editKey);
+      renderSettingsContainer(settings);
+      if (hashParams && hashParams.edit) {
+        const setting = findSettingByKey(hashParams.edit);
         if (setting) {
           editSetting(setting);
         } else {
-          addSetting(editKey);
+          addSetting(hashParams.edit, hashParams.type);
         }
       }
       enableSaveButton();
@@ -867,14 +905,14 @@
     addListener(document.querySelector("#super-settings-modal"), "click", closeModal);
     addListener(document.querySelectorAll(".super-settings-sort-control"), "click", setSortOrder);
 
-    const editKey = fetchEditHash();
+    const hashParams = fetchURLHash();
 
     const queryParams = new URLSearchParams(window.location.search);
     applyFilter(queryParams.get("filter"));
 
     selectSortElement(document.querySelector(".super-settings-sort-control[data-selected=true]"), true);
 
-    fetchActiveSettings(editKey);
+    fetchActiveSettings(hashParams);
 
     window.onbeforeunload = promptUnsavedChanges;
   })

data/lib/super_settings/application/style_vars.css.erb

@@ -17,7 +17,7 @@
     --history-key-color: royalblue;
     --table-header-bg-color: #fff;
     --table-border-color: #dee2e6;
-    --alt-row-color: rgba(0, 0, 0, .05);
+    --alt-row-color: rgba(0, 0, 0, .03);
     --form-control-color: #495057;
     --form-control-bg-color: #fff;
     --form-control-border-color: #ced4da;
@@ -27,8 +27,17 @@
     --modal-control-color: #000;
     --success-color: green;
     --danger-color: firebrick;
-    --muted-color: #666;
+    --muted-color: #999;
     --unselected-color: #666;
+    --btn-hover-color: #e9e9e9;
+    --card-bg-color: #fff;
+
+    /* Icon Colors */
+    --icon-info-color: #0d7ff0;
+    --icon-edit-color: #0c8024;
+    --icon-delete-color: #dc3545;
+    --icon-cancel-color: #dc3545;
+    --icon-disabled-color: #c0c0c0;
   }
 <% end %>
 
@@ -37,7 +46,7 @@
 <% end %>
 <% if color_scheme == :system || color_scheme == :dark %>
   .super-settings {
-    --edit-bg-color: #8dc875;
+    --edit-bg-color: #437330;
     --deleted-row-color: #e0b1b8;
     --deleted-row-bg-color: #7a3636;
     --history-key-color: #a7d6f4;
@@ -47,14 +56,23 @@
     --form-control-color: #eee;
     --form-control-bg-color: #666;
     --form-control-border-color: #555;
+    --btn-hover-color: #c0c0c0;
     --form-control-placeholder-color: #aaa;
     --modal-bg-color: #333;
     --modal-transparency: 0.75;
     --modal-control-color: #fff;
     --success-color: #00ff00;
     --danger-color: #ff0000;
-    --muted-color: #999;
+    --muted-color: #ccc;
     --unselected-color: #ccc;
+    --card-bg-color: #484848;
+
+    /* Icon Colors */
+    --icon-info-color: #71b0f0;
+    --icon-edit-color: #7dde90;
+    --icon-delete-color: #eb8791;
+    --icon-cancel-color: #eb8791;
+    --icon-disabled-color: #aaa;
   }
 <% end %>
 <% if color_scheme == :system %>