@chat21/chat21-web-widget 5.1.0-rc18 → 5.1.0-rc20

package/CHANGELOG.md

@@ -6,6 +6,21 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.0-rc20
+- **added**: fontFamilySource settings variable
+- **added**: --font-family-bubble-message as variable to manage custom font
+- **removed**: fontSize and fontFamily as input property in bubble-message component
+
+# 5.1.0-rc19
+- **added**: ability to maximize, minimize and fullscreen the widget window
+- **added**: variable for font-family attribute css value
+
+# 5.0.102
+- **bug-fixed**: cannot add message if array is empty
+
+# 5.0.101
+- **bug-fixed**: removed private note msgs
+
 # 5.1.0-rc18
 - **bug-fixed**: allowedOnSpecificUrl 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0-rc18",
+  "version": "5.1.0-rc20",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.scss

@@ -43,7 +43,6 @@ input, select:focus, textarea {
 
 :host {
     --button-in-msg-background-color:  --black;
-    --button-in-msg-font-size: 15px;
 }
 
 
@@ -134,39 +133,6 @@ textarea::placeholder {
     font-weight: 300;
   }
 
-  .msg_container{
-    .button-in-msg {
-        color: white!important;
-        background:  var(--button-in-msg-background-color) !important;
-
-        position: relative;
-        max-width: 300px;
-        min-width: inherit;
-        padding: 8px 16px;
-        cursor: auto;
-        border: 1px solid rgb(255, 255, 255);
-        border-radius: 20px!important;
-        margin: 3px;
-        overflow: hidden;
-        font-family: 'Muli', sans-serif;
-        font-size: 15px;
-        -o-text-overflow: ellipsis;
-        text-overflow: ellipsis;
-        white-space: normal;
-        letter-spacing: -0.24px;
-        -webkit-font-smoothing: antialiased;
-        .message_innerhtml{
-            // padding: 0px 14px!important;
-        }
-        p{
-            font-size: var(--button-in-msg-font-size)!important;
-            font-family: 'Muli', sans-serif!important;
-            font-weight: normal!important;
-        }
-    }
-    
-}
-
 
 // TOOLTIP: start
 .tooltip-container {
@@ -307,7 +273,7 @@ chat-root {
         position: absolute;
         width: 100%;
         height: 100%;
-        font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+        font-family: var(--font-family-bubble-message);
         font-size: 10px;
         text-align: left;
         background-color: transparent;
@@ -507,59 +473,7 @@ chat-root {
                 }
             }
         }
-         /* LOADING */
-        /*http://tobiasahlin.com/spinkit/*/
-        #chat21-spinner {
-            display: none;
-            width: 70px;
-            min-height: 20px;
-            margin: 20px auto 0;
-            text-align: center;
-        }
-        #chat21-spinner.active {
-            display: block;
-        }
-        #chat21-spinner > div {
-            width: 12px;
-            height: 12px;
-            background-color: var(--blue);
-            border-radius: 100%;
-            display: inline-block;
-            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-        }
-        #chat21-spinner .chat21-bounce1 {
-            -webkit-animation-delay: -0.32s;
-            animation-delay: -0.32s;
-        }
-        #chat21-spinner .chat21-bounce2 {
-            -webkit-animation-delay: -0.16s;
-            animation-delay: -0.16s;
-        }
-        #chat21-spinner span {
-            display: block;
-            margin: 0.5em 0 0 0;
-            color: var(--black);
-            /* text-transform: uppercase; */
-            font-family: 'Roboto', sans-serif;
-            -webkit-animation: pulse 2000ms linear infinite;
-            -moz-animation: pulse 2000ms linear infinite;
-            animation: pulse 2000ms linear infinite;
-            text-align: center;
-        }
-        @-webkit-keyframes sk-bouncedelay {
-            0%, 80%, 100% { -webkit-transform: scale(0) }
-            40% { -webkit-transform: scale(1.0) }
-        }
-        @keyframes sk-bouncedelay {
-            0%, 80%, 100% { 
-            -webkit-transform: scale(0);
-            transform: scale(0);
-            } 40% { 
-            -webkit-transform: scale(1.0);
-            transform: scale(1.0);
-            }
-        }
+        
         // ========= END: GENERIC CSS ========= //
    
         /* CSS BOX CONTAINER */

package/src/app/app.component.ts

@@ -2118,6 +2118,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
         this.el.nativeElement.style.setProperty('--button-in-msg-background-color', this.g.bubbleSentBackground)
         this.el.nativeElement.style.setProperty('--button-in-msg-font-size', this.g.buttonFontSize)
+        this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
+        this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
+
     }
 
 

package/src/app/component/conversation-detail/conversation/conversation.component.html

@@ -18,6 +18,7 @@
         [hideHeaderConversationOptionsMenu]="g?.hideHeaderConversationOptionsMenu"
         [hideSignOutOptionMenu]="(!g?.singleConversation || !g?.showLogoutOption)"
         [hideChatDetailOptionMenu]="(!g?.isDevMode)"
