Collins (#334)

* refactor: update project components and API for voting functionality

- Adjust layout and styling in ProjectsPage and ProjectCard components.
- Enhance ProjectSidebar to include crowdfund data and voting logic.
- Implement new API methods for voting, retrieving votes, and removing votes.
- Update types for vote handling in the API.
- Clean up unused code and improve responsiveness across components.

* chore: update project dependencies and enhance project details layout

* feat: added static api for staging

* fix: made few changes

* fix: minor changes

* feat: chaged test data

* fix:  minor fixes

* refactor: update project components and improve functionality

* feat: file clean up

* feat:  added extra validation

* feat: integrate wallet protection and validation across components

* feat: enhance profile components and add activity tracking

- Refactor ProfileData to use ProfileDataClient for improved user data display.
- Introduce ActivityFeed and ActivityTab components for tracking user activities.
- Implement filtering and sorting functionality in the new ProjectsTab and FilterControls components.
- Add modal support for displaying followers and following lists.
- Create reusable TeamList component for displaying team members across various sections.
- Integrate mock data for testing and development purposes.
- Update UserStats to include clickable follower and following counts for better user interaction.

* feat: add lodash.debounce and enhance profile components with user data integration

- Added lodash.debounce for improved performance in user interactions.
- Updated ProfileDataClient to utilize user data for displaying activities and stats.
- Refactored ActivityFeed and ActivityTab components to fetch real user activities and statistics.
- Removed mock data dependencies from FollowersModal and ProjectsTab, integrating real user data instead.
- Enhanced ProjectsTab to support infinite scrolling and dynamic project loading based on user data.

* feat: enhance navbar and project components for improved responsiveness and user experience

- Integrated useWindowSize hook to adjust component layouts and styles based on screen size.
- Updated Navbar component to improve spacing and responsiveness for various screen sizes.
- Refactored ProjectCard to support full-width display and adjusted styles accordingly.
- Enhanced ProjectList and ProjectsTab to utilize updated ProjectCard properties and improve project status mapping.
- Improved MobileMenu and AuthenticatedNav for better user interaction and accessibility.

* feat: enhance organization layout and settings components for improved user experience

- Updated OrganizationsLayout to include relative positioning for better layout control.
- Refactored OrganizationContent to replace Button with BoundlessButton for consistency.
- Enhanced OrganizationHeader with sticky positioning and improved link styling.
- Introduced new tabs in OrganizationSettings for Profile, Links, Members, and Transfer Ownership, improving organization management.
- Added new components for managing organization links and members, including EmailInviteSection and PermissionsTable.
- Improved styling and layout across various components for better responsiveness and user interaction.

Author: 0xdevcollins

app/(landing)/me/page.tsx

@@ -2,7 +2,7 @@ import { ProfileData } from './profile-data';
 
 export default async function MePage() {
   return (
-    <section className='min-h-[70vh]'>
+    <section className=''>
       <ProfileData />
     </section>
   );

app/(landing)/me/profile-data.tsx

@@ -16,6 +16,7 @@ export async function ProfileData() {
 
   try {
     const userData = await getMe(session.user.accessToken);
+    // console.log(userData);
     return (
       <ProfileDataClient
         user={userData}

app/(landing)/organizations/layout.tsx

@@ -18,12 +18,12 @@ export default function OrganizationsLayout({
     (pathname.split('/').length > 4 && pathname !== '/dashboard/organizations');
 
   return (
-    <div className='min-h-screen bg-black text-white'>
+    <div className='relative min-h-screen bg-black text-white'>
       <OrganizationHeader />
       {showSidebar ? (
-        <div className='flex border-t border-t-zinc-800'>
+        <div className='relative border-t border-t-zinc-800'>
           <OrganizationSidebar />
-          <main className='flex-1'>{children}</main>
+          <main className='md:ml-[350px]'>{children}</main>
         </div>
       ) : (
         <main>{children}</main>

app/(landing)/privacy/page.tsx

@@ -7,7 +7,7 @@ export const metadata: Metadata = generatePageMetadata('privacy');
 const PrivacyPage = () => {
   return (
     <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'>
-      Privacy Page
+      Privacy Pages
     </div>
   );
 };

app/globals.css

@@ -55,6 +55,8 @@
   --color-success-700: #036b26;
   --color-success-800: #015b20;
   --color-success-900: #004617;
+
+  --color-active-bg: rgba(167, 249, 80, 0.08);
 }
 /* Custom scrollbar styles for comment modal */
 .custom-scrollbar {

components/ProjectCard.tsx

@@ -186,7 +186,7 @@ const ProjectCard: React.FC<ProjectCardProps> = memo(
             <Badge className='flex-shrink-0 rounded-[4px] border border-[#645D5D] bg-[#E4DBDB] px-1 py-0.5 text-xs font-medium text-[#645D5D]'>
               {project.category}
             </Badge>
-            <Badge className='flex-shrink-0 rounded-[4px] border border-[#A7F950] bg-[rgba(167,249,80,0.08)] px-1 py-0.5 text-xs font-medium text-[#A7F950]'>
+            <Badge className='bg-active-bg flex-shrink-0 rounded-[4px] border border-[#A7F950] px-1 py-0.5 text-xs font-medium text-[#A7F950]'>
               {project.category}
             </Badge>
           </div>

components/landing-page/blog/BlogPostDetails.tsx

@@ -213,7 +213,7 @@ const BlogPostDetails: React.FC<BlogPostDetailsProps> = ({ post }) => {
               <div className='flex gap-3 lg:flex-col'>
                 <button
                   onClick={() => handleShare('twitter')}
-                  className='flex h-10 w-10 items-center justify-center rounded-full bg-[rgba(167,249,80,0.08)] text-black transition-colors hover:bg-[#A7F950]/80 focus:ring-2 focus:ring-[#A7F950]/50 focus:outline-none'
+                  className='bg-active-bg flex h-10 w-10 items-center justify-center rounded-full text-black transition-colors hover:bg-[#A7F950]/80 focus:ring-2 focus:ring-[#A7F950]/50 focus:outline-none'
                   aria-label='Share on Twitter'
                 >
                   <svg
@@ -234,7 +234,7 @@ const BlogPostDetails: React.FC<BlogPostDetailsProps> = ({ post }) => {
                 </button>
                 <button
                   onClick={() => handleShare('discord')}
-                  className='flex h-10 w-10 items-center justify-center rounded-full bg-[rgba(167,249,80,0.08)] text-black transition-colors hover:bg-[#A7F950]/80 focus:ring-2 focus:ring-[#A7F950]/50 focus:outline-none'
+                  className='bg-active-bg flex h-10 w-10 items-center justify-center rounded-full text-black transition-colors hover:bg-[#A7F950]/80 focus:ring-2 focus:ring-[#A7F950]/50 focus:outline-none'
                   aria-label='Copy for Discord'
                 >
                   {copiedStates.discord ? (
@@ -257,7 +257,7 @@ const BlogPostDetails: React.FC<BlogPostDetailsProps> = ({ post }) => {
                 </button>
                 <button
                   onClick={() => handleShare('send')}
-                  className='flex h-10 w-10 items-center justify-center rounded-full bg-[rgba(167,249,80,0.08)] text-black transition-colors hover:bg-[#A7F950]/80 focus:ring-2 focus:ring-[#A7F950]/50 focus:outline-none'
+                  className='bg-active-bg flex h-10 w-10 items-center justify-center rounded-full text-black transition-colors hover:bg-[#A7F950]/80 focus:ring-2 focus:ring-[#A7F950]/50 focus:outline-none'
                   aria-label='Share via native share'
                 >
                   <svg
@@ -278,7 +278,7 @@ const BlogPostDetails: React.FC<BlogPostDetailsProps> = ({ post }) => {
                 </button>
                 <button
                   onClick={() => handleShare('link')}
-                  className='flex h-10 w-10 items-center justify-center rounded-full bg-[rgba(167,249,80,0.08)] text-black transition-colors hover:bg-[#A7F950]/80 focus:ring-2 focus:ring-[#A7F950]/50 focus:outline-none'
+                  className='bg-active-bg flex h-10 w-10 items-center justify-center rounded-full text-black transition-colors hover:bg-[#A7F950]/80 focus:ring-2 focus:ring-[#A7F950]/50 focus:outline-none'
                   aria-label='Copy link'
                 >
                   {copiedStates.link ? (