From 31ad6b0c866e36951027c98c22e55bca4e306272 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Thu, 28 Mar 2024 18:17:59 -0700
Subject: [PATCH] update style

---
 .../components/IdentityTab/IdentityTab.tsx    |  6 +-
 .../IdentityRoleForm/IdentityRbacSection.tsx  | 75 ++++++++----------
 .../SpecificPrivilegeSection.tsx              | 56 +++++++-------
 .../MemberListTab/MemberListTab.tsx           |  4 +-
 .../MemberRoleForm/MemberRbacSection.tsx      | 77 +++++++++----------
 .../SpecificPrivilegeSection.tsx              | 52 ++++++-------
 6 files changed, 128 insertions(+), 142 deletions(-)

diff --git a/frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx b/frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx
index d82c53d2a..213b08246 100644
--- a/frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx
+++ b/frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx
@@ -308,12 +308,12 @@ export const IdentityTab = withProjectPermission(
                         onOpenChange={(state) => handlePopUpToggle("updateRole", state)}
                     >
                         <ModalContent
-                            className="max-w-4xl"
+                            className="max-w-3xl"
                             title={`Manage Access for ${(popUp.updateRole.data as IdentityMembership)?.identity?.name
                                 }`}
                             subTitle={`
-Configure role-based access control by Infisical users a mix of one built-in role, multiple custom roles, and multiple specific privileges. A user will gain access to alll actions within the roles assigned to them, not just the actions those roles share in common. You must choose at least one permanent role.
-`}
+                            Configure role-based access control by assigning machine identities a mix of roles and specific privileges. An identity will gain access to all actions within the roles assigned to it, not just the actions those roles share in common. You must choose at least one permanent role.
+                            `}
                         >
                             <IdentityRoleForm
                                 onOpenUpgradeModal={(description) =>
diff --git a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/IdentityRbacSection.tsx b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/IdentityRbacSection.tsx
index fddc067bc..a4bd57ad3 100644
--- a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/IdentityRbacSection.tsx
+++ b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/IdentityRbacSection.tsx
@@ -1,8 +1,8 @@
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { faCaretDown, faClock, faClose } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faClock, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { formatDistance } from "date-fns";
+import { format } from "date-fns";
 import ms from "ms";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
@@ -21,8 +21,7 @@ import {
   Select,
   SelectItem,
   Spinner,
-  Tag,
-  Tooltip
+  Tag
 } from "@app/components/v2";
 import {
   ProjectPermissionActions,
@@ -183,29 +182,24 @@ export const IdentityRbacSection = ({ identityProjectMember, onOpenUpgradeModal
                   />
                   <Popover>
                     <PopoverTrigger disabled={isMemberEditDisabled}>
-                      <Tooltip
-                        asChild
-                        content={isExpired ? "Timed access expired" : "Grant timed access"}
+                      <Button
+                        variant="outline_bg"
+                        leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
+                        rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
+                        isDisabled={isMemberEditDisabled}
+                        className={twMerge(
+                          "border-none bg-mineshaft-600 hover:bg-mineshaft-500 py-2.5 capitalize text-xs",
+                          isTemporary && "text-primary",
+                          isExpired && "text-red-600"
+                        )}
                       >
-                        <Button
-                          variant="outline_bg"
-                          leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
-                          rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
-                          isDisabled={isMemberEditDisabled}
-                          className={twMerge(
-                            "border-none bg-mineshaft-600 py-2 capitalize",
-                            isTemporary && "text-primary",
-                            isExpired && "text-red-600"
-                          )}
-                        >
-                          {!temporaryAccess?.isTemporary
-                            ? "Permanent"
-                            : formatDistance(
-                              new Date(temporaryAccess.temporaryAccessEndTime || ""),
-                              new Date()
-                            )}
-                        </Button>
-                      </Tooltip>
+                        {!temporaryAccess?.isTemporary
+                          ? "Permanent"
+                          : `Expires at ${format(
+                            new Date(temporaryAccess.temporaryAccessEndTime || ""),
+                            "yyyy-MM-dd HH:mm:ss"
+                          )}`}
+                      </Button>
                     </PopoverTrigger>
                     <PopoverContent
                       arrowClassName="fill-gray-600"
@@ -283,21 +277,19 @@ export const IdentityRbacSection = ({ identityProjectMember, onOpenUpgradeModal
                       </div>
                     </PopoverContent>
                   </Popover>
-                  <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Remove"}>
-                    <IconButton
-                      variant="outline_bg"
-                      className="border-none bg-mineshaft-600 py-3"
-                      ariaLabel="delete-role"
-                      isDisabled={isMemberEditDisabled}
-                      onClick={() => {
-                        if (selectedRoleList.fields.length > 1) {
-                          selectedRoleList.remove(index);
-                        }
-                      }}
-                    >
-                      <FontAwesomeIcon icon={faClose} />
-                    </IconButton>
-                  </Tooltip>
+                  <IconButton
+                    variant="outline_bg"
+                    className="border border-mineshaft-500 bg-mineshaft-600 hover:bg-red/20 hover:border-red/70 py-3"
+                    ariaLabel="delete-role"
+                    isDisabled={isMemberEditDisabled}
+                    onClick={() => {
+                      if (selectedRoleList.fields.length > 1) {
+                        selectedRoleList.remove(index);
+                      }
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </IconButton>
                 </div>
               );
             })}
@@ -311,6 +303,7 @@ export const IdentityRbacSection = ({ identityProjectMember, onOpenUpgradeModal
                 <Button
                   variant="outline_bg"
                   isDisabled={!isAllowed}
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
                   onClick={() =>
                     selectedRoleList.append({
                       slug: ProjectMembershipRole.Member,
diff --git a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/SpecificPrivilegeSection.tsx b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/SpecificPrivilegeSection.tsx
index 806072a89..9d543f466 100644
--- a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/SpecificPrivilegeSection.tsx
+++ b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/SpecificPrivilegeSection.tsx
@@ -1,8 +1,8 @@
 import { Controller, useForm } from "react-hook-form";
-import { faCancel, faCaretDown, faClock, faClose, faSave } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRotateLeft, faCaretDown, faCheck, faClock, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { formatDistance } from "date-fns";
+import { format } from "date-fns";
 import ms from "ms";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
@@ -176,7 +176,7 @@ const SpecificPrivilegeSecretForm = ({
   const getAccessLabel = () => {
     if (isExpired) return "Access expired";
     if (!temporaryAccessField?.isTemporary) return "Permanent";
-    return formatDistance(new Date(temporaryAccessField.temporaryAccessEndTime || ""), new Date());
+    return `Until ${format(new Date(temporaryAccessField.temporaryAccessEndTime || ""), "yyyy-MM-dd HH:mm:ss")}`;
   };
 
   return (
@@ -191,9 +191,8 @@ const SpecificPrivilegeSecretForm = ({
                 <Select
                   {...field}
                   isDisabled={isMemberEditDisabled}
-                  className="bg-mineshaft-600"
+                  className="bg-mineshaft-600 hover:bg-mineshaft-500"
                   onValueChange={(e) => onChange(e)}
-                // className="w-full border border-mineshaft-500 bg-mineshaft-700 text-mineshaft-100"
                 >
                   {currentWorkspace?.environments?.map(({ slug, id }) => (
                     <SelectItem value={slug} key={id}>
@@ -292,7 +291,7 @@ const SpecificPrivilegeSecretForm = ({
                     leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
                     rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
                     className={twMerge(
-                      "border-none py-1.5 capitalize",
+                      "border-none py-2.5 capitalize text-xs hover:bg-mineshaft-500",
                       isTemporary && "text-primary",
                       isExpired && "text-red-600"
                     )}
@@ -379,42 +378,42 @@ const SpecificPrivilegeSecretForm = ({
             </Popover>
             {privilegeForm.formState.isDirty ? (
               <>
-                <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Save"}>
-                  <IconButton
-                    isDisabled={isMemberEditDisabled}
-                    className="border-none py-2.5"
-                    ariaLabel="save-privilege"
-                    type="submit"
-                  >
-                    {privilegeForm.formState.isSubmitting ? (
-                      <Spinner size="xs" className="m-0 h-3 w-3 text-slate-500" />
-                    ) : (
-                      <FontAwesomeIcon icon={faSave} />
-                    )}
-                  </IconButton>
-                </Tooltip>
-                <Tooltip content="Cancel">
+                <Tooltip content="Cancel" className="mr-4">
                   <IconButton
                     variant="outline_bg"
-                    className="border-none bg-mineshaft-600 py-2.5"
+                    className="border border-mineshaft-500 bg-mineshaft-600 hover:bg-red/20 hover:border-red/70 py-2.5"
                     ariaLabel="delete-privilege"
                     isDisabled={privilegeForm.formState.isSubmitting}
                     onClick={() => privilegeForm.reset()}
                   >
-                    <FontAwesomeIcon icon={faCancel} />
+                    <FontAwesomeIcon icon={faArrowRotateLeft} className="py-0.5" />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Save"} className="mr-4">
+                  <IconButton
+                    isDisabled={isMemberEditDisabled}
+                    className="border-none py-3"
+                    ariaLabel="save-privilege"
+                    type="submit"
+                  >
+                    {privilegeForm.formState.isSubmitting ? (
+                      <Spinner size="xs" className="m-0 text-slate-500 w-3 h-3" />
+                    ) : (
+                      <FontAwesomeIcon icon={faCheck} className="px-0.5"/>
+                    )}
                   </IconButton>
                 </Tooltip>
               </>
             ) : (
-              <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Delete"}>
+              <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Delete"} className="mr-4">
                 <IconButton
                   isDisabled={isMemberEditDisabled}
                   variant="outline_bg"
-                  className="border-none bg-mineshaft-600 py-2.5"
+                  className="border border-mineshaft-500 bg-mineshaft-600 hover:bg-red/20 hover:border-red/70 py-3"
                   ariaLabel="delete-privilege"
                   onClick={() => handlePopUpOpen("deletePrivilege")}
                 >
-                  <FontAwesomeIcon icon={faClose} />
+                  <FontAwesomeIcon icon={faTrash} />
                 </IconButton>
               </Tooltip>
             )}
@@ -476,12 +475,12 @@ export const SpecificPrivilegeSection = ({ identityId }: Props) => {
   };
 
   return (
-    <div className="mt-6 border-t border-t-gray-700 pt-6">
+    <div className="mt-6 border-t border-t-mineshaft-600 pt-6">
       <div className="flex items-center space-x-2 text-lg font-medium">
         Additional Privileges
         {isLoading && <Spinner size="xs" />}
       </div>
-      <p className="text-sm text-mineshaft-400">
+      <p className="text-sm text-mineshaft-400 mt-0.5">
         Select individual privileges to associate with the identity.
       </p>
       <div>
@@ -502,6 +501,7 @@ export const SpecificPrivilegeSection = ({ identityId }: Props) => {
           <Button
             variant="outline_bg"
             className="mt-4"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
             onClick={handleCreatePrivilege}
             isLoading={createIdentityPrivilege.isLoading}
             isDisabled={!isAllowed}
diff --git a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
index 3bb29ff61..20a2079ac 100644
--- a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
+++ b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
@@ -472,8 +472,8 @@ export const MemberListTab = () => {
           className="max-w-4xl"
           title={`Manage Access for ${(popUp.updateRole.data as TWorkspaceUser)?.user?.email}`}
           subTitle={`
-Configure role-based access control by Infisical users a mix of one built-in role, multiple custom roles, and multiple specific privileges. A user will gain access to alll actions within the roles assigned to them, not just the actions those roles share in common. You must choose at least one permanent role.
-`}
+          Configure role-based access control by assigning Infisical users a mix of roles and specific privileges. A user will gain access to all actions within the roles assigned to them, not just the actions those roles share in common. You must choose at least one permanent role.
+          `}
         >
           <MemberRoleForm
             onOpenUpgradeModal={(description) => handlePopUpOpen("upgradePlan", { description })}
