improvement: color/layout styling adjustments to change request page

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

@@ -445,7 +445,7 @@ export const ReviewAccessRequestModal = ({
                     onCheckedChange={(checked) => setBypassApproval(checked === true)}
                     isChecked={bypassApproval}
                     id="byPassApproval"
-                    className={twMerge("mr-2", bypassApproval ? "border-red/30 bg-red/10" : "")}
+                    className={twMerge("mr-2", bypassApproval ? "!border-red/30 !bg-red/10" : "")}
                   >
                     <span className="text-xs text-red">
                       Approve without waiting for requirements to be met (bypass policy protection)

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx

@@ -102,14 +102,15 @@ export const SecretApprovalRequestAction = ({
 
   if (!hasMerged && status === "open") {
     return (
-      <div className="flex w-full flex-col items-start justify-between py-4 transition-all">
+      <div className="flex w-full flex-col items-start justify-between py-4 text-mineshaft-100 transition-all">
-        <div className="flex items-center space-x-4 px-4">
+        <div className="flex w-full items-center justify-between">
+          <div className="mr-auto flex items-center space-x-4 px-4">
             <div
-            className={`flex items-center justify-center rounded-full ${isMergable ? "h-10 w-10 bg-green" : "h-11 w-11 bg-red-600"}`}
+              className={`flex items-center justify-center rounded-full ${isMergable ? "h-8 w-8 bg-green" : "h-10 w-10 bg-red-600"}`}
             >
               <FontAwesomeIcon
                 icon={isMergable ? faCheck : faXmark}
-              className={isMergable ? "text-lg text-black" : "text-2xl text-white"}
+                className={isMergable ? "text-lg text-white" : "text-2xl text-white"}
               />
             </div>
             <span className="flex flex-col">
@@ -117,7 +118,7 @@ export const SecretApprovalRequestAction = ({
                 {isMergable ? "Good to merge" : "Merging is blocked"}
               </p>
               {!isMergable && (
-              <span className="inline-block text-xs text-bunker-200">
+                <span className="inline-block text-xs text-mineshaft-300">
                   At least {approvals} approving review{`${approvals > 1 ? "s" : ""}`} required by
                   eligible reviewers.
                   {Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
@@ -125,44 +126,7 @@ export const SecretApprovalRequestAction = ({
               )}
             </span>
           </div>
-        {isSoftEnforcement && !isMergable && isBypasser && (
+          <div className="flex items-center justify-end space-x-2 px-4">
-          <div
-            className={`mt-4 w-full border-mineshaft-600 px-5 ${isMergable ? "border-t pb-2" : "border-y pb-4"}`}
-          >
-            <div className="mt-2 flex flex-col space-y-2 pt-2">
-              <Checkbox
-                onCheckedChange={(checked) => setByPassApproval(checked === true)}
-                isChecked={byPassApproval}
-                id="byPassApproval"
-                checkIndicatorBg="text-white"
-                className={twMerge(
-                  "mr-2",
-                  byPassApproval ? "border-red bg-red hover:bg-red-600" : ""
-                )}
-              >
-                <span className="text-sm">
-                  Merge without waiting for approval (bypass secret change policy)
-                </span>
-              </Checkbox>
-              {byPassApproval && (
-                <FormControl
-                  label="Reason for bypass"
-                  className="mt-2"
-                  isRequired
-                  tooltipText="Enter a reason for bypassing the secret change policy"
-                >
-                  <Input
-                    value={bypassReason}
-                    onChange={(e) => setBypassReason(e.target.value)}
-                    placeholder="Enter reason for bypass (min 10 chars)"
-                    leftIcon={<FontAwesomeIcon icon={faTriangleExclamation} />}
-                  />
-                </FormControl>
-              )}
-            </div>
-          </div>
-        )}
-        <div className="mt-2 flex w-full items-center justify-end space-x-2 px-4">
             {canApprove || isSoftEnforcement ? (
               <div className="flex items-center space-x-4">
                 <Button
@@ -186,27 +150,60 @@ export const SecretApprovalRequestAction = ({
                   isLoading={isMerging}
                   onClick={handleSecretApprovalRequestMerge}
                   colorSchema={isSoftEnforcement && !canApprove ? "danger" : "primary"}
-                variant="solid"
+                  variant="outline_bg"
                 >
                   Merge
                 </Button>
               </div>
             ) : (
-            <div>Only approvers can merge</div>
+              <div className="text-sm text-mineshaft-400">Only approvers can merge</div>
             )}
           </div>
         </div>
+        {isSoftEnforcement && !isMergable && isBypasser && (
+          <div className="mt-4 w-full border-t border-mineshaft-600 px-5">
+            <div className="mt-2 flex flex-col space-y-2 pt-2">
+              <Checkbox
+                onCheckedChange={(checked) => setByPassApproval(checked === true)}
+                isChecked={byPassApproval}
+                id="byPassApproval"
+                checkIndicatorBg="text-white"
+                className={twMerge("mr-2", byPassApproval ? "!border-red/30 !bg-red/10" : "")}
+              >
+                <span className="text-sm">
+                  Merge without waiting for approval (bypass secret change policy)
+                </span>
+              </Checkbox>
+              {byPassApproval && (
+                <FormControl
+                  label="Reason for bypass"
+                  className="mt-2"
+                  isRequired
+                  tooltipText="Enter a reason for bypassing the secret change policy"
+                >
+                  <Input
+                    value={bypassReason}
+                    onChange={(e) => setBypassReason(e.target.value)}
+                    placeholder="Enter reason for bypass (min 10 chars)"
+                    leftIcon={<FontAwesomeIcon icon={faTriangleExclamation} />}
+                  />
+                </FormControl>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
     );
   }
 
   if (hasMerged && status === "close")
     return (
-      <div className="flex w-full items-center justify-between rounded-md border border-primary/60 bg-primary/10">
+      <div className="flex w-full items-center justify-between rounded-md border border-green/60 bg-green/10">
-        <div className="flex items-start space-x-4 p-4">
+        <div className="flex items-start space-x-2 p-4">
-          <FontAwesomeIcon icon={faCheck} className="pt-1 text-2xl text-primary" />
+          <FontAwesomeIcon icon={faCheck} className="mt-0.5 text-xl text-green" />
           <span className="flex flex-col">
             Change request merged
-            <span className="inline-block text-xs text-bunker-200">
+            <span className="inline-block text-xs text-mineshaft-300">
               Merged by {statusChangeByEmail}.
             </span>
           </span>
@@ -215,26 +212,26 @@ export const SecretApprovalRequestAction = ({
     );
 
   return (
-    <div className="flex w-full items-center justify-between">
+    <div className="flex w-full items-center justify-between rounded-md border border-yellow/60 bg-yellow/10">
-      <div className="flex items-start space-x-4">
+      <div className="flex items-start space-x-2 p-4">
-        <FontAwesomeIcon icon={faUserLock} className="pt-1 text-2xl text-primary" />
+        <FontAwesomeIcon icon={faUserLock} className="mt-0.5 text-xl text-yellow" />
         <span className="flex flex-col">
           Secret approval has been closed
-          <span className="inline-block text-xs text-bunker-200">
+          <span className="inline-block text-xs text-mineshaft-300">
             Closed by {statusChangeByEmail}
           </span>
         </span>
       </div>
-      <div className="flex items-center space-x-6">
       <Button
         onClick={() => handleSecretApprovalStatusChange("open")}
         isLoading={isStatusChanging}
-          variant="outline_bg"
+        variant="plain"
+        colorSchema="secondary"
+        className="mr-4 text-yellow/60 hover:text-yellow"
         leftIcon={<FontAwesomeIcon icon={faLockOpen} />}
       >
         Reopen request
       </Button>
     </div>
-    </div>
   );
 };

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable no-nested-ternary */
 import { useState } from "react";
 import {
+  faCircleCheck,
   faCircleXmark,
   faExclamationTriangle,
   faEye,
@@ -29,14 +30,14 @@ export type Props = {
 };
 
 const generateItemTitle = (op: CommitType) => {
-  let text = { label: "", color: "" };
+  let text = { label: "", className: "" };
-  if (op === CommitType.CREATE) text = { label: "create", color: "#60DD00" };
+  if (op === CommitType.CREATE) text = { label: "create", className: "text-green-600" };
-  else if (op === CommitType.UPDATE) text = { label: "change", color: "#F8EB30" };
+  else if (op === CommitType.UPDATE) text = { label: "change", className: "text-yellow-600" };
-  else text = { label: "deletion", color: "#F83030" };
+  else text = { label: "deletion", className: "text-red-600" };
 
   return (
     <div className="text-md pb-2 font-medium">
-      Request for <span style={{ color: text.color }}>secret {text.label}</span>
+      Request for <span className={text.className}>secret {text.label}</span>
     </div>
   );
 };
@@ -215,7 +216,7 @@ export const SecretApprovalRequestChangeItem = ({
               <div className="mb-4 flex flex-row justify-between">
                 <span className="text-md font-medium">New Secret</span>
                 <div className="rounded-full bg-green-600 px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
-                  <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
+                  <FontAwesomeIcon icon={faCircleCheck} className="pr-1 text-white" />
                   New
                 </div>
               </div>
@@ -281,15 +282,15 @@ export const SecretApprovalRequestChangeItem = ({
               </div>
               <div className="mb-2">
                 <div className="text-sm font-medium text-mineshaft-300">Tags</div>
-                <div className="flex flex-wrap gap-2">
+                <div className="flex flex-wrap gap-y-2">
                   {(newVersion?.tags?.length ?? 0) ? (
                     newVersion?.tags?.map(({ slug, id: tagId, color }) => (
                       <Tag
-                        className="flex w-min items-center space-x-2"
+                        className="flex w-min items-center space-x-1.5 border border-mineshaft-500 bg-mineshaft-800"
                         key={`${newVersion.id}-${tagId}`}
                       >
                         <div
-                          className="h-3 w-3 rounded-full"
+                          className="h-2.5 w-2.5 rounded-full"
                           style={{ backgroundColor: color || "#bec2c8" }}
                         />
                         <div className="text-sm">{slug}</div>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -3,12 +3,12 @@ import { Controller, useForm } from "react-hook-form";
 import {
   faAngleDown,
   faArrowLeft,
-  faCheckCircle,
+  faBan,
-  faCircle,
+  faCheck,
   faCodeBranch,
   faComment,
   faFolder,
-  faXmarkCircle
+  faHourglass
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -26,6 +26,7 @@ import {
   DropdownMenuTrigger,
   EmptyState,
   FormControl,
+  GenericFieldLabel,
   IconButton,
   TextArea,
   Tooltip
@@ -81,10 +82,10 @@ export const generateCommitText = (commits: { op: CommitType }[] = [], isReplica
 
 const getReviewedStatusSymbol = (status?: ApprovalStatus) => {
   if (status === ApprovalStatus.APPROVED)
-    return <FontAwesomeIcon icon={faCheckCircle} size="xs" style={{ color: "#15803d" }} />;
+    return <FontAwesomeIcon icon={faCheck} size="xs" className="text-green" />;
   if (status === ApprovalStatus.REJECTED)
-    return <FontAwesomeIcon icon={faXmarkCircle} size="xs" style={{ color: "#b91c1c" }} />;
+    return <FontAwesomeIcon icon={faBan} size="xs" className="text-red" />;
-  return <FontAwesomeIcon icon={faCircle} size="xs" style={{ color: "#c2410c" }} />;
+  return <FontAwesomeIcon icon={faHourglass} size="xs" className="text-yellow" />;
 };
 
 type Props = {
@@ -242,17 +243,17 @@ export const SecretApprovalRequestChanges = ({
                 : secretApprovalRequestDetails.status}
             </span>
           </div>
-          <div className="flex-grow flex-col">
+          <div className="-mt-0.5 flex-grow flex-col">
             <div className="text-xl">
               {generateCommitText(
                 secretApprovalRequestDetails.commits,
                 secretApprovalRequestDetails.isReplicated
               )}
             </div>
-            <div className="flex items-center space-x-2 text-xs text-gray-400">
+            <span className="-mt-1 flex items-center space-x-2 text-xs text-gray-400">
               By {secretApprovalRequestDetails?.committerUser?.firstName} (
               {secretApprovalRequestDetails?.committerUser?.email})
-            </div>
+            </span>
           </div>
           {!hasMerged &&
             secretApprovalRequestDetails.status === "open" &&
@@ -262,7 +263,10 @@ export const SecretApprovalRequestChanges = ({
                 onOpenChange={(isOpen) => handlePopUpToggle("reviewChanges", isOpen)}
               >
                 <DropdownMenuTrigger asChild>
-                  <Button rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}>
+                  <Button
+                    colorSchema="secondary"
+                    rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
+                  >
                     Review
                   </Button>
                 </DropdownMenuTrigger>
@@ -279,27 +283,32 @@ export const SecretApprovalRequestChanges = ({
                               {...field}
                               placeholder="Leave a comment..."
                               reSize="none"
-                              className="text-md mt-2 h-40 border border-mineshaft-600 bg-bunker-800"
+                              className="text-md mt-2 h-40 border border-mineshaft-600 bg-mineshaft-800 placeholder:text-mineshaft-400"
                             />
                           </FormControl>
                         )}
                       />
+                      <div className="flex justify-between">
                         <Controller
                           control={control}
                           name="status"
                           defaultValue={ApprovalStatus.APPROVED}
                           render={({ field, fieldState: { error } }) => (
-                          <FormControl errorText={error?.message} isError={Boolean(error)}>
+                            <FormControl
+                              className="mb-0"
+                              errorText={error?.message}
+                              isError={Boolean(error)}
+                            >
                               <RadioGroup
                                 value={field.value}
                                 onValueChange={field.onChange}
-                              className="mb-4 space-y-2"
+                                className="space-y-2"
                                 aria-label="Status"
                               >
                                 <div className="flex items-center gap-2">
                                   <RadioGroupItem
                                     id="approve"
-                                  className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
+                                    className="h-4 w-4 rounded-full border border-gray-400 text-green focus:ring-2 focus:ring-mineshaft-500"
                                     value={ApprovalStatus.APPROVED}
                                     aria-labelledby="approve-label"
                                   >
@@ -324,7 +333,7 @@ export const SecretApprovalRequestChanges = ({
                                 <div className="flex items-center gap-2">
                                   <RadioGroupItem
                                     id="reject"
-                                  className="h-4 w-4 rounded-full border border-gray-300 text-red focus:ring-2 focus:ring-mineshaft-500"
+                                    className="h-4 w-4 rounded-full border border-gray-400 text-red focus:ring-2 focus:ring-mineshaft-500"
                                     value={ApprovalStatus.REJECTED}
                                     aria-labelledby="reject-label"
                                   >
@@ -350,11 +359,11 @@ export const SecretApprovalRequestChanges = ({
                             </FormControl>
                           )}
                         />
-                      <div className="flex justify-end">
                         <Button
                           type="submit"
                           isLoading={isApproving || isRejecting || isSubmitting}
                           variant="outline_bg"
+                          className="mt-auto h-min"
                         >
                           Submit Review
                         </Button>
@@ -371,14 +380,14 @@ export const SecretApprovalRequestChanges = ({
               <div className="text-sm text-bunker-300">
                 A secret import in
                 <p
-                  className="mx-1 inline rounded bg-primary-600/40 text-primary-300"
+                  className="mx-1 inline rounded bg-mineshaft-600/80 text-mineshaft-300"
                   style={{ padding: "2px 4px" }}
                 >
                   {secretApprovalRequestDetails?.environment}
                 </p>
-                <div className="mr-2 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
+                <div className="mr-1 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1.5 pr-2">
-                  <p className="cursor-default border-r border-mineshaft-500 pr-1">
+                  <p className="cursor-default border-r border-mineshaft-500 pr-1.5">
-                    <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
+                    <FontAwesomeIcon icon={faFolder} className="text-yellow" size="sm" />
                   </p>
                   <Tooltip content={approvalSecretPath}>
                     <p
@@ -391,14 +400,14 @@ export const SecretApprovalRequestChanges = ({
                 </div>
                 has pending changes to be accepted from its source at{" "}
                 <p
-                  className="mx-1 inline rounded bg-primary-600/40 text-primary-300"
+                  className="mx-1 inline rounded bg-mineshaft-600/80 text-mineshaft-300"
                   style={{ padding: "2px 4px" }}
                 >
                   {replicatedImport?.importEnv?.slug}
                 </p>
-                <div className="inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
+                <div className="mr-1 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1.5 pr-2">
-                  <p className="cursor-default border-r border-mineshaft-500 pr-1">
+                  <p className="cursor-default border-r border-mineshaft-500 pr-1.5">
-                    <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
+                    <FontAwesomeIcon icon={faFolder} className="text-yellow" size="sm" />
                   </p>
                   <Tooltip content={replicatedImport?.importPath}>
                     <p
@@ -415,14 +424,14 @@ export const SecretApprovalRequestChanges = ({
               <div className="text-sm text-bunker-300">
                 <p className="inline">Secret(s) in</p>
                 <p
-                  className="mx-1 inline rounded bg-primary-600/40 text-primary-300"
+                  className="mx-1 inline rounded bg-mineshaft-600/80 text-mineshaft-300"
                   style={{ padding: "2px 4px" }}
                 >
                   {secretApprovalRequestDetails?.environment}
                 </p>
-                <div className="mr-1 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
+                <div className="mr-1 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1.5 pr-2">
-                  <p className="cursor-default border-r border-mineshaft-500 pr-1">
+                  <p className="cursor-default border-r border-mineshaft-500 pr-1.5">
-                    <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
+                    <FontAwesomeIcon icon={faFolder} className="text-yellow" size="sm" />
                   </p>
                   <Tooltip content={formatReservedPaths(secretApprovalRequestDetails.secretPath)}>
                     <p
@@ -463,7 +472,7 @@ export const SecretApprovalRequestChanges = ({
               const reviewer = reviewedUsers?.[requiredApprover.userId];
               return (
                 <div
-                  className="flex w-full flex-col rounded-md bg-mineshaft-800 p-4"
+                  className="flex w-full flex-col rounded-md bg-mineshaft-800 p-4 text-sm text-mineshaft-100"
                   key={`required-approver-${requiredApprover.userId}`}
                 >
                   <div>
@@ -477,14 +486,16 @@ export const SecretApprovalRequestChanges = ({
                       {reviewer?.status === ApprovalStatus.APPROVED ? "approved" : "rejected"}
                     </span>{" "}
                     the request on{" "}
-                    {format(new Date(secretApprovalRequestDetails.createdAt), "PPpp zzz")}.
+                    {format(
+                      new Date(secretApprovalRequestDetails.createdAt),
+                      "MM/dd/yyyy h:mm:ss aa"
+                    )}
+                    .
                   </div>
                   {reviewer?.comment && (
-                    <FormControl label="Comment" className="mb-0 mt-4">
+                    <GenericFieldLabel label="Comment" className="mt-2">
-                      <TextArea value={reviewer.comment} isDisabled reSize="none">
                       {reviewer?.comment && reviewer.comment}
-                      </TextArea>
+                    </GenericFieldLabel>
-                    </FormControl>
                   )}
                 </div>
               );
@@ -505,7 +516,7 @@ export const SecretApprovalRequestChanges = ({
           />
         </div>
       </div>
-      <div className="sticky top-0 w-1/5 cursor-default pt-4" style={{ minWidth: "240px" }}>
+      <div className="sticky top-0 w-1/5 cursor-default pt-2" style={{ minWidth: "240px" }}>
         <div className="text-sm text-bunker-300">Reviewers</div>
         <div className="mt-2 flex flex-col space-y-2 text-sm">
           {secretApprovalRequestDetails?.policy?.approvers