From efe7a80bf26001b5e4154d7330d6f9f576ed32d7 Mon Sep 17 00:00:00 2001 From: Herman Snevajs Date: Mon, 4 Aug 2025 16:26:58 +0200 Subject: [PATCH 1/3] Adjust avatar font size globally --- .../src/assets/sass/theme-base/components/misc/_avatar.scss | 3 ++- .../assets/sass/themes/mm-theme-light/variables/_misc.scss | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss b/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss index d169b82b..76397b2d 100644 --- a/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss +++ b/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss @@ -1,6 +1,7 @@ .p-avatar { background-color: $avatarBg; border-radius: $borderRadius; + font-size: $avatarFontSize !important; &.p-avatar-lg { width: 3rem; @@ -27,4 +28,4 @@ .p-avatar { border: 2px solid $panelContentBg; } -} \ No newline at end of file +} diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss index b393c03d..0d237314 100644 --- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss +++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss @@ -82,6 +82,11 @@ $progressSpinnerColorFour:$warningMessageTextColor !default; /// @group misc $avatarBg: map-get($map: $colors, $key: medium-green); +/// Avatar font size +/// @group misc +$avatarFontSize: 0.857rem; + + /// Text color of an avatar /// @group misc $avatarTextColor:$textColor; From ff740b8bf3299b284936507afa5b94aade805d81 Mon Sep 17 00:00:00 2001 From: Herman Snevajs Date: Tue, 12 Aug 2025 15:01:52 +0200 Subject: [PATCH 2/3] Fix avatar font-size - normal, large, xlarge --- .../modules/admin/views/AccountDetailView.vue | 7 ++----- .../theme-base/components/misc/_avatar.scss | 17 ++++++++--------- .../sass/themes/mm-theme-light/_extensions.scss | 5 +++++ .../themes/mm-theme-light/variables/_misc.scss | 5 ----- .../modules/user/views/ProfileViewTemplate.vue | 7 ++----- 5 files changed, 17 insertions(+), 24 deletions(-) diff --git a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue index fa2bd6e0..cb283c78 100644 --- a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue +++ b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue @@ -14,14 +14,11 @@ diff --git a/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss b/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss index 76397b2d..66f23259 100644 --- a/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss +++ b/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss @@ -1,25 +1,24 @@ .p-avatar { background-color: $avatarBg; border-radius: $borderRadius; - font-size: $avatarFontSize !important; &.p-avatar-lg { - width: 3rem; - height: 3rem; - font-size: 1.5rem; + width: 2.625rem; + height: 2.625rem; + font-size: 1.125rem; .p-avatar-icon { - font-size: 1.5rem; + font-size: 1.125rem; } } &.p-avatar-xl { - width: 4rem; - height: 4rem; - font-size: 2rem; + width: 7.5rem; + height: 7.5rem; + font-size: 3.214rem; .p-avatar-icon { - font-size: 2rem; + font-size: 3.214rem; } } } diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss index 07760497..fa51ab3c 100644 --- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss +++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss @@ -119,3 +119,8 @@ img { color: map-get($map: $colors, $key: grape); font-weight: 600; } + +// Font size in avatar +.p-avatar:not(.p-avatar-lg):not(.p-avatar-xl) { + font-size: 0.857rem; +} diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss index 0d237314..b393c03d 100644 --- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss +++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss @@ -82,11 +82,6 @@ $progressSpinnerColorFour:$warningMessageTextColor !default; /// @group misc $avatarBg: map-get($map: $colors, $key: medium-green); -/// Avatar font size -/// @group misc -$avatarFontSize: 0.857rem; - - /// Text color of an avatar /// @group misc $avatarTextColor:$textColor; diff --git a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue index 0a670892..86191186 100644 --- a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue +++ b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue @@ -61,13 +61,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial From a8f55353b85f51eba36357c5d0709d0c79ba9d79 Mon Sep 17 00:00:00 2001 From: Herman Snevajs Date: Wed, 13 Aug 2025 10:05:10 +0200 Subject: [PATCH 3/3] add comment about custom values --- .../lib/src/assets/sass/theme-base/components/misc/_avatar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss b/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss index 66f23259..e466e9e9 100644 --- a/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss +++ b/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss @@ -1,3 +1,4 @@ +// widths, heights and font-sizes are updated with custom values from our Figma design .p-avatar { background-color: $avatarBg; border-radius: $borderRadius;