improve: improve template form buttons

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx

@@ -1,17 +1,9 @@
-import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import {
+import { Button, DeleteActionModal } from "@app/components/v2";
-  DeleteActionModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  IconButton
-} from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
@@ -58,39 +50,27 @@ export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBa
 
   return (
     <>
-      <div className="mb-4 flex items-center justify-between border-b border-bunker-400">
+      <div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
-        <div className="mb-4 flex flex-col">
+        <div className=" flex flex-col">
           <h3 className="text-xl font-semibold">{name}</h3>
           <h2 className="text-sm text-mineshaft-400">{description || "Project Template"}</h2>
         </div>
         {!isInfisicalTemplate && (
-          <DropdownMenu>
+          <div className="flex gap-2">
-            <DropdownMenuTrigger asChild>
-              <IconButton
-                colorSchema="secondary"
-                variant="plain"
-                size="lg"
-                ariaLabel="More options"
-                className="mr-2"
-              >
-                <FontAwesomeIcon icon={faEllipsis} />
-              </IconButton>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="p-1">
             <OrgPermissionCan
               I={OrgPermissionActions.Edit}
               a={OrgPermissionSubjects.ProjectTemplates}
             >
               {(isAllowed) => (
-                  <DropdownMenuItem
+                <Button
-                    className={twMerge(
+                  isDisabled={!isAllowed}
-                      !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  leftIcon={<FontAwesomeIcon icon={faPencil} />}
-                    )}
+                  size="xs"
+                  colorSchema="secondary"
                   onClick={() => handlePopUpOpen("editDetails")}
-                    disabled={!isAllowed}
                 >
                   Edit Details
-                  </DropdownMenuItem>
+                </Button>
               )}
             </OrgPermissionCan>
             <OrgPermissionCan
@@ -98,23 +78,20 @@ export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBa
               a={OrgPermissionSubjects.ProjectTemplates}
             >
               {(isAllowed) => (
-                  <DropdownMenuItem
+                <Button
-                    className={twMerge(
+                  isDisabled={!isAllowed}
-                      isAllowed
-                        ? "hover:!bg-red-500 hover:!text-white"
-                        : "pointer-events-none cursor-not-allowed opacity-50"
-                    )}
                   onClick={() => {
                     handlePopUpOpen("removeTemplate");
                   }}
-                    disabled={!isAllowed}
+                  leftIcon={<FontAwesomeIcon icon={faTrash} />}
+                  size="xs"
+                  colorSchema="danger"
                 >
                   Delete Template
-                  </DropdownMenuItem>
+                </Button>
               )}
             </OrgPermissionCan>
-            </DropdownMenuContent>
+          </div>
-          </DropdownMenu>
         )}
       </div>
       <ProjectTemplateEnvironmentsForm

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx

@@ -138,21 +138,19 @@ export const ProjectTemplateEnvironmentsForm = ({
                     <OrgPermissionCan
                       I={OrgPermissionActions.Edit}
                       a={OrgPermissionSubjects.ProjectTemplates}
-                      renderTooltip
-                      allowedLabel="Add Environment"
                     >
                       {(isAllowed) => (
-                        <IconButton
+                        <Button
                           onClick={() => append({ name: "", slug: "" })}
-                          colorSchema="primary"
+                          colorSchema="secondary"
                           className="ml-auto"
-                          variant="outline_bg"
+                          variant="solid"
                           size="xs"
-                          ariaLabel="Add environment"
+                          leftIcon={<FontAwesomeIcon icon={faPlus} />}
                           isDisabled={!isAllowed}
                         >
-                          <FontAwesomeIcon icon={faPlus} />
+                          Add Environment
-                        </IconButton>
+                        </Button>
                       )}
                     </OrgPermissionCan>
                   </div>