From c0bb68398f8cfa41cfb020010b81d91ff039e384 Mon Sep 17 00:00:00 2001
From: OGBONNA SUNDAY <62995161+OgDev-01@users.noreply.github.com>
Date: Tue, 10 Oct 2023 13:48:21 +0100
Subject: [PATCH] refactor: update all collaboration copy to connection (#1831)

---
 .../NotificationsCard/notification-card.tsx   |  4 +--
 .../connection-card.tsx}                      |  8 ++---
 .../connection-summary-card.tsx}              | 22 ++++++-------
 .../contributor-profile-header.tsx            | 18 +++++------
 .../contributor-profile-info.tsx              |  2 +-
 .../connection-requests-wrapper.tsx}          | 19 ++++++------
 .../contributor-profile-page.tsx              |  2 +-
 .../contributor-profile-tab.tsx               | 22 ++++++-------
 .../UserSettingsPage/user-settings-page.tsx   |  6 ++--
 ...ollaborations.ts => useUserConnections.ts} | 31 +++++++++----------
 next-types.d.ts                               |  4 +--
 pages/feed/index.tsx                          |  6 ++--
 stories/atoms/notification-card.stories.tsx   |  6 ++--
 .../molecules/collaboration-card.stories.tsx  | 10 +++---
 .../collaboration-summary-card.stories.tsx    | 12 +++----
 15 files changed, 85 insertions(+), 87 deletions(-)
 rename components/molecules/{CollaborationCard/collaboration-card.tsx => ConnectionCard/connection-card.tsx} (88%)
 rename components/molecules/{CollaborationSummaryCard/collaboration-summary-card.tsx => ConnectionSummaryCard/connection-summary-card.tsx} (62%)
 rename components/organisms/{CollaborationRequestWrapper/collaboration-requests-wrapper.tsx => ConnectionRequestWrapper/connection-requests-wrapper.tsx} (75%)
 rename lib/hooks/{useUserCollaborations.ts => useUserConnections.ts} (70%)

diff --git a/components/atoms/NotificationsCard/notification-card.tsx b/components/atoms/NotificationsCard/notification-card.tsx
index 3272248b96..9cefa3ba1c 100644
--- a/components/atoms/NotificationsCard/notification-card.tsx
+++ b/components/atoms/NotificationsCard/notification-card.tsx
@@ -5,7 +5,7 @@ import { FaRegSmile, FaUserCircle } from "react-icons/fa";
 import { getNotificationURL } from "lib/utils/get-notification-url";
 
 interface NotificationCard {
-  type: "highlight_reaction" | "follow" | "collaboration";
+  type: "highlight_reaction" | "follow" | "connections";
   message: string;
   id: string;
 }
