Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -119,11 +119,7 @@
   #chatContextMenuTrigger="matMenuTrigger"
   [matMenuTriggerFor]="chatContextMenu"
 ></div>
-<mat-menu
-  #chatContextMenu="matMenu"
-  [hasBackdrop]="false"
-  (ucapClickOutside)="chatContextMenuTrigger.closeMenu()"
->
+<mat-menu #chatContextMenu="matMenu">
   <ng-template matMenuContent let-roomInfo="roomInfo">
     <button mat-menu-item (click)="onClickContextMenu('SELECT_ROOM', roomInfo)">
       {{ 'chat.openRoom' | translate }}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html

@@ -7,7 +7,6 @@
         #groupMenuTrigger="matMenuTrigger"
         [matMenuTriggerFor]="groupMenu"
         aria-label="group menu"
-        (ucapClickOutside)="groupMenuTrigger.closeMenu()"
       >
         <mat-icon>more_vert</mat-icon>
       </button>
@@ -71,12 +70,7 @@
   </ucap-profile-user-list-item>
 </div>
 
-<mat-menu
-  #groupMenu="matMenu"
-  xPosition="after"
-  yPosition="below"
-  [hasBackdrop]="false"
->
+<mat-menu #groupMenu="matMenu" xPosition="after" yPosition="below">
   <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
     <!--<mat-icon>group_add</mat-icon>-->
     <svg
@@ -148,11 +142,7 @@
   #profileContextMenuTrigger="matMenuTrigger"
   [matMenuTriggerFor]="profileContextMenu"
 ></div>
-<mat-menu
-  #profileContextMenu="matMenu"
-  [hasBackdrop]="false"
-  (ucapClickOutside)="profileContextMenuTrigger.closeMenu()"
->
+<mat-menu #profileContextMenu="matMenu">
   <ng-template
     matMenuContent
     let-userInfo="userInfo"
@@ -242,11 +232,7 @@
   #groupContextMenuTrigger="matMenuTrigger"
   [matMenuTriggerFor]="groupContextMenu"
 ></div>
-<mat-menu
-  #groupContextMenu="matMenu"
-  [hasBackdrop]="false"
-  (ucapClickOutside)="groupContextMenuTrigger.closeMenu()"
->
+<mat-menu #groupContextMenu="matMenu">
   <ng-template matMenuContent let-group="group">
     <button
       mat-menu-item

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html

@@ -20,7 +20,7 @@
     ></ucap-organization-tree>
   </div>
   <div class="select-list">
-    <dl class="select-dept text-accent-color">
+    <dl class="select-dept">
       <dt>
         <ng-container *ngIf="!isShowSearch">
           <ng-container
@@ -80,13 +80,7 @@
           (openProfile)="onClickOpenProfile($event)"
           (click)="onToggleUser(userInfo)"
           (contextmenu)="onContextMenuOrgUser($event, userInfo)"
-          [matTooltip]="
-            userInfo.companyName +
-            ' / ' +
-            userInfo.lineNumber +
-            ' / ' +
-            userInfo.hpNumber
-          "
+          [matTooltip]="getTooltip(userInfo)"
           matTooltipPosition="after"
         >
         </ucap-profile-user-list-item>
@@ -110,13 +104,7 @@
           (openProfile)="onClickOpenProfile($event)"
           (click)="onToggleUser(userInfo)"
           (contextmenu)="onContextMenuOrgUser($event, userInfo)"
-          [matTooltip]="
-            userInfo.companyName +
-            ' / ' +
-            userInfo.lineNumber +
-            ' / ' +
-            userInfo.hpNumber
-          "
+          [matTooltip]="getTooltip(userInfo)"
           matTooltipPosition="after"
         >
         </ucap-profile-user-list-item>
@@ -177,11 +165,7 @@
   #orgUserContextMenuTrigger="matMenuTrigger"
   [matMenuTriggerFor]="orgUserContextMenu"
 ></div>
