From d61ff5138b2bbbb761efda7c9a435a47781bbd5e Mon Sep 17 00:00:00 2001
From: Gorjan Petrovski <mogi57@gmail.com>
Date: Mon, 11 Oct 2021 11:24:54 +0200
Subject: [PATCH] feat(preferences): improve custom extension installation
 design (#674)

---
 .../javascripts/preferences/panes/Extensions.tsx     |  5 +++--
 .../extensions-segments/ConfirmCustomExtension.tsx   | 12 ++++++------
 .../panes/extensions-segments/ExtensionItem.tsx      |  6 +++---
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/preferences/panes/Extensions.tsx b/app/assets/javascripts/preferences/panes/Extensions.tsx
index 185cdb31e..1f273a8e4 100644
--- a/app/assets/javascripts/preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/preferences/panes/Extensions.tsx
@@ -88,9 +88,10 @@ export const Extensions: FunctionComponent<{
               text={customUrl}
               onChange={(value) => { setCustomUrl(value); }}
             />
-            <div className="min-h-1" />
+            <div className="min-h-2" />
             <Button
-              type="primary"
+              className="min-w-20"
+              type="normal"
               label="Install"
               onClick={() => submitExtensionUrl(customUrl)}
             />
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/ConfirmCustomExtension.tsx b/app/assets/javascripts/preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
index 476a4fe52..1e3887a5b 100644
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
@@ -60,18 +60,18 @@ export const ConfirmCustomExtension: FunctionComponent<{
       <div className="flex flex-row">
         <Button
           className="min-w-20"
-          type="primary"
-          label="Install"
-          onClick={() => callback(true)}
+          type="normal"
+          label="Cancel"
+          onClick={() => callback(false)}
         />
 
         <div className="min-w-3" />
 
         <Button
           className="min-w-20"
-          type="primary"
-          label="Cancel"
-          onClick={() => callback(false)}
+          type="normal"
+          label="Install"
+          onClick={() => callback(true)}
         />
       </div>
 
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
index d6d535bb3..c6f104ccc 100644
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
@@ -180,13 +180,13 @@ export const ExtensionItem: FunctionComponent<{
             {isEditorOrTags && (
               <>
                 {extension.active ?
-                  <Button type="normal" label="Deactivate" onClick={() => toggleActivate(extension)} /> :
-                  <Button type="primary" label="Activate" onClick={() => toggleActivate(extension)} />
+                  <Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate(extension)} /> :
+                  <Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate(extension)} />
                 }
                 <div className="min-w-3" />
               </>
             )}
-            {isExternal && <Button type="normal" label="Uninstall" onClick={() => uninstall(extension)} />}
+            {isExternal && <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />}
           </div>
         </>
       }