+        [fullscreenMode]="g?.fullscreenMode"
         [stylesMap]="stylesMap"
         [translationMap]="translationMapHeader"
         [widgetTitle]="g?.project?.widgetTitle"
@@ -135,8 +136,7 @@
             (onAfterSendMessage)="onAfterSendMessageFN($event)"
             (onChangeTextArea)="onChangeTextArea($event)"
             (onAttachmentFileButtonClicked)="onAttachmentFileButtonClicked($event)"
-            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)"
-            (onBackButton)="onBackButton($event)">
+            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)">
         </chat-conversation-footer>
 
     </div>

package/src/app/component/conversation-detail/conversation/conversation.component.scss

@@ -1,8 +1,6 @@
 // $f21ico-schedule: image-url('f21ico-schedule.svg', false, false);
 // $f21ico-done: image-url('../assets/images/f21ico-done.svg', false, false);
 // $f21ico-done_all: image-url('../assets/images/f21ico-done_all.svg', false, false);
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
 
 :host {
     --themeColor: var(--bck-msg-sent);
@@ -60,7 +58,7 @@
             font-weight: 500;
             line-height: 22px;
 
-            font-family: Mulish, sans-serif;
+            font-family: var(--font-family);
             letter-spacing: -0.24px;
             -webkit-font-smoothing: antialiased;
 
@@ -97,10 +95,6 @@
     background: white;
     min-height: 40px;
 
-    &.maximize-width{
-        padding: 8px 0px;
-    }
-
     &.hideFooterReply{
         padding: 0px;
     }

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -221,6 +221,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CLOSE',
       'MAXIMIZE',
       'MINIMIZE',
+      'FULLSCREEN',
       'CLOSE_CHAT',
       'RESTART',
       'LOGOUT',
@@ -1066,12 +1067,24 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     // this.hideTextAreaContent = true
   }
   /** CALLED BY: conv-header component */
-  onWidgetHeightChange(mode){
+  onWidgetSizeChange(mode){
     var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
     if(mode==='max'){
-      tiledeskDiv.style.maxHeight = 'unset'
+      tiledeskDiv.classList.add('increaseSize')
+      tiledeskDiv.classList.remove('decreaseSize')
+      tiledeskDiv.classList.remove('fullscreen')
+      this.g.fullscreenMode = false
     }else if(mode==='min'){
-      tiledeskDiv.style.maxHeight = '620px'
+      tiledeskDiv.classList.add('decreaseSize')
+      tiledeskDiv.classList.remove('increaseSize')
+      tiledeskDiv.classList.remove('fullscreen')
+      this.g.fullscreenMode = false
+    }else if(mode=== 'fullscreen'){
+      tiledeskDiv.classList.add('fullscreen')
+      tiledeskDiv.classList.remove('increaseSize')
+      tiledeskDiv.classList.remove('decreaseSize')
+      this.g.fullscreenMode = true
+
     }
     this.isMenuShow = false;
   }
@@ -1108,10 +1121,13 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
         this.onRestartChat()
         break;
       case HEADER_MENU_OPTION.MAXIMIZE:
-        this.onWidgetHeightChange('max')
+        this.onWidgetSizeChange('max')
         break;
       case HEADER_MENU_OPTION.MINIMIZE:
-        this.onWidgetHeightChange('min')
+        this.onWidgetSizeChange('min')
+        break;
+      case HEADER_MENU_OPTION.FULLSCREEN:
+        this.onWidgetSizeChange('fullscreen')
         break;
     }
   }
@@ -1239,19 +1255,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.debug('[CONV-COMP] floating onNewConversationButtonClicked')
     this.onNewConversationButtonClicked.emit()
   }
-  /** CALLED BY: conv-footer floating-button component */
-  onBackButton(event: boolean){
-    this.hideTextAreaContent = event;
-    try{
-      const tiledeskDiv = document.getElementById('chat21-footer')
-      tiledeskDiv.classList.remove('maximize-width')
-      // tiledeskDiv.style.width = '376px'
-      // tiledeskDiv.style.maxHeight = '620px'
-    }catch(e){
-      this.logger.error('[CONV-COMP] onBackButton > Error :' + e);
-    }
-
-  }
   // =========== END: event emitter function ====== //
 
 

package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html

@@ -9,7 +9,6 @@
   <chat-audio  class="test" *ngIf="audioBlob && audioUrl"
     [audioBlob] = "audioBlob"
     [color]="'var(--chat-footer-color)'"
-    [fontSize]="stylesMap.get('fontSize')"
     [stylesMap]="stylesMap">
   </chat-audio>
     

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.html

@@ -34,8 +34,6 @@
                               [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
                               [message]="message"
                               [fontColor]="stylesMap.get('bubbleSentTextColor')"
-                              [fontSize]="stylesMap.get('fontSize')"
-                              [fontFamily]="stylesMap.get('fontFamily')"
                               [stylesMap]="stylesMap"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)"
