fix: align OSCR pill with the username (#4048)

Co-authored-by: Nick Taylor <nick@nickyt.co>
open-sauced · Aug 29, 2024 · 0cc087d · 0cc087d
1 parent 8a9066a
commit 0cc087d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 21 deletions.
diff --git a/components/Contributors/Oscr.tsx b/components/Contributors/Oscr.tsx
@@ -27,26 +27,28 @@ export const OscrPill = ({ rating, hideRating, signIn = DEFAULT_SIGN_IN, calcula
 
   return (
     <Tooltip direction="top" content={tooltipText}>
-      {hideRating ? (
-        <div className="relative flex items-center justify-center w-fit">
-          <span className="absolute blur-sm text-xl text-purple-00 leading-tight">000</span>
-          <Button
-            variant="primary"
-            className="flex items-center gap-2 !p-1 !text-xs z-0"
-            onClick={() => {
-              posthog.capture("OSCR Login Button Clicked", {
-                pathname: router.pathname,
-              });
-              signIn({ provider: "github", options: { redirectTo: window.location.href } });
-            }}
-          >
-            <span className="sr-only">{OSCR_LOGIN_TEXT}</span>
-            <LockIcon size={16} />
-          </Button>
-        </div>
-      ) : (
-        <Pill color="purple" size="small" text={`${ratingToRender}`} />
-      )}
+      <div className="relative flex items-center justify-center w-fit">
+        {hideRating ? (
+          <>
+            <span className="absolute blur-sm text-xl text-purple-00 leading-tight">000</span>
+            <Button
+              variant="primary"
+              className="flex items-center gap-2 !p-1 !text-xs z-0"
+              onClick={() => {
+                posthog.capture("OSCR Login Button Clicked", {
+                  pathname: router.pathname,
+                });
+                signIn({ provider: "github", options: { redirectTo: window.location.href } });
+              }}
+            >
+              <span className="sr-only">{OSCR_LOGIN_TEXT}</span>
+              <LockIcon size={16} />
+            </Button>
+          </>
+        ) : (
+          <Pill color="purple" size="small" text={`${ratingToRender}`} />
+        )}
+      </div>
     </Tooltip>
   );
 };

diff --git a/components/organisms/ContributorCard/contributor-card.tsx b/components/organisms/ContributorCard/contributor-card.tsx
@@ -66,7 +66,7 @@ const ContributorCard = ({
               <Avatar size={40} avatarURL={githubAvatar ? githubAvatar : undefined} />
             </Link>
             <div>
-              <div className="flex gap-2">
+              <div className="flex gap-2 items-center">
                 <Link href={`/u/${username}`} as={`/u/${username}`}>
                   <Text className="!text-base !text-black">{username}</Text>
                 </Link>