From e3a1fcfb5ab4e9d84a243a1034dcce35b917ab45 Mon Sep 17 00:00:00 2001
From: OGBONNA SUNDAY <62995161+OgDev-01@users.noreply.github.com>
Date: Wed, 1 Feb 2023 17:21:03 +0100
Subject: [PATCH] feat: add profile badge to connected user profile (#824)

Fixes #821
Fixes #820
---
 components/atoms/Badge/badge.tsx                | 17 +++++++++++++++++
 components/atoms/InsightBadge/insight-badge.tsx |  6 ++----
 .../contributor-profile-info.tsx                | 10 +++++++---
 layouts/profile.tsx                             |  2 +-
 stories/atoms/badge.stories.tsx                 | 15 +++++++++++++++
 stories/atoms/insight-badge.stories.tsx         | 14 ++++++--------
 6 files changed, 48 insertions(+), 16 deletions(-)
 create mode 100644 components/atoms/Badge/badge.tsx
 create mode 100644 stories/atoms/badge.stories.tsx

diff --git a/components/atoms/Badge/badge.tsx b/components/atoms/Badge/badge.tsx
new file mode 100644
index 000000000..7103f5be9
--- /dev/null
+++ b/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;
diff --git a/components/atoms/InsightBadge/insight-badge.tsx b/components/atoms/InsightBadge/insight-badge.tsx
index 3a380a9ac..0262ed8e7 100644
--- a/components/atoms/InsightBadge/insight-badge.tsx
+++ b/components/atoms/InsightBadge/insight-badge.tsx
@@ -1,10 +1,8 @@
-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>
@@ -12,4 +10,4 @@ const Badge = ({ isPublic }: BadgeProps): JSX.Element => {
   );
 };
 
-export default Badge;
+export default InsightsBadge;
diff --git a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
index 60b68c3dc..b036fc92d 100644
--- a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
+++ b/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>
 
diff --git a/layouts/profile.tsx b/layouts/profile.tsx
index 5450a0bdd..ad02077c0 100644
--- a/layouts/profile.tsx
+++ b/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 />
     </>
diff --git a/stories/atoms/badge.stories.tsx b/stories/atoms/badge.stories.tsx
new file mode 100644
index 000000000..0b00db468
--- /dev/null
+++ b/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"
+};
diff --git a/stories/atoms/insight-badge.stories.tsx b/stories/atoms/insight-badge.stories.tsx
index e061c5654..90b8ee42e 100644
--- a/stories/atoms/insight-badge.stories.tsx
+++ b/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 };