From ba842d4b0ada80e1c2a0335129cb56339a1595d5 Mon Sep 17 00:00:00 2001
From: Nevo David <nevo@notu.co>
Date: Wed, 10 Apr 2024 20:08:03 +0700
Subject: [PATCH] feat: mark draft with grayscale

---
 apps/frontend/src/components/launches/calendar.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/launches/calendar.tsx b/apps/frontend/src/components/launches/calendar.tsx
index 58adbf52..1bd86ba9 100644
--- a/apps/frontend/src/components/launches/calendar.tsx
+++ b/apps/frontend/src/components/launches/calendar.tsx
@@ -13,7 +13,7 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { ExistingDataContextProvider } from '@gitroom/frontend/components/launches/helpers/use.existing.data';
 import { useDrag, useDrop } from 'react-dnd';
 import { DNDProvider } from '@gitroom/frontend/components/launches/helpers/dnd.provider';
-import { Integration, Post } from '@prisma/client';
+import { Integration, Post, State } from '@prisma/client';
 import { useAddProvider } from '@gitroom/frontend/components/launches/add.provider.component';
 import { CommentComponent } from '@gitroom/frontend/components/launches/comments/comment.component';
 import { useSWRConfig } from 'swr';
@@ -331,6 +331,7 @@ const CalendarColumnRender: FC<{ day: number; hour: string }> = (props) => {
               <div className="relative flex gap-[5px] items-center">
                 <CalendarItem
                   date={getDate}
+                  state={post.state}
                   editPost={editPost(post.id)}
                   post={post}
                   integrations={integrations}
@@ -369,9 +370,10 @@ const CalendarItem: FC<{
   date: dayjs.Dayjs;
   editPost: () => void;
   integrations: Integrations[];
+  state: State;
   post: Post & { integration: Integration };
 }> = (props) => {
-  const { editPost, post, date, integrations } = props;
+  const { editPost, post, date, integrations, state } = props;
   const [{ opacity }, dragRef] = useDrag(
     () => ({
       type: 'post',
@@ -386,10 +388,10 @@ const CalendarItem: FC<{
     <div
       ref={dragRef}
       onClick={editPost}
-      className="relative"
+      className={clsx("relative", state === 'DRAFT' && '!grayscale')}
       data-tooltip-id="tooltip"
       style={{ opacity }}
-      data-tooltip-content={`${
+      data-tooltip-content={`${state === 'DRAFT' ? 'Draft: ' : ''}${
         integrations.find(
           (p) => p.identifier === post.integration?.providerIdentifier
         )?.name