From dddd2a627e6517421f169f78b48112e5a74629a1 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 15 Sep 2024 09:56:09 +0200
Subject: [PATCH] Fix: Images were displayed black in the options menu

---
 .../single-chat/options-menu/options-menu.component.html      | 4 ++++
 src/app/shared/components/small-btn/small-btn.component.html  | 3 ++-
 src/app/shared/components/small-btn/small-btn.component.scss  | 3 +--
 src/app/shared/components/small-btn/small-btn.component.ts    | 2 ++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/components/main-chat/single-chat/options-menu/options-menu.component.html b/src/app/components/main-chat/single-chat/options-menu/options-menu.component.html
index dc89ff8..a42e84f 100644
--- a/src/app/components/main-chat/single-chat/options-menu/options-menu.component.html
+++ b/src/app/components/main-chat/single-chat/options-menu/options-menu.component.html
@@ -9,6 +9,7 @@
       [imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'"
       [btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'"
       [imgFilter]="'none'"
+      [imgFilterStatic]="'none'"
       [btnBgHoverColor]="'#edeefe'"
       [ngClass]="{ mirror: user.id === userService.getCurrentUserId() }"
       (click)="addReactionIcon('okay', currentChat)"
@@ -19,6 +20,7 @@
       [imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'"
       [btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'"
       [imgFilter]="'none'"
+      [imgFilterStatic]="'none'"
       [btnBgHoverColor]="'#edeefe'"
       [ngClass]="{ mirror: user.id === userService.getCurrentUserId() }"
       (click)="addReactionIcon('clap-hands', currentChat)"
@@ -76,6 +78,7 @@
       [imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'"
       [btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'"
       [imgFilter]="'none'"
+      [imgFilterStatic]="'none'"
       [btnBgHoverColor]="'#edeefe'"
       [ngClass]="{ mirror: user.id === userService.getCurrentUserId() }"
       (click)="addReactionIcon('okay', currentChat)"
@@ -86,6 +89,7 @@
       [imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'"
       [btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'"
       [imgFilter]="'none'"
+      [imgFilterStatic]="'none'"
       [btnBgHoverColor]="'#edeefe'"
       [ngClass]="{ mirror: user.id === userService.getCurrentUserId() }"
       (click)="addReactionIcon('clap-hands', currentChat)"
diff --git a/src/app/shared/components/small-btn/small-btn.component.html b/src/app/shared/components/small-btn/small-btn.component.html
index a486461..c2e514d 100644
--- a/src/app/shared/components/small-btn/small-btn.component.html
+++ b/src/app/shared/components/small-btn/small-btn.component.html
@@ -12,7 +12,8 @@
     [ngStyle]="{
       width: imgSize,
       height: imgSize,
-      '--filter': imgFilter
+      '--filter': imgFilter,
+      '--filterStatic': imgFilterStatic
     }"
     [src]="'assets/img/' + imgSrc"
     alt=""
diff --git a/src/app/shared/components/small-btn/small-btn.component.scss b/src/app/shared/components/small-btn/small-btn.component.scss
index 8c23947..6f02d77 100644
--- a/src/app/shared/components/small-btn/small-btn.component.scss
+++ b/src/app/shared/components/small-btn/small-btn.component.scss
@@ -10,8 +10,7 @@
   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%);
+    filter: var(--filterStatic);
   }
   &:hover {
     background-color: var(--btnBgHoverColor);
diff --git a/src/app/shared/components/small-btn/small-btn.component.ts b/src/app/shared/components/small-btn/small-btn.component.ts
index 156f2d1..97416fc 100644
--- a/src/app/shared/components/small-btn/small-btn.component.ts
+++ b/src/app/shared/components/small-btn/small-btn.component.ts
@@ -13,6 +13,8 @@ export class SmallBtnComponent {
   @Input() imgSize: string = '14px';
   @Input() imgFilter: string =
     'brightness(0) saturate(100%) invert(33%) sepia(23%) saturate(5211%) hue-rotate(224deg) brightness(96%) contrast(97%)';
+  @Input() imgFilterStatic: string =
+    'brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7481%) hue-rotate(228deg) brightness(98%) contrast(106%)';
   @Input() btnSize: string = '28px';
   @Input() btnBgColor: string = '';
   @Input() btnBgHoverColor: string = '#edeefe';