@@ -14,7 +14,7 @@ const NotificationCard = ({ type, message, id }: NotificationCard) => {
   const Icons = {
     highlight_reaction: FaRegSmile,
     follow: FaUserCircle,
-    collaboration: FaUserCircle,
+    connections: FaUserCircle,
   };
 
   const Icon = Icons[type];
diff --git a/components/molecules/CollaborationCard/collaboration-card.tsx b/components/molecules/ConnectionCard/connection-card.tsx
similarity index 88%
rename from components/molecules/CollaborationCard/collaboration-card.tsx
rename to components/molecules/ConnectionCard/connection-card.tsx
index 5ffc35593c..c834894b7d 100644
--- a/components/molecules/CollaborationCard/collaboration-card.tsx
+++ b/components/molecules/ConnectionCard/connection-card.tsx
@@ -4,7 +4,7 @@ import Avatar from "components/atoms/Avatar/avatar";
 import { getAvatarByUsername } from "lib/utils/github";
 import Button from "components/atoms/Button/button";
 
-export interface CollaborationRequestObject extends React.ComponentProps<"div"> {
+export interface ConnectionRequestObject extends React.ComponentProps<"div"> {
   requestor: DbUser;
   outreachMessage: string;
   requestId: string;
@@ -12,14 +12,14 @@ export interface CollaborationRequestObject extends React.ComponentProps<"div">
   onDecline: (id: string) => void;
 }
 
-const CollaborationCard = ({
+const ConnectionCard = ({
   requestor,
   outreachMessage,
   className,
   requestId,
   onAccept,
   onDecline,
-}: CollaborationRequestObject) => {
+}: ConnectionRequestObject) => {
   return (
     <div className={clsx("flex flex-col w-full gap-4 p-4 bg-white border rounded-2xl border-light-slate-6", className)}>
       <div className="flex items-center justify-between text-sm ">
@@ -45,4 +45,4 @@ const CollaborationCard = ({
   );
 };
 
-export default CollaborationCard;
+export default ConnectionCard;
diff --git a/components/molecules/CollaborationSummaryCard/collaboration-summary-card.tsx b/components/molecules/ConnectionSummaryCard/connection-summary-card.tsx
similarity index 62%
rename from components/molecules/CollaborationSummaryCard/collaboration-summary-card.tsx
rename to components/molecules/ConnectionSummaryCard/connection-summary-card.tsx
index 5adf07ca65..83c961fd6f 100644
--- a/components/molecules/CollaborationSummaryCard/collaboration-summary-card.tsx
+++ b/components/molecules/ConnectionSummaryCard/connection-summary-card.tsx
@@ -3,20 +3,20 @@ import { TbMessageCode } from "react-icons/tb";
 import React from "react";
 import { BiMessage } from "react-icons/bi";
 import Avatar from "components/atoms/Avatar/avatar";
-import { CollaborationRequestObject } from "../CollaborationCard/collaboration-card";
+import { ConnectionRequestObject } from "../ConnectionCard/connection-card";
 
-interface CollaborationSummaryCardProps {
-  requests: CollaborationRequestObject[];
+interface ConnectionSummaryCardProps {
+  requests: ConnectionRequestObject[];
   connectionsCount?: number;
   messagesCount?: number;
 }
-const CollaborationSummaryCard = ({ requests, connectionsCount, messagesCount }: CollaborationSummaryCardProps) => {
+const ConnectionSummaryCard = ({ requests, connectionsCount, messagesCount }: ConnectionSummaryCardProps) => {
   return (
-    <div className="bg-white flex flex-col gap-4 rounded-2xl border-light-slate-6  p-4 border max-w-2xl">
-      <div className="flex justify-between text-sm items-center ">
-        <div className="flex gap-2 text-sm items-center">
+    <div className="flex flex-col max-w-2xl gap-4 p-4 bg-white border rounded-2xl border-light-slate-6">
+      <div className="flex items-center justify-between text-sm ">
+        <div className="flex items-center gap-2 text-sm">
           <div className="flex items-center">
-            Collaboration requests:{" "}
+            Connection requests:{" "}
             <span className="flex items-center gap-3 ml-3">
               {requests.map((i, index) => (
                 <Avatar
@@ -31,11 +31,11 @@ const CollaborationSummaryCard = ({ requests, connectionsCount, messagesCount }:
         </div>
         <div className="flex gap-2">
           <button className="px-2">Archive</button>
-          <button className="bg-light-orange-9 px-2 py-1 outline-none rounded-lg text-white">Expand</button>
+          <button className="px-2 py-1 text-white rounded-lg outline-none bg-light-orange-9">Expand</button>
         </div>
       </div>
       <div>{requests[0].outreachMessage}</div>
-      <div className="text-light-slate-10 gap-3 items-center flex">
+      <div className="flex items-center gap-3 text-light-slate-10">
         <div className="flex items-center gap-2">
           <TbMessageCode /> <span className="text-sm">{connectionsCount} connections</span>
         </div>
@@ -47,4 +47,4 @@ const CollaborationSummaryCard = ({ requests, connectionsCount, messagesCount }:
   );
 };
 
-export default CollaborationSummaryCard;
+export default ConnectionSummaryCard;
diff --git a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
index 5176fa28bf..f1d5372e10 100644
--- a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
+++ b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
@@ -21,7 +21,7 @@ import RainbowBg from "img/rainbow-cover.png";
 import Button from "components/atoms/Button/button";
 import Text from "components/atoms/Typography/text";
 import { Textarea } from "components/atoms/Textarea/text-area";
-import { useUserCollaborations } from "lib/hooks/useUserCollaborations";
+import { useUserConnections } from "lib/hooks/useUserConnections";
 import { useToast } from "lib/hooks/useToast";
 import { cardPageUrl } from "lib/utils/urls";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../Dialog/dialog";
@@ -37,7 +37,7 @@ interface ContributorProfileHeaderProps {
   username: string | undefined;
   handleSignIn: (params: SignInWithOAuthCredentials) => void;
   isOwner: boolean;
-  isRecievingCollaborations?: boolean;
+  isRecievingConnections?: boolean;
   isPremium?: boolean;
 }
 const ContributorProfileHeader = ({
@@ -51,14 +51,14 @@ const ContributorProfileHeader = ({
   user,
   handleSignIn,
   isOwner,
-  isRecievingCollaborations,
+  isRecievingConnections,
   isPremium,
 }: ContributorProfileHeaderProps) => {
   const router = useRouter();
   const currentPath = router.asPath;
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [loading, setLoading] = useState(false);
-  const { requestCollaboration } = useUserCollaborations();
+  const { requestConnection } = useUserConnections();
   const [message, setMessage] = useState("");
   const [charCount, setCharCount] = useState(0);
   const [isCheckingCharLimit, setIsCheckingCharLimit] = useState<boolean>(false);
@@ -82,12 +82,12 @@ const ContributorProfileHeader = ({
     }
   };
 
-  const handleCollaborationRequest = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleConnectionRequest = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (message && username) {
       setLoading(true);
-      await requestCollaboration({ username, message });
+      await requestConnection({ username, message });
       setIsDialogOpen(false);
       setTimeout(() => {
         document.body.setAttribute("style", "pointer-events:auto !important");
@@ -230,7 +230,7 @@ const ContributorProfileHeader = ({
                           </button>
                         </DropdownMenuItem>
 
-                        {isPremium && isRecievingCollaborations && (
+                        {isPremium && isRecievingConnections && (
                           <DropdownMenuItem className="rounded-md">
                             <button onClick={() => setIsDialogOpen(true)} className="flex items-center gap-1 pl-3 pr-7">
                               Collaborate
@@ -251,7 +251,7 @@ const ContributorProfileHeader = ({
                           Share
                         </button>
                       </DropdownMenuItem>
-                      {isRecievingCollaborations && (
+                      {isRecievingConnections && (
                         <DropdownMenuItem className="rounded-md">
                           <button
                             onClick={async () =>
@@ -280,7 +280,7 @@ const ContributorProfileHeader = ({
             <DialogTitle className="!text-3xl text-left">Collaborate with {username}!</DialogTitle>
           </DialogHeader>
 
-          <form onSubmit={handleCollaborationRequest} className="flex flex-col w-full gap-2 px-4 md:gap-8 md:px-14 ">
+          <form onSubmit={handleConnectionRequest} className="flex flex-col w-full gap-2 px-4 md:gap-8 md:px-14 ">
             <div className="space-y-2">
               <label htmlFor="message">Send a message</label>
               <Textarea
diff --git a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
index 916c3c6949..fa0d3dd71f 100644
--- a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
+++ b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
@@ -154,7 +154,7 @@ const ContributorProfileInfo = ({
               {/* <span className="flex gap-2 items-center">
                 <HiOutlineMail className="text-light-slate-9" />
                 <Link className="w-max hover:text-orange-500 " href="#">
-                  Send a collaboration request
+                  Send a connections request
                 </Link>
               </span> */}
             </div>
diff --git a/components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx b/components/organisms/ConnectionRequestWrapper/connection-requests-wrapper.tsx
similarity index 75%
rename from components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx
rename to components/organisms/ConnectionRequestWrapper/connection-requests-wrapper.tsx
index ac06160898..93c10ea2fb 100644
--- a/components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx
+++ b/components/organisms/ConnectionRequestWrapper/connection-requests-wrapper.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { isToday, isYesterday, formatDistanceToNowStrict } from "date-fns";
-import CollaborationCard from "components/molecules/CollaborationCard/collaboration-card";
-import { useUserCollaborations } from "lib/hooks/useUserCollaborations";
+import ConnectionCard from "components/molecules/ConnectionCard/connection-card";
+import { useUserConnections } from "lib/hooks/useUserConnections";
 import DashContainer from "components/atoms/DashedContainer/DashContainer";
 
 function formatPostDate(date: Date) {
@@ -14,8 +14,8 @@ function formatPostDate(date: Date) {
   }
 }
 
-const CollaborationRequestsWrapper = () => {
-  const { data, updateCollaborationStatus, deleteCollaborationRequest } = useUserCollaborations();
+const ConnectionRequestsWrapper = () => {
+  const { data, updateConnectionStatus, deleteConnectionRequest } = useUserConnections();
   let currentDate: string;
 
   const getDateGroupHeader = (date: Date, index: number) => {
@@ -45,9 +45,9 @@ const CollaborationRequestsWrapper = () => {
                 <div className="w-full mt-1 text-center md:text-left">
                   {getDateGroupHeader(new Date(requests.created_at), i)}
                 </div>
-                <CollaborationCard
-                  onDecline={deleteCollaborationRequest}
-                  onAccept={updateCollaborationStatus}
+                <ConnectionCard
+                  onDecline={deleteConnectionRequest}
+                  onAccept={updateConnectionStatus}
                   requestId={requests.id}
                   className="self-end w-full mt-1 md:w-5/6 md:mt-1"
                   outreachMessage={requests.message}
@@ -60,8 +60,7 @@ const CollaborationRequestsWrapper = () => {
         <DashContainer className="flex-col gap-6 md:gap-8 text-light-slate-9">
           <p>No pending requests.</p>
           <p className="text-center md:px-16">
-            Sometimes you got to be a friend to make a friend. Considering requesting collaboration on sharing profile
-            on social channels like GitHub or Twitter
+            Sometimes you got to be a friend to make a friend. Considering inviting other developers to OpenSauced
           </p>
         </DashContainer>
       )}
@@ -69,4 +68,4 @@ const CollaborationRequestsWrapper = () => {
   );
 };
 
-export default CollaborationRequestsWrapper;
+export default ConnectionRequestsWrapper;
diff --git a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
index f352f96913..9549c31d1c 100644
--- a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
+++ b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
@@ -104,7 +104,7 @@ const ContributorProfilePage = ({
           isPremium={user ? user.role >= 50 : false}
           handleSignIn={signIn}
           username={user?.login}
-          isRecievingCollaborations={user?.receive_collaboration}
+          isRecievingConnections={user?.receive_collaboration}
           user={loggedInUser}
           isFollowing={followError ? false : true}
           isConnected={iscConnected}
diff --git a/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx b/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
index ad8f155bdb..62cc397bac 100644
--- a/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
+++ b/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
@@ -24,7 +24,7 @@ import PaginationResults from "components/molecules/PaginationResults/pagination
 import Pagination from "components/molecules/Pagination/pagination";
 import DashContainer from "components/atoms/DashedContainer/DashContainer";
 import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
-import CollaborationRequestsWrapper from "../CollaborationRequestWrapper/collaboration-requests-wrapper";
+import ConnectionRequestsWrapper from "../ConnectionRequestWrapper/connection-requests-wrapper";
 import UserRepositoryRecommendations from "../UserRepositoryRecommendations/user-repository-recommendations";
 
 interface ContributorProfileTabProps {
@@ -40,7 +40,7 @@ interface ContributorProfileTabProps {
   repoList: RepoList[];
 }
 
-type TabKey = "highlights" | "contributions" | "requests" | "recommendations";
+type TabKey = "highlights" | "contributions" | "connections" | "recommendations";
 
 // Query Params type for this page
 interface QueryParams {
@@ -50,7 +50,7 @@ interface QueryParams {
 const tabs: Record<TabKey, string> = {
   highlights: "Highlights",
   contributions: "Contributions",
-  requests: "Requests",
+  connections: "Connections",
   recommendations: "Recommendations",
 };
 
@@ -91,8 +91,8 @@ const ContributorProfileTab = ({
       !tab ||
       !Object.keys(tabs).includes(tab as string) ||
       (tab === "recommendations" && user_name !== login) ||
-      (tab === "requests" && !receive_collaboration) ||
-      (tab === "requests" && user_name !== login)
+      (tab === "connections" && !receive_collaboration) ||
+      (tab === "connections" && user_name !== login)
     ) {
       setQueryParams({ tab: currentTab } satisfies QueryParams);
     }
@@ -106,10 +106,10 @@ const ContributorProfileTab = ({
       tab === "recommendations" &&
         "font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#EA4600] to-[#EB9B00]",
       user && user_name !== login && tab === "recommendations" && "hidden",
-      user && user_name !== login && tab === "requests" && "hidden",
+      user && user_name !== login && tab === "connections" && "hidden",
       !user && tab === "recommendations" && "hidden",
-      !user && tab === "requests" && "hidden",
-      !receive_collaboration && tab === "requests" && "hidden"
+      !user && tab === "connections" && "hidden",
+      !receive_collaboration && tab === "connections" && "hidden"
     );
   };
 
@@ -310,9 +310,9 @@ const ContributorProfileTab = ({
 
       {user && user.user_metadata.user_name === login && (
         <>
-          {/* Collaboration requests tab details */}
-          <TabsContent value={"requests" satisfies TabKey}>
-            <CollaborationRequestsWrapper />
+          {/* Connection requests tab details */}
+          <TabsContent value={"connections" satisfies TabKey}>
+            <ConnectionRequestsWrapper />
           </TabsContent>
 
           {/* Recommendation tab details */}
diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
index def6d14328..26d7fd8eac 100644
--- a/components/organisms/UserSettingsPage/user-settings-page.tsx
+++ b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -80,7 +80,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
       formRef.current!.linkedin_url.value = response.linkedin_url;
       formRef.current!.discord_url.value = response.discord_url;
     }
-  }, [user, session]);
+  }, [user, session, userInfo]);
 
   useEffect(() => {
     if (insightsUser) {
@@ -362,8 +362,8 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
                   setEmailPreference((prev) => ({ ...prev, receive_collaboration: !prev.receive_collaboration }))
                 }
                 checked={emailPreference.receive_collaboration}
-                title="collaboration requests"
-                label="Receive collaboration requests"
+                title="connections requests"
+                label="Receive connections requests"
               />
             </div>
             <Button
diff --git a/lib/hooks/useUserCollaborations.ts b/lib/hooks/useUserConnections.ts
similarity index 70%
rename from lib/hooks/useUserCollaborations.ts
rename to lib/hooks/useUserConnections.ts
index 01446fc5df..4ecd42be4d 100644
--- a/lib/hooks/useUserCollaborations.ts
+++ b/lib/hooks/useUserConnections.ts
@@ -3,24 +3,24 @@ import publicApiFetcher from "lib/utils/public-api-fetcher";
 import useSupabaseAuth from "./useSupabaseAuth";
 import { useToast } from "./useToast";
 
-interface UserCollaborationResponse {
-  data?: DbUserCollaboration[];
+interface UserConnectionResponse {
+  data?: DbUserConnection[];
   meta: Meta;
 }
 
-type collaborationRequestPayload = {
+type connectionsRequestPayload = {
   username: string;
   message: string;
 };
-const useUserCollaborations = () => {
+const useUserConnections = () => {
   const { sessionToken } = useSupabaseAuth();
   const { toast } = useToast();
-  const { data, error, mutate } = useSWR<UserCollaborationResponse, Error>(
+  const { data, error, mutate } = useSWR<UserConnectionResponse, Error>(
     "user/collaborations",
-    publicApiFetcher as Fetcher<UserCollaborationResponse, Error>
+    publicApiFetcher as Fetcher<UserConnectionResponse, Error>
   );
 
-  async function requestCollaboration(payload: collaborationRequestPayload) {
+  async function requestConnection(payload: connectionsRequestPayload) {
     const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/collaborations`, {
       method: "POST",
       headers: {
@@ -31,13 +31,12 @@ const useUserCollaborations = () => {
     });
 
     if (req && req.ok) {
-      const response = await req.json();
-      toast({ description: "Collaboration request Sent!", title: "Success", variant: "success" });
+      toast({ description: "Connection request Sent!", title: "Success", variant: "success" });
     } else {
       const response = await req?.json();
       if (response.statusCode === 401) {
         toast({
-          description: "You require upgraded access to use collaborations!",
+          description: "You require upgraded access to use connections!",
           title: "Not allowed",
           variant: "danger",
         });
@@ -49,7 +48,7 @@ const useUserCollaborations = () => {
     }
   }
 
-  async function updateCollaborationStatus(requestId: string) {
+  async function updateConnectionStatus(requestId: string) {
     const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/collaborations/${requestId}`, {
       method: "PATCH",
       headers: {
@@ -65,7 +64,7 @@ const useUserCollaborations = () => {
     }
   }
 
-  async function deleteCollaborationRequest(requestId: string) {
+  async function deleteConnectionRequest(requestId: string) {
     const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/collaborations/${requestId}`, {
       method: "DELETE",
       headers: {
@@ -83,10 +82,10 @@ const useUserCollaborations = () => {
     data: data?.data ?? [],
     isLoading: !error && !data,
     isError: !!error,
-    requestCollaboration,
-    updateCollaborationStatus,
-    deleteCollaborationRequest,
+    requestConnection,
+    updateConnectionStatus,
+    deleteConnectionRequest,
   };
 };
 
-export { useUserCollaborations };
+export { useUserConnections };
diff --git a/next-types.d.ts b/next-types.d.ts
index 30cf498693..32c25bee7f 100644
--- a/next-types.d.ts
+++ b/next-types.d.ts
@@ -76,7 +76,7 @@ interface DBListContributor {
   readonly languages: Object;
   readonly public_gists: number;
   readonly public_repos: number;
-  readonly receive_collaborations: boolean;
+  readonly receive_collaboration: boolean;
   readonly username: string;
 }
 
@@ -304,7 +304,7 @@ interface DbUserNotification {
   readonly from_user: DbUser;
 }
 
-interface DbUserCollaboration {
+interface DbUserConnection {
   readonly id: string;
   readonly user_id: number;
   readonly request_user_id: number;
diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
index a273a2bf61..74d430bc99 100644
--- a/pages/feed/index.tsx
+++ b/pages/feed/index.tsx
@@ -311,7 +311,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
           </TabsList>
 
           {user && (
-            <div className="lg:gap-x-3 px-1 pt-4 flex max-w-3xl">
+            <div className="flex max-w-3xl px-1 pt-4 lg:gap-x-3">
               <div className="hidden lg:inline-flex pt-[0.4rem]">
                 <Avatar
                   alt="user profile avatar"
@@ -327,7 +327,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
           <TabsContent value="home">
             <HomeHighlightsWrapper emojis={emojis} mutate={mutate} highlights={data} loading={isLoading} />
             {meta.pageCount > 1 && (
-              <div className="mt-10 max-w-3xl flex px-2 items-center justify-between">
+              <div className="flex items-center justify-between max-w-3xl px-2 mt-10">
                 <div className="flex items-center w-max gap-x-4">
                   <PaginationResults metaInfo={meta} total={meta.itemCount} entity={"highlights"} />
                 </div>
@@ -355,7 +355,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
             <FollowingHighlightWrapper selectedFilter={selectedRepo} emojis={emojis} />
           </TabsContent>
         </Tabs>
-        <div className="hidden w-1/3 xl:w-1/4 flex-none gap-6 mt-10 lg:flex flex-col sticky top-20">
+        <div className="sticky flex-col flex-none hidden w-1/3 gap-6 mt-10 xl:w-1/4 lg:flex top-20">
           {repoList && repoList.length > 0 && (
             <HighlightsFilterCard
               setSelected={(repo) => {
diff --git a/stories/atoms/notification-card.stories.tsx b/stories/atoms/notification-card.stories.tsx
index 2a75a036f5..f381bb9dd0 100644
--- a/stories/atoms/notification-card.stories.tsx
+++ b/stories/atoms/notification-card.stories.tsx
@@ -10,7 +10,7 @@ const NotificationCardTemplate: ComponentStory<typeof NotificationCard> = (args)
 
 export const Reations = NotificationCardTemplate.bind({});
 export const Follows = NotificationCardTemplate.bind({});
-export const Collaborations = NotificationCardTemplate.bind({});
+export const Connections = NotificationCardTemplate.bind({});
 
 Reations.args = {
   type: "highlight_reaction",
@@ -24,8 +24,8 @@ Follows.args = {
   id: "bdougie",
 };
 
-Collaborations.args = {
-  type: "collaboration",
+Connections.args = {
+  type: "connections",
   message: "bdougie invited you to collaborate",
   id: "1s356g",
 };
diff --git a/stories/molecules/collaboration-card.stories.tsx b/stories/molecules/collaboration-card.stories.tsx
index 979fdb4e80..03f4908eb9 100644
--- a/stories/molecules/collaboration-card.stories.tsx
+++ b/stories/molecules/collaboration-card.stories.tsx
@@ -1,17 +1,17 @@
 import { ComponentStory } from "@storybook/react";
-import CollaborationCard from "components/molecules/CollaborationCard/collaboration-card";
+import ConnectionCard from "components/molecules/ConnectionCard/connection-card";
 
 const storyConfig = {
-  title: "Design System/Molecules/Collaboration Card",
+  title: "Design System/Molecules/Connection Card",
 };
 
 export default storyConfig;
 
-const CollaborationCardTemplate: ComponentStory<typeof CollaborationCard> = (args) => <CollaborationCard {...args} />;
+const ConnectionCardTemplate: ComponentStory<typeof ConnectionCard> = (args) => <ConnectionCard {...args} />;
 
-export const CollaborationCardStory = CollaborationCardTemplate.bind({});
+export const ConnectionCardStory = ConnectionCardTemplate.bind({});
 
-CollaborationCardStory.args = {
+ConnectionCardStory.args = {
   outreachMessage:
     " Hello Nate, we’re currently working on a project and think that you would be a great fit for our team. Would yoube interested in joining us",
   requestor: {
diff --git a/stories/molecules/collaboration-summary-card.stories.tsx b/stories/molecules/collaboration-summary-card.stories.tsx
index 68f885dfa2..1dc875275d 100644
--- a/stories/molecules/collaboration-summary-card.stories.tsx
+++ b/stories/molecules/collaboration-summary-card.stories.tsx
@@ -1,15 +1,15 @@
 import { ComponentStory } from "@storybook/react";
 
-import CollaborationSummaryCard from "components/molecules/CollaborationSummaryCard/collaboration-summary-card";
+import ConnectionSummaryCard from "components/molecules/ConnectionSummaryCard/connection-summary-card";
 
 const storyConfig = {
-  title: "Design System/Molecules/Collaboration Summary card",
+  title: "Design System/Molecules/Connection Summary card",
 };
 
 export default storyConfig;
 
-const CollaborationCardTemplate: ComponentStory<typeof CollaborationSummaryCard> = (args) => (
-  <CollaborationSummaryCard {...args} />
+const ConnectionCardTemplate: ComponentStory<typeof ConnectionSummaryCard> = (args) => (
+  <ConnectionSummaryCard {...args} />
 );
 
 const requestor = {
@@ -17,9 +17,9 @@ const requestor = {
   name: "Janice Smith",
 } as DbUser;
 
-export const CollaborationCardStory = CollaborationCardTemplate.bind({});
+export const ConnectionCardStory = ConnectionCardTemplate.bind({});
 
-CollaborationCardStory.args = {
+ConnectionCardStory.args = {
   requests: [
     {
       outreachMessage: