multi columns layout

src/app/channel/components/createModal.tsx

@@ -92,7 +92,7 @@ export default function ChannelCreateModal() {
 					<PlusIcon width={12} height={12} className="text-zinc-500" />
 				</div>
 				<div>
-					<h5 className="text-[13px] font-semibold text-zinc-500 group-hover:text-zinc-400">
+					<h5 className="font-semibold text-zinc-400 group-hover:text-zinc-200">
 						Add a new channel
 					</h5>
 				</div>

src/app/channel/components/item.tsx

@@ -32,7 +32,7 @@ export default function ChannelsListItem({ data }: { data: any }) {
 				<span className="text-base text-white">#</span>
 			</div>
 			<div>
-				<h5 className="truncate font-medium text-zinc-400">{channel?.name}</h5>
+				<h5 className="truncate font-medium text-zinc-200">{channel?.name}</h5>
 			</div>
 		</a>
 	);

src/app/channel/components/list.tsx

@@ -11,7 +11,7 @@ export default function ChannelsList() {
 	const { data, error }: any = useSWR("channels", fetcher);
 
 	return (
-		<div className="flex flex-col gap-px">
+		<div className="flex flex-col gap-1">
 			{!data || error ? (
 				<>
 					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">