@@ -70,8 +68,6 @@
                               [isSameSender]="isSameSender(message?.sender, i)"
                               [message]="message"
                               [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
-                              [fontSize]="stylesMap.get('fontSize')"
-                              [fontFamily]="stylesMap.get('fontFamily')"
                               [stylesMap]="stylesMap"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)"

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 
 #scroll-me {
     scroll-behavior: smooth;
@@ -36,26 +34,6 @@
     // box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
     position: fixed;
     .c21-body-container {
-        .c21-body-header {
-            .chat21-header-modal-select {
-                font-family: 'Google Sans', sans-serif !important;
-                padding: 0px;
-                background-color: #b9b9b921;
-                margin: 8px;
-                line-height: 1.2em;
-                color: #616161;
-                font-size: 15px;
-                text-align: center;
-                word-wrap: break-word;
-                border-radius: 8px;
-            }
-            .chat21-header-modal-select-more-of-one-dept {
-                position: relative;
-                height: auto;
-                padding: 10px;
-                margin: 30px 0 0 0;
-            }
-        } // end .chat21-sheet-header
     
         .c21-body-content  {
             /* no conflict
@@ -284,21 +262,57 @@
     }// end c21-body-container
 }// end c21-body
 
-        
-
-// ============= END CSS c21-body ================= //
-
+/* LOADING */
+/*http://tobiasahlin.com/spinkit/*/
+#chat21-spinner {
+    display: none;
+    width: 70px;
+    min-height: 20px;
+    margin: 20px auto 0;
+    text-align: center;
+}
+#chat21-spinner.active {
+    display: block;
+}
+#chat21-spinner > div {
+    width: 12px;
+    height: 12px;
+    background-color: var(--blue);
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+#chat21-spinner .chat21-bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+}
+#chat21-spinner .chat21-bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+}
+#chat21-spinner span {
+    display: block;
+    margin: 0.5em 0 0 0;
+    color: var(--black);
+    /* text-transform: uppercase; */
+    -webkit-animation: pulse 2000ms linear infinite;
+    -moz-animation: pulse 2000ms linear infinite;
+    animation: pulse 2000ms linear infinite;
+    text-align: center;
+}
 @-webkit-keyframes sk-bouncedelay {
     0%, 80%, 100% { -webkit-transform: scale(0) }
     40% { -webkit-transform: scale(1.0) }
 }
