minor style updates to approvals

backend/src/validation/secretApproval.ts

@@ -26,7 +26,7 @@ export const CreateSecretApprovalRule = z.object({
     })
     .refine((data) => data.approvals <= data.approvers.length, {
       path: ["approvals"],
-      message: "Approvals should be lower than approvals"
+      message: "The number of approvals should be lower than the number of approvers."
     })
 });
 
@@ -43,7 +43,7 @@ export const UpdateSecretApprovalRule = z.object({
     })
     .refine((data) => data.approvals <= data.approvers.length, {
       path: ["approvals"],
-      message: "Approvals should be lower than approvals"
+      message: "The number of approvals should be lower than the number of approvers."
     })
 });
 

frontend/src/components/v2/Button/Button.tsx

@@ -70,7 +70,7 @@ const buttonVariants = cva(
       {
         colorSchema: "primary",
         variant: "solid",
-        className: "bg-primary-500 bg-opacity-90 hover:bg-primary-500 hover:text-black"
+        className: "text-black bg-primary-500 bg-opacity-90 hover:bg-primary-500 hover:text-black"
       },
       {
         colorSchema: "primary",

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -484,7 +484,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                               isSelected={
                                 router.asPath === `/project/${currentWorkspace?._id}/approval`
                               }
-                              icon="system-outline-126-verified"
+                              icon="system-outline-189-domain-verification"
                             >
                               Secret Approval
                             </MenuItem>

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretApprovalPolicyRow.tsx

@@ -81,7 +81,7 @@ export const SecretApprovalPolicyRow = ({
             style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
             align="start"
           >
-            <DropdownMenuLabel>Select members that must approve changes</DropdownMenuLabel>
+            <DropdownMenuLabel>Select members that are allowed to approve changes</DropdownMenuLabel>
             {members?.map(({ _id, user }) => {
               const isChecked = selectedApprovers.includes(_id);
               return (

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretPolicyForm.tsx

@@ -43,7 +43,7 @@ const formSchema = z
   })
   .refine((data) => data.approvals <= data.approvers.length, {
     path: ["approvals"],
-    message: "Approvals should be lower than approvals"
+    message: "The number of approvals should be lower than the number of approvers."
   });
 
 type TFormSchema = z.infer<typeof formSchema>;
@@ -183,7 +183,7 @@ export const SecretPolicyForm = ({
             name="approvers"
             render={({ field: { value, onChange }, fieldState: { error } }) => (
               <FormControl
-                label="Approvals Required"
+                label="Approvers Required"
                 isError={Boolean(error)}
                 errorText={error?.message}
               >
@@ -199,7 +199,7 @@ export const SecretPolicyForm = ({
                     style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
                     align="start"
                   >
-                    <DropdownMenuLabel>Select members that must approve changes</DropdownMenuLabel>
+                    <DropdownMenuLabel>Select members that are allowed to approve changes</DropdownMenuLabel>
                     {members.map(({ _id, user }) => {
                       const isChecked = value?.includes(_id);
                       return (

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx

@@ -90,12 +90,12 @@ export const SecretApprovalRequest = () => {
         <motion.div
           key="approval-changes-list"
           transition={{ duration: 0.1 }}
-          initial={{ opacity: 0, translateX: -30 }}
+          initial={{ opacity: 0, translateX: 30 }}
           animate={{ opacity: 1, translateX: 0 }}
-          exit={{ opacity: 0, translateX: -30 }}
+          exit={{ opacity: 0, translateX: 30 }}
           className="rounded-md text-gray-300"
         >
-          <div className="p-4 px-8 flex items-center space-x-8 bg-mineshaft-800">
+          <div className="p-4 px-8 flex items-center space-x-8 bg-mineshaft-800 rounded-t-md border-t border-x border-mineshaft-600">
             <div
               role="button"
               tabIndex={0}
@@ -103,13 +103,13 @@ export const SecretApprovalRequest = () => {
               onKeyDown={(evt) => {
                 if (evt.key === "Enter") setStatusFilter("open");
               }}
-              className={statusFilter === "close" ? "text-gray-500" : ""}
+              className={statusFilter === "close" ? "text-gray-500 hover:text-gray-400 duration-100" : ""}
             >
               <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
               Open
             </div>
             <div
-              className={statusFilter === "open" ? "text-gray-500" : ""}
+              className={statusFilter === "open" ? "text-gray-500 hover:text-gray-400 duration-100" : ""}
               role="button"
               tabIndex={0}
               onClick={() => setStatusFilter("close")}
@@ -175,7 +175,7 @@ export const SecretApprovalRequest = () => {
               </DropdownMenu>
             </div>
           </div>
-          <div className="flex flex-col border-t border-mineshaft-600 bg-mineshaft-800">
+          <div className="flex flex-col border-t border-mineshaft-600 bg-mineshaft-800 rounded-b-md border-b border-x border-mineshaft-600">
             {isRequestListEmpty && (
               <div className="py-12">
                 <EmptyState title="No more requests pending." />

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx

@@ -96,24 +96,26 @@ export const SecretApprovalRequestAction = ({
             </span>
           </span>
         </div>
-        <div className="flex items-center space-x-6">
+        <div className="flex items-center space-x-2">
+          <Button
+            onClick={() => handleSecretApprovalStatusChange("close")}
+            isLoading={isStatusChanging}
+            variant="outline_bg"
+            colorSchema="secondary"
+            leftIcon={<FontAwesomeIcon icon={faClose} />}
+          >
+            Close request
+          </Button>
           <Button
             leftIcon={<FontAwesomeIcon icon={faCheck} />}
             isDisabled={!isMergable}
             isLoading={isMerging}
             onClick={handleSecretApprovalRequestMerge}
+            colorSchema="primary"
+            variant="solid"
           >
             Merge
           </Button>
-          <Button
-            onClick={() => handleSecretApprovalStatusChange("close")}
-            isLoading={isStatusChanging}
-            variant="outline_bg"
-            colorSchema="danger"
-            leftIcon={<FontAwesomeIcon icon={faClose} />}
-          >
-            Close request
-          </Button>
         </div>
       </div>
     );