adjustment

lib/app/communications/contact.js

@@ -20,7 +20,7 @@ class Contact {
             input.maxLength = 200;
             input.autocomplete = 'off';
         });
-        const preferences = new Dropdown({ tabindex: tabIndex + 2 });
+        const preferences = new Dropdown({ tabIndex: tabIndex + 2 });
         preferences.source = [
             { value: '0', text: r('text', 'Text') },
             { value: '1', text: r('email', 'Email') },
@@ -40,7 +40,7 @@ class Contact {
             input.maxLength = 50;
             input.autocomplete = 'off';
         });
-        const checkOpt = createCheckbox({ tabindex: tabIndex + 5 });
+        const checkOpt = createCheckbox({ tabIndex: tabIndex + 5 });
         const contactNotes = createElement('textarea', txt => {
             txt.className = 'ui-text';
             txt.tabIndex = tabIndex + 6;
@@ -51,7 +51,7 @@ class Contact {
         if (this.#option.company) {
             buttons.push({
                 text: c == null ? r('addContactRecord', 'Add Contact Record') : r('editContactRecord', 'Edit Contact Record'),
-                // tabindex: tabIndex + 7,
+                // tabIndex: tabIndex + 7,
                 trigger: () => {
                     const item = this.prepare();
                     if (item == null) {
@@ -67,7 +67,7 @@ class Contact {
         buttons.push(
             {
                 text: r('workOrderOnly', 'Work Order Only'),
-                // tabindex: tabIndex + 8,
+                // tabIndex: tabIndex + 8,
                 trigger: () => {
                     const item = this.prepare();
                     if (item == null) {
@@ -82,7 +82,7 @@ class Contact {
             },
             {
                 text: r('cancel', 'Cancel'),
-                // tabindex: tabIndex + 9
+                // tabIndex: tabIndex + 9
             }
         );
         const popup = createPopup(

lib/app/communications/customer.js

@@ -441,7 +441,7 @@ class CustomerCommunication {
                                     div.style.alignItems = 'center';
                                     div.append(
                                         createElement('div', div => {
-                                            div.className = 'popup-move';
+                                            div.className = 'ui-popup-move';
                                             div.style.flex = '1 1 auto';
                                         },
                                             createElement('div', div => div.innerText = r('editContacts', 'Edit Contacts')),
@@ -797,7 +797,7 @@ class CustomerCommunication {
                         div.style.alignItems = 'center';
                         div.append(
                             createElement('div', div => {
-                                div.className = 'popup-move';
+                                div.className = 'ui-popup-move';
                                 div.style.flex = '1 1 auto';
                                 div.innerText = r('editContacts', 'Edit Contacts') + '\n' + r('followers', 'Followers');
                             }),

lib/app/communications/style.scss

@@ -1,9 +1,9 @@
 @import "../../ui/css/functions/func.scss";
 
-.popup-mask .wrapper-edit-method {
+.ui-popup-mask .wrapper-edit-method {
     width: 100%;
 
-    .checkbox-wrapper {
+    .ui-check-wrapper {
         padding: 0 28px;
     }
 }
@@ -65,30 +65,6 @@
         }
     }
 
-    .image-check-box {
-        user-select: none;
-
-        >input[type="checkbox"] {
-            display: none;
-
-            &:checked~.unchecked {
-                display: none;
-            }
-
-            &:checked~.checked {
-                display: unset;
-            }
-        }
-
-        >.unchecked {
-            opacity: .5;
-        }
-
-        >.checked {
-            display: none;
-        }
-    }
-
     .title-bar {
         flex: 0 0 auto;
         padding: 5px 0 5px 10px;
@@ -278,7 +254,7 @@
                 font-size: var(--font-size);
                 align-self: flex-start;
 
-                .tooltip-wrapper>.tooltip-content {
+                .ui-tooltip-wrapper>.ui-tooltip-content {
                     font-weight: normal;
                 }
             }
@@ -349,12 +325,12 @@
         }
     }
 
-    .popup-mask {
-        .grid {
+    .ui-popup-mask {
+        .ui-grid {
             height: 100%;
             min-height: 120px;
 
-            >.grid-body .grid-body-content>.grid-row>td {
+            >.ui-grid-body .ui-grid-body-content>.ui-grid-row>td {
                 vertical-align: top;
 
                 .col-icon {
@@ -403,4 +379,13 @@
             }
         }
     }
+}
+
+@media (prefers-color-scheme: dark) {
+    .comm {
+        --dark-fore-color: #000;
+        --dark-fore-opacity-color: rgba(0, 0, 0, .4);
+        --strong-color: #ccc;
+        --light-color: #333;
+    }
 }