diff --git a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/MemberRbacSection.tsx b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/MemberRbacSection.tsx
index 73642344e..86fdfb651 100644
--- a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/MemberRbacSection.tsx
+++ b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/MemberRbacSection.tsx
@@ -1,8 +1,8 @@
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { faCaretDown, faClock, faClose } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faClock, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { formatDistance } from "date-fns";
+import { format } from "date-fns";
 import ms from "ms";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
@@ -21,8 +21,7 @@ import {
   Select,
   SelectItem,
   Spinner,
-  Tag,
-  Tooltip
+  Tag
 } from "@app/components/v2";
 import {
   ProjectPermissionActions,
@@ -171,7 +170,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                         {...field}
                         isDisabled={isMemberEditDisabled}
                         onValueChange={(e) => onChange(e)}
-                        className="w-full bg-mineshaft-600"
+                        className="w-full bg-mineshaft-600 hover:bg-mineshaft-500 duration-200"
                       >
                         {projectRoles?.map(({ name, slug, id: projectRoleId }) => (
                           <SelectItem value={slug} key={projectRoleId}>
@@ -183,29 +182,24 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                   />
                   <Popover>
                     <PopoverTrigger disabled={isMemberEditDisabled}>
-                      <Tooltip
-                        asChild
-                        content={isExpired ? "Timed access expired" : "Grant timed access"}
+                      <Button
+                        variant="outline_bg"
+                        leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
+                        rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
+                        isDisabled={isMemberEditDisabled}
+                        className={twMerge(
+                          "border-none bg-mineshaft-600 hover:bg-mineshaft-500 py-2.5 capitalize text-xs",
+                          isTemporary && "text-primary",
+                          isExpired && "text-red-600"
+                        )}
                       >
-                        <Button
-                          variant="outline_bg"
-                          leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
-                          rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
-                          isDisabled={isMemberEditDisabled}
-                          className={twMerge(
-                            "border-none bg-mineshaft-600 py-2 capitalize",
-                            isTemporary && "text-primary",
-                            isExpired && "text-red-600"
-                          )}
-                        >
-                          {!temporaryAccess?.isTemporary
-                            ? "Permanent"
-                            : formatDistance(
-                              new Date(temporaryAccess.temporaryAccessEndTime || ""),
-                              new Date()
-                            )}
-                        </Button>
-                      </Tooltip>
+                        {!temporaryAccess?.isTemporary
+                          ? "Permanent"
+                          : `Until ${format(
+                            new Date(temporaryAccess.temporaryAccessEndTime || ""),
+                            "yyyy-MM-dd HH:mm:ss"
+                          )}`}
+                      </Button>
                     </PopoverTrigger>
                     <PopoverContent
                       arrowClassName="fill-gray-600"
@@ -283,21 +277,19 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                       </div>
                     </PopoverContent>
                   </Popover>
-                  <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Remove"}>
-                    <IconButton
-                      variant="outline_bg"
-                      className="border-none bg-mineshaft-600 py-3"
-                      ariaLabel="delete-role"
-                      isDisabled={isMemberEditDisabled}
-                      onClick={() => {
-                        if (selectedRoleList.fields.length > 1) {
-                          selectedRoleList.remove(index);
-                        }
-                      }}
-                    >
-                      <FontAwesomeIcon icon={faClose} />
-                    </IconButton>
-                  </Tooltip>
+                  <IconButton
+                    variant="outline_bg"
+                    className="border border-mineshaft-500 bg-mineshaft-600 hover:bg-red/20 hover:border-red/70 py-3"
+                    ariaLabel="delete-role"
+                    isDisabled={isMemberEditDisabled}
+                    onClick={() => {
+                      if (selectedRoleList.fields.length > 1) {
+                        selectedRoleList.remove(index);
+                      }
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </IconButton>
                 </div>
               );
             })}
@@ -308,6 +300,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                 <Button
                   variant="outline_bg"
                   isDisabled={!isAllowed}
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
                   onClick={() =>
                     selectedRoleList.append({
                       slug: ProjectMembershipRole.Member,
diff --git a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/SpecificPrivilegeSection.tsx b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/SpecificPrivilegeSection.tsx
index 6304322b0..f50480f0f 100644
--- a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/SpecificPrivilegeSection.tsx
+++ b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/SpecificPrivilegeSection.tsx
@@ -1,8 +1,8 @@
 import { Controller, useForm } from "react-hook-form";
-import { faCancel, faCaretDown, faClock, faClose, faSave } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRotateLeft, faCaretDown, faCheck, faClock, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { formatDistance } from "date-fns";
+import { format } from "date-fns";
 import ms from "ms";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
@@ -164,7 +164,7 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
   const getAccessLabel = () => {
     if (isExpired) return "Access expired";
     if (!temporaryAccessField?.isTemporary) return "Permanent";
-    return formatDistance(new Date(temporaryAccessField.temporaryAccessEndTime || ""), new Date());
+    return `Until ${format(new Date(temporaryAccessField.temporaryAccessEndTime || ""), "yyyy-MM-dd HH:mm:ss")}`;
   };
 
   return (
@@ -179,9 +179,8 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
                 <Select
                   {...field}
                   isDisabled={isMemberEditDisabled}
-                  className="bg-mineshaft-600"
+                  className="bg-mineshaft-600 hover:bg-mineshaft-500"
                   onValueChange={(e) => onChange(e)}
-                // className="w-full border border-mineshaft-500 bg-mineshaft-700 text-mineshaft-100"
                 >
                   {currentWorkspace?.environments?.map(({ slug, id }) => (
                     <SelectItem value={slug} key={id}>
@@ -280,7 +279,7 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
                     leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
                     rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
                     className={twMerge(
-                      "border-none py-1.5 capitalize",
+                      "border-none py-2.5 capitalize text-xs hover:bg-mineshaft-500",
                       isTemporary && "text-primary",
                       isExpired && "text-red-600"
                     )}
@@ -367,42 +366,42 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
             </Popover>
             {privilegeForm.formState.isDirty ? (
               <>
-                <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Save"}>
+                <Tooltip content="Cancel" className="mr-4">
+                  <IconButton
+                    variant="outline_bg"
+                    className="border border-mineshaft-500 bg-mineshaft-600 hover:bg-red/20 hover:border-red/70 py-2.5"
+                    ariaLabel="delete-privilege"
+                    isDisabled={privilegeForm.formState.isSubmitting}
+                    onClick={() => privilegeForm.reset()}
+                  >
+                    <FontAwesomeIcon icon={faArrowRotateLeft} className="py-0.5" />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Save"} className="mr-4">
                   <IconButton
                     isDisabled={isMemberEditDisabled}
-                    className="border-none py-2.5"
+                    className="border-none py-3"
                     ariaLabel="save-privilege"
                     type="submit"
                   >
                     {privilegeForm.formState.isSubmitting ? (
                       <Spinner size="xs" className="m-0 text-slate-500 w-3 h-3" />
                     ) : (
-                      <FontAwesomeIcon icon={faSave} />
+                      <FontAwesomeIcon icon={faCheck} className="px-0.5"/>
                     )}
                   </IconButton>
                 </Tooltip>
-                <Tooltip content="Cancel">
-                  <IconButton
-                    variant="outline_bg"
-                    className="border-none bg-mineshaft-600 py-2.5"
-                    ariaLabel="delete-privilege"
-                    isDisabled={privilegeForm.formState.isSubmitting}
-                    onClick={() => privilegeForm.reset()}
-                  >
-                    <FontAwesomeIcon icon={faCancel} />
-                  </IconButton>
-                </Tooltip>
               </>
             ) : (
-              <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Delete"}>
+              <Tooltip content={isMemberEditDisabled ? "Access restricted" : "Delete"} className="mr-4">
                 <IconButton
                   isDisabled={isMemberEditDisabled}
                   variant="outline_bg"
-                  className="border-none bg-mineshaft-600 py-2.5"
+                  className="border border-mineshaft-500 bg-mineshaft-600 hover:bg-red/20 hover:border-red/70 py-3"
                   ariaLabel="delete-privilege"
                   onClick={() => handlePopUpOpen("deletePrivilege")}
                 >
-                  <FontAwesomeIcon icon={faClose} />
+                  <FontAwesomeIcon icon={faTrash} />
                 </IconButton>
               </Tooltip>
             )}
@@ -459,13 +458,13 @@ export const SpecificPrivilegeSection = ({ membershipId }: Props) => {
   };
 
   return (
-    <div className="mt-6 border-t border-t-gray-700 pt-6">
+    <div className="mt-6 border-t border-t-mineshaft-600 pt-6">
       <div className="flex items-center space-x-2 text-lg font-medium">
         Additional Privileges
         {isLoading && <Spinner size="xs" />}
       </div>
-      <p className="text-sm text-mineshaft-400">
-        Select individual privileges to associate with the user
+      <p className="text-sm text-mineshaft-400 mt-0.5">
+        Select individual privileges to associate with the user.
       </p>
       <div>
         {userPrivileges
@@ -484,6 +483,7 @@ export const SpecificPrivilegeSection = ({ membershipId }: Props) => {
           <Button
             variant="outline_bg"
             className="mt-4"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
             onClick={handleCreatePrivilege}
             isLoading={createUserPrivilege.isLoading}
             isDisabled={!isAllowed}