feat: initial make a wish UI

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -8,10 +8,9 @@
 import { useEffect, useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faRocketchat, faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
@@ -48,8 +47,12 @@ import {
   MenuItem,
   Modal,
   ModalContent,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Select,
   SelectItem,
+  TextArea,
   UpgradePlanModal
 } from "@app/components/v2";
 import { UpgradeOverlay } from "@app/components/v2/UpgradeOverlay";
@@ -69,9 +72,7 @@ import {
   useGetAccessRequestsCount,
   useGetOrgTrialUrl,
   useGetSecretApprovalRequestCount,
-  useGetUserAction,
   useLogoutUser,
-  useRegisterUserAction,
   useSelectOrganization
 } from "@app/hooks/api";
 import { Workspace } from "@app/hooks/api/types";
@@ -145,7 +146,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
   const { subscription } = useSubscription();
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
-  const { data: updateClosed } = useGetUserAction("december_update_closed");
 
   const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });
   const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({ projectSlug });
@@ -179,13 +179,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   const { t } = useTranslation();
 
-  const registerUserAction = useRegisterUserAction();
   const { mutateAsync: selectOrganization } = useSelectOrganization();
 
-  const closeUpdate = async () => {
-    await registerUserAction.mutateAsync("december_update_closed");
-  };
-
   const logout = useLogoutUser();
   const logOutUser = async () => {
     try {
@@ -769,45 +764,35 @@ export const AppLayout = ({ children }: LayoutProps) => {
                 <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[10.7rem] ${router.asPath.includes("org") ? "bottom-[8.15rem]" : "bottom-[5.15rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-50`}/>
                 <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[11.5rem] ${router.asPath.includes("org") ? "bottom-[7.9rem]" : "bottom-[4.9rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-70`}/>
                 <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[12.3rem] ${router.asPath.includes("org") ? "bottom-[7.65rem]" : "bottom-[4.65rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-90`}/> */}
-                <div
+                <Popover>
-                  className={`${
+                  <PopoverTrigger asChild>
-                    !updateClosed ? "block" : "hidden"
+                    <div className="mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
-                  } relative z-10 mb-6 flex h-64 w-52 flex-col items-center justify-start rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3`}
+                      <FontAwesomeIcon icon={faRocketchat} className="mr-3" />
-                >
+                      Make a wish
-                  <div className="text-md mt-2 w-full font-semibold text-mineshaft-100">
+                    </div>
-                    Infisical December update
+                  </PopoverTrigger>
-                  </div>
+                  <PopoverContent
-                  <div className="mt-1 mb-1 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300">
+                    hideCloseBtn
-                    Infisical Agent, new SDKs, Machine Identities, and more!
+                    className="ml-2 w-auto border border-mineshaft-600 bg-mineshaft-800 p-3 drop-shadow-2xl"
-                  </div>
+                    sticky="always"
-                  <div className="mt-2 h-[6.77rem] w-full rounded-md border border-mineshaft-700">
+                  >
-                    <Image
+                    <FormControl className="mb-0">
-                      src="/images/infisical-update-december-2023.png"
+                      <TextArea
-                      height={319}
+                        className="border border-mineshaft-600 text-sm"
-                      width={539}
+                        placeholder="Wish for anything! Help us improve the platform"
-                      alt="kubernetes image"
+                        reSize="none"
-                      className="rounded-sm"
+                        rows={8}
-                    />
+                        cols={30}
-                  </div>
+                      />
-                  <div className="mt-3 flex w-full items-center justify-between px-0.5">
+                    </FormControl>
-                    <button
+                    <div className="mt-2 flex justify-between">
-                      type="button"
+                      <Button className="ml-2 w-min">Send</Button>
-                      onClick={() => closeUpdate()}
+                      <Button className="mr-2 w-min" colorSchema="secondary">
-                      className="text-mineshaft-400 duration-200 hover:text-mineshaft-100"
+                        Cancel
-                    >
+                      </Button>
-                      Close
+                    </div>
-                    </button>
+                  </PopoverContent>
-                    <a
+                </Popover>
-                      href="https://infisical.com/blog/infisical-update-december-2023"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-sm font-normal leading-[1.2rem] text-mineshaft-400 duration-200 hover:text-mineshaft-100"
-                    >
-                      Learn More{" "}
-                      <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="pl-0.5 text-xs" />
-                    </a>
-                  </div>
-                </div>
                 {router.asPath.includes("org") && (
                   <div
                     onKeyDown={() => null}