From 19eb9412312e06f102050b796297316a47c962e0 Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan@squareup.com>
Date: Wed, 26 Feb 2025 21:21:52 -0500
Subject: [PATCH] moved extension add button and updated label

---
 .../src/components/settings/SettingsView.tsx  | 55 ++++++++++---------
 .../settings/extensions/ExtensionItem.tsx     |  2 +-
 .../extensions/ManualExtensionModal.tsx       |  4 +-
 3 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/ui/desktop/src/components/settings/SettingsView.tsx b/ui/desktop/src/components/settings/SettingsView.tsx
index 52f10b728..f3bf4b418 100644
--- a/ui/desktop/src/components/settings/SettingsView.tsx
+++ b/ui/desktop/src/components/settings/SettingsView.tsx
@@ -216,24 +216,14 @@ export default function SettingsView({
               <section id="extensions">
                 <div className="flex justify-between items-center mb-6 border-b border-borderSubtle px-8">
                   <h2 className="text-xl font-semibold text-textStandard">Extensions</h2>
-                  <div className="flex gap-4">
-                    <button
-                      onClick={() => setIsManualModalOpen(true)}
-                      className="text-indigo-500 hover:text-indigo-600 text-sm"
-                      title="Add Manually"
-                    >
-                      Add
-                    </button>
-
-                    <a
-                      href={EXTENSIONS_SITE_LINK}
-                      target="_blank"
-                      className="text-indigo-500 hover:text-indigo-600 text-sm"
-                      rel="noreferrer"
-                    >
-                      Browse
-                    </a>
-                  </div>
+                  <a
+                    href={EXTENSIONS_SITE_LINK}
+                    target="_blank"
+                    className="text-indigo-500 hover:text-indigo-600 text-sm"
+                    rel="noreferrer"
+                  >
+                    Browse
+                  </a>
                 </div>
 
                 <div className="px-8">
@@ -242,15 +232,26 @@ export default function SettingsView({
                   {settings.extensions.length === 0 ? (
                     <p className="text-textSubtle text-center py-4">No Extensions Added</p>
                   ) : (
-                    settings.extensions.map((ext) => (
-                      <ExtensionItem
-                        key={ext.id}
-                        {...ext}
-                        canConfigure={true}
-                        onToggle={handleExtensionToggle}
-                        onConfigure={(extension) => setExtensionBeingConfigured(extension)}
-                      />
-                    ))
+                    <div className="grid grid-cols-2 gap-2">
+                      {settings.extensions.map((ext) => (
+                        <ExtensionItem
+                          key={ext.id}
+                          {...ext}
+                          canConfigure={true}
+                          onToggle={handleExtensionToggle}
+                          onConfigure={(extension) => setExtensionBeingConfigured(extension)}
+                        />
+                      ))}
+                      <button
+                        onClick={() => setIsManualModalOpen(true)}
+                        className="text-indigo-500 hover:text-indigo-600 text-sm"
+                        title="Add Manually"
+                      >
+                        <div className="rounded-lg border border-dashed border-borderSubtle hover:border-borderStandard p-4 transition-colors">
+                          Add custom extension
+                        </div>
+                      </button>
+                    </div>
                   )}
                 </div>
               </section>
diff --git a/ui/desktop/src/components/settings/extensions/ExtensionItem.tsx b/ui/desktop/src/components/settings/extensions/ExtensionItem.tsx
index 36c184d45..29b701f7c 100644
--- a/ui/desktop/src/components/settings/extensions/ExtensionItem.tsx
+++ b/ui/desktop/src/components/settings/extensions/ExtensionItem.tsx
@@ -12,7 +12,7 @@ export const ExtensionItem: React.FC<ExtensionItemProps> = (props) => {
   const { id, name, description, enabled, onToggle, onConfigure, canConfigure } = props;
 
   return (
-    <div className="rounded-lg py-2 mb-2">
+    <div className="rounded-lg border border-borderSubtle p-4">
       <div className="flex justify-between items-center">
         <div className="">
           <div className="flex items-center">
diff --git a/ui/desktop/src/components/settings/extensions/ManualExtensionModal.tsx b/ui/desktop/src/components/settings/extensions/ManualExtensionModal.tsx
index 753364506..60d8b8b58 100644
--- a/ui/desktop/src/components/settings/extensions/ManualExtensionModal.tsx
+++ b/ui/desktop/src/components/settings/extensions/ManualExtensionModal.tsx
@@ -132,7 +132,7 @@ export function ManualExtensionModal({ isOpen, onClose, onSubmit }: ManualExtens
       <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] bg-bgApp rounded-xl overflow-hidden shadow-none p-[16px] pt-[24px] pb-0">
         <div className="px-4 pb-0 space-y-8">
           <div className="flex">
-            <h2 className="text-2xl font-regular text-textStandard">Add Extension Manually</h2>
+            <h2 className="text-2xl font-regular text-textStandard">Add custom extension</h2>
           </div>
 
           <form onSubmit={handleSubmit}>
@@ -275,7 +275,7 @@ export function ManualExtensionModal({ isOpen, onClose, onSubmit }: ManualExtens
                 variant="ghost"
                 className="w-full h-[60px] rounded-none border-t border-borderSubtle text-md hover:bg-bgSubtle text-textProminent font-regular"
               >
-                Add Extension
+                Add
               </Button>
               <Button
                 type="button"