From 88b09b343d9c9363d64208ea73ddb9c77f3a2fee Mon Sep 17 00:00:00 2001
From: Johannes <johannes@formbricks.com>
Date: Wed, 15 May 2024 17:58:00 +0200
Subject: [PATCH] levels tweaks

---
 app/(dashboard)/dashboard/page.tsx            |  3 +-
 .../leaderboard/components/Leaderboard.tsx    |  6 +--
 app/[githubLogin]/page.tsx                    | 18 +++----
 components/ui/userPointsAndLevelCard.tsx      | 26 ++++++----
 components/ui/userProfileSummary.tsx          | 51 ++++++++++---------
 lib/github/hooks/issue.ts                     |  2 +-
 6 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 1fcff41..82307e7 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -123,12 +123,13 @@ export default async function DashboardPage() {
     <DashboardShell>
       <DashboardHeader heading="Shall we play a game?"></DashboardHeader>
 
-      <div className=" grid gap-4 ">
+      <div className=" grid gap-8">
         {pointsAndLevelsPerRepository.map((repositoryData, index) => {
           return (
             <div key={repositoryData.id}>
               <UserPointsAndLevelCard
                 key={repositoryData.id}
+                repositoryId={repositoryData.id}
                 repositoryName={repositoryData.repositoryName}
                 points={repositoryData.points}
                 rank={repositoryData.rank}
diff --git a/app/(dashboard)/enroll/[repositoryId]/leaderboard/components/Leaderboard.tsx b/app/(dashboard)/enroll/[repositoryId]/leaderboard/components/Leaderboard.tsx
index 7582e1a..69ea571 100644
--- a/app/(dashboard)/enroll/[repositoryId]/leaderboard/components/Leaderboard.tsx
+++ b/app/(dashboard)/enroll/[repositoryId]/leaderboard/components/Leaderboard.tsx
@@ -82,12 +82,12 @@ export default function Leaderboard({
 
             return (
               <div key={level.id}>
-                <div className="mt-6 border-b-2  border-foreground  py-3">
+                <div className="mt-6 border-b border-foreground/25 py-3">
                   <div className="flex items-center gap-6">
                     <Avatar className="h-12 w-12">
                       <AvatarImage src={level.iconUrl} alt="level icon" />
                     </Avatar>
-                    <div className="">
+                    <div className="font-medium text-foreground">
                       Level {sortedLevels.length - levelIndex}: {capitalizeEachWord(level.name)}
                     </div>
                   </div>
@@ -106,7 +106,7 @@ export default function Leaderboard({
                     </>
                   ))
                 ) : (
-                  <p key={`${level.id}-no-players`}>
+                  <p key={`${level.id}-no-players`} className="py-4 text-foreground/50">
                     No player levelled up here yet. Who&prime;s gonna be the first?
                   </p>
                 )}
diff --git a/app/[githubLogin]/page.tsx b/app/[githubLogin]/page.tsx
index 70627f9..fd6ee2c 100644
--- a/app/[githubLogin]/page.tsx
+++ b/app/[githubLogin]/page.tsx
@@ -166,15 +166,15 @@ export default async function ProfilePage({ params }) {
               <div>
                 <h3 className="mb-2 text-xl font-medium">Congrats! </h3>
                 {userEnrollments.map((item) => (
-                  <div key={item.id}>
-                    <div className="flex items-center space-x-3 rounded-lg border border-muted p-3">
-                      <div className="rounded-md border border-gray-200 bg-gray-50 p-2 text-3xl">🎉</div>
-                      <div>
-                        <p className="font-medium">
-                          {githubUserData?.name} enrolled to contribute to {item.name}
-                        </p>
-                        <p className="mt-0.5 text-xs">Let the games begin!</p>
-                      </div>
+                  <div
+                    key={item.id}
+                    className="mb-2 flex items-center space-x-3 rounded-lg border border-muted p-3">
+                    <div className="rounded-md border border-gray-200 bg-gray-50 p-2 text-3xl">🎉</div>
+                    <div>
+                      <p className="font-medium">
+                        {githubUserData?.name} enrolled to contribute to {item.name}
+                      </p>
+                      <p className="mt-0.5 text-xs">Let the games begin!</p>
                     </div>
                   </div>
                 ))}
diff --git a/components/ui/userPointsAndLevelCard.tsx b/components/ui/userPointsAndLevelCard.tsx
index 2554c2d..f0e92cf 100644
--- a/components/ui/userPointsAndLevelCard.tsx
+++ b/components/ui/userPointsAndLevelCard.tsx
@@ -4,6 +4,7 @@ import { calculateLevelProgress } from "@/lib/utils/levelUtils";
 import { TLevel } from "@/types/level";
 import { capitalizeEachWord, capitalizeFirstLetter } from "lib/utils/textformat";
 import Image from "next/image";
+import Link from "next/link";
 
 import { Avatar, AvatarImage } from "./avatar";
 import { ConditionalParagraphAssignable } from "./conditionalParagraph";
@@ -11,6 +12,7 @@ import ProgressBar from "./progressBar";
 
 interface UserPointsAndLevelCardProps {
   repositoryName: string;
+  repositoryId: string;
   repositoryLogo?: string | null;
   points: number;
   rank: number | null;
@@ -22,6 +24,7 @@ interface UserPointsAndLevelCardProps {
 const UserPointsAndLevelCard = ({
   repositoryName,
   repositoryLogo,
+  repositoryId,
   points,
   rank,
   currentLevelOfUser,
@@ -35,6 +38,7 @@ const UserPointsAndLevelCard = ({
       )}
       <UserPointsCard
         repositoryName={repositoryName}
+        repositoryId={repositoryId}
         points={points}
         rank={rank}
         repositoryLogo={repositoryLogo}
@@ -49,7 +53,7 @@ export default UserPointsAndLevelCard;
 
 const UserLevelCard = ({ currentLevelOfUser, assignableTags }) => {
   return (
-    <div className=" flex h-full w-full flex-col items-center space-y-4 rounded-lg bg-popover p-4 font-semibold">
+    <div className=" flex h-full w-full flex-col items-center justify-center space-y-4 rounded-lg bg-popover p-4 font-semibold">
       <Avatar className="h-40 w-40">
         <AvatarImage src={currentLevelOfUser.iconUrl} alt="level icon" />
       </Avatar>
@@ -78,6 +82,7 @@ const UserLevelCard = ({ currentLevelOfUser, assignableTags }) => {
 const UserPointsCard = ({
   repositoryName,
   repositoryLogo,
+  repositoryId,
   points,
   rank,
   currentLevelOfUser,
@@ -86,15 +91,18 @@ const UserPointsCard = ({
   const { progressMadeInThisLevel } = calculateLevelProgress(points, currentLevelOfUser, nextLevelForUser);
   return (
     <div className="flex h-full w-full flex-col items-center justify-center space-y-4 rounded-lg bg-popover p-4 font-semibold">
-      <div className="flex items-center gap-3">
-        <div className="text-3xl">{capitalizeFirstLetter(repositoryName)}</div>
-        {repositoryLogo && (
-          <Image src={repositoryLogo} height={35} width={35} alt="repository-logo" className="rounded-lg" />
-        )}
-      </div>
+      <Link href={`/enroll/${repositoryId}/details`} className="hover:underline">
+        <div className="flex items-center gap-3">
+          <div className="text-lg">{capitalizeFirstLetter(repositoryName)}</div>
+          {repositoryLogo && (
+            <Image src={repositoryLogo} height={35} width={35} alt="repository-logo" className="rounded-lg" />
+          )}
+        </div>
+      </Link>
       <p className="text-5xl font-bold lg:text-8xl">{points}</p>
-      <p className="text-lg font-semibold">{rank === null ? "No points, no rank 🤷" : `# Rank ${rank}`}</p>
-
+      <Link href={`/enroll/${repositoryId}/leaderboard`} className="hover:underline">
+        <p className="text-lg font-semibold">{rank === null ? "No points, no rank 🤷" : `# Rank ${rank}`}</p>
+      </Link>
       {currentLevelOfUser && (
         <div className=" flex w-11/12 flex-col space-y-3 pt-3">
           <ProgressBar barColor="#18181B" progress={progressMadeInThisLevel} height={3} />
diff --git a/components/ui/userProfileSummary.tsx b/components/ui/userProfileSummary.tsx
index 8ae3e4b..e914c1b 100644
--- a/components/ui/userProfileSummary.tsx
+++ b/components/ui/userProfileSummary.tsx
@@ -28,36 +28,37 @@ const UserProfileSummary: React.FC<UserProfileSummaryProps> = ({
     return;
   };
   return (
-    <div className="flex justify-between border-b py-4">
-      <div className="flex w-fit items-center gap-4 sm:gap-12">
-        <div>#{index}</div>
-        <div>
-          <UserAvatar className="h-8 w-8" user={{ name: name, avatarUrl: avatarUrl }} />
+    <Link key={userGitHubId} href={`https://oss.gg/${userGitHubId}`} target="_blank">
+      <div className="group flex justify-between border-b py-4">
+        <div className="flex w-fit items-center gap-4 sm:gap-12">
+          <div>#{index}</div>
+          <div>
+            <UserAvatar className="h-8 w-8" user={{ name: name, avatarUrl: avatarUrl }} />
+          </div>
+
+          <div className="group-hover:underline">{name}</div>
         </div>
-        <Link key={userGitHubId} href={`https://oss.gg/${userGitHubId}`} target="_blank">
-          <div className="hover:underline">{name}</div>
-        </Link>
-      </div>
 
-      <div className="flex w-auto items-center gap-4">
-        {showSettingButtons && (
-          <div className="flex gap-2">
-            <Button size={"sm"} variant={"destructive"} onClick={kickAndBlockHandler}>
-              Kick and block
-            </Button>
-            <Button size={"sm"} variant={"default"} onClick={kickAndBlockHandler}>
-              Mute
-            </Button>
-            <Button size={"sm"} variant={"default"} onClick={kickAndBlockHandler}>
-              Change Points
-            </Button>
+        <div className="flex w-auto items-center gap-4">
+          {showSettingButtons && (
+            <div className="flex gap-2">
+              <Button size={"sm"} variant={"destructive"} onClick={kickAndBlockHandler}>
+                Kick and block
+              </Button>
+              <Button size={"sm"} variant={"default"} onClick={kickAndBlockHandler}>
+                Mute
+              </Button>
+              <Button size={"sm"} variant={"default"} onClick={kickAndBlockHandler}>
+                Change Points
+              </Button>
+            </div>
+          )}
+          <div className=" w-[6rem] whitespace-nowrap text-justify   font-[400] dark:text-white">
+            {points} points
           </div>
-        )}
-        <div className=" w-[6rem] whitespace-nowrap text-justify   font-[400] dark:text-white">
-          {points} points
         </div>
       </div>
-    </div>
+    </Link>
   );
 };
 export default UserProfileSummary;
diff --git a/lib/github/hooks/issue.ts b/lib/github/hooks/issue.ts
index 13acd69..1cb174a 100644
--- a/lib/github/hooks/issue.ts
+++ b/lib/github/hooks/issue.ts
@@ -163,7 +163,7 @@ export const onAssignCommented = async (webhooks: Webhooks) => {
               owner,
               repo,
               issue_number: issueNumber,
-              body: `With your current level, you are not yet able to work on this issue.`,
+              body: `With your current level, you are not yet able to work on this issue. Please have a look on oss.gg to see which levels can work on which issues 🤓`,
             });
             return;
           }