revamp UI for access requests

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx

@@ -6,6 +6,8 @@ import {
   faCheck,
   faClock,
   faLockOpen,
+  faPencil,
+  faPlus,
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -50,6 +52,7 @@ import {
   useDeleteProjectUserAdditionalPrivilege
 } from "@app/hooks/api";
 import { TAccessApprovalPolicy } from "@app/hooks/api/types";
+import { faEye, faTrashCan } from "@fortawesome/free-regular-svg-icons";
 
 const secretPermissionSchema = z.object({
   secretPath: z.string().optional(),
@@ -205,7 +208,7 @@ export const SpecificPrivilegeSecretForm = ({
     if (!data.secretPath) {
       createNotification({
         type: "error",
-        text: "Please select a secret path",
+        text: "Please select a secret path...",
         title: "Error"
       });
       return;
@@ -264,18 +267,18 @@ export const SpecificPrivilegeSecretForm = ({
   };
 
   return (
-    <div className="mt-4 w-full">
+    <div className="w-full">
       <form onSubmit={privilegeForm.handleSubmit(handleSubmit)}>
-        <div className={twMerge("flex items-start gap-4", !privilege && "flex-wrap")}>
+        <div className={twMerge("flex items-start", !privilege && "flex-col")}>
           <Controller
             control={privilegeForm.control}
             name="environmentSlug"
             render={({ field: { onChange, ...field } }) => (
-              <FormControl label="Environment">
+              <FormControl label="Environment" className="w-full">
                 <Select
                   {...field}
                   isDisabled={isMemberEditDisabled}
-                  className="bg-mineshaft-600 hover:bg-mineshaft-500"
+                  className="bg-mineshaft-900 hover:bg-mineshaft-800 w-full"
                   onValueChange={(e) => onChange(e)}
                 >
                   {currentWorkspace?.environments?.map(({ slug, id, name }) => (
@@ -297,12 +300,13 @@ export const SpecificPrivilegeSecretForm = ({
                     isDisabled={!!selectablePaths.length}
                     content="The selected environment doesn't have any policies."
                   >
-                    <div>
+                    <div className="w-full">
                       <FormControl label="Secret Path">
                         <Select
                           {...field}
                           isDisabled={isMemberEditDisabled || !selectablePaths.length}
-                          className="w-48"
+                          className="w-full hover:bg-mineshaft-800"
+                          placeholder="Select a secret path"
                           onValueChange={(e) => field.onChange(e)}
                         >
                           {selectablePaths.map((path) => (
@@ -328,85 +332,127 @@ export const SpecificPrivilegeSecretForm = ({
               );
             }}
           />
-          <div className="flex flex-grow justify-between">
+          <FormControl label="Permissions" className="w-full">
+            <div className="flex flex-col w-full justify-between">
+              <div className="flex flex-row gap-2 w-full">
                 <Controller
                   control={privilegeForm.control}
                   name="read"
                   render={({ field }) => (
-                <div className="flex flex-col items-center">
+                    <label 
-                  <FormLabel label="View" className="mb-4" />
+                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                      htmlFor="secret-read"
+                    >
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-read"
-                    className="h-5 w-5"
+                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
+                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                        <div className="flex flex-row items-center gap-1">
+                          <FontAwesomeIcon icon={faEye} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
+                          <FormLabel label="View" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
                         </div>
+                        <p className="text-xs text-mineshaft-400">Read secret values</p>
+                      </div>
+                    </label>
                   )}
                 />
                 <Controller
                   control={privilegeForm.control}
                   name="create"
                   render={({ field }) => (
-                <div className="flex flex-col items-center">
+                    <label 
-                  <FormLabel label="Create" className="mb-4" />
+                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                      htmlFor="secret-change"
+                    >
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
-                    id="secret-create"
+                        id="secret-change"
-                    className="h-5 w-5"
+                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
+                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                        <div className="flex flex-row items-center gap-1">
+                          <FontAwesomeIcon icon={faPlus} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
+                          <FormLabel label="Create" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
                         </div>
+                        <p className="text-xs text-mineshaft-400">Create new secrets</p>
+                      </div>
+                    </label>
                   )}
                 />
+              </div>
+              <div className="flex flex-row gap-2 w-full">
                 <Controller
                   control={privilegeForm.control}
                   name="edit"
                   render={({ field }) => (
-                <div className="flex flex-col items-center">
+                    <label 
-                  <FormLabel label="Modify" className="mb-4" />
+                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                      htmlFor="secret-modify"
+                    >
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-modify"
-                    className="h-5 w-5"
+                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
+                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                        <div className="flex flex-row items-center gap-1">
+                          <FontAwesomeIcon icon={faPencil} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
+                          <FormLabel label="Modify" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
                         </div>
+                        <p className="text-xs text-mineshaft-400">Update existing secrets</p>
+                      </div>
+                    </label>
                   )}
                 />
                 <Controller
                   control={privilegeForm.control}
                   name="delete"
                   render={({ field }) => (
-                <div className="flex flex-col items-center">
+                    <label 
-                  <FormLabel label="Delete" className="mb-4" />
+                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                      htmlFor="secret-delete"
+                    >
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-delete"
-                    className="h-5 w-5"
+                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
+                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                        <div className="flex flex-row items-center gap-1">
+                          <FontAwesomeIcon icon={faTrashCan} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
+                          <FormLabel label="Delete" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
                         </div>
+                        <p className="text-xs text-mineshaft-400">Delete existing secrets</p>
+                      </div>
+                    </label>
                   )}
                 />
               </div>
-          <div className="mt-6 flex items-center space-x-2">
+            </div>
+          </FormControl>
+          <FormControl label="Time Period" className="w-full">
+            <div className="mt-1 flex items-center space-x-2 w-full">
               <Popover>
                 <PopoverTrigger disabled={isMemberEditDisabled}>
-                <div>
+                  <div className="w-full">
                     <Tooltip content={getAccessLabel(true)}>
                       <Button
                         variant="outline_bg"
                         leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
-                      rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
+                        rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-4" />}
                         isDisabled={isMemberEditDisabled}
                         className={twMerge(
-                        "border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
+                          "border-mineshaft-600 text-mineshaft-300 w-full hover:border-mineshaft-600 bg-mineshaft-900 py-2.5 text-sm capitalize hover:bg-mineshaft-800",
-                        isTemporary && "text-primary",
                           isExpired && "text-red-600"
                         )}
                       >
@@ -416,14 +462,14 @@ export const SpecificPrivilegeSecretForm = ({
                   </div>
                 </PopoverTrigger>
                 <PopoverContent
-                arrowClassName="fill-gray-600"
+                  arrowClassName="fill-mineshaft-600"
                   side="right"
                   sideOffset={12}
                   hideCloseBtn
-                className="border border-gray-600 pt-4"
+                  className="border border-mineshaft-600 pt-4 bg-mineshaft-800"
                 >
                   <div className="flex flex-col space-y-4">
-                  <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+                    <div className="text-sm text-mineshaft-300">
                       Configure timed access
                     </div>
                     {isExpired && <Tag colorSchema="red">Expired</Tag>}
@@ -544,6 +590,7 @@ export const SpecificPrivilegeSecretForm = ({
                 <div />
               )}
             </div>
+          </FormControl>
         </div>
         <div className="mb-4 flex w-full">
           <Controller
@@ -552,7 +599,7 @@ export const SpecificPrivilegeSecretForm = ({
             render={({ field }) => (
               <div className="w-full">
                 <FormLabel label="Note" className="mb-2" />
-                <Input {...field} isDisabled={isMemberEditDisabled} maxLength={255} />
+                <Input {...field} isDisabled={isMemberEditDisabled} maxLength={255} placeholder="Add the reason for this access request..." className="text-mineshaft-300" />
               </div>
             )}
           />

frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx

@@ -158,8 +158,8 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
                       variant="outline_bg"
                       type="submit"
                       className={twMerge(
-                        "mr-4 h-10 border border-primary",
+                        "mr-4 h-10 border",
-                        isDirty && "bg-primary text-black"
+                        isDirty && "bg-primary text-black hover:bg-primary hover:opacity-80"
                       )}
                       isDisabled={isSubmitting || !isDirty}
                       isLoading={isSubmitting}

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx

@@ -14,9 +14,9 @@ export const RequestAccessModal = ({
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
-        className="max-w-4xl"
+        className="max-w-xl"
         title="Request Access"
-        subTitle="Your role has limited permissions, please contact your administrator to gain access"
+        subTitle="Request access to any secrets and resources based on the predefined policies."
       >
         <SpecificPrivilegeSecretForm onClose={() => onOpenChange(false)} policies={policies} />
       </ModalContent>