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';