Redesign Connected apps (#1686)

* Added translations

* Add 'Disconnect all' button

* Added translations

* Display favicon

extension/src/popup/basics/buttons/RemoveButton/index.tsx

@@ -0,0 +1,14 @@
+import { Button } from "@stellar/design-system";
+import React from "react";
+
+import IconXRemove from "popup/assets/icon-x-remove.svg";
+
+interface RemoveButtonProps {
+  onClick: () => void;
+}
+
+export const RemoveButton = ({ onClick }: RemoveButtonProps) => (
+  <Button size="md" variant="tertiary" onClick={onClick}>
+    <img src={IconXRemove} alt="icon x remove" />
+  </Button>
+);

extension/src/popup/locales/en/translation.json

@@ -145,6 +145,7 @@
   "Different source and destination assets": "Different source and destination assets",
   "digits after the decimal allowed": "digits after the decimal allowed",
   "Disabled": "Disabled",
+  "Disconnect all": "Disconnect all",
   "Done": "Done",
   "Double check the domain name": {
     " If it is incorrect in any way, do not share your public key and contact the site administrator via a verified email or social media account to confirm that this domain is correct": "Double check the domain name. If it is incorrect in any way, do not share your public key and contact the site administrator via a verified email or social media account to confirm that this domain is correct."
@@ -321,6 +322,7 @@
   "New asset": "New asset",
   "New password": "New password",
   "Next": "Next",
+  "No connected apps found": "No connected apps found",
   "no path found": "no path found",
   "No transactions to show": "No transactions to show",
   "None": "None",

extension/src/popup/locales/pt/translation.json

@@ -145,6 +145,7 @@
   "Different source and destination assets": "Different source and destination assets",
   "digits after the decimal allowed": "digits after the decimal allowed",
   "Disabled": "Disabled",
+  "Disconnect all": "Disconnect all",
   "Done": "Done",
   "Double check the domain name": {
     " If it is incorrect in any way, do not share your public key and contact the site administrator via a verified email or social media account to confirm that this domain is correct": "Double check the domain name. If it is incorrect in any way, do not share your public key and contact the site administrator via a verified email or social media account to confirm that this domain is correct."
@@ -321,6 +322,7 @@
   "New asset": "New asset",
   "New password": "New password",
   "Next": "Next",
+  "No connected apps found": "No connected apps found",
   "no path found": "no path found",
   "No transactions to show": "No transactions to show",
   "None": "None",

extension/src/popup/views/ManageConnectedApps/index.tsx

@@ -1,18 +1,19 @@
+import { Button } from "@stellar/design-system";
 import React from "react";
-
-import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
-import { PillButton } from "popup/basics/buttons/PillButton";
+import { useSelector, useDispatch } from "react-redux";
 
 import { saveAllowList, settingsSelector } from "popup/ducks/settings";
 import { SubviewHeader } from "popup/components/SubviewHeader";
+import { PunycodedDomain } from "popup/components/PunycodedDomain";
 import { View } from "popup/basics/layout/View";
+import { RemoveButton } from "popup/basics/buttons/RemoveButton";
 
 import "./styles.scss";
 
 export const ManageConnectedApps = () => {
-  const { t } = useTranslation();
   const dispatch = useDispatch();
+  const { t } = useTranslation();
   const { allowList } = useSelector(settingsSelector);
 
   const handleRemove = (domainToRemove: string) => {
@@ -25,33 +26,46 @@ export const ManageConnectedApps = () => {
     );
   };
 
+  const handleRemoveAll = () => {
+    dispatch(saveAllowList({ allowList: [] }));
+  };
+
   return (
     <React.Fragment>
-      <SubviewHeader title="Manage Connected Apps" />
+      <SubviewHeader title={t("Connected apps")} />
       <View.Content>
         <div className="ManageConnectedApps">
           {allowList.length ? (
             <div className="ManageConnectedApps__wrapper">
-              <div className="ManageConnectedApps__content">
+              <div className="ManageConnectedApps__list">
                 {allowList.map(
                   (allowedDomain) =>
                     allowedDomain && (
                       <div
                         className="ManageConnectedApps__row"
                         key={allowedDomain}
                       >
-                        <div>{allowedDomain}</div>
-                        <PillButton onClick={() => handleRemove(allowedDomain)}>
-                          {t("Remove")}
-                        </PillButton>
+                        <PunycodedDomain domain={allowedDomain} isRow />
+                        <RemoveButton
+                          onClick={() => handleRemove(allowedDomain)}
+                        />
                       </div>
                     ),
                 )}
               </div>
+
+              <Button
+                size="md"
+                variant="error"
+                isFullWidth
+                onClick={handleRemoveAll}
+              >
+                {t("Disconnect all")}
+              </Button>
             </div>
           ) : (
             <div className="ManageConnectedApps__empty">
-              No connected apps found
+              {t("No connected apps found")}
             </div>
           )}
         </div>

extension/src/popup/views/ManageConnectedApps/styles.scss

@@ -3,13 +3,20 @@
   flex-direction: column;
   height: 100%;
 
-  &__content {
+  &__wrapper {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    height: 100%;
+    gap: 2rem;
     justify-content: space-between;
   }
 
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
   &__row {
     display: flex;
     align-items: center;