minor text revisions/additions and add colors/icons to totp token expiry countdown

docs/documentation/platform/dynamic-secrets/totp.mdx

@@ -7,7 +7,7 @@ The Infisical TOTP dynamic secret allows you to generate time-based one-time pas
 
 ## Prerequisite
 
-- Infisical requires either the OTP url or the secret key from the TOTP provider.
+- Infisical requires either an OTP url or a secret key from a TOTP provider.
 
 ## Set up Dynamic Secrets with TOTP
 

frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faClock, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AnimatePresence, motion } from "framer-motion";
@@ -95,11 +95,23 @@ const TotpOutputDisplay = ({
   }, [totp, remainingSeconds]);
 
   return (
-    <div>
+    <div className="h-36">
       <OutputDisplay label="Time-based one-time password" value={totp} />
-      {remainingTime > 0 && (
+      {remainingTime > 0 ? (
-        <div>
+        <div
-          Valid for {remainingTime} {remainingTime > 1 ? "seconds" : "second"}
+          className={`ml-2 flex items-center text-sm ${
+            remainingTime < 10 ? "text-red-500" : "text-yellow-500"
+          } transition-colors duration-500`}
+        >
+          <FontAwesomeIcon className="mr-1" icon={faClock} size="sm" />
+          <span>
+            Expires in {remainingTime} {remainingTime > 1 ? "seconds" : "second"}
+          </span>
+        </div>
+      ) : (
+        <div className="ml-2 flex items-center text-sm text-red-500">
+          <FontAwesomeIcon className="mr-1" icon={faClock} size="sm" />
+          Expired
         </div>
       )}
       {shouldShowRegenerate && (

frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx

@@ -295,6 +295,10 @@ export const EditDynamicSecretTotpForm = ({
                       )}
                     />
                   </div>
+                  <p className="mb-8 text-sm font-normal text-gray-400">
+                    The period, digits, and algorithm values can remain at their defaults unless
+                    your TOTP provider specifies otherwise.
+                  </p>
                 </>
               )}
             </div>