From f992535812d5e96421e3da7bba4893542afb489a Mon Sep 17 00:00:00 2001
From: Carlos Monastyrski <charly.monastyrski@gmail.com>
Date: Tue, 22 Jul 2025 11:03:25 -0300
Subject: [PATCH 1/3] Redo confirm changes box

---
 .../components/CommitForm/CommitForm.tsx      | 69 ++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
index b961775d3..b953f63ae 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useCallback, useState } from "react";
-import { faCodeCommit, faEye, faFolder, faKey, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faCodeCommit, faEye, faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Badge, Button, Input, Modal, ModalContent } from "@app/components/v2";
@@ -296,39 +296,46 @@ export const CommitForm: React.FC<CommitFormProps> = ({
     <>
       {/* Floating Panel */}
       {!isModalOpen && (
-        <div className="fixed bottom-4 z-40 w-64 self-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-2xl">
-          <div className="flex w-full justify-center border-b border-mineshaft-600 p-2">
-            <div className="flex w-full items-center justify-between">
-              <div className="flex items-center gap-2">
-                <FontAwesomeIcon icon={faCodeCommit} className="text-mineshaft-400" />
+        <div className="fixed bottom-4 z-40 w-full max-w-4xl self-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-2xl">
+          <div className="flex items-center justify-between p-4">
+            {/* Left Content */}
+            <div className="flex-1">
+              {/* Header */}
+              <div className="mb-2 flex items-center gap-2">
+                <div className="h-2 w-2 rounded-full bg-yellow-500" />
                 <span className="font-medium text-mineshaft-100">Pending Changes</span>
+                <Badge variant="primary" className="text-xs">
+                  {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
+                </Badge>
               </div>
-              <Badge variant="primary" className="text-xs">
-                {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
-              </Badge>
-            </div>
-          </div>
 
-          <div className="flex justify-center gap-2 p-2">
-            <Button
-              size="sm"
-              leftIcon={<FontAwesomeIcon icon={faTrash} />}
-              onClick={() => clearAllPendingChanges({ workspaceId, environment, secretPath })}
-              isDisabled={totalChangesCount === 0}
-              variant="outline_bg"
-              className="h-8 flex-1 hover:border-red/40 hover:bg-red/[0.1]"
-            >
-              Discard
-            </Button>
-            <Button
-              variant="outline_bg"
-              leftIcon={<FontAwesomeIcon icon={faEye} />}
-              onClick={() => setIsModalOpen(true)}
-              isDisabled={totalChangesCount === 0}
-              className="h-8 flex-1"
-            >
-              Review
-            </Button>
+              {/* Description */}
+              <p className="text-sm text-mineshaft-400">
+                Review your pending changes and commit them to apply the updates.
+              </p>
+            </div>
+
+            {/* Right Buttons */}
+            <div className="ml-6 flex gap-3">
+              <Button
+                size="sm"
+                onClick={() => clearAllPendingChanges({ workspaceId, environment, secretPath })}
+                isDisabled={totalChangesCount === 0}
+                variant="outline_bg"
+                className="px-4 hover:border-red/40 hover:bg-red/[0.1]"
+              >
+                Discard
+              </Button>
+              <Button
+                variant="solid"
+                leftIcon={<FontAwesomeIcon icon={faEye} />}
+                onClick={() => setIsModalOpen(true)}
+                isDisabled={totalChangesCount === 0}
+                className="px-6"
+              >
+                Review Changes
+              </Button>
+            </div>
           </div>
         </div>
       )}

From 4dcb3938e01ef24c26947815b3e0f81cce0cc03f Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 22 Jul 2025 08:58:12 -0700
Subject: [PATCH 2/3] improvements: minor adjustments

---
 .../components/CommitForm/CommitForm.tsx                    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
index b953f63ae..ac45cf4a6 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
@@ -301,7 +301,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
             {/* Left Content */}
             <div className="flex-1">
               {/* Header */}
-              <div className="mb-2 flex items-center gap-2">
+              <div className="flex items-center gap-2">
                 <div className="h-2 w-2 rounded-full bg-yellow-500" />
                 <span className="font-medium text-mineshaft-100">Pending Changes</span>
                 <Badge variant="primary" className="text-xs">
@@ -310,13 +310,13 @@ export const CommitForm: React.FC<CommitFormProps> = ({
               </div>
 
               {/* Description */}
-              <p className="text-sm text-mineshaft-400">
+              <p className="text-sm leading-5 text-mineshaft-400">
                 Review your pending changes and commit them to apply the updates.
               </p>
             </div>
 
             {/* Right Buttons */}
-            <div className="ml-6 flex gap-3">
+            <div className="ml-6 mt-0.5 flex items-center gap-3">
               <Button
                 size="sm"
                 onClick={() => clearAllPendingChanges({ workspaceId, environment, secretPath })}

From d4bdf04061c6a52dd93b5379eeabccfbcdf98386 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 22 Jul 2025 09:34:43 -0700
Subject: [PATCH 3/3] improvement: responsive and border color

---
 .../SecretDashboardPage/components/CommitForm/CommitForm.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
index ac45cf4a6..c2e3ab12b 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
@@ -296,7 +296,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
     <>
       {/* Floating Panel */}
       {!isModalOpen && (
-        <div className="fixed bottom-4 z-40 w-full max-w-4xl self-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-2xl">
+        <div className="fixed bottom-4 left-1/2 z-40 w-full max-w-3xl -translate-x-1/2 self-center rounded-lg border border-yellow/30 bg-mineshaft-800 shadow-2xl lg:left-auto lg:translate-x-0">
           <div className="flex items-center justify-between p-4">
             {/* Left Content */}
             <div className="flex-1">
@@ -311,7 +311,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
 
               {/* Description */}
               <p className="text-sm leading-5 text-mineshaft-400">
-                Review your pending changes and commit them to apply the updates.
+                Review pending changes and commit them to apply the updates.
               </p>
             </div>