Channels UI + read/unread + unique views + style polish

shine-UI/js/pages/contact-search-view.js

@@ -5,10 +5,10 @@ export const pageMeta = { id: 'contact-search-view', title: 'Поиск конт
 
 export function render({ navigate }) {
   const screen = document.createElement('section');
-  screen.className = 'stack';
+  screen.className = 'stack dm-screen dm-search-screen';
 
   const input = document.createElement('input');
-  input.className = 'input';
+  input.className = 'input dm-input';
   input.type = 'text';
   input.name = 'contact';
   input.placeholder = 'Введите начало логина';
@@ -16,14 +16,14 @@ export function render({ navigate }) {
   input.maxLength = 80;
 
   const resultsCard = document.createElement('section');
-  resultsCard.className = 'card stack';
+  resultsCard.className = 'card stack dm-dialog-card';
   resultsCard.hidden = true;
 
   const status = document.createElement('p');
   status.className = 'meta-muted';
 
   const resultsList = document.createElement('div');
-  resultsList.className = 'stack';
+  resultsList.className = 'stack dm-list';
 
   const renderResults = (matches, query) => {
     resultsList.innerHTML = '';
@@ -43,7 +43,7 @@ export function render({ navigate }) {
 
     matches.forEach((login) => {
       const row = document.createElement('article');
-      row.className = 'list-item';
+      row.className = 'list-item dm-dialog-card';
       row.innerHTML = `
         <div class="avatar">${(login[0] || '?').toUpperCase()}</div>
         <div>
@@ -60,7 +60,7 @@ export function render({ navigate }) {
   };
 
   const searchButton = document.createElement('button');
-  searchButton.className = 'primary-btn';
+  searchButton.className = 'primary-btn dm-send-btn';
   searchButton.type = 'button';
   searchButton.textContent = 'Поиск';
   searchButton.addEventListener('click', async () => {
@@ -84,7 +84,7 @@ export function render({ navigate }) {
   controls.append(searchButton);
 
   const formCard = document.createElement('section');
-  formCard.className = 'card stack';
+  formCard.className = 'card stack dm-dialog-card';
   formCard.append(input, controls);
 
   resultsCard.append(status, resultsList);