Make dialog and sprites dark-mode compatible

Author: double-beep

sox.css

@@ -34,6 +34,8 @@
 
 #sox-settings-dialog #search-container {
     min-height: 0;
+    width: 570px;
+    left: 10px;
 }
 
 #sox-settings-dialog #search-container .sox-sprite-search {
@@ -53,8 +55,7 @@
 }
 
 #sox-settings-dialog #search-container #search {
-    width: 490px;
-    text-indent: 20px;
+    max-width: 90%;
 }
 
 #sox-settings-dialog-features {
@@ -69,7 +70,7 @@
 }
 
 #sox-settings-dialog-features .modal-content div:hover {
-    background-color: #f7f8f8;
+    background-color: var(--black-075);
 }
 
 #sox-settings-dialog-features .modal-content label>input {
@@ -88,7 +89,7 @@
 
 #sox-settings-dialog-actions .action {
     float: right;
-    padding: 11px;
+    padding: 13px 11px;
 }
 
 #sox-settings-dialog .sox-new-version-item {
@@ -108,10 +109,6 @@
     height: 24px !important;
 }
 
-.sox-settings-button:hover {
-    color: #999;
-}
-
 #sox-settings-dialog-check-toggle>i {
     padding: 14px 0;
 }
@@ -127,7 +124,7 @@
 
 .sox-feature-info,
 .sox-feature-settings {
-    background-color: whitesmoke;
+    background-color: var(--black-025);
     border-radius: 9px;
     margin-left: 20px;
     padding: 8px;
@@ -169,6 +166,7 @@
     padding: 10px;
     border-radius: 9px;
     background-color: lightgrey;
+    color: #3c4146; /* dark mode compatibility */
     cursor: pointer;
 }
 

sox.dialog.html

@@ -7,9 +7,9 @@ <h3>
     <div class="header">
         <h3>search</h3>
     </div>
-    <div class="modal-content" id="search-container">
-        <input type="text" id="search" placeholder="looking for a specific feature?">
-        <svg role="img" title="delete" class="sox-sprite sox-sprite-search"> <use xlink:href="#sox_search"> </use> </svg>
+    <div class="grid--cell ps-relative fl1 modal-content" id="search-container">
+        <input class="s-input s-input__search js-search-field" type="text" placeholder="looking for a feature?" id="search">
+        <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon s-input-icon s-input-icon__search iconSearch" aria-hidden="true" viewBox="0 0 18 18" width="18" height="18"><path d="M 18 16.5 l -5.14 -5.18 h -0.35 a 7 7 0 1 0 -1.19 1.19 v 0.35 L 16.5 18 l 1.5 -1.5 Z M 12 7 A 5 5 0 1 1 2 7 a 5 5 0 0 1 10 0 Z" /></svg>
     </div>
     <div id="sox-settings-dialog-features">
         <div id="sox-settings-dialog-features-packs">
@@ -25,10 +25,10 @@ <h3>Feature Packs</h3>
         </div>
     </div>
     <div id="sox-settings-dialog-actions">
-        <input id="sox-settings-dialog-save" type="submit" value="Save Changes">
-        <a class="action" id="sox-settings-dialog-reset" title="reset SOX (deletes everything, including your settings and access token)">Reset</a>
-        <a class="action" id="sox-settings-dialog-report" title="report issue on Github" target="_blank" href="https://github.com/soscripted/sox/issues/new">Report Issue</a>
-        <a class="action" id="sox-settings-dialog-debugging">Enable Debugging</a>
+        <input class="s-btn s-btn__primary s-btn__sm" id="sox-settings-dialog-save" type="submit" value="Save Changes">
+        <a class="action s-btn s-btn__secondary s-btn__sm" id="sox-settings-dialog-reset" title="reset SOX (deletes everything, including your settings and access token)">Reset</a>
+        <a class="action s-btn s-btn__secondary s-btn__sm" id="sox-settings-dialog-report" title="report issue on Github" target="_blank" href="https://github.com/soscripted/sox/issues/new">Report Issue</a>
+        <a class="action s-btn s-btn__secondary s-btn__sm" id="sox-settings-dialog-debugging">Enable Debugging</a>
         <a class="action" id="sox-settings-dialog-access-token" title="request a new access token">
             <svg role="img" class="sox-sprite sox-sprite-key"> <use xlink:href="#sox_key"> </use> </svg>
         </a>

sox.dialog.js

@@ -76,6 +76,7 @@
         const $label = $('<label/>');
         const $input = $('<input/>', {
           id: name,
+          class: 's-checkbox',
           type: 'checkbox',
         }).prop('disabled', blockFeatureSelection);
 
@@ -89,7 +90,7 @@
         if (featureSettings) {
           const $settingsDiv = $('<div/>', {
             id: 'feature-settings-' + name,
-            'class': 'sox-feature-settings',
+            class: 'sox-feature-settings',
             style: 'display: none; margin-top: 5px;',
           });
 
@@ -110,19 +111,20 @@
           for (let i = 0; i < featureSettings.length; i++) {
             const currentSetting = featureSettings[i];
             $settingsDiv
-              .append(currentSetting.desc)
-              .append('<br>')
               .append(sox.helpers.newElement(currentSetting.type, { //use newElement helper so the type can be things like 'checkbox' or 'radio'
                 id: currentSetting.id,
-                'class': 'featureSetting',
+                'class': currentSetting.type === 'textarea' ? 'featureSetting s-input' : 'featureSetting s-checkbox',
+                'style': 'margin-right: 5px',
                 'checked': (currentSetting.type === 'checkbox' ? JSON.parse(optionalSettings)[currentSetting.id] : false),
                 value: (optionalSettings === -1 ? '' : JSON.parse(optionalSettings)[currentSetting.id]),
               }))
+              .append(currentSetting.desc)
               .append('<br>');
           }
 
           const $saveFeatureSettings = $('<a/>', {
             id: 'saveSettings-' + name,
+            class: 'action s-btn s-btn__secondary s-btn__sm',
             text: 'Save Settings',
             click: function(e) {
               e.preventDefault(); //don't uncheck the checkbox