Merge pull request #34163 from Jerome-Herbinet/patch-6

User list : User name and Display name visibility improvement

apps/settings/css/settings.css

@@ -1383,6 +1383,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+#body-settings #app-content.user-list-grid .row > div.name .subtitle,
+#body-settings #app-content.user-list-grid .row > .displayName > form.name .subtitle,
+#body-settings #app-content.user-list-grid .row > form.name .subtitle {
+  color: var(--color-main-text);
+}
 #body-settings #app-content.user-list-grid .row > div.quota,
 #body-settings #app-content.user-list-grid .row > .displayName > form.quota,
 #body-settings #app-content.user-list-grid .row > form.quota {

apps/settings/css/settings.scss

@@ -1564,6 +1564,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 					-webkit-box-orient: vertical;
 				}
 
+				&.name .subtitle {
+					color: var(--color-main-text);
+				}
+
 				&.quota {
 					display: flex;;
 					justify-content: left;

apps/settings/src/components/UserList.vue

@@ -156,11 +156,12 @@
 			class="row">
 			<div id="headerAvatar" class="avatar" />
 			<div id="headerName" class="name">
-				{{ t('settings', 'Username') }}
-
 				<div class="subtitle">
-					{{ t('settings', 'Display name') }}
+					<strong>
+						{{ t('settings', 'Display name') }}
+					</strong>
 				</div>
+				{{ t('settings', 'Username') }}
 			</div>
 			<div id="headerPassword" class="password">
 				{{ t('settings', 'Password') }}

apps/settings/src/components/UserList/UserRowSimple.vue

@@ -11,12 +11,14 @@
 		</div>
 		<!-- dirty hack to ellipsis on two lines -->
 		<div class="name">
-			{{ user.id }}
 			<div class="displayName subtitle">
 				<div v-tooltip="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
-					{{ user.displayname }}
+					<strong>
+						{{ user.displayname }}
+					</strong>
 				</div>
 			</div>
+			{{ user.id }}
 		</div>
 		<div />
 		<div class="mailAddress">