update and use secret path examples where applicable across app

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/MultiEnvProjectPermission.tsx

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
+import SecretPathExamples from "@app/components/basic/popups/SecretPathExamples";
 import {
   Checkbox,
   FormControl,
@@ -51,6 +52,8 @@ export const MultiEnvProjectPermission = ({
 }: Props) => {
   const { currentWorkspace } = useWorkspace();
 
+  console.log({ currentWorkspace });
+
   const environments = currentWorkspace?.environments || [];
   const customRule = useWatch({
     control,
@@ -98,7 +101,7 @@ export const MultiEnvProjectPermission = ({
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         (selectedPermissionCategory !== Permission.NoAccess || isCustom) &&
           "border-l-2 border-primary-600"
       )}
@@ -107,8 +110,8 @@ export const MultiEnvProjectPermission = ({
         <div>
           <FontAwesomeIcon icon={icon} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">{title}</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">{title}</div>
           <div className="text-xs font-light">{subtitle}</div>
         </div>
         <div>
@@ -130,12 +133,19 @@ export const MultiEnvProjectPermission = ({
         animate={{ height: isCustom ? "auto" : 0 }}
         className="overflow-hidden"
       >
-        <TableContainer className="border-mineshaft-500 mt-6">
+        <TableContainer className="mt-6 border-mineshaft-500">
           <Table>
             <THead>
               <Tr>
                 <Th />
-                <Th className="min-w-[8rem]">Secret Path</Th>
+                <Th className="min-w-[8rem]">
+                  <div className="flex items-center gap-2">
+                    Secret Path
+                    <span className="text-xs normal-case">
+                      <SecretPathExamples />
+                    </span>
+                  </div>
+                </Th>
                 <Th className="text-center">View</Th>
                 <Th className="text-center">Create</Th>
                 <Th className="text-center">Modify</Th>

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -180,7 +180,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
   return (
     <div>
       <form onSubmit={handleSubmit(handleFormSubmit)}>
-        <div className="flex justify-between mb-2 items-center">
+        <div className="mb-2 flex items-center justify-between">
           <h1 className="text-xl font-semibold text-mineshaft-100">
             {isNewRole ? "New" : "Edit"} Role
           </h1>
@@ -222,11 +222,11 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
           >
             <Input {...register("description")} isReadOnly={isNonEditable} />
           </FormControl>
-          <div className="flex justify-between items-center pt-6 border-t border-t-mineshaft-800">
+          <div className="flex items-center justify-between border-t border-t-mineshaft-800 pt-6">
             <div>
               <h2 className="text-xl font-medium">Add Permission</h2>
             </div>
-            <div className="flex-1 max-w-md">
+            <div className="max-w-md flex-1">
               <Input
                 value={searchPermission}
                 onChange={(e) => setSearchPermission(e.target.value)}
@@ -274,7 +274,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
             />
           </div>
         </div>
-        <div className="flex items-center space-x-4 mt-12">
+        <div className="mt-12 flex items-center space-x-4">
           <Button
             type="submit"
             isDisabled={isSubmitting || isNonEditable || !isDirty}