From aa7788251f4b8a97e15bb6af9a30847a907ccb37 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Fri, 8 Mar 2024 12:41:05 +0000
Subject: [PATCH] fix(ui): update default avatar and change scrollbar width
---
src/app/header/header.component.html | 9 +---
src/app/header/header.component.scss | 7 ---
src/app/profile/profile.component.html | 2 +-
src/app/profile/profile.component.scss | 4 --
.../svg-icon/svg-icon.component.scss | 1 +
src/assets/avatar/defaultAvatar.svg | 50 +++++++++++++++++++
src/assets/avatar/sprite.svg | 23 +--------
src/styles.scss | 2 +-
8 files changed, 55 insertions(+), 43 deletions(-)
create mode 100644 src/assets/avatar/defaultAvatar.svg
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 5e4269474..d61179a6e 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -91,14 +91,7 @@
</div>
<div class="profileMenu" [@fadeInOut]>
<div class="profileInformation">
- <app-svg-icon
- class="avatar"
- tabindex="0"
- [folder]="'avatar'"
- [icon]="'defaultAvatar'"
- [iconClass]="'icon-40'"
- (click)="isLoggedIn ? openProfileMenu() : goToLoginPage()"
- />
+ <img src="../../assets/avatar/defaultAvatar.svg" alt="" height="40" width="40" />
<span class="name">{{ displayFullName }}</span>
</div>
<div class="profileMenuButtons">
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 79cd170eb..45d9e75d5 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -169,13 +169,6 @@ a {
display: flex;
align-items: center;
gap: 12px;
- .avatar {
- flex-shrink: 0;
- width: 40px;
- height: 44px;
- background: $grey-9;
- border-radius: 4px;
- }
.name {
@include font-bold-16;
display: -webkit-box;
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index 86e1e80a1..caf058f0e 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -42,7 +42,7 @@
/>
</div>
<div class="profile">
- <app-svg-icon class="avatar" [folder]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-112'" />
+ <img class="avatar" src="../../assets/avatar/defaultAvatar.svg" alt="" height="120" width="120" />
<div class="information">
<div class="block">
<div class="name">{{ userProfile.name | userName }} {{ userProfile.surname | uppercase }}</div>
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss
index 48ee89d93..f30228c02 100644
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -53,10 +53,6 @@ section {
width: 100%;
.avatar {
- height: 112px;
- width: 112px;
- background: $grey-9;
- border-radius: 8px;
@media #{$tablet} {
display: none;
}
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index 81dba2944..e1469f113 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -22,6 +22,7 @@ $sizes: (
75: 75px,
80: 80px,
112: 112px,
+ 120: 120px,
);
@each $sizename, $size in $sizes {
diff --git a/src/assets/avatar/defaultAvatar.svg b/src/assets/avatar/defaultAvatar.svg
new file mode 100644
index 000000000..08d805e44
--- /dev/null
+++ b/src/assets/avatar/defaultAvatar.svg
@@ -0,0 +1,50 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g clip-path="url(#clip0_10763_5247)">
+ <rect width="120" height="120" rx="60" fill="#A0C7F1" />
+ <path d="M86 87.3816C90.8333 90.2149 100.4 98.3816 100 108.382" stroke="#8C8C8C" stroke-width="13"
+ stroke-linecap="round" />
+ <path d="M82 90.3816C86.8333 93.2149 96.4 101.382 96 111.382" stroke="#333333" stroke-width="13"
+ stroke-linecap="round" />
+ <path d="M91.5 83.3816C91.1667 84.3816 89.9 86.5816 87.5 87.3816" stroke="#333333" stroke-linecap="round" />
+ <path d="M95 86.3816C94.6667 87.3816 93.4 89.5816 91 90.3816" stroke="#333333" stroke-linecap="round" />
+ <path d="M98 89.3816C97.6667 90.3816 96.4 92.5816 94 93.3816" stroke="#333333" stroke-linecap="round" />
+ <path d="M101 93.3816C100.667 94.3816 99.4 96.5816 97 97.3816" stroke="#333333" stroke-linecap="round" />
+ <ellipse cx="63.5" cy="131.382" rx="39.5" ry="55" fill="white" />
+ <rect x="52" y="56.1572" width="18.5914" height="28.9293" rx="9.29571" transform="rotate(-5.48041 52 56.1572)"
+ fill="#8C8C8C" />
+ <rect x="52.4302" y="70.7715" width="19.5538" height="9.42546" rx="4.71273"
+ transform="rotate(-8.70286 52.4302 70.7715)" fill="#333333" />
+ <path
+ d="M91.8074 49.9478C94.5201 68.1444 80.2487 73.5629 62.0521 76.2756C43.8555 78.9882 28.6243 77.9677 25.9117 59.7711C23.199 41.5745 35.7513 24.6242 53.9479 21.9116C72.1445 19.1989 89.0948 31.7512 91.8074 49.9478Z"
+ fill="white" />
+ <path
+ d="M89.9522 49.2298C92.0572 63.3503 80.9827 67.5551 66.8621 69.6601C52.7416 71.7651 40.9222 70.9732 38.8172 56.8527C36.7122 42.7321 46.4527 29.5787 60.5733 27.4737C74.6938 25.3687 87.8472 35.1092 89.9522 49.2298Z"
+ fill="#333333" />
+ <rect x="53" y="41.9294" width="5" height="9" rx="2.5" transform="rotate(-6.29132 53 41.9294)" fill="#FF5D5C" />
+ <rect x="54.1035" y="42.814" width="2" height="3" rx="1" transform="rotate(-6.29132 54.1035 42.814)" fill="white" />
+ <rect x="74" y="39.9294" width="5" height="9" rx="2.5" transform="rotate(-6.29132 74 39.9294)" fill="#FF5D5C" />
+ <rect x="75.1035" y="40.8137" width="2" height="3" rx="1" transform="rotate(-6.29132 75.1035 40.8137)"
+ fill="white" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M64.2549 53.1825C64.4048 52.887 64.7659 52.769 65.0615 52.9189C66.261 53.5274 67.8745 53.7845 69.3737 53.6268C70.888 53.4674 72.1467 52.9029 72.7772 52.0219C72.97 51.7525 73.3448 51.6903 73.6143 51.8832C73.8838 52.076 73.9459 52.4508 73.7531 52.7203C72.8385 53.9982 71.1774 54.6436 69.4993 54.8202C67.806 54.9983 65.9545 54.7174 64.5186 53.9891C64.2231 53.8392 64.105 53.4781 64.2549 53.1825Z"
+ fill="white" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M95.7269 99.5711C89.0915 106.237 79.7933 110.382 69.5 110.382C55.2176 110.382 42.8511 102.403 36.8553 90.7786C28.9552 100.835 24 115.303 24 131.382C24 161.757 41.6848 186.382 63.5 186.382C85.3152 186.382 103 161.757 103 131.382C103 119.529 100.307 108.551 95.7269 99.5711Z"
+ fill="#FFDDDD" />
+ <path
+ d="M46.2915 93.7738C48.7173 91.1275 48.5385 87.0158 45.8922 84.5901C43.2459 82.1643 39.1342 82.3431 36.7085 84.9894L46.2915 93.7738ZM36.7085 84.9894L29.3427 93.0248L38.9257 101.809L46.2915 93.7738L36.7085 84.9894ZM22.9962 105.238L18.6518 124.985L31.3482 127.778L35.6926 108.031L22.9962 105.238ZM29.3427 93.0248C26.1885 96.4657 23.9992 100.679 22.9962 105.238L35.6926 108.031C36.2035 105.708 37.3189 103.562 38.9257 101.809L29.3427 93.0248Z"
+ fill="#C1C1C1" />
+ <path
+ d="M47.08 93.7466C48.3862 92.3217 48.29 90.1077 46.865 88.8016C45.4401 87.4954 43.2261 87.5916 41.92 89.0166L47.08 93.7466ZM41.92 89.0166L34.5542 97.0519L39.7143 101.782L47.08 93.7466L41.92 89.0166ZM28.9262 107.882L24.5817 127.63L31.4183 129.134L35.7627 109.386L28.9262 107.882ZM34.5542 97.0519C31.7571 100.103 29.8156 103.839 28.9262 107.882L35.7627 109.386C36.3872 106.548 37.7503 103.924 39.7143 101.782L34.5542 97.0519Z"
+ fill="#8C8C8C" />
+ <path d="M34 87.3816C34.1754 89.75 36.4211 94.8658 44 96.3816" stroke="#8C8C8C" stroke-linecap="round" />
+ <path d="M31 91.3816C31.1579 93.75 33.1789 98.8658 40 100.382" stroke="#8C8C8C" stroke-linecap="round" />
+ <path d="M28 95.3816C28.1579 97.75 30.1789 102.866 37 104.382" stroke="#8C8C8C" stroke-linecap="round" />
+ <path d="M25 99.3816C25.1667 101.882 27.3 107.282 34.5 108.882" stroke="#8C8C8C" stroke-linecap="round" />
+ </g>
+ <defs>
+ <clipPath id="clip0_10763_5247">
+ <rect width="120" height="120" rx="60" fill="white" />
+ </clipPath>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/avatar/sprite.svg b/src/assets/avatar/sprite.svg
index 422f307d3..cf02ed55d 100644
--- a/src/assets/avatar/sprite.svg
+++ b/src/assets/avatar/sprite.svg
@@ -1,23 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg">
-
- <symbol id="defaultAvatar" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
- <circle r="3.33333" transform="matrix(-1 0 0 1 10.0002 24.6673)" fill="#B1B0B0"/>
- <circle r="3.33333" transform="matrix(-1 0 0 1 30.0002 24.6673)" fill="#B1B0B0"/>
- <rect width="8" height="12" rx="4" transform="matrix(-1 0 0 1 24 28.0225)" fill="#D4D4D4"/>
- <rect width="8" height="12" rx="4" transform="matrix(-1 0 0 1 24 25.334)" fill="#B1B0B0"/>
- <circle r="10.6667" transform="matrix(-1 0 0 1 20.0003 24.0007)" fill="#D4D4D4"/>
- <path d="M22.4594 28.1165C21.1149 29.7394 18.8854 29.7394 17.5409 28.1165C17.0912 27.5737 17.4209 26.667 18.0679 26.667L21.9324 26.667C22.5794 26.667 22.9091 27.5737 22.4594 28.1165Z" fill="white"/>
- <circle cx="28.0003" cy="26.6673" r="1.33333" fill="#DA3635"/>
- <circle cx="12.0003" cy="26.6673" r="1.33333" fill="#DA3635"/>
- <path d="M27.0007 20.001H22.6148C21.9642 20.001 21.4868 20.6124 21.6446 21.2435L22.1002 23.0657C22.4335 24.399 23.6314 25.3343 25.0057 25.3343C26.6598 25.3343 28.0007 23.9934 28.0007 22.3394V21.001C28.0007 20.4487 27.5529 20.001 27.0007 20.001Z" fill="black"/>
- <path d="M13.0003 20.001H17.3862C18.0368 20.001 18.5141 20.6124 18.3564 21.2435L17.9008 23.0657C17.5675 24.399 16.3696 25.3343 14.9953 25.3343C13.3412 25.3343 12.0003 23.9934 12.0003 22.3394V21.001C12.0003 20.4487 12.448 20.001 13.0003 20.001Z" fill="black"/>
- <path d="M17.3335 21.3343L19.1057 20.4482C19.6688 20.1667 20.3315 20.1667 20.8946 20.4482L22.6668 21.3343" stroke="black" stroke-width="1.33333"/>
- <line x1="0.666667" y1="-0.666667" x2="3.30647" y2="-0.666667" transform="matrix(0.942009 -0.335587 0.409703 0.912219 13.334 21.334)" stroke="black" stroke-width="1.33333" stroke-linecap="round"/>
- <line x1="0.666667" y1="-0.666667" x2="3.30647" y2="-0.666667" transform="matrix(-0.942009 -0.335587 -0.409703 0.912219 26.6675 21.334)" stroke="black" stroke-width="1.33333" stroke-linecap="round"/>
- <path d="M15.6069 14.863C15.6069 18.7159 18.9168 17.3337 22.9998 17.3337C24.7581 17.3337 26.286 18.5419 26.6912 20.2529L30.2094 35.1075C30.4575 36.1553 31.9998 35.9752 31.9998 34.8984V19.2788C31.9998 15.8305 30.2574 12.6156 27.3683 10.7331C24.5175 8.87561 20.8129 7.43023 18.1739 9.57797C16.602 10.8573 15.6069 12.7505 15.6069 14.863Z" fill="black"/>
- <path fill-rule="evenodd" clip-rule="evenodd" d="M29.3333 29.1677C28.1546 31.2919 26.2718 32.9714 24 33.891V35.9997C24 37.3808 23.3 38.5984 22.2355 39.3172C22.9436 39.7502 23.776 39.9997 24.6667 39.9997C27.244 39.9997 29.3333 37.9103 29.3333 35.333V29.1677ZM29.959 28.1375C29.8479 28.3034 29.7328 28.4663 29.6138 28.6262C29.6919 28.4643 29.766 28.3001 29.836 28.1338C29.8768 28.1358 29.9178 28.137 29.959 28.1375ZM31.979 22.1219C31.9929 21.8837 32 21.6438 32 21.4021C32 14.7365 26.6274 9.33301 20 9.33301C13.3726 9.33301 8 14.7365 8 21.4021C8 21.6438 8.00706 21.8837 8.02099 22.1219C8.48102 21.7819 9.03162 21.5575 9.62993 21.4914C10.7581 16.8107 14.9729 13.3331 20 13.3331C25.0271 13.3331 29.2419 16.8107 30.3701 21.4914C30.9684 21.5575 31.519 21.7819 31.979 22.1219ZM10.041 28.1375C10.0822 28.137 10.1232 28.1358 10.164 28.1338C10.234 28.3001 10.3081 28.4643 10.3862 28.6262C10.2672 28.4663 10.1521 28.3034 10.041 28.1375Z" fill="black"/>
- <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9993 25.6367C19.6823 25.3202 19.1766 25.2358 18.7704 25.4604L16.4965 26.7179C16.017 26.9831 15.8576 27.5784 16.1404 28.0477C16.4233 28.5169 17.0413 28.6824 17.5207 28.4172L19.7946 27.1597C19.8712 27.1174 19.9396 27.0666 19.9993 27.0093C20.0591 27.0666 20.1275 27.1174 20.2041 27.1597L22.478 28.4172C22.9574 28.6824 23.5754 28.5169 23.8582 28.0477C24.1411 27.5784 23.9817 26.9831 23.5022 26.7179L21.2283 25.4604C20.8221 25.2357 20.3164 25.3202 19.9993 25.6367Z" fill="black"/>
- </symbol>
-
-</svg>
-
+</svg>
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index a8303d32e..933e3c883 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -26,7 +26,7 @@ body {
color: $grey-1;
background-color: $grey-10;
::-webkit-scrollbar {
- width: 4px;
+ width: 8px;
height: 4px;
}
/* Track */
--
GitLab