From ea737bf3c70f3fb346ad3cca21205a1e71678f12 Mon Sep 17 00:00:00 2001
From: Sebastien Dubois <seb@dsebastien.net>
Date: Fri, 11 Oct 2024 21:22:26 +0200
Subject: [PATCH] feat(ui): improved display of communities. displayed
 visibility level

---
 apps/knowii/src/Components/Communities/CommunityBox.tsx  | 9 +++++++--
 apps/knowii/src/Components/Communities/CommunityIcon.tsx | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/knowii/src/Components/Communities/CommunityBox.tsx b/apps/knowii/src/Components/Communities/CommunityBox.tsx
index 6c859d72..e058b2b7 100644
--- a/apps/knowii/src/Components/Communities/CommunityBox.tsx
+++ b/apps/knowii/src/Components/Communities/CommunityBox.tsx
@@ -1,6 +1,6 @@
 import { Divider } from 'primereact/divider';
 import { Card } from 'primereact/card';
-import { Community } from '@knowii/common';
+import { Community, communityVisibilityOptions } from '@knowii/common';
 import { FaPlus } from 'react-icons/fa';
 import { Link } from '@inertiajs/react';
 import CommunityIcon from './CommunityIcon';
@@ -17,6 +17,10 @@ interface Props {
 }
 
 export default function CommunityBox(props: Props) {
+  const visibilityLabel = props.community?.visibility
+    ? communityVisibilityOptions.find((v) => v.visibility === props.community?.visibility)?.name
+    : '';
+
   const normalModeCard = props.community && (
     <Card
       title={
@@ -26,7 +30,7 @@ export default function CommunityBox(props: Props) {
         </span>
       }
       subTitle={<Divider className="p-0 m-0" />}
-      className="h-[250px]"
+      className="h-[250px] relative"
       onClick={
         props.clickHandler
           ? props.clickHandler
@@ -35,6 +39,7 @@ export default function CommunityBox(props: Props) {
       }
     >
       <p className="text-sm text-gray-800 text-ellipsis line-clamp-4 md:line-clamp-5 min-h-6">{props.community.description}</p>
+      <span className="absolute bottom-2 right-4 text-xs text-gray-600 font-bold">{visibilityLabel}</span>
     </Card>
   );
 
diff --git a/apps/knowii/src/Components/Communities/CommunityIcon.tsx b/apps/knowii/src/Components/Communities/CommunityIcon.tsx
index e0e3b86c..821b1591 100644
--- a/apps/knowii/src/Components/Communities/CommunityIcon.tsx
+++ b/apps/knowii/src/Components/Communities/CommunityIcon.tsx
@@ -17,10 +17,10 @@ const CommunityIcon = (props: Props) => {
         color = 'text-primary-500';
         break;
       case 'personal':
-        color = 'text-gray-500';
+        color = 'text-yellow-500';
         break;
       default:
-        color = 'text-gray-500';
+        color = '';
     }
   }