fix: add cursor pointer and text ellipsis fot too long text

src/components/frame/LandingPage/ColonyCards/BaseColonyCard/BaseColonyCard.tsx

@@ -3,27 +3,36 @@ import React, { type PropsWithChildren } from 'react';
 
 const displayName = 'frame.LandingPage.ColonyCards.BaseColonyCard';
 
-export interface BaseColonyCardProps extends PropsWithChildren {
+export interface BaseColonyCardProps
+  extends PropsWithChildren,
+    React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    > {
   avatarPlaceholder: React.ReactNode;
   isClickable?: boolean;
 }
 const BaseColonyCard = ({
   isClickable,
   avatarPlaceholder,
   children,
+  ...props
 }: BaseColonyCardProps) => (
   <div
+    {...props}
     className={clsx(
-      'flex h-[4.5rem] items-center gap-[.875rem] rounded border px-5 py-4 transition-colors duration-normal',
+      'flex h-[4.5rem] items-center justify-between gap-[.875rem] rounded border px-5 py-4 transition-colors duration-normal',
       {
-        'hover:border-gray-900': isClickable,
+        'cursor-pointer hover:border-gray-900': isClickable,
       },
     )}
   >
-    <div className="flex h-8 w-8 items-center justify-center">
-      {avatarPlaceholder}
+    <div>
+      <div className="flex h-8 w-8 items-center justify-center">
+        {avatarPlaceholder}
+      </div>
     </div>
-    <div className="flex w-full items-center justify-between">{children}</div>
+    {children}
   </div>
 );
 

src/components/frame/LandingPage/ColonyCards/ColonyCard.tsx

@@ -33,11 +33,14 @@ export const ColonyCard = ({
       />
     }
   >
-    <p className="text-md font-medium">{colonyName}</p>
-    <p className="text-xs font-normal">
+    <p className="flex-1 truncate text-ellipsis text-md font-medium">
+      {colonyName}
+    </p>
+    <p className="max-w-[150px] justify-self-end truncate text-ellipsis text-xs font-normal">
       <FormattedMessage
         {...MSG.members}
         values={{ members: membersCount.toLocaleString('en-US') }}
+        {...(membersCount === 1 ? { defaultMessage: '1 Member' } : {})}
       />
     </p>
   </BaseColonyCard>

src/components/frame/LandingPage/ColonyCards/ColonyCardSkeleton.tsx

@@ -12,7 +12,7 @@ export const ColonyCardSkeleton = () => (
       <LoadingSkeleton isLoading className="h-8 w-8 rounded-full" />
     }
   >
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-1 flex-col gap-1">
       <LoadingSkeleton isLoading className="h-5 w-[7.5rem] rounded" />
       <LoadingSkeleton isLoading className="h-[.6875rem] w-[4.25rem] rounded" />
     </div>

src/components/frame/LandingPage/ColonyCards/CreateNewColonyCard.tsx

@@ -1,5 +1,5 @@
 import { Plus } from '@phosphor-icons/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import Button from '~v5/shared/Button/Button.tsx';
@@ -31,33 +31,44 @@ const MSG = defineMessages({
 export const CreateNewColonyCard = ({
   invitationsRemaining,
   onCreate,
-}: ColonyCreateCardProps) => (
-  <BaseColonyCard
-    isClickable
-    avatarPlaceholder={
-      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
-        <Plus size={18} className="text-gray-900 " />
-      </div>
-    }
-  >
-    <div className="flex flex-col gap-1">
-      <div className="flex">
-        <span className="rounded bg-blue-100 px-[.1875rem] py-[.1563rem] text-2xs font-extrabold text-blue-400">
-          <FormattedMessage
-            {...MSG.remaining}
-            values={{ remaining: invitationsRemaining }}
-          />
-        </span>
+}: ColonyCreateCardProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <BaseColonyCard
+      onClick={() => onCreate()}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      isClickable
+      avatarPlaceholder={
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
+          <Plus size={18} className="text-gray-900 " />
+        </div>
+      }
+    >
+      <div className="flex flex-1 flex-col gap-1">
+        <div className="flex">
+          <span className="rounded bg-blue-100 px-[.1875rem] py-[.1563rem] text-2xs font-extrabold text-blue-400">
+            <FormattedMessage
+              {...MSG.remaining}
+              values={{ remaining: invitationsRemaining }}
+            />
+          </span>
+        </div>
+        <p className="text-md font-medium">
+          <FormattedMessage {...MSG.createColony} />
+        </p>
       </div>
-      <p className="text-md font-medium">
-        <FormattedMessage {...MSG.createColony} />
-      </p>
-    </div>
-    <Button icon={Plus} onClick={onCreate}>
-      <FormattedMessage {...MSG.createButton} />
-    </Button>
-  </BaseColonyCard>
-);
+      <Button
+        icon={Plus}
+        className="border-gray-900"
+        mode={isHovered ? 'primaryOutline' : 'primarySolid'}
+      >
+        <FormattedMessage {...MSG.createButton} />
+      </Button>
+    </BaseColonyCard>
+  );
+};
 
 CreateNewColonyCard.displayName = displayName;
 

src/stories/common/ColonyCard.stories.tsx

@@ -2,46 +2,39 @@ import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
 import ColonyCard from '~frame/LandingPage/ColonyCards/ColonyCard.tsx';
+import SkeletonCard from '~frame/LandingPage/ColonyCards/ColonyCardSkeleton.tsx';
+import CreateNewColonyCard from '~frame/LandingPage/ColonyCards/CreateNewColonyCard.tsx';
 
-const meta: Meta<typeof ColonyCard> = {
+const meta: Meta<typeof ColonyCard | typeof CreateNewColonyCard> = {
   title: 'Common/Colony Card',
   component: ColonyCard,
-  decorators: [
-    (Story) => (
-      <div className="mx-auto max-w-[41.75rem]">
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {
-    colonyName: {
-      name: 'Colony name',
-      control: {
-        type: 'text',
-      },
-    },
-    colonyAvatar: {
-      name: 'Colony avatar',
-      control: {
-        type: 'text',
-      },
-    },
-    membersCount: {
-      name: 'Members count',
-      control: {
-        type: 'number',
-      },
-    },
+  decorators: (Story) => (
+    <div className="ml-auto mr-auto max-w-[31.25rem]">
+      <Story />
+    </div>
+  ),
+  args: {
+    colonyAvatar: 'https://picsum.photos/200',
+    colonyName: 'Beta colony',
+    membersCount: 1512,
+    invitationsRemaining: 4,
+    onCreate: () => {},
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof ColonyCard>;
+type ColonyCardStory = StoryObj<
+  typeof ColonyCard | typeof SkeletonCard | typeof CreateNewColonyCard
+>;
 
-export const Base: Story = {
-  args: {
-    colonyName: 'Beta colony',
-    colonyAvatar: 'https://picsum.photos/200',
-    membersCount: 1520,
-  },
+export const Base: ColonyCardStory = {
+  render: (args) => <ColonyCard {...args} />,
+};
+
+export const Loading: ColonyCardStory = {
+  render: () => <SkeletonCard />,
+};
+
+export const CreateNewColony: ColonyCardStory = {
+  render: (args) => <CreateNewColonyCard {...args} />,
 };