-<mat-menu
-  #orgUserContextMenu="matMenu"
-  [hasBackdrop]="false"
-  (ucapClickOutside)="orgUserContextMenuTrigger.closeMenu()"
->
+<mat-menu #orgUserContextMenu="matMenu">
   <ng-template matMenuContent let-userInfo="userInfo">
     <button
       mat-menu-item

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts

@@ -64,6 +64,7 @@ import {
   SelectedUserListDialogData
 } from '../../dialogs/organization/selected-user-list.dialog.component';
 import { TranslateService } from '@ngx-translate/core';
+import { StringFormatterPhonePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/string.pipe';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-organization',
@@ -604,4 +605,12 @@ export class OrganizationComponent
         break;
     }
   }
+
+  getTooltip(userInfo: UserInfoSS): string {
+    return `${
+      userInfo.companyName
+    } / ${new StringFormatterPhonePipe().transform(
+      userInfo.lineNumber
+    )} / ${new StringFormatterPhonePipe().transform(userInfo.hpNumber)}`;
+  }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -41,7 +41,7 @@
         <button
           mat-icon-button
           aria-label="chats button"
-          class="bg-warn-color chat-timer"
+          class="responsive-chats-button chat-timer"
           *ngIf="!!roomInfo && roomInfo.isTimeRoom"
         >
           <mat-icon>timer</mat-icon>
@@ -120,12 +120,11 @@
           #chatMenuTrigger="matMenuTrigger"
           [matMenuTriggerFor]="contactMenu"
           aria-label="more"
-          (ucapClickOutside)="chatMenuTrigger.closeMenu()"
         >
           <mat-icon>more_vert</mat-icon>
         </button>
 
-        <mat-menu #contactMenu="matMenu" [hasBackdrop]="false">
+        <mat-menu #contactMenu="matMenu">
           <button
             mat-menu-item
             *ngIf="getShowContextMenu('OPEN_ALBUM_LIST')"
@@ -322,8 +321,6 @@
 ></div>
 <mat-menu
   #messageContextMenu="matMenu"
-  [hasBackdrop]="false"
-  (ucapClickOutside)="messageContextMenuTrigger.closeMenu()"
 >
   <ng-template matMenuContent let-message="message" let-clicktype="clicktype">
     <ng-container *ngIf="!isRecalledMessage(message.type)">

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss

@@ -46,6 +46,7 @@
       .responsive-chats-button {
         display: none;
         line-height: normal;
+        cursor: unset;
         &:last-child {
           display: block;
           padding: 0;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -103,6 +103,7 @@
     .ps-content {
       display: flex;
       flex-flow: wrap;
+      height: auto;
     }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html

@@ -32,38 +32,40 @@
       </div>
     </ng-container>
     <ng-container *ngIf="selectedFile">
-      <div class="select-flie">
-        <div
-          [ngClass]="[
-            'mime-icon',
-            'light',
-            'ico-' + getExtention(selectedFile.info.name)
-          ]"
-        >
-          <div class="ico"></div>
+      <div class="select-filed">
+        <div class="select-flie">
+          <div
+            [ngClass]="[
+              'mime-icon',
+              'light',
+              'ico-' + getExtention(selectedFile.info.name)
+            ]"
+          >
+            <div class="ico"></div>
+          </div>
+          <ul>
+            <li class="name">{{ selectedFile.info.name }}</li>
+            <li>
+              <span class="text-accent-color"
+                >{{ 'common.file.size' | translate }} :</span
+              >
+              {{ selectedFile.info.size | ucapBytes }}
+            </li>
+            <li>
+              <span class="text-accent-color"
+                >{{ 'chat.validityPeriod' | translate }} :</span
+              >
+              {{ selectedFile.info.sendDate | ucapDate: 'YYYY.MM.DD' }}
+              <span *ngIf="loginRes.fileRetentionPeriod > 0">
+                ~
+                {{
+                  selectedFile.info.sendDate
+                    | ucapDate: 'YYYY.MM.DD':fileRetentionPeriodOptions
+                }}
+              </span>
+            </li>
+          </ul>
         </div>
