clean code

src/app/components/main-chat/chat-msg-box/chat-msg-box.component.html

@@ -44,7 +44,8 @@
         [imgSize]="'16px'"
         [btnSize]="'24px'"
         [btnBgHoverColor]="'#edeefe'"
-        (click)="fileInput.click()"
+        [disable]="downloadFilesService.uploadFiles.length >= 1"
+        (click)="handleFileInputClick()"
       ></app-small-btn>
       <img class="verticalLine" src="./assets/img/verticalLine.svg" />
       <app-small-btn
@@ -63,20 +64,15 @@
         (click)="targetChatUser($event)"
       ></app-small-btn>
       <!-- Warning message -->
-      @if (downloadFilesService.uploadFiles.length >= 1 && !fileDataError &&
-      !fileSizeError){
-      <p class="warningMessage">
-        {{ "channel-msg-box.text0" | translate }}
-      </p>
-      } @if(fileDataError){
+      @if(fileDataError){
       <p class="warningMessage">
         {{ "channel-msg-box.text1" | translate }}
       </p>
-      } @if(fileSizeError){
+      } @else { @if(fileSizeError){
       <p class="warningMessage">
         {{ "channel-msg-box.text2" | translate }}
       </p>
-      }
+      } }
       <div class="filteredElementWindow">
         @if (toggleBoolean.selectUserInMsgBox) {
         <div class="positionOfAllUsersInBox">

src/app/components/main-chat/chat-msg-box/chat-msg-box.component.ts

@@ -44,6 +44,7 @@ export class ChatMsgBoxComponent {
   @Input() viewWidth: number = 0;
   @Output() newMsgEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   @ViewChild('textarea') textAreaRef!: ElementRef;
+  @ViewChild('fileInput') fileInput!: ElementRef;
 
   hasFile: boolean = false;
   fileDataError: boolean = false;
@@ -98,6 +99,12 @@ export class ChatMsgBoxComponent {
     }
   }
 
+  handleFileInputClick() {
+    if (this.downloadFilesService.uploadFiles.length < 1) {
+      this.fileInput.nativeElement.click();
+    }
+  }
+
   /**
    * Handles file input change event.
    * @param event The file change event.

src/app/shared/components/small-btn/small-btn.component.html

@@ -1,4 +1,4 @@
-<div
+<button
   class="smallBtn"
   [ngStyle]="{
     width: btnSize,
@@ -6,6 +6,7 @@
     'background-color': btnBgColor,
     '--btnBgHoverColor': btnBgHoverColor
   }"
+  [disabled]="disable"
 >
   <img
     [ngStyle]="{
@@ -13,7 +14,7 @@
       height: imgSize,
       '--filter': imgFilter
     }"
-    src="./assets/img/{{ imgSrc }}"
+    [src]="'assets/img/' + imgSrc"
     alt=""
   />
-</div>
+</button>

src/app/shared/components/small-btn/small-btn.component.scss

@@ -2,11 +2,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  border: 0px;
   border-radius: 100%;
+  background-color: transparent;
   width: 0;
   height: 0;
   cursor: pointer;
   transition: 0.125s ease-in-out;
+  img {
+    filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7481%)
+      hue-rotate(228deg) brightness(98%) contrast(106%);
+  }
   &:hover {
     background-color: var(--btnBgHoverColor);
     img {
@@ -15,3 +21,17 @@
     }
   }
 }
+
+.smallBtn[disabled] {
+  cursor: auto;
+  img {
+    filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(29%)
+      hue-rotate(173deg) brightness(99%) contrast(91%);
+  }
+  &:hover {
+    background-color: transparent;
+    img {
+      scale: 1;
+    }
+  }
+}

src/app/shared/components/small-btn/small-btn.component.ts

@@ -16,4 +16,5 @@ export class SmallBtnComponent {
   @Input() btnSize: string = '28px';
   @Input() btnBgColor: string = '';
   @Input() btnBgHoverColor: string = '#edeefe';
+  @Input() disable: boolean = false;
 }

src/assets/i18n/de.json

@@ -73,7 +73,6 @@
   },
 
   "channel-msg-box": {
-    "text0": "Maximal eine Datei pro Nachricht",
     "text1": "Dieses Dateiformat ist ungültig",
     "text2": "Dateigröße max. 1 MB",
     "placeholder": "Geben Sie Ihre Nachricht ein"

src/assets/i18n/en.json

@@ -73,7 +73,6 @@
   },
 
   "channel-msg-box": {
-    "text0": "Maximum one file per message",
     "text1": "This file format is invalid",
     "text2": "File size max. 1 MB",
     "placeholder": "Enter your message"