💄 - style: implement landing page design more strictly

Author: svenvandescheur

frontend/src/pages/destructionlist/utils.ts

@@ -27,9 +27,16 @@ export async function updateSelectedZaken(
 /**
  * Returns the correct format for a user.
  * @param user
+ * @param showRole
  */
-export function formatUser(user: User) {
-  if (user.firstName && user.lastName)
-    return `${user.firstName} ${user.lastName} (${user.username})`;
-  return user.username;
+export function formatUser(user: User, showRole = false) {
+  const displayName =
+    user.firstName && user.lastName
+      ? `${user.firstName} ${user.lastName} (${user.username})`
+      : user.username;
+
+  if (showRole && user.role.name) {
+    return `${displayName} (${user.role.name})`;
+  }
+  return displayName;
 }

frontend/src/pages/landing/Landing.css

@@ -1,3 +1,4 @@
-.LandingPage {
-  /* Rules here. */
+.LandingPage__assignees-count {
+  color: var(--page-color-primary);
+  font-weight: var(--typography-font-weight-bold);
 }

frontend/src/pages/landing/Landing.tsx

@@ -111,13 +111,18 @@ export const Landing = () => {
 
   const objectLists: AttributeData[][] = Object.values(statusMap).map((lists) =>
     lists.map((list) => {
-      const firstAssignee = list.assignees[0];
+      const currentAssignee = list.assignee;
       const otherAssignees = [...list.assignees].splice(1);
 
       const footer = (
         <P muted size="xs">
-          {formatUser(firstAssignee.user)}
-          {otherAssignees.length && <strong> +{otherAssignees.length}</strong>}
+          {formatUser(currentAssignee, true)}
+          {otherAssignees.length && (
+            <strong className="LandingPage__assignees-count">
+              {" "}
+              +{otherAssignees.length}
+            </strong>
+          )}
         </P>
       );
 
@@ -128,7 +133,9 @@ export const Landing = () => {
         timeAgo: timeAgo(list.created),
         assignees: otherAssignees.length ? (
           <Tooltip
-            content={otherAssignees.map((a) => formatUser(a.user)).join(", ")}
+            content={otherAssignees
+              .map((a) => formatUser(a.user, true))
+              .join(", ")}
             placement="top"
           >
             <span>{footer}</span>