optimize style sheets, support tabIndex in popup

lib/app/communications/contact.js

@@ -10,14 +10,17 @@ class Contact {
     }
 
     async show(parent = document.body) {
+        const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
+
         const c = this.#option.contact;
         const contactName = createElement('input', input => {
             input.type = 'text';
-            input.tabIndex = 1;
+            input.className = 'ui-input';
+            input.tabIndex = tabIndex + 1;
             input.maxLength = 200;
             input.autocomplete = 'off';
         });
-        const preferences = new Dropdown({ tabindex: 2 });
+        const preferences = new Dropdown({ tabindex: tabIndex + 2 });
         preferences.source = [
             { value: '0', text: r('text', 'Text') },
             { value: '1', text: r('email', 'Email') },
@@ -25,23 +28,22 @@ class Contact {
         ];
         const contactEmail = createElement('input', input => {
             input.type = 'email';
-            input.tabIndex = 3;
+            input.className = 'ui-input';
+            input.tabIndex = tabIndex + 3;
             input.maxLength = 100;
             input.autocomplete = 'off';
         });
         const contactMobile = createElement('input', input => {
             input.type = 'tel';
-            input.tabIndex = 4;
+            input.className = 'ui-input';
+            input.tabIndex = tabIndex + 4;
             input.maxLength = 50;
             input.autocomplete = 'off';
         });
-        const checkOpt = createCheckbox({
-            customerAttributes: {
-                tabindex: 5
-            }
-        });
+        const checkOpt = createCheckbox({ tabindex: tabIndex + 5 });
         const contactNotes = createElement('textarea', txt => {
-            txt.tabIndex = 6;
+            txt.className = 'ui-text';
+            txt.tabIndex = tabIndex + 6;
             txt.maxLength = 2000;
             txt.style.height = '100px';
         });
@@ -49,6 +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,
                 trigger: () => {
                     const item = this.prepare();
                     if (item == null) {
@@ -64,6 +67,7 @@ class Contact {
         buttons.push(
             {
                 text: r('workOrderOnly', 'Work Order Only'),
+                // tabindex: tabIndex + 8,
                 trigger: () => {
                     const item = this.prepare();
                     if (item == null) {
@@ -76,7 +80,10 @@ class Contact {
                     }
                 }
             },
-            { text: r('cancel', 'Cancel') }
+            {
+                text: r('cancel', 'Cancel'),
+                // tabindex: tabIndex + 9
+            }
         );
         const popup = createPopup(
             c == null ? r('addContact', 'Add Contact') : r('editContact', 'Edit Contact'),

lib/app/communications/customer.js

@@ -378,7 +378,10 @@ class CustomerCommunication {
                         }
                     },
                         createElement('span', span => span.innerText = r('nameColon', 'Name:')),
-                        createElement('input', 'ui-input')
+                        createElement('input', input => {
+                            input.type = 'text';
+                            input.className = 'ui-input';
+                        })
                     ),
                     createElement('div', 'prompt-count'),
                     createElement('button', button => {

lib/app/communications/follower.js

@@ -10,12 +10,16 @@ class Follower {
     }
 
     async show(parent = document.body) {
+        const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
+
         const gridContainer = createElement('div', 'follower-grid');
         const popup = createPopup(
             r('addFollowers', 'Add Followers'),
             createElement('div', 'follower-wrapper',
                 createElement('div', div => div.innerText = r('whoWantReceiveCustomerNotification', 'Who do you want to receive customer notifications?')),
                 createElement('input', search => {
+                    search.type = 'text';
+                    search.tabIndex = tabIndex + 3;
                     search.className = 'ui-input follower-search';
                     search.addEventListener('input', () => {
                         const key = search.value;

lib/app/communications/style.scss

@@ -1,3 +1,5 @@
+@import "../../ui/css/functions/func.scss";
+
 .popup-mask .wrapper-edit-method {
     width: 100%;
 
@@ -32,10 +34,11 @@
         fill: var(--dark-fore-color);
         border-radius: 15px;
         border: none;
-        outline: none;
         transition: background-color .2s;
         user-select: none;
 
+        @include outline();
+
         &:hover {
             background-color: var(--dark-fore-opacity-color);
 
@@ -218,10 +221,7 @@
             font-size: var(--font-smaller-size);
             font-family: var(--font-family);
 
-            &:focus,
-            &:focus-visible {
-                outline: none;
-            }
+            @include outline();
         }
 
         >div {