Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update btn contacts

Browse source
This commit is contained in:
Chneemann 2024-09-02 19:27:27 +02:00
parent c50ca2f507
commit 1b163ac134
2 changed files with 31 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/contacts/contact-detail/contact-detail.component.html
View file

@ -1,18 +1,20 @@
<section> <section>
<div class="header"> <div class="header">
<div class="headerline"> <div class="headline">
<div class="title">{{ "contacts.headline" | translate }}</div> <div class="title">{{ "contacts.headline" | translate }}</div>
<div class="blue-bar"></div> <div class="blue-bar"></div>
<div class="metrics-txt"> <div class="metrics-txt">
{{ "contacts.headlineDescription" | translate }} {{ "contacts.headlineDescription" | translate }}
</div> </div>
</div> </div>
<div class="btn-back">
<img <img
[ngClass]="{ 'd-none': !currentUserId }" [ngClass]="{ 'd-none': !currentUserId }"
(click)="closeUserDetails()" (click)="closeUserDetails()"
src="./../../../../assets/img/arrow-left.svg" src="./../../../../assets/img/arrow-left.svg"
/> />
</div> </div>
</div>
@if (currentUserId) { @for (user of checkUserData(currentUserId); track user) @if (currentUserId) { @for (user of checkUserData(currentUserId); track user)
{ {
<div <div

30
src/app/components/contacts/contact-detail/contact-detail.component.scss
View file

@ -2,20 +2,34 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
img { }
width: 32px;
height: 32px; .btn-back {
display: flex;
justify-content: center;
align-items: center;
width: 38px;
height: 38px;
cursor: pointer; cursor: pointer;
img {
width: 22px;
height: 22px;
filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
hue-rotate(154deg) brightness(92%) contrast(92%);
}
&:hover { &:hover {
width: 36px; background-color: var(--light-blue);
height: 36px; border-radius: 100%;
background-color: var(--light-gray); scale: 1.1;
border-radius: 18px; img {
scale: 1.1;
filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
saturate(7485%) hue-rotate(325deg) brightness(100%) contrast(104%);
} }
} }
} }
.headerline { .headline {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;