feat: add OSCR tooltip to user page (#3857)

open-sauced · Aug 8, 2024 · fd5fa41 · fd5fa41
2 parents f9008b5 + 25fee67
commit fd5fa41
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx b/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
@@ -38,6 +38,7 @@ import IssueCommentsTable from "components/Profiles/IssueCommentsTable/issue-com
 import { contributionsOptions, useContributionsFilter } from "components/Profiles/contributors-sub-tab-list";
 import { SubTabsList } from "components/TabList/tab-list";
 import { OscrButton } from "components/Contributors/Oscr";
+import InfoTooltip from "components/shared/InfoTooltip";
 import { INITIAL_DEV_STATS_TIMESTAMP } from "lib/utils/devStats";
 import UserRepositoryRecommendations from "../UserRepositoryRecommendations/user-repository-recommendations";
 
@@ -369,9 +370,14 @@ const ContributorProfileTab = ({
             <div className="flex justify-end">
               <DayRangePicker />
             </div>
-            <div className="grid grid-cols-2 2xl:grid-cols-4 justify-between gap-2 lg:flex-row md:gap-12 lg:gap-16">
+            <div className="grid grid-cols-2 2xl:grid-cols-4 justify-between my-2 gap-2 lg:flex-row md:gap-12 lg:gap-16 items-center">
               <div>
-                <span className="text-xs text-light-slate-11">OSCR</span>
+                <span className="relative text-xs text-light-slate-11 flex gap-0.5 items-center">
+                  <span>OSCR Rating</span>
+                  <span className="text-sm grid place-content-center">
+                    <InfoTooltip information="OSCR evaluates the engagement and impact of contributors across the entire open source ecosystem." />
+                  </span>
+                </span>
                 <div className="flex mt-1 text-lg md:text-xl lg:text-2xl !text-black leading-none">
                   <OscrButton
                     rating={contributor?.oscr}
@@ -381,7 +387,7 @@ const ContributorProfileTab = ({
                 </div>
               </div>
               <div>
-                <span className="text-xs text-light-slate-11">PRs opened</span>
+                <span className="text-xs text-light-slate-11 flex items-center">PRs opened</span>
                 {totalPrs ? (
                   <div className="flex mt-1 !text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
                     {totalPrs} PRs
@@ -392,7 +398,7 @@ const ContributorProfileTab = ({
               </div>
 
               <div>
-                <span className="text-xs text-light-slate-11">Avg PR velocity</span>
+                <span className="text-xs text-light-slate-11 flex items-center">Avg PR velocity</span>
                 {prVelocity ? (
                   <div className="flex mt-1 gap-2 !text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
                     <span>{prVelocity} PRs</span>
@@ -403,7 +409,7 @@ const ContributorProfileTab = ({
                 )}
               </div>
               <div>
-                <span className="text-xs text-light-slate-11">Contributed Repos</span>
+                <span className="text-xs text-light-slate-11 flex items-center">Contributed Repos</span>
                 {recentContributionCount ? (
                   <div className="flex mt-1 !text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
                     {`${recentContributionCount} Repo${recentContributionCount > 1 ? "s" : ""}`}

diff --git a/components/shared/InfoTooltip.tsx b/components/shared/InfoTooltip.tsx
@@ -15,7 +15,7 @@ export default function InfoTooltip({ information, icon }: { information: string
       <TooltipPortal>
         <TooltipContent
           side="bottom"
-          className="w-fit max-w-xs text-sm shadow-lg text-slate-100 px-4 py-3 rounded-xl bg-[#171E29]"
+          className="z-50 w-fit max-w-xs text-sm shadow-lg text-slate-100 px-4 py-3 rounded-xl bg-[#171E29]"
         >
           <TooltipArrow className="fill-[#171E29]" />
           {information}