-
 @keyframes sk-bouncedelay {
     0%, 80%, 100% { 
-        -webkit-transform: scale(0);
-        transform: scale(0);
+    -webkit-transform: scale(0);
+    transform: scale(0);
     } 40% { 
-        -webkit-transform: scale(1.0);
-        transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
     }
-}
+}
+
+// ============= END CSS c21-body ================= //

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 .textarea-container{
     // padding: 8px 34px;
@@ -323,7 +322,7 @@ textarea:active{
             font-weight: 500;
             line-height: 22px;
 
-            font-family: Mulish, sans-serif;
+            font-family: var(--font-family);
             letter-spacing: 0.24px;
             -webkit-font-smoothing: antialiased;
             padding: 4px 12px;
@@ -373,7 +372,7 @@ textarea:active{
         font-size: 1.2em;
         font-weight: 500;
         line-height: 22px;
-        font-family: Mulish, sans-serif;
+        font-family: var(--font-family);
         letter-spacing: 0.24px;
         -webkit-font-smoothing: antialiased;
         padding: 4px 12px;

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -50,7 +50,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Output() onChangeTextArea = new EventEmitter<any>();
   @Output() onAttachmentFileButtonClicked = new EventEmitter<any>();
   @Output() onNewConversationButtonClicked = new EventEmitter();
-  @Output() onBackButton = new EventEmitter()
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
   // @ViewChild('emojii_container', {read: ViewContainerRef}) selector;
@@ -655,10 +654,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   //   this.restoreTextArea()
   // }
 
-  onBackButtonFN(){
-    this.onBackButton.emit(false)
-  }
-
   setFocusOnId(id) {
     if(!this.isMobile){
       setTimeout(function () {

package/src/app/component/conversation-detail/conversation-header/conversation-header.component.html

@@ -123,23 +123,34 @@
     </div> -->
     
     <!-- ICON MAXIMIZE -->
-    <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus==='min'" (click)="maximizeMinimize('max')">
-        <svg role="img" aria-labelledby="altIconTitle" [class="icon-menu" xmlns="http://www.w3.org/2000/svg" 
-            width="17" height="17" viewBox="0 0 62 62">
-            <path d="M61,2H33a1,1,0,0,0-1,1V9a1,1,0,0,0,1,1H48.344L2.293,56.051a1,1,0,0,0,0,1.414l4.243,4.242a1,1,0,0,0,1.414,0L54,15.656V31a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V3A1,1,0,0,0,61,2Z"></path>
+    <div class="c21-header-button c21-right" *ngIf="heightStatus==='min' && !fullscreenMode" (click)="onChangeSize('max')">
+        <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path d="M6.49001 8.30999L3.69 11.11V9.40999C3.69 8.93999 3.31 8.55999 2.84 8.55999C2.37 8.55999 1.99001 8.93999 1.99001 9.40999V14.01H6.59C7.06 14.01 7.44 13.63 7.44 13.16C7.44 12.69 7.06 12.31 6.59 12.31H4.89L7.69 9.50999L6.49001 8.30999ZM9.41 1.98999C8.94 1.98999 8.56001 2.36999 8.56001 2.83999C8.56001 3.30999 8.94 3.68999 9.41 3.68999H11.11L8.31001 6.48999L9.51 7.68999L12.31 4.88999V6.58999C12.31 7.05999 12.69 7.43999 13.16 7.43999C13.63 7.43999 14.01 7.05999 14.01 6.58999V1.98999H9.41Z" fill="currentColor"></path>
             <title id="altIconTitle">{{ translationMap?.get('MAXIMIZE') }}</title>
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('MAXIMIZE') }}</span>
-    </div> -->
+    </div>
     <!-- ICON MINIMIZE -->
-    <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus==='max'" (click)="maximizeMinimize('min')">
-        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" transform="rotate(180)" xmlns="http://www.w3.org/2000/svg" 
-            width="17" height="17" viewBox="0 0 62 62">
-            <path d="M61,2H33a1,1,0,0,0-1,1V9a1,1,0,0,0,1,1H48.344L2.293,56.051a1,1,0,0,0,0,1.414l4.243,4.242a1,1,0,0,0,1.414,0L54,15.656V31a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V3A1,1,0,0,0,61,2Z"></path>
+    <div class="c21-header-button c21-right" *ngIf="heightStatus==='max' || heightStatus==='full' || fullscreenMode" (click)="onChangeSize('min')">
+        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85" fill="currentColor"></path>
             <title id="altIconTitle">{{ translationMap?.get('MINIMIZE') }}</title>
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('MINIMIZE') }}</span>
-    </div> -->
+    </div>
+
+    <!-- FULLSCREEN -->
+    <div class="c21-header-button c21-right" *ngIf="heightStatus!=='full' && !fullscreenMode" (click)="onChangeSize('full')">
+        <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path fill="currentColor" d="M6.5,8.3l-2.8,2.8v-1.7c0-.5-.4-.9-.9-.9s-.8.4-.8.9v4.6h4.6c.5,0,.8-.4.8-.9s-.4-.8-.8-.8h-1.7l2.8-2.8-1.2-1.2ZM9.4,2c-.5,0-.8.4-.8.8s.4.9.8.9h1.7l-2.8,2.8,1.2,1.2,2.8-2.8v1.7c0,.5.4.8.8.8s.9-.4.9-.8V2h-4.6Z"/>
+            <path fill="currentColor" d="M8.3,9.5l2.8,2.8h-1.7c-.5,0-.9.4-.9.9s.4.8.9.8h4.6v-4.6c0-.5-.4-.8-.9-.8s-.8.4-.8.8v1.7l-2.8-2.8-1.2,1.2ZM2,6.5c0,.5.4.8.8.8s.9-.4.9-.8v-1.7l2.8,2.8,1.2-1.2-2.8-2.8h1.7c.5,0,.8-.4.8-.8s-.4-.9-.8-.9H2v4.6Z"/>
+            <title id="altIconTitle">{{ translationMap?.get('FULLSCREEN') }}</title>
+        </svg>
+        <span class="label-menu-item">{{ translationMap?.get('FULLSCREEN') }}</span>
+    </div>
 
     <!-- ICON LOGOUT -->
     <div class="c21-header-button c21-right"  *ngIf="!hideSignOutOptionMenu" (click)="signOut()">

package/src/app/component/conversation-detail/conversation-header/conversation-header.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
  /* SET SCROLLBAR */
 // ============= CSS c21-header ================= // 

package/src/app/component/conversation-detail/conversation-header/conversation-header.component.ts

@@ -22,6 +22,7 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   @Input() nameUserTypingNow: string;
   @Input() typingLocation: string;
   @Input() isTrascriptDownloadEnabled: boolean;
+  @Input() fullscreenMode: boolean;
   @Input() hideCloseConversationOptionMenu: boolean;
   @Input() hideHeaderCloseButton: boolean;
   @Input() hideHeaderBackButton: boolean;
@@ -105,10 +106,11 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   /**
    * @param status : string 'max' || 'min'
    */
-  maximizeMinimize(status){
+  onChangeSize(status){
     this.heightStatus = status
     if(status === 'min') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MINIMIZE)
     if(status === 'max') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MAXIMIZE)
+    if(status === 'full') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.FULLSCREEN)
     this.onMenuOptionShow.emit(false)
   }
   toggleSound() {

package/src/app/component/conversation-detail/conversation-preview/conversation-preview.component.scss

@@ -1,6 +1,3 @@
-// @import 'src/app/sass/variables';
-
-
 :host .c21-content ::ng-deep > chat-image  {
 
     div { 

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.scss

@@ -3,8 +3,6 @@
 * EYE-CATCHER CARD & EYE-CATCHER CARD CLOSE BTN
 * *********************************************  
 */ 
-// @import 'src/app/sass/variables';
-
 
 
 
@@ -182,7 +180,7 @@
     width: 100%;
     height: auto;
     vertical-align: middle;
-    font-family: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
+    font-family: var(--font-family-callout);
     font-weight: normal;
     word-wrap: break-word;
     margin: 0px;

package/src/app/component/form/form-builder/form-builder.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 .c21-label-button {
     font-size: 1.2em !important;

package/src/app/component/form/inputs/form-text/form-text.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 :host {
 	--foregroundColor: #0000;

package/src/app/component/form/inputs/form-textarea/form-textarea.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 :host {
 	--foregroundColor: #0000;

package/src/app/component/form/prechat-form/prechat-form.component.scss

@@ -1,5 +1,3 @@
-// @import '../../../sass/variables';
-// @import '../../../sass/normalize.css';
 
 #chat21-prechat-form {
         background-color: #ffffff;

package/src/app/component/home/home.component.scss

@@ -1,8 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
-
-
 #chat21-home-component {
     position: absolute;
     width: 100%;
@@ -89,7 +84,6 @@
                 }
 
                 .c21-text {
-                    font-family: 'Google Sans';
                     .c21-text-welcome {
                         overflow: hidden;
                         line-height: 1.2em;
@@ -130,7 +124,6 @@
                     }
                 }
                 .c21-text {
-                    font-family: 'Roboto';
                     margin: 0 0 0 15px;
 
                     .c21-text-welcome {
@@ -308,7 +301,7 @@
                 font-weight: 500;
                 line-height: 22px;
 
-                font-family: Mulish, sans-serif;
+                font-family: var(--font-family);
                 letter-spacing: 0.24px;
                 -webkit-font-smoothing: antialiased;
     

package/src/app/component/home-conversations/home-conversations.component.scss

@@ -1,6 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
 #c21-app-list-conversations{
     position: relative;
     display: block;

package/src/app/component/last-message/last-message.component.html

@@ -36,8 +36,6 @@
           [message]="message"
           [isSameSender]="isSameSender(message?.sender, i)"
           [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
-          [fontSize]="stylesMap.get('fontSize')"
-          [fontFamily]="stylesMap.get('fontFamily')"
           [stylesMap]="stylesMap"
           (onElementRendered)="onElementRenderedFN($event)">
         </chat-bubble-message>

package/src/app/component/last-message/last-message.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host  .c21-avatar-image ::ng-deep > chat-avatar-image {
 
     .c21-icon-avatar { 

package/src/app/component/list-all-conversations/list-all-conversations.component.scss

@@ -1,6 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
 #c21-app-list-all-conversations {
     position: relative;
     display: block;

package/src/app/component/list-conversations/list-conversations.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host .c21-msg ::ng-deep > a > img {
     max-width: 24% !important;
     vertical-align: middle;

package/src/app/component/menu-options/menu-options.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 #c21-menu-options{
     
     .modal-menu-options {

package/src/app/component/message/audio/audio.component.html

@@ -17,7 +17,7 @@
             </svg>
             <!-- <i class="material-icons">pause</i> -->
         </button>
-        <div class="duration" [style.color]="color" [style.font-size]="fontSize" >
+        <div class="duration" [style.color]="color">
             <span *ngIf="!isPlaying">{{ audioDuration ? formatTime(audioDuration) : '00:00' }}</span>
             <span *ngIf="isPlaying">{{ formatTime(currentTime) }}</span>
         </div>

package/src/app/component/message/audio/audio.component.scss

@@ -80,6 +80,7 @@ button {
     }
     .duration {
         padding: 0 3px;
+        font-size: var(--font-size-bubble-message);
     }
 }
 

package/src/app/component/message/audio/audio.component.ts

@@ -17,7 +17,6 @@ export class AudioComponent implements AfterViewInit {
   @Input() audioBlob: Blob | null = null;
   @Input() metadata: any | null = null;
   @Input() color: string;
-  @Input() fontSize: string;
   @Input() stylesMap: Map<string, string>;
 
   audioUrl: SafeUrl | null = null;

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -25,7 +25,7 @@
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
         [style.color]="fullnameColor"
-        [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '10px 16px 8px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
+        [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '12px 16px 8px 16px': '12px 16px 0px 16px'}" class="message_sender_fullname">
         {{message?.sender_fullname}}
       </div>
       <!-- message type:: image -->
@@ -61,7 +61,6 @@
       <chat-audio  *ngIf="isAudio(message)"
         [metadata]="message.metadata"
         [color]="fontColor"
-        [fontSize]="fontSize"
         [stylesMap]="stylesMap">
       </chat-audio>
 
@@ -82,8 +81,6 @@
         <chat-text *ngIf="message?.type !=='html'"
           [text]="message?.text"
           [color]="fontColor"
-          [fontSize]="fontSize"
-          [fontFamily]="fontFamily"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)">
         </chat-text>

package/src/app/component/message/bubble-message/bubble-message.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 /* ====== SET MESSAGES ====== */
 
 .messages {

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -18,8 +18,6 @@ export class BubbleMessageComponent implements OnInit {
   @Input() message: MessageModel;
   @Input() isSameSender: boolean;
   @Input() fontColor: string;
-  @Input() fontSize: string;
-  @Input() fontFamily: string;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();

package/src/app/component/message/buttons/action-button/action-button.component.scss

@@ -1,5 +1,3 @@
-@import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,6 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --fontFamily: #{var(--font-family)};
 }
 
 .button-in-msg {
@@ -20,7 +19,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: 'Muli', sans-serif;
+    font-family: var(--fontFamily);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

package/src/app/component/message/buttons/link-button/link-button.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,6 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --font-family: #{var(--font-family)};
 }
 
 .button-in-msg {
@@ -20,7 +19,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: 'Muli', sans-serif;
+    font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

package/src/app/component/message/buttons/text-button/text-button.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,6 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --font-family: #{var(--font-family)};
 }
 
 
@@ -22,7 +21,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: 'Muli', sans-serif;
+    font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

package/src/app/component/message/carousel/carousel.component.scss

@@ -1,5 +1,3 @@
-@import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,6 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --fontFamily: #{var(--font-family)};
 
     --cardWidth: 220px;
 }
@@ -203,7 +202,7 @@
         transition: all .3s;
 
         background: var(--backgroundColor);
-        font-family: 'Muli', sans-serif;
+        font-family: var(--fontFamily);
         font-size: var(--buttonFontSize);
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;

package/src/app/component/message/frame/frame.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host{
     // --borderRadius: #{$border-radius-bubble-message};
     --borderRadius: 8px;

package/src/app/component/message/html/html.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :root {
     --themeColor: #{var(--blue)};
     --foregroundColor: #{var(--col-msg-sent)};
@@ -20,7 +18,7 @@
         margin: 3px;
         background: transparent;
         overflow: hidden;
-        font-family: 'Muli', sans-serif !important;
+        font-family: var(--font-family) !important;
         font-size: var(--buttonFontSize) !important;
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;

package/src/app/component/message/image/image.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host{
     // --borderRadius: #{$border-radius-bubble-message};
     --borderRadius: 8px;

package/src/app/component/message/info-message/info-message.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 .info-container{
     display: flex;
     align-content: center;

package/src/app/component/message/like-unlike/like-unlike.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host{
     // --borderRadius: #{$border-radius-bubble-message};
     --borderRadius: 25px;

package/src/app/component/message/text/text.component.html

@@ -1,4 +1,3 @@
 <p  #messageEl class="message_innerhtml marked" 
     [innerHTML]="printMessage(text, messageEl, this) | htmlEntitiesEncode | marked" 
-    [style.color]="color"
-    [style.font-size]="fontSize"></p>
+    [style.color]="color"></p>

package/src/app/component/message/text/text.component.scss

@@ -1,10 +1,8 @@
-// @import 'src/app/sass/variables';
-
 .message_innerhtml {
     margin: 0px;
     // padding: 0px 14px;
     &.marked{
-        padding:8px;
+        padding: 12px 16px;
         margin-block-start: 0em!important;
         margin-block-end: 0em!important;
     }
@@ -15,7 +13,7 @@
 }
 
 p {
-    font-size: 1.4em;
+    font-size: var(--font-size-bubble-message);
     margin: 0;
     padding: 14px;
     line-height: 1.4em;

package/src/app/component/message/text/text.component.ts

@@ -10,8 +10,6 @@ export class TextComponent implements OnInit {
   @Input() text: string;
   @Input() htmlEnabled: boolean = false;
   @Input() color: string;
-  @Input() fontSize: string;
-  @Input() fontFamily: string;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
 

package/src/app/component/selection-department/selection-department.component.scss

@@ -1,7 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
-
 #chat21-selection-department {
 
     --backgroundColor: #{var(--light-white)};

package/src/app/component/star-rating-widget/star-rating-widget.component.scss

@@ -1,7 +1,5 @@
 // @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 // @import url(https://use.fontawesome.com/releases/v5.5.0/css/all.css);
-// @import 'src/app/sass/variables';
-
 #chat21-star-rating-widget {
   background-color: #ffffff;
   width: 100%;
@@ -82,11 +80,6 @@
     .c21-body-content  {
       padding: 10px 0px;
       /* star-rating */
-      .default-title {
-        font-size: 2em;
-        font-family:'Roboto';
-        color:var(--black);
-      }
       .default-text {
         font-size: 1.4em;
         font-family:'Roboto';

package/src/app/providers/global-settings.service.ts

@@ -331,6 +331,8 @@ export class GlobalSettingsService {
         this.globals.setColorWithGradient();
         /** set css iframe from parameters */
         this.setCssIframe();
+        /** set main style */
+        this.setStyle();
 
         this.logger.debug('[GLOBAL-SET] ***** END SET PARAMETERS *****');
         this.obsSettingsService.next(true);
@@ -365,16 +367,40 @@ export class GlobalSettingsService {
         }
         // console.log('this.globals.fullscreenMode' + this.globals.fullscreenMode);
         if (this.globals.fullscreenMode === true) {
-            divTiledeskiframe.style.left = 0;
-            divTiledeskiframe.style.right = 0;
-            divTiledeskiframe.style.top = 0;
-            divTiledeskiframe.style.bottom = 0;
-            divTiledeskiframe.style.width = '100%';
-            divTiledeskiframe.style.height = '100%';
-            divTiledeskiframe.style.maxHeight = 'none';
-            divTiledeskiframe.style.maxWidth = 'none';
+            // divTiledeskiframe.style.left = 0;
+            // divTiledeskiframe.style.right = 0;
+            // divTiledeskiframe.style.top = 0;
+            // divTiledeskiframe.style.bottom = 0;
+            // divTiledeskiframe.style.width = '100%';
+            // divTiledeskiframe.style.height = '100%';
+            // divTiledeskiframe.style.maxHeight = 'none';
+            // divTiledeskiframe.style.maxWidth = 'none';
+            divTiledeskiframe.classList.add('fullscreen')
         }
     }
+
+    setStyle(){
+
+        /** load custom FONT */
+        if(this.globals.fontFamily && this.globals.fontFamilySource){
+            this.loadFont(this.globals.fontFamily, this.globals.fontFamilySource)
+        }
+    }
+    loadFont(family: string, href: string,) {
+        // controlla se già esiste
+        if (document.querySelector(`link[data-font='${family}']`)) {
+          return;
+        }
+    
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.setAttribute('data-font', family); // marker per non duplicare
+        document.head.appendChild(link);
+    
+        // aggiorna la variabile CSS
+        document.documentElement.style.setProperty('--font-family', `'${family}', sans-serif`);
+      }
     /**
      * A: setVariablesFromService
      */
@@ -929,7 +955,12 @@ export class GlobalSettingsService {
         TEMP = tiledeskSettings['fontFamily'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamily:: ', TEMP]);
         if (TEMP !== undefined) {
-            globals.fontFamily = TEMP;
+            globals.fontFamily = TEMP + ',' + globals.fontFamily;
+        }
+        TEMP = tiledeskSettings['fontFamilySource'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamily:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.fontFamilySource = TEMP;
         }
         TEMP = tiledeskSettings['buttonFontSize'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > buttonFontSize:: ', TEMP]);
@@ -1260,7 +1291,11 @@ export class GlobalSettingsService {
         }
         TEMP = el.nativeElement.getAttribute('fontFamily');
         if (TEMP !== null) {
-            this.globals.fontFamily = TEMP;
+            this.globals.fontFamily = TEMP + ',' + this.globals.fontFamily;
+        }
+        TEMP = el.nativeElement.getAttribute('fontFamilySource');
+        if (TEMP !== null) {
+            this.globals.fontFamilySource = TEMP;
         }
         TEMP = el.nativeElement.getAttribute('buttonFontSize');
         if (TEMP !== null) {

package/src/app/sass/_variables.scss

@@ -38,6 +38,15 @@
 
     --content-background-color: #fff;
     --content-text-color: var(--black);
+
+
+
+    --font-family: Mulish, sans-serif;
+    --font-family-bubble-message: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+    --font-family-callout: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
+
+    --font-size-bubble-message: 1.4em
+
 }
 
 $trasp-black:rgba(0,0,0,0.8);

package/src/app/utils/constants.ts

@@ -73,6 +73,7 @@ export const HEADER_MENU_OPTION = {
     DETAIL      :   'detail',
     RESTART     :   'restart',
     MAXIMIZE    :   'maximize',
-    MINIMIZE    :   'minimize'
+    MINIMIZE    :   'minimize',
+    FULLSCREEN  :   'fullscreen'
 }
 

package/src/app/utils/globals.ts

@@ -221,6 +221,8 @@ export class Globals {
 
   allowedOnSpecificUrl: boolean // *******  new ********
   allowedOnSpecificUrlList: Array<string> // *******  new ********
+
+  fontFamilySource: string; // *******  new ********
   constructor(
   ) { }
 
@@ -357,7 +359,7 @@ export class Globals {
     /** set the text color of bubble received message */
     this.fontSize = '1.4em'
     /** set the text size of bubble messages */
-    this.fontFamily = "'Roboto','Google Sans', Helvetica, Arial, sans-serif'"
+    this.fontFamily = "'Roboto','Google Sans', Helvetica, Arial, sans-serif"
     /** set the text family of bubble messages */
     this.buttonFontSize = '15px'
     /** set the text size of attachment-buttons */

package/src/assets/i18n/en.json

@@ -53,8 +53,9 @@
     "WAITING_TIME_NOT_FOUND": "The team will reply as soon as possible",
     "CLOSED": "CLOSED",
     "CLOSE_CHAT": "Close chat",
-    "MINIMIZE":"Minimize",
-    "MAXIMIZE":"Maximize",
+    "MINIMIZE":"Minimize window",
+    "MAXIMIZE":"Expand window",
+    "FULLSCREEN":"Fullscreen",
     "CONFIRM_CLOSE_CHAT":"Are you sure you want to close this chat?",
     
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"you",

package/src/assets/i18n/es.json

@@ -53,8 +53,9 @@
     "WAITING_TIME_NOT_FOUND": "El equipo responderá lo antes posible",
     "CLOSED": "CERRADA",
     "CLOSE_CHAT": "Cerrar chat",
-    "MINIMIZE":"Minimizar",
-    "MAXIMIZE":"Maximizar",
+    "MINIMIZE":" Minimizar ventana",
+    "MAXIMIZE":"Expandir ventana",
+    "FULLSCREEN":"Pantalla completa",
     "CONFIRM_CLOSE_CHAT":"¿Estás seguro de que quieres cerrar este chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tú",

package/src/assets/i18n/fr.json

@@ -53,8 +53,9 @@
     "WAITING_TIME_NOT_FOUND": "Nous vous répondrons dans les plus brefs délais",
     "CLOSED": "Fermé",
     "CLOSE_CHAT": "Fermer la discussion",
-    "MINIMIZE":"Minimiser",
-    "MAXIMIZE":"Maximiser",
+    "MINIMIZE":"Réduire la fenêtre",
+    "MAXIMIZE":"Agrandir la fenêtre",
+    "FULLSCREEN":"Plein écran",
     "CONFIRM_CLOSE_CHAT":"Etes-vous sûr de vouloir fermer cette discussion?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",

package/src/assets/i18n/it.json

@@ -53,8 +53,9 @@
     "WAITING_TIME_NOT_FOUND": "Vi risponderemo appena possibile",
     "CLOSED": "Chiusa",
     "CLOSE_CHAT": "Chiudi chat",
-    "MINIMIZE":"Minimizza",
-    "MAXIMIZE":"Massimizza",
+    "MINIMIZE":"Comprimi finestra",
+    "MAXIMIZE":"Espandi finestra",
+    "FULLSCREEN":"Fullscreen",
     "CONFIRM_CLOSE_CHAT":"Sei sicuro di voler chiudere questa chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",

package/src/chat21-core/utils/user-typing/user-typing.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 :root {
     --bubbleReceivedBackgroundColor: var(--blue);
     --foregroundColor: var(--bck-msg-sent);

package/src/iframe-style.css

@@ -1,5 +1,10 @@
 :root{
     --messagePreviewHeight: 100px;
+    --iframeMinWidth: 400px; /*376px*/;
+    --iframeMinHeight: 704px; /*696px;*/
+    --iframeMaxWidth: 688px;
+    --iframeMaxHeight: 786px;
+
 }
 
 #tiledesk-container {
@@ -17,11 +22,11 @@
     max-width: 420px;
     min-width: 416px;
     max-height: 640px; */
-    width: 376px;
-    height: calc(100% - 40px);
-    max-width: 696px;  /*376px;*/
-    min-width: 376px;
-    max-height: 620px;
+    width: var(--iframeMinWidth);
+    height: var(--iframeMinHeight);
+    /* min-width: var(--iframeMinWidth); 
+    max-width: var(--iframeMaxWidth);  376px;
+    max-height: 620px; */
     right: 0px;
     bottom: 0px;
     display: block;
@@ -32,21 +37,33 @@
 #tiledeskdiv.decreaseSize {
     /* transition: width 1s, height 1s; */
     transition: all 1s ease-out;
-    width: 376px;
-    max-height: 620px;
+    width: var(--iframeMinWidth);
+    height: var(--iframeMinHeight);
     /* animation: right-animate 1s ease infinite alternate; */
 
 }
 
 #tiledeskdiv.increaseSize {
     /* transition: width 1s, height 1s; */
-    transition: all 1s ease-in;
-    width: 696px;
-    max-height: 712px;
+    transition: all 3s ease-in;
+    width: var(--iframeMaxWidth);
+    height: var(--iframeMaxHeight);
     /* animation: right-animate 1s ease infinite alternate; */
 
 }
 
+#tiledeskdiv.fullscreen {
+    /* transition: width 1s, height 1s; */
+    transition: all 3s ease-in;
+    right: 0px;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 100%;  
+}
+ 
+
 @keyframes right-animate {
     0% {
         transform: translateX(140px);