From 9a7afd704514d694b226676b093a201be40a4f08 Mon Sep 17 00:00:00 2001
From: Abdurrahman Rajab <rajab-2@windowslive.com>
Date: Sun, 30 Jul 2023 04:22:30 +0300
Subject: [PATCH 1/4] fix: add id to checkbox, add link to profiles

---
 components/atoms/Checkbox/checkbox.tsx        | 51 ++++++++++---------
 components/atoms/UserCard/user-card.tsx       |  4 +-
 .../contributor-profile-info.tsx              |  2 +-
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/components/atoms/Checkbox/checkbox.tsx b/components/atoms/Checkbox/checkbox.tsx
index 0b643d14ad..2736fb7da7 100644
--- a/components/atoms/Checkbox/checkbox.tsx
+++ b/components/atoms/Checkbox/checkbox.tsx
@@ -9,31 +9,34 @@ interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPr
 }
 
 const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
-  ({ className, label, id = "checkbox", ...props }, ref) => (
-    <div className="flex items-center">
-      <CheckboxPrimitive.Root
-        ref={ref}
-        className={clsx(
-          "peer h-4 w-4 shrink-0 rounded-[4px] cursor-pointer bg-white border border-light-slate-8 hover:border-orange-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500",
-          className
-        )}
-        {...props}
-        id={id}
-      >
-        <CheckboxPrimitive.Indicator className={clsx("flex items-center justify-center text-white")}>
-          <FiCheck className="w-full h-full" />
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      {label && (
-        <label
-          htmlFor={id}
-          className="ml-3 text-sm font-medium leading-none cursor-pointer text-light-slate-12 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  ({ className, label, id, ...props }, ref) => {
+    id = id ? id : label?.replaceAll(" ", "_").toLowerCase();
+    return (
+      <div className="flex items-center">
+        <CheckboxPrimitive.Root
+          ref={ref}
+          className={clsx(
+            "peer h-4 w-4 shrink-0 rounded-[4px] cursor-pointer bg-white border border-light-slate-8 hover:border-orange-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500",
+            className
+          )}
+          {...props}
+          id={id}
         >
-          {label}
-        </label>
-      )}
-    </div>
-  )
+          <CheckboxPrimitive.Indicator className={clsx("flex items-center justify-center text-white")}>
+            <FiCheck className="w-full h-full" />
+          </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+        {label && (
+          <label
+            htmlFor={id}
+            className="ml-3 text-sm font-medium leading-none cursor-pointer text-light-slate-12 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  }
 );
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
diff --git a/components/atoms/UserCard/user-card.tsx b/components/atoms/UserCard/user-card.tsx
index 5affce8891..5fb47ce7ce 100644
--- a/components/atoms/UserCard/user-card.tsx
+++ b/components/atoms/UserCard/user-card.tsx
@@ -32,9 +32,9 @@ const UserCard = ({ username, name, meta, loading }: UserCardProps) => {
               src={avatarUrl}
               alt={`${username}'s avatar image`}
             />
-            <div>
+            <div className="text-center">
               <h3 className="text-base text-center">{name}</h3>
-              <p className="text-center text-light-slate-9">{`@${username}`}</p>
+              <a className="text-center text-light-slate-9" href={`/user/${username}`}>{`@${username}`}</a>
             </div>
           </div>
           <div className="flex items-center gap-5 text-base text-center ">
diff --git a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
index 0d6a86e770..52db65a025 100644
--- a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
+++ b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
@@ -54,7 +54,7 @@ const ContributorProfileInfo = ({
           {isConnected && <Badge text="beta" />}
         </div>
         <div className="flex items-center text-sm gap-3">
-          <span className="text-light-slate-11 text-sm">{`@${githubName}`}</span>
+          <a className="text-light-slate-11 text-sm" href={`https://github.coom/${githubName}`}>{`@${githubName}`}</a>
 
           {isConnected && (
             <>

From 5331847e6ce78872ab8e37d4cf56a140462d1608 Mon Sep 17 00:00:00 2001
From: Abdurrahman Rajab <rajab-2@windowslive.com>
Date: Sun, 30 Jul 2023 04:43:55 +0300
Subject: [PATCH 2/4] Typos everywhere :3

---
 .../ContributorProfileInfo/contributor-profile-info.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
index 52db65a025..7740221e30 100644
--- a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
+++ b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
@@ -54,7 +54,7 @@ const ContributorProfileInfo = ({
           {isConnected && <Badge text="beta" />}
         </div>
         <div className="flex items-center text-sm gap-3">
-          <a className="text-light-slate-11 text-sm" href={`https://github.coom/${githubName}`}>{`@${githubName}`}</a>
+          <a className="text-light-slate-11 text-sm" href={`https://github.com/${githubName}`}>{`@${githubName}`}</a>
 
           {isConnected && (
             <>

From 42a044238be2f7fd41d91fa947003aa211f7a8ae Mon Sep 17 00:00:00 2001
From: Abdurrahman Rajab <rajab-2@windowslive.com>
Date: Mon, 31 Jul 2023 19:49:22 +0300
Subject: [PATCH 3/4] Update components/atoms/Checkbox/checkbox.tsx

Co-authored-by: ( Nechiforel David-Samuel ) NsdHSO  <37635083+NsdHSO@users.noreply.github.com>
---
 components/atoms/Checkbox/checkbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/atoms/Checkbox/checkbox.tsx b/components/atoms/Checkbox/checkbox.tsx
index 2736fb7da7..490982f653 100644
--- a/components/atoms/Checkbox/checkbox.tsx
+++ b/components/atoms/Checkbox/checkbox.tsx
@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
         <CheckboxPrimitive.Root
           ref={ref}
           className={clsx(
-            "peer h-4 w-4 shrink-0 rounded-[4px] cursor-pointer bg-white border border-light-slate-8 hover:border-orange-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500",
+            "peer h-4 w-4 shrink-0 rounded cursor-pointer bg-white border border-light-slate-8 hover:border-orange-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500",
             className
           )}
           {...props}

From 655b2aca0f8fe21c424e22c377e58bd4aff63326 Mon Sep 17 00:00:00 2001
From: Abdurrahman Rajab <rajab-2@windowslive.com>
Date: Mon, 31 Jul 2023 19:53:22 +0300
Subject: [PATCH 4/4] chore: convert id to function

---
 components/atoms/Checkbox/checkbox.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/atoms/Checkbox/checkbox.tsx b/components/atoms/Checkbox/checkbox.tsx
index 490982f653..c342f160ac 100644
--- a/components/atoms/Checkbox/checkbox.tsx
+++ b/components/atoms/Checkbox/checkbox.tsx
@@ -10,7 +10,7 @@ interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPr
 
 const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
   ({ className, label, id, ...props }, ref) => {
-    id = id ? id : label?.replaceAll(" ", "_").toLowerCase();
+    const getId = () => id ? id : label?.replaceAll(" ", "_").toLowerCase();
     return (
       <div className="flex items-center">
         <CheckboxPrimitive.Root
@@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
             className
           )}
           {...props}
-          id={id}
+          id={getId()}
         >
           <CheckboxPrimitive.Indicator className={clsx("flex items-center justify-center text-white")}>
             <FiCheck className="w-full h-full" />
@@ -28,7 +28,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
         </CheckboxPrimitive.Root>
         {label && (
           <label
-            htmlFor={id}
+            htmlFor={getId()}
             className="ml-3 text-sm font-medium leading-none cursor-pointer text-light-slate-12 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           >
             {label}