From fe6d19c645f429b3db69a1e2ec1a2f32ebb3e55c Mon Sep 17 00:00:00 2001
From: Rohan <rohan.chaturvedi@protonmail.com>
Date: Sat, 11 Jan 2025 20:24:39 +0530
Subject: [PATCH] fix: misc styling, layout fixes

---
 .../apps/[app]/_components/AppSecretRow.tsx   | 34 +++++++++++++------
 frontend/app/[team]/apps/[app]/page.tsx       | 26 +++++++-------
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/frontend/app/[team]/apps/[app]/_components/AppSecretRow.tsx b/frontend/app/[team]/apps/[app]/_components/AppSecretRow.tsx
index 9061c642..99bb7398 100644
--- a/frontend/app/[team]/apps/[app]/_components/AppSecretRow.tsx
+++ b/frontend/app/[team]/apps/[app]/_components/AppSecretRow.tsx
@@ -237,6 +237,7 @@ const EnvSecret = ({
 }
 
 export const AppSecretRow = ({
+  index,
   clientAppSecret,
   serverAppSecret,
   stagedForDelete,
@@ -247,6 +248,7 @@ export const AppSecretRow = ({
   deleteEnvValue,
   deleteKey,
 }: {
+  index: number
   clientAppSecret: AppSecret
   serverAppSecret?: AppSecret
   stagedForDelete?: boolean
@@ -343,7 +345,7 @@ export const AppSecretRow = ({
     if (stagedForDelete) return '!border-l-red-700 !dark:border-l-red-400'
     else if (secretIsNew) return '!border-l-emerald-700 !dark:border-l-emerald-200'
     else if (secretIsModified()) return '!border-l-amber-700 !dark:border-l-amber-300'
-    else return '!border-neutral-500/40'
+    else return '!border-neutral-500/20'
   }
 
   const serverEnvSecret = (id: string) => serverAppSecret?.envs.find((env) => env.env.id === id)
@@ -354,25 +356,37 @@ export const AppSecretRow = ({
         <>
           <tr
             className={clsx(
-              'group divide-x divide-neutral-500/40 border-x transition ease duration-100',
+              'group divide-x divide-neutral-500/20 border-x transition ease duration-100',
               isOpen
-                ? `${rowBgColorOpen()} ${rowBorderColor()} !border-r-neutral-500/40`
+                ? `${rowBgColorOpen()} ${rowBorderColor()} !border-r-neutral-500/20`
                 : `${rowBgColorClosed()}  border-neutral-500/40`
             )}
           >
             <td
               className={clsx(
-                `px-2 whitespace-nowrap font-mono ${rowInputColor()} flex items-center gap-2 ph-no-capture`,
+                `px-2 py-0.5 whitespace-nowrap font-mono ${rowInputColor()} flex items-center gap-2 ph-no-capture`,
                 isOpen ? 'font-bold' : 'font-medium'
               )}
             >
-              <FaChevronRight
+              <button
                 onClick={() => setIsOpen(!isOpen)}
-                className={clsx(
-                  'transform transition ease font-light cursor-pointer',
-                  isOpen ? 'opacity-100 rotate-90' : 'opacity-0 group-hover:opacity-100 rotate-0'
-                )}
-              />
+                className="relative flex items-center justify-center"
+              >
+                <FaChevronRight
+                  className={clsx(
+                    'transform transition ease font-light cursor-pointer',
+                    isOpen ? 'opacity-100 rotate-90' : 'opacity-0 group-hover:opacity-100 rotate-0'
+                  )}
+                />
+                <span
+                  className={clsx(
+                    'text-neutral-500 font-mono absolute transition ease',
+                    isOpen ? 'opacity-0' : 'opacity-100 group-hover:opacity-0'
+                  )}
+                >
+                  {index}
+                </span>
+              </button>
               <div className="relative w-full group">
                 <input
                   disabled={stagedForDelete || !userCanUpdateSecrets}
diff --git a/frontend/app/[team]/apps/[app]/page.tsx b/frontend/app/[team]/apps/[app]/page.tsx
index 63e0f3e7..6d63df78 100644
--- a/frontend/app/[team]/apps/[app]/page.tsx
+++ b/frontend/app/[team]/apps/[app]/page.tsx
@@ -776,7 +776,7 @@ export default function Secrets({ params }: { params: { team: string; app: strin
   return (
     <div className="max-h-screen overflow-y-auto w-full text-black dark:text-white grid gap-16 relative">
       {keyring !== null && (
-        <section className="space-y-8 py-4">
+        <section className="space-y-4 py-4">
           <div className="space-y-2">
             <div className="space-y-1">
               <h1 className="h3 font-semibold text-2xl">Environments</h1>
@@ -811,7 +811,7 @@ export default function Secrets({ params }: { params: { team: string; app: strin
               <h1 className="h3 font-semibold text-2xl">Secrets</h1>
               <p className="text-neutral-500">
                 An overview of Secrets across all Environments in this App. Expand a row in the
-                table below to compare values across Environments.
+                table below to compare and manage values across all Environments.
               </p>
             </div>
             <div className="flex items-center justify-end gap-4 p-4 text-neutral-500 text-xs whitespace-nowrap">
@@ -886,25 +886,26 @@ export default function Secrets({ params }: { params: { team: string; app: strin
                   </div>
                 </Button>
               </div>
-              <div>
-                <Button variant="primary" onClick={handleAddNewClientSecret}>
-                  <FaPlus /> New Secret
-                </Button>
-              </div>
             </div>
           </div>
 
+          <div className="flex justify-end">
+            <Button variant="primary" onClick={handleAddNewClientSecret}>
+              <FaPlus /> New Secret
+            </Button>
+          </div>
+
           {clientAppSecrets.length > 0 || appFolders.length > 0 ? (
-            <table className="table-auto w-full border border-neutral-500/40">
-              <thead id="table-head" className="sticky top-0 bg-zinc-300 dark:bg-zinc-800 z-10">
-                <tr className="divide-x divide-neutral-500/40">
-                  <th className="px-6 py-2 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+            <table className="table-auto w-full">
+              <thead id="table-head" className="sticky top-0 z-10 border-b border-neutral-500/40">
+                <tr>
+                  <th className="pl-10 text-left text-sm font-medium text-gray-500 uppercase tracking-wide">
                     key
                   </th>
                   {data?.appEnvironments.map((env: EnvironmentType) => (
                     <th
                       key={env.id}
-                      className="group text-center text-sm font-semibold uppercase tracking-widest py-3 "
+                      className="group text-center text-sm font-semibold uppercase tracking-widest py-2"
                     >
                       <Link href={`${pathname}/environments/${env.id}`}>
                         <Button variant="outline">
@@ -927,6 +928,7 @@ export default function Secrets({ params }: { params: { team: string; app: strin
 
                 {filteredSecrets.map((appSecret, index) => (
                   <AppSecretRow
+                    index={index}
                     key={appSecret.id}
                     clientAppSecret={appSecret}
                     serverAppSecret={serverSecret(appSecret.id)}