-        <ul>
-          <li class="name">{{ selectedFile.info.name }}</li>
-          <li>
-            <span class="text-accent-color"
-              >{{ 'common.file.size' | translate }} :</span
-            >
-            {{ selectedFile.info.size | ucapBytes }}
-          </li>
-          <li>
-            <span class="text-accent-color"
-              >{{ 'chat.validityPeriod' | translate }} :</span
-            >
-            {{ selectedFile.info.sendDate | ucapDate: 'YYYY.MM.DD' }}
-            <span *ngIf="loginRes.fileRetentionPeriod > 0">
-              ~
-              {{
-                selectedFile.info.sendDate
-                  | ucapDate: 'YYYY.MM.DD':fileRetentionPeriodOptions
-              }}
-            </span>
-          </li>
-        </ul>
       </div>
       <div class="select-file-option">
         <span
@@ -195,7 +197,7 @@
             <div class="file-name">
               {{ element.info.name }}
             </div>
-            <div class="download-period text-accent-color">
+            <div class="download-period text-accent-darkest">
               <!--{{ element.info.size | ucapBytes }}-->
               {{ element.info.sendDate | ucapDate: 'YYYY.MM.DD' }}
               <span *ngIf="loginRes.fileRetentionPeriod > 0">
@@ -221,9 +223,8 @@
           <th mat-header-cell *matHeaderCellDef mat-sort-header>
             {{ 'chat.sentDate' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element">
-            <!--{{ element.info.sendDate | ucapDate: 'YYYY.MM.DD' }}-->
-            {{ element.info.size | ucapBytes }}
+          <td mat-cell *matCellDef="let element" class="file-size">
+            <span>{{ element.info.size | ucapBytes }}</span>
           </td>
         </ng-container>
         <tr

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss

@@ -30,18 +30,24 @@
   margin: 10px;
   border: 1px solid #cccccc;
   border-radius: 4px;
-  .select-flie {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    color: #212121;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px dotted #dddddd;
-    ul {
-      padding: 0;
-      .name {
-        font-weight: 600;
+  .select-filed {
+    height: calc(100% - 50px);
+    overflow-y: auto;
+    .select-flie {
+      display: flex;
+      flex-flow: row;
+      align-items: flex-start;
+      color: #212121;
+      padding: 10px;
+      border-bottom: 1px dotted #dddddd;
+      ul {
+        padding: 0;
+        .name {
+          font-weight: 600;
+          word-wrap: break-word;
+          white-space: pre-wrap;
+          word-break: break-word;
+        }
       }
     }
   }
@@ -88,16 +94,19 @@
   width: 100%;
   position: relative;
   th.infos {
-    padding: 10px;
+    padding: 16px;
   }
   tr.mat-row {
     height: 70px;
+    .cdk-column-check {
+      width: 40px;
+    }
     .file-info {
       padding: 16px;
       display: grid;
       height: 70px;
       .file-name {
-        font-weight: 600;
+        font-weight: 500;
         margin-bottom: 2px;
         width: 100%;
         @include ellipsis(1);
@@ -116,12 +125,24 @@
         }
       }
     }
+    .file-size {
+      span {
+        width: 100px;
+        text-align: right;
+        @include ellipsis(1);
+      }
+    }
   }
 }
 .table-box {
   height: calc(100% - 440px);
   overflow-y: auto;
+  th {
+    font-size: 1.1em;
+    color: #333333;
+  }
 }
+
 .mat-paginator-container {
   display: flex;
   flex-flow: column;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html

@@ -32,11 +32,7 @@
   #roomUserContextMenuTrigger="matMenuTrigger"
   [matMenuTriggerFor]="roomUserContextMenu"
 ></div>
-<mat-menu
-  #roomUserContextMenu="matMenu"
-  [hasBackdrop]="false"
-  (ucapClickOutside)="roomUserContextMenuTrigger.closeMenu()"
->
+<mat-menu #roomUserContextMenu="matMenu">
   <ng-template matMenuContent let-buddy="buddy">
     <button mat-menu-item (click)="onClickContextMenu('FORCING_EXIT', buddy)">
       {{ 'chat.ejectFromRoom' | translate }}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html

@@ -79,7 +79,6 @@
               class="message-menu"
               #messageMenuTrigger="matMenuTrigger"
               [matMenuTriggerFor]="messageMenu"
-              (ucapClickOutside)="messageMenuTrigger.closeMenu()"
             >
               <mat-icon>more_vert</mat-icon>
             </button>
@@ -242,7 +241,6 @@
   #messageMenu="matMenu"
   xPosition="after"
   yPosition="below"
-  [hasBackdrop]="false"
 >
   <button
     mat-menu-item

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts

@@ -31,7 +31,7 @@ import {
   RetrieveResourceFileRequest,
   CancelRequest
 } from '@ucap-webmessenger/api-message';
-import { DeviceType, MimeUtil, FileUtil } from '@ucap-webmessenger/core';
+import { MimeUtil, FileUtil } from '@ucap-webmessenger/core';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { NGXLogger } from 'ngx-logger';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
@@ -589,12 +589,23 @@ export class MessageDetailDialogComponent implements OnInit {
             take(1),
             map(async res => {
               if (res.responseCode === MessageStatusCode.Success) {
-                this.receivers.forEach(user => {
-                  if (cancelUserSeqs.indexOf(user.userSeq) >= 0) {
-                    user.cancelYn = true;
-                    user.readYn = false;
-                  }
-                });
+                this.receivers = [
+                  ...this.receivers.map(user => {
+                    if (cancelUserSeqs.indexOf(user.userSeq) >= 0) {
+                      return {
+                        userSeq: user.userSeq,
+                        userName: user.userName,
+                        cancelYn: true,
+                        readDate: user.readDate,
+                        readYn: false
+                      };
+                    }
+
+                    return user;
+                  })
+                ];
+
+                this.unReadUsers.deselectAll();
                 this.selectedUnreadUserSeqs = [];
                 this.rightDrawer.close();
               } else {

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -121,7 +121,7 @@
         *ngIf="updateInfo$ | async as updateInfo"
         mat-icon-button
         class="button app-layout-native-title-bar-setting"
-        matTooltip="업데이트"
+        matTooltip="{{ 'update.label' | translate }}"
         (click)="onClickUpdate()"
       >
         <svg
@@ -134,7 +134,7 @@
           stroke-width="1.5"
           stroke-linecap="butt"
           stroke-linejoin="round"
-          alt="업데이트"
+          alt="Update"
         >
           <circle cx="12" cy="12" r="3"></circle>
           <path

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss

@@ -253,20 +253,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
   }
 }
 
-/*.sig {
-  position: fixed;
-  bottom: 8px;
-  right: 8px;
-  text-decoration: none;
-  font-size: 12px;
-  font-weight: 100;
-  font-family: sans-serif;
-  color: rgba(255, 255, 255, 0.4);
-  letter-spacing: 2px;
-  z-index: 9999;
-}*/
-
-.login-form-box {
+::ng-deep .login-form-box {
   position: absolute;
   height: 70vh;
   top: 15%;
@@ -274,6 +261,16 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
   display: flex;
   justify-content: flex-end;
   z-index: 100;
+  .mat-form-field {
+    &:last-child {
+      margin-top: 10px;
+    }
+    .mat-form-field-infix {
+      input {
+        line-height: 1em;
+      }
+    }
+  }
 }
 
 @media all and (max-width: 1400px) {

projects/ucap-webmessenger-app/src/app/services/notification.service.ts

@@ -112,6 +112,7 @@ import { Dictionary } from '@ngrx/entity';
 import { MessageType } from '@ucap-webmessenger/api-message';
 import { LogoutInfo, KEY_LOGOUT_INFO } from '@app/types';
 import { TranslateService } from '@ngx-translate/core';
+import { deleteMessageSuccess } from '@app/store/messenger/message';
 
 @Injectable()
 export class AppNotificationService {
@@ -657,13 +658,19 @@ export class AppNotificationService {
                   noti
                 );
 
-                console.log('TODO :: remove state logic');
-                // // Receive Message List refresh..
-                // this.store.dispatch(
-                //   MessageStore.retrieveMessage({
-                //     messageType: MessageType.Receive
-                //   })
-                // );
+                // Remove one Receive Message
+                if (!!noti && !!noti.keyId) {
+                  this.store.dispatch(
+                    deleteMessageSuccess({
+                      messageType: MessageType.Receive,
+                      msgList: [
+                        {
+                          msgId: Number(noti.keyId)
+                        }
+                      ]
+                    })
+                  );
+                }
               }
               break;
 

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -305,6 +305,9 @@
       "haveNoPermission": "You do not have SMS permissions."
     }
   },
+  "update": {
+    "label": "Update"
+  },
   "notification": {
     "titleChatEventArrived": "A message of chat has arrived.",
     "titleMessageArrived": "A message has arrived."

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -305,6 +305,9 @@
       "haveNoPermission": "SMS 사용 권한이 없습니다."
     }
   },
+  "update": {
+    "label": "업데이트"
+  },
   "notification": {
     "titleChatEventArrived": "메세지가 도착했습니다.",
     "titleMessageArrived": "쪽지가 도착했습니다."

projects/ucap-webmessenger-app/src/environments/environment.daesang.dev.ts

@@ -127,7 +127,7 @@ export const environment: Environment = {
     hostConfig: {
       protocol: 'http',
       domain: '15.164.139.105',
-      port: 9098
+      port: 9097
     },
     urls: messageApiUrls
   },

projects/ucap-webmessenger-daesang/src/lib/protocols/data-user.ts

@@ -68,12 +68,12 @@ export const decodeDataUser: ProtocolDecoder<DataUserResponse> = (
       employeeType: info[28] as EmployeeType,
 
       // [daesang]
-      companyName: info[29],
-      responsibilities: info[30],
+      companyName: !!info[29] ? info[29].trim() : '',
+      responsibilities: !!info[30] ? info[30].trim() : '',
       workstatus: info[31] as WorkStatusType,
-      job: info[32],
-      customerInfo: info[33],
-      workplace: info[34]
+      job: !!info[32] ? info[32].trim() : '',
+      customerInfo: !!info[33] ? info[33].trim() : '',
+      workplace: !!info[34] ? info[34].trim() : ''
     };
   }
   return decodeProtocolMessage(message, {

projects/ucap-webmessenger-protocol-query/src/lib/protocols/dept-user.ts

@@ -117,12 +117,12 @@ export const decodeDeptUserData: ProtocolDecoder<DeptUserData> = (
       employeeType: info[28] as EmployeeType,
 
       // [daesang]
-      companyName: info[29],
-      responsibilities: info[30],
+      companyName: !!info[29] ? info[29].trim() : '',
+      responsibilities: !!info[30] ? info[30].trim() : '',
       workstatus: info[31] as WorkStatusType,
-      job: info[32],
-      customerInfo: info[33],
-      workplace: info[34]
+      job: !!info[32] ? info[32].trim() : '',
+      customerInfo: !!info[33] ? info[33].trim() : '',
+      workplace: !!info[34] ? info[34].trim() : ''
     });
   });
   return decodeProtocolMessage(message, {

projects/ucap-webmessenger-protocol-umg/src/lib/protocols/del-noti.ts

@@ -12,6 +12,8 @@ export interface UmgDeleteNotiNotification extends ProtocolNotification {
   senderSeq: number;
   /** { 송신자정보 } */
   senderInfo: SenderInfo;
+  /** keyID(s) */
+  keyId: string;
 }
 
 export const decodeUmgDeleteNotiNotification: ProtocolDecoder<UmgDeleteNotiNotification> = (
@@ -31,6 +33,8 @@ export const decodeUmgDeleteNotiNotification: ProtocolDecoder<UmgDeleteNotiNotif
     /** 송신자SEQ(n) */
     senderSeq: Number(message.bodyList[0]),
     /** { 송신자정보 } */
-    senderInfo
+    senderInfo,
+    /** keyID(s) */
+    keyId: message.bodyList[2]
   } as UmgDeleteNotiNotification);
 };

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss

@@ -15,7 +15,7 @@
   }
 
   .mat-title {
-    margin: 10px 0 50px 0;
+    margin: 10px 0 40px 0;
     text-indent: -10000000px;
     width: 160px;
     height: 160px;

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -59,7 +59,7 @@
     </mat-form-field>
 
     <button
-      class="send-message-button bg-primary-darkest"
+      class="send-message-button bg-accent-darkest"
       mat-icon-button
       type="submit"
       aria-label="Send message"

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss

@@ -26,7 +26,9 @@
   }
 }
 textarea[name='message'] {
-  min-height: 30px;
+  min-height: 2em;
+  line-height: 1.2em;
+  font-size: 0.9em;
 }
 .mat-form-field-underline {
   background-color: none;

projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html

@@ -170,11 +170,11 @@
         <dt>{{ 'profile.fieldworkplace' | translate }}</dt>
         <dd>{{ userInfo.workplace | ucapStringEmptycheck }}</dd>
       </li>
-      <li>
+      <li *ngIf="userInfo.job">
         <dt class="division">{{ 'profile.fieldJob' | translate }}</dt>
         <dd>{{ userInfo.job | ucapStringEmptycheck }}</dd>
       </li>
-      <li>
+      <li *ngIf="userInfo.customerInfo">
         <dt>{{ 'profile.fieldCustomerInfo' | translate }}</dt>
         <dd>{{ userInfo.customerInfo | ucapStringEmptycheck }}</dd>
       </li>

projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html

@@ -17,13 +17,23 @@
       (click)="onClickSendTranslationMessage(translationPreviewInfo)"
     >
       <!--{{ 'chat.send' | translate }}-->
-      <svg _ngcontent-smu-c52="" fill="none" height="20" stroke="currentColor" stroke-linecap="butt" stroke-linejoin="round"
-        stroke-width="2" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        _ngcontent-smu-c52=""
+        fill="none"
+        height="20"
+        stroke="currentColor"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path _ngcontent-smu-c52="" d="M12 19V6M5 12l7-7 7 7"></path>
       </svg>
     </button>
     <button
-      class="btn-close-translatebox bg-accent-dark"
+      class="btn-close-translatebox bg-accent-color"
       aria-label="Close"
       (click)="onClickTranslationCancel()"
     >

projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss

@@ -10,29 +10,26 @@
     font-size: 1.1em;
 
     .translate-text {
-      margin: 10px 10px 10px 30px;
+      margin: 14px 20px 14px 30px;
       max-height: 100px;
-      word-break: break-all;
+      word-wrap: break-word;
       white-space: pre-wrap;
+      word-break: break-word;
       overflow-y: auto;
       display: flex;
       flex: 1 1 auto;
     }
     .btn-translation-send {
-      /* min-width: 80px;
-      background-color: rgb(255, 255, 255,0.1);
-      border-radius: 0;
-      border: none;*/
-      background-color: #ffffff;
-      color: #333333;
-      border-radius: 0;
+      align-self: center;
+      stroke: #ffffff;
       width: 40px;
       height: 40px;
+      min-width: 40px;
+      border: 2px solid #ffffff;
       border-radius: 50%;
       margin-right: 20px;
       padding: 0;
-      min-width: 40px;
-      align-self: center;
+      line-height: 1;
     }
     .btn-close-translatebox {
       height: 100%;