feat: add profile badge to connected user profile (#824)

Fixes #821
Fixes #820

components/atoms/Badge/badge.tsx

@@ -0,0 +1,17 @@
+interface BadgeProps {
+  text: string;
+  className?: string;
+}
+const Badge = ({ text, className }: BadgeProps): JSX.Element => {
+  return (
+    <div
+      className={`text-light-orange-9 item-center inline-flex justify-center text-sm px-3 rounded-2xl h-6 bg-light-orange-3 w-max py-0.5 ${
+        className || ""
+      }`}
+    >
+      {text}
+    </div>
+  );
+};
+
+export default Badge;

components/atoms/InsightBadge/insight-badge.tsx

@@ -1,15 +1,13 @@
-import Text from "components/atoms/Typography/text";
-
 interface BadgeProps {
   isPublic: boolean;
 }
 
-const Badge = ({ isPublic }: BadgeProps): JSX.Element => {
+const InsightsBadge = ({ isPublic }: BadgeProps): JSX.Element => {
   return (
     <div className="inline-flex border h-8 border-light-slate-6 rounded-3xl bg-light-slate-3 px-2.5 py-1">
       <span className="text-light-slate-11 leading-normal">{!!isPublic ? "Public" : "Private"}</span>
     </div>
   );
 };
 
-export default Badge;
+export default InsightsBadge;

components/molecules/ContributorProfileInfo/contributor-profile-info.tsx

@@ -7,6 +7,7 @@ import { HiOutlineMail } from "react-icons/hi";
 
 import LanguagePill from "components/atoms/LanguagePill/LanguagePill";
 import Title from "components/atoms/Typography/title";
+import Badge from "components/atoms/Badge/badge";
 
 interface ContributorProfileInfoProps {
   githubName: string;
@@ -29,9 +30,12 @@ const ContributorProfileInfo = ({
   return (
     <div className="flex flex-col gap-6">
       <div className="pb-6 border-b">
-        <Title className="!text-2xl !text-light-slate-12" level={3}>
-          {githubName}
-        </Title>
+        <div className="flex gap-2 items-center mb-2">
+          <Title className="!text-2xl !text-light-slate-12" level={3}>
+            {githubName}
+          </Title>
+          {isConnected && <Badge text="beta" />}
+        </div>
         <div className="flex items-center text-sm gap-3">
           <span className="text-light-slate-11 text-sm">{`@${githubName}`}</span>
 

layouts/profile.tsx

@@ -8,7 +8,7 @@ const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
     <>
       <TopNav />
       <div className="page-container flex min-h-[calc(100vh-(54px+95px))] flex-col items-center">
-        <main className="flex w-full flex-1 flex-col items-center bg-light-slate-2">{children}</main>
+        <main className="flex pb-16 w-full flex-1 flex-col items-center bg-light-slate-2">{children}</main>
       </div>
       <Footer />
     </>

stories/atoms/badge.stories.tsx

@@ -0,0 +1,15 @@
+import Badge from "components/atoms/Badge/badge";
+import { ComponentStory } from "@storybook/react";
+
+const StoryConfig = {
+  title: "Design System/Atoms/Badge"
+};
+export default StoryConfig;
+
+const BadgeTemplate: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
+
+export const BadgeStory = BadgeTemplate.bind({});
+
+BadgeStory.args = {
+  text: "beta"
+};

stories/atoms/insight-badge.stories.tsx

@@ -1,17 +1,15 @@
 import { ComponentStory } from "@storybook/react";
-import Badge from "components/atoms/InsightBadge/insight-badge";
-
+import InsightsBadge from "components/atoms/InsightBadge/insight-badge";
 
 const storyConfig = {
-  title: "Design System/Atoms/Badge"
+  title: "Design System/Atoms/InsightsBadge"
 };
 
 export default storyConfig;
 
-const BadgeTemplate:ComponentStory<typeof Badge>  = (args) => <Badge {...args}/>;
+const BadgeTemplate: ComponentStory<typeof InsightsBadge> = (args) => <InsightsBadge {...args} />;
 
-export const isPublic =  BadgeTemplate.bind({});
-isPublic.args = {isPublic:true};
+export const isPublic = BadgeTemplate.bind({});
+isPublic.args = { isPublic: true };
 export const isPrivate = BadgeTemplate.bind({});
-isPublic.args = {isPublic:false};
-
+isPrivate.args = { isPublic: false };