improvements: address feedback

frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx

@@ -4,7 +4,7 @@ import { format, formatDistanceToNow } from "date-fns";
 import { twMerge } from "tailwind-merge";
 
 import { Tooltip } from "@app/components/v2";
-import { Badge, BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge } from "@app/components/v2/Badge/Badge";
 import { SecretRotationStatus, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
 
 type Props = {
@@ -78,40 +78,30 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
   const daysToRotation =
     (new Date(nextRotationAt).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
 
-  let variant: BadgeProps["variant"];
-  let label: string;
-  let tooltipContent: string;
-
-  if (daysToRotation >= 7) {
-    variant = "success";
-    label = `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`;
-    tooltipContent = `Rotates ${format(nextRotationAt, "MM/dd/yyyy")} at ${format(nextRotationAt, "h:mm aa")}.`;
-  } else if (daysToRotation < 0) {
-    variant = "primary";
-    label = "Rotating";
-    tooltipContent = `Rotates on ${format(nextRotationAt, "MM/dd/yyyy")} at ${format(nextRotationAt, "h:mm aa")}.`;
-  } else if (daysToRotation < 1) {
-    variant = "primary";
-    label = `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`;
-    tooltipContent = `Rotates on ${format(nextRotationAt, "MM/dd/yyyy")} at ${format(nextRotationAt, "h:mm aa")}.`;
-  } else {
-    variant = "primary";
-    label = `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`;
-    tooltipContent = `Rotates on ${format(nextRotationAt, "MM/dd/yyyy")} at ${format(nextRotationAt, "h:mm aa")}.`;
-  }
-
   return (
-    <Tooltip className="max-w-lg" content={tooltipContent}>
+    <Tooltip
+      className="max-w-lg"
+      content={
+        <>
+          <span>
+            Rotates on {format(nextRotationAt, "MM/dd/yyyy")} at {format(nextRotationAt, "h:mm aa")}
+          </span>{" "}
+          <span className="text-mineshaft-300">(Local Time)</span>
+        </>
+      }
+    >
       <div>
         <Badge
-          variant={variant}
+          variant={daysToRotation >= 7 ? "success" : "primary"}
           className={twMerge(
             "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
             className
           )}
         >
           <FontAwesomeIcon icon={faRotate} />
-          {label}
+          {daysToRotation < 0
+            ? "Rotating"
+            : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`}
         </Badge>
       </div>
     </Tooltip>

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx

@@ -59,11 +59,12 @@ const Content = ({ secretRotation }: ContentProps) => {
     <div className="flex flex-col gap-y-4">
       {Component}
       {nextRotationAt && (
-        <div className="flex items-center gap-x-1.5 text-sm text-mineshaft-300">
+        <div className="flex items-center gap-x-1.5 text-sm text-mineshaft-200">
           <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
           <span>
             Next rotation occurs on: {format(nextRotationAt, "MM/dd/yyyy")} at{" "}
-            {format(nextRotationAt, "h:mm aa")}
+            {format(nextRotationAt, "h:mm aa")}{" "}
+            <span className="text-mineshaft-300">(Local Time)</span>
           </span>
         </div>
       )}

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx

@@ -14,9 +14,7 @@ type Props = {
 };
 
 export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }: Props) => {
-  const { control, watch } = useFormContext<TSecretRotationV2Form>();
-
-  console.log(watch("rotateAtUtc"));
+  const { control } = useFormContext<TSecretRotationV2Form>();
 
   return (
     <>

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConnectionField.tsx

@@ -44,7 +44,24 @@ export const SecretRotationV2ConnectionField = ({ onChange: callback, isUpdate }
             isError={Boolean(error)}
             errorText={error?.message}
             label={`${connectionName} Connection`}
-            helperText={isUpdate ? "Cannot be updated" : undefined}
+            helperText={
+              isUpdate ? (
+                "Cannot be updated"
+              ) : (
+                <p>
+                  Check out{" "}
+                  <a
+                    href={`https://infisical.com/docs/integrations/app-connections/${app}`}
+                    target="_blank"
+                    className="underline"
+                    rel="noopener noreferrer"
+                  >
+                    our docs
+                  </a>{" "}
+                  to ensure your connection has the required permissions for secret rotation.
+                </p>
+              )
+            }
           >
             <FilterableSelect
               value={value}

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlRotationParametersFields.tsx

@@ -46,10 +46,17 @@ export const SqlRotationParametersFields = () => {
       />
       <NoticeBannerV2 title="Example Create User Statement">
         <p className="mb-3 text-sm text-mineshaft-300">
-          Infisical requires two database users to be created for rotation. Below is an example
-          statement for creating the required users. You may need to modify it to suit your needs.
+          Infisical requires two database users to be created for rotation.
         </p>
-        <p className="text-sm">
+        <p className="mb-3 text-sm text-mineshaft-300">
+          These users are intended to be solely managed by Infisical. Altering their login after
+          rotation may cause unexpected failure.
+        </p>
+        <p className="mb-3 text-sm text-mineshaft-300">
+          Below is an example statement for creating the required users. You may need to modify it
+          to suit your needs.
+        </p>
+        <p className="mb-3 text-sm">
           <pre className="whitespace-pre-wrap rounded border border-mineshaft-700 bg-mineshaft-800 p-2 text-mineshaft-300">
             {rotationOption!.template.createUserStatement}
           </pre>

frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx

@@ -1,15 +1,22 @@
 import { ReactNode } from "react";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   title: string;
   children: ReactNode;
+  className?: string;
 };
 
-export const NoticeBannerV2 = ({ title, children }: Props) => {
+export const NoticeBannerV2 = ({ title, children, className }: Props) => {
   return (
-    <div className="flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
+    <div
+      className={twMerge(
+        "flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5",
+        className
+      )}
+    >
       <div className="mb-1 flex items-center text-sm">
         <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
         {title}