feat: product updates button added

This commit is contained in:
anmolsinghbhatia 2023-04-25 17:33:53 +05:30
parent eb99b4adc9
commit 1364c842e0
5 changed files with 19 additions and 18 deletions

View File

@ -45,7 +45,6 @@ import {
ChangeIssuePriority,
ChangeIssueAssignee,
ChangeInterfaceTheme,
ProductUpdatesModal,
} from "components/command-palette";
import { BulkDeleteIssuesModal } from "components/core";
import { CreateUpdateCycleModal } from "components/cycles";
@ -75,7 +74,6 @@ export const CommandPalette: React.FC = () => {
const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false);
@ -223,8 +221,6 @@ export const CommandPalette: React.FC = () => {
setIsCreateCycleModalOpen(true);
} else if (keyPressed === "m") {
setIsCreateModuleModalOpen(true);
} else if (keyPressed === "u") {
setIsProductUpdatesModalOpen(true);
}
}
},
@ -328,10 +324,6 @@ export const CommandPalette: React.FC = () => {
return (
<>
<ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
<ProductUpdatesModal
isOpen={isProductUpdatesModalOpen}
setIsOpen={setIsProductUpdatesModalOpen}
/>
{workspaceSlug && (
<CreateProjectModal isOpen={isProjectModalOpen} setIsOpen={setIsProjectModalOpen} />
)}

View File

@ -4,4 +4,3 @@ export * from "./change-issue-state";
export * from "./change-issue-priority";
export * from "./change-issue-assignee";
export * from "./change-interface-theme";
export * from "./product-updates-modal";

View File

@ -21,3 +21,4 @@ export * from "./spinner";
export * from "./tooltip";
export * from "./toggle-switch";
export * from "./markdown-to-component";
export * from "./product-updates-modal";

View File

@ -18,7 +18,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
console.log("updates:", updates);
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20 max-h-96 overflow-y-auto" onClose={setIsOpen}>
<Dialog as="div" className="relative z-20" onClose={setIsOpen}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
@ -28,7 +28,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -42,19 +42,19 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="max-h-[600px] overflow-y-auto bg-white p-5">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="max-h-[600px] overflow-y-auto bg-brand-surface-2 p-5">
<div className="sm:flex sm:items-start">
<div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
<Dialog.Title
as="h3"
className="flex justify-between text-lg font-medium leading-6 text-gray-900"
className="flex justify-between text-lg font-medium leading-6 text-brand-base"
>
<span>Product Updates</span>
<span>
<button type="button" onClick={() => setIsOpen(false)}>
<XMarkIcon
className="h-6 w-6 text-gray-400 hover:text-gray-500"
className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
aria-hidden="true"
/>
</button>

View File

@ -15,6 +15,7 @@ import {
IssuesPieChart,
IssuesStats,
} from "components/workspace";
import { ProductUpdatesModal } from "components/ui";
// types
import type { NextPage } from "next";
// fetch-keys
@ -22,6 +23,7 @@ import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
const WorkspacePage: NextPage = () => {
const [month, setMonth] = useState(new Date().getMonth() + 1);
const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
const router = useRouter();
const { workspaceSlug } = router.query;
@ -39,6 +41,10 @@ const WorkspacePage: NextPage = () => {
return (
<WorkspaceAuthorizationLayout noHeader>
<ProductUpdatesModal
isOpen={isProductUpdatesModalOpen}
setIsOpen={setIsProductUpdatesModalOpen}
/>
<div className="h-full w-full">
<div className="flex flex-col gap-8">
<div
@ -49,9 +55,12 @@ const WorkspacePage: NextPage = () => {
Plane is open source, support us by starring us on GitHub.
</p>
<div className="flex items-center gap-2">
{/* <a href="#" target="_blank" rel="noopener noreferrer">
View roadmap
</a> */}
<button
onClick={() => setIsProductUpdatesModalOpen(true)}
className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
>
What's New?
</button>
<a
href="https://github.com/makeplane/plane"
target="_blank"