feat(preferences): improve custom extension installation design (#674)

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)}
             />

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>
 

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>
         </>
       }