From 9c19dd58df139211e493c9d5610ef293d7e9c03a Mon Sep 17 00:00:00 2001
From: Andrea Cordoba <dandrea.cordoba@gmail.com>
Date: Fri, 6 Dec 2024 09:57:44 +0100
Subject: [PATCH] feat: add new copy for dashboard, and fix avatar size for
 groups

---
 client/src/features/dashboardV2/DashboardV2.tsx  | 16 +++++-----------
 .../features/dashboardV2/DashboardV2Sessions.tsx |  2 +-
 .../projectsV2/show/GroupShortHandDisplay.tsx    |  2 +-
 .../projectsV2/show/ProjectShortHandDisplay.tsx  |  2 +-
 .../features/usersV2/show/UserAvatar.module.scss |  7 ++++++-
 client/src/features/usersV2/show/UserAvatar.tsx  |  1 +
 client/src/features/usersV2/show/UserShow.tsx    |  3 +--
 7 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/client/src/features/dashboardV2/DashboardV2.tsx b/client/src/features/dashboardV2/DashboardV2.tsx
index 2fb504e71..3f840b702 100644
--- a/client/src/features/dashboardV2/DashboardV2.tsx
+++ b/client/src/features/dashboardV2/DashboardV2.tsx
@@ -248,10 +248,7 @@ function DashboardSearch() {
         <Card className="bg-white">
           <CardHeader>
             <h3>Explore Renkulab</h3>
-            <p>
-              Discover and collaborate on innovative data science projects by
-              exploring Renkulab.io{" "}
-            </p>
+            <p>Explore projects on RenkuLab.</p>
           </CardHeader>
           <CardBody>
             <SearchV2Bar />
@@ -323,8 +320,8 @@ function ProjectList({ data, error, isLoading }: ProjectListProps) {
     </div>
   ) : !hasProjects ? (
     <div>
-      Renku 2.0 Projects let you group together related resources and control
-      who can access them.
+      Collaborate on projects with anyone, with data, code, and compute together
+      in one place.
     </div>
   ) : null;
 
@@ -447,7 +444,7 @@ function UserDashboard() {
           </h3>
         </Link>
         <p className="mb-0">
-          <Link to={userPageUrl} className={cx("link-primary", "text-body")}>
+          <Link to={userPageUrl} className="link-primary">
             @{userInfo.username ?? "unknown"}
           </Link>
         </p>
@@ -572,10 +569,7 @@ function GroupsList({ data, error, isLoading }: GroupListProps) {
       <RtkOrNotebooksError error={error} />
     </div>
   ) : !hasGroups ? (
-    <div>
-      Renku 2.0 Groups let you group together related projects and control who
-      can access them.
-    </div>
+    <div>Share and organize projects & data with your team.</div>
   ) : null;
 
   const groupFooter = hasGroups ? (
diff --git a/client/src/features/dashboardV2/DashboardV2Sessions.tsx b/client/src/features/dashboardV2/DashboardV2Sessions.tsx
index cbcde4e0a..53d1dc48f 100644
--- a/client/src/features/dashboardV2/DashboardV2Sessions.tsx
+++ b/client/src/features/dashboardV2/DashboardV2Sessions.tsx
@@ -91,7 +91,7 @@ function ErrorState({
 function NoSessionsState() {
   return (
     <p className="mb-0">
-      No running sessions. Create a project to launch a session.
+      No running sessions. Create or explore projects to launch a session.
     </p>
   );
 }
diff --git a/client/src/features/projectsV2/show/GroupShortHandDisplay.tsx b/client/src/features/projectsV2/show/GroupShortHandDisplay.tsx
index bb84f1291..4291183ce 100644
--- a/client/src/features/projectsV2/show/GroupShortHandDisplay.tsx
+++ b/client/src/features/projectsV2/show/GroupShortHandDisplay.tsx
@@ -41,7 +41,7 @@ export default function GroupShortHandDisplay({
       data-cy="group-item"
     >
       <div className={cx("d-flex", "gap-2")}>
-        <UserAvatar username={group.name} size={UserAvatarSize.extraLarge} />
+        <UserAvatar username={group.name} size={UserAvatarSize.large} />
         <div
           className={cx(
             "d-flex",
diff --git a/client/src/features/projectsV2/show/ProjectShortHandDisplay.tsx b/client/src/features/projectsV2/show/ProjectShortHandDisplay.tsx
index 52bfeb042..2ab8d5a2b 100644
--- a/client/src/features/projectsV2/show/ProjectShortHandDisplay.tsx
+++ b/client/src/features/projectsV2/show/ProjectShortHandDisplay.tsx
@@ -49,7 +49,7 @@ export default function ProjectShortHandDisplay({
       </div>
 
       <div className={cx("d-flex", element === "card-body" && "mt-auto")}>
-        <p className={cx("fst-italic", "mb-2", "text-truncate")}>
+        <p className={cx("mb-2", "text-truncate", "text-muted")}>
           {project.description}
         </p>
         {project.updated_at ? (
diff --git a/client/src/features/usersV2/show/UserAvatar.module.scss b/client/src/features/usersV2/show/UserAvatar.module.scss
index 625e4b303..1fc271c38 100644
--- a/client/src/features/usersV2/show/UserAvatar.module.scss
+++ b/client/src/features/usersV2/show/UserAvatar.module.scss
@@ -12,11 +12,16 @@
   width: var(--size);
   font-size: var(--font-size);
 
-  &.large {
+  &.medium {
     --size: 32px;
     --font-size: 16px;
   }
 
+  &.large {
+    --size: 43px;
+    --font-size: 20px;
+  }
+
   &.extraLarge {
     --size: 56px;
     --font-size: 24px;
diff --git a/client/src/features/usersV2/show/UserAvatar.tsx b/client/src/features/usersV2/show/UserAvatar.tsx
index 78fd384d9..470006419 100644
--- a/client/src/features/usersV2/show/UserAvatar.tsx
+++ b/client/src/features/usersV2/show/UserAvatar.tsx
@@ -22,6 +22,7 @@ import styles from "./UserAvatar.module.scss";
 
 export enum UserAvatarSize {
   small = "small",
+  medium = "medium",
   large = "large",
   extraLarge = "extra-large",
 }
diff --git a/client/src/features/usersV2/show/UserShow.tsx b/client/src/features/usersV2/show/UserShow.tsx
index 8ad04d967..17f9b1464 100644
--- a/client/src/features/usersV2/show/UserShow.tsx
+++ b/client/src/features/usersV2/show/UserShow.tsx
@@ -36,7 +36,7 @@ import ProjectV2ListDisplay from "../../projectsV2/list/ProjectV2ListDisplay";
 import UserNotFound from "../../projectsV2/notFound/UserNotFound";
 import { EntityPill } from "../../searchV2/components/SearchV2Results";
 import { useGetUserByIdQuery, useGetUserQuery } from "../api/users.api";
-import UserAvatar, { UserAvatarSize } from "./UserAvatar";
+import UserAvatar from "./UserAvatar";
 
 export default function UserShow() {
   const { username } = useParams<{ username: string }>();
@@ -105,7 +105,6 @@ export default function UserShow() {
                 firstName={user.first_name}
                 lastName={user.last_name}
                 username={username}
-                size={UserAvatarSize.large}
               />
               <h2 className="mb-0">{name ?? "Unknown user"}</h2>
             </div>