diff --git a/app/web/src/components/IdeHeader/IdeHeader.tsx b/app/web/src/components/IdeHeader/IdeHeader.tsx index 1a9ba60..aedcb86 100644 --- a/app/web/src/components/IdeHeader/IdeHeader.tsx +++ b/app/web/src/components/IdeHeader/IdeHeader.tsx @@ -60,14 +60,15 @@ export default function IdeHeader({ }) { const { currentUser } = useAuth() const { project, state } = useIdeContext() - const hasUnsavedChanges = project?.code && state?.code && project?.code !== state?.code + const hasUnsavedChanges = + project?.code && state?.code && project?.code !== state?.code const isProfile = context === 'profile' const canEdit = (currentUser && currentUser?.sub === project?.user?.id) || currentUser?.roles?.includes('admin') const projectOwner = project?.user?.userName - const showForkMessage = !canEdit && hasUnsavedChanges + const showForkMessage = !canEdit && hasUnsavedChanges && currentUser?.sub const [createFork] = useMutation(FORK_PROJECT_MUTATION, { onCompleted: ({ forkProject }) => { @@ -204,17 +205,24 @@ export default function IdeHeader({ {currentUser?.sub && ( - + onClick={handleFork} + name="Fork" + className={ + showForkMessage + ? ' bg-ch-blue-650 bg-opacity-80 hover:bg-opacity-100 text-ch-gray-300 border-blue-300 border-2' + : ' bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300' + } + > + )} - {currentUser?.sub && showForkMessage && ( -
- Fork to save your work + {showForkMessage && ( +
+ {' '} + Fork to save your work
)}