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

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

@ -1,17 +1,19 @@
<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>
<img <div class="btn-back">
[ngClass]="{ 'd-none': !currentUserId }" <img
(click)="closeUserDetails()" [ngClass]="{ 'd-none': !currentUserId }"
src="./../../../../assets/img/arrow-left.svg" (click)="closeUserDetails()"
/> 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)
{ {

32
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;
}
.btn-back {
display: flex;
justify-content: center;
align-items: center;
width: 38px;
height: 38px;
cursor: pointer;
img { img {
width: 32px; width: 22px;
height: 32px; height: 22px;
cursor: pointer; filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
&:hover { hue-rotate(154deg) brightness(92%) contrast(92%);
width: 36px; }
height: 36px; &:hover {
background-color: var(--light-gray); background-color: var(--light-blue);
border-radius: 18px; border-radius: 100%;
scale: 1.1;
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;