feat: переверстаны карточки, меньше рамок и заливок

- кнопки вынесены из области заливки
- у сообщений от клиента убраны рамки
- уменьшен размер шапки (убрана дата)

components/Message.vue

@@ -19,6 +19,8 @@
   margin-top: calc(1rem + 8px);
   margin-bottom: 15px;
   box-shadow: none !important;
+  border: none;
+  border-radius: 0;
   text-align: left;
   float: left;
   transition: none;
@@ -27,28 +29,39 @@
     margin-top: 0;
     .el-card__header {
       display: block;
-      background: none;
     }
   }
   .el-card__header {
     display: none;
-    padding: 2px 5px;
+    padding: 2px 10px;
     border: none;
-    background: #eee;
-    color: #999;
+
+    .el-button:hover {
+      background: none;
+      color: #fff;
+    }
   }
   .el-card__body {
+    padding: 0;
+  }
+
+  &__text {
     padding: 5px 10px;
+    border-radius: 20px;
   }
 
   &_my {
     float: right;
-    background: #FFE478;
-    border-radius: 20px 20px 0 20px;
+    .message__text {
+      background: #ffe478;
+      border-bottom-right-radius: 0;
+    }
   }
   &_answer {
-    background: #F0F2F5;
-    border-radius: 0 20px 20px 20px;
+    .message__text {
+      background: #f0f2f5;
+      border-top-left-radius: 0;
+    }
   }
   &_info {
     border-left: 3px solid #17a2b8;
@@ -77,7 +90,7 @@
 
   &__buttons {
     margin-top: 3px;
-    margin-left: -3px;
+    margin-left: 6px;
   }
 }
 </style>

components/MessageButton.vue

@@ -7,6 +7,12 @@
   margin: 3px !important;
   padding: 3px 6px !important;
   font-size: 10px;
+  border-color: #d8e2f5;
+  color: #666;
+  &:hover {
+    background: none;
+    color: #999;
+  }
 }
 </style>
 

store/index.js

@@ -132,7 +132,7 @@ export const mutations = {
       ...message,
       ...{
         id: window.performance.now(),
-        date: new Date().toLocaleString()
+        date: new Date().toTimeString().split(' ')[0]
       }
     };
     state.messages.push(message);
@@ -237,7 +237,7 @@ export const actions = {
       } else {
         commit(ADD_MESSAGE, {
           text: 'Не указан адрес навыка, пожалуйста, введите его так: use https://localhost:1234',
-          author: 'yandex-dialogs-client',
+          author: 'Клиент',
           class: 'warning'
         });
       }
@@ -253,7 +253,7 @@ export const actions = {
   },
 
   async [SET_WEBHOOK_URL]({ dispatch, commit, state }, url) {
-    if(!url || url == 'null'){
+    if (!url || url == 'null') {
       url = '';
     }
     commit(SET_WEBHOOK_URL, url);
@@ -264,7 +264,7 @@ export const actions = {
           'Используется навык по адресу ' +
           url +
           (state.isProxy ? ', через прокси' : ', без прокси'),
-        author: 'yandex-dialogs-client',
+        author: 'Клиент',
         class: 'info'
       });
     }
@@ -301,7 +301,7 @@ export const actions = {
           state.tests.length +
           '):',
         buttons: state.isBottomTests ? [] : buttons,
-        author: 'yandex-dialogs-client',
+        author: 'Клиент',
         class: 'info'
       });
     } catch (err) {
@@ -320,7 +320,7 @@ export const actions = {
     dispatch(SESSION_START);
     commit(ADD_MESSAGE, {
       text: 'Сессия закончена',
-      author: 'yandex-gialogs-client',
+      author: 'Клиент',
       class: 'info'
     });
   },
@@ -338,7 +338,7 @@ export const actions = {
       };
       commit(ADD_MESSAGE, {
         text: `Тест: ${dialog.name}`,
-        author: 'yandex-gialogs-client',
+        author: 'Клиент',
         class: 'info'
       });
 
@@ -372,7 +372,7 @@ export const actions = {
             commit(ADD_MESSAGE, {
               text: `Тест не пройден:\nотвечено: ${msg.text}\nожидалось: ${message}`,
               buttons: [rerunButton],
-              author: 'yandex-gialogs-client',
+              author: 'Клиент',
               class: 'error'
             });
             break; // end test
@@ -386,7 +386,7 @@ export const actions = {
             commit(ADD_MESSAGE, {
               text: `Тест не пройден: в объекте ` + JSON.stringify(message) + 'нет поля tests',
               buttons: [rerunButton],
-              author: 'yandex-gialogs-client',
+              author: 'Клиент',
               class: 'error'
             });
             break;
@@ -422,7 +422,7 @@ export const actions = {
             commit(ADD_MESSAGE, {
               text: 'Тест не пройден:\n' + messageErrors.join('\n'),
               buttons: [rerunButton],
-              author: 'yandex-gialogs-client',
+              author: 'Клиент',
               class: 'error'
             });
             break;
@@ -436,7 +436,7 @@ export const actions = {
         commit(ADD_MESSAGE, {
           text: `Тест пройден`,
           buttons: [rerunButton],
-          author: 'yandex-gialogs-client',
+          author: 'Клиент',
           class: 'success'
         });
       }
@@ -460,14 +460,14 @@ export const actions = {
 
         commit(ADD_MESSAGE, {
           text: 'Не все тесты пройдены :(',
-          author: 'yandex-gialogs-client',
+          author: 'Клиент',
           buttons: buttons,
           class: 'error'
         });
       } else {
         commit(ADD_MESSAGE, {
           text: 'Все тесты пройдены: ' + dialogs.length,
-          author: 'yandex-gialogs-client',
+          author: 'Клиент',
           class: 'success'
         });
       }