From beb29e08bb40235dd69b34974a14dd06b326ea2c Mon Sep 17 00:00:00 2001
From: amirsaran3 <amir.saran@sqa-consulting.com>
Date: Thu, 21 Apr 2022 13:41:22 +0200
Subject: [PATCH 1/3] Replaced alert with custom modal

---
 .../src/lib/modal/components/AlertModal.tsx   | 24 +++++++++++++++++++
 .../src/lib/modal/components/Modal.styles.ts  | 23 ++++++++++++++++++
 .../core/src/lib/modal/components/Modal.tsx   |  6 +++++
 .../lib/modal/components/WalletOptions.tsx    |  4 +++-
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/src/lib/modal/components/AlertModal.tsx

diff --git a/packages/core/src/lib/modal/components/AlertModal.tsx b/packages/core/src/lib/modal/components/AlertModal.tsx
new file mode 100644
index 000000000..0be526ecf
--- /dev/null
+++ b/packages/core/src/lib/modal/components/AlertModal.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+interface AlertModalProps {
+  message: string;
+  setAlertMessage: (message: string | null) => void;
+}
+
+export const AlertModal: React.FC<AlertModalProps> = ({
+  message,
+  setAlertMessage,
+}) => {
+  const close = () => {
+    setAlertMessage(null);
+  };
+
+  return (
+    <div className="Modal-alert">
+      <div className="Modal-alert-window">
+        <div className="Modal-alert-message">{message}</div>
+        <button onClick={close}>OK</button>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/lib/modal/components/Modal.styles.ts b/packages/core/src/lib/modal/components/Modal.styles.ts
index e62b0a1f0..f481c8fdd 100644
--- a/packages/core/src/lib/modal/components/Modal.styles.ts
+++ b/packages/core/src/lib/modal/components/Modal.styles.ts
@@ -315,6 +315,29 @@ export default `
     border-color: var(--black);
 }
 
+.Modal-alert {
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+}
+
+.Modal-alert-window {
+  width: 500px;
+  margin: 0 auto;
+  margin-top: 2em;
+  background: white;
+  border-radius: 5px;
+  padding: 2em;
+  box-shadow: 0 2px 10px 0 #626263;
+}
+
+.Modal-alert-message {
+  margin-bottom: 1em;
+}
+
 @media (prefers-color-scheme: dark) {
   .Modal .Modal-content {
     background-color: var(--dark-gray);
diff --git a/packages/core/src/lib/modal/components/Modal.tsx b/packages/core/src/lib/modal/components/Modal.tsx
index 463431aa0..9633d29bd 100644
--- a/packages/core/src/lib/modal/components/Modal.tsx
+++ b/packages/core/src/lib/modal/components/Modal.tsx
@@ -7,6 +7,7 @@ import { LedgerDerivationPath } from "./LedgerDerivationPath";
 import { WalletNotInstalled } from "./WalletNotInstalled";
 import { WalletNetworkChanged } from "./WalletNetworkChanged";
 import { WalletOptions } from "./WalletOptions";
+import { AlertModal } from "./AlertModal";
 
 interface ModalProps {
   // TODO: Remove omit once modal is a separate package.
@@ -45,6 +46,7 @@ export const Modal: React.FC<ModalProps> = ({
   const [notInstalledWallet, setNotInstalledWallet] = useState<Wallet | null>(
     null
   );
+  const [alertMessage, setAlertMessage] = useState<string | null>(null);
 
   useEffect(() => {
     setRouteName("WalletOptions");
@@ -90,6 +92,9 @@ export const Modal: React.FC<ModalProps> = ({
   return (
     <div>
       <style>{styles}</style>
+      {alertMessage !== null && (
+        <AlertModal message={alertMessage} setAlertMessage={setAlertMessage} />
+      )}
       <div
         className={`Modal ${getThemeClass(options?.theme)}`}
         onClick={handleDismissOutsideClick}
@@ -119,6 +124,7 @@ export const Modal: React.FC<ModalProps> = ({
               setRouteName={setRouteName}
               setNotInstalledWallet={setNotInstalledWallet}
               hide={hide}
+              setAlertMessage={setAlertMessage}
             />
           )}
           {routeName === "LedgerDerivationPath" && (
diff --git a/packages/core/src/lib/modal/components/WalletOptions.tsx b/packages/core/src/lib/modal/components/WalletOptions.tsx
index 0a4ec80c6..5c44aa00c 100644
--- a/packages/core/src/lib/modal/components/WalletOptions.tsx
+++ b/packages/core/src/lib/modal/components/WalletOptions.tsx
@@ -15,6 +15,7 @@ interface WalletOptionsProps {
   setRouteName: (routeName: ModalRouteName) => void;
   setNotInstalledWallet: (wallet: Wallet | null) => void;
   hide: () => void;
+  setAlertMessage: (message: string | null) => void;
 }
 
 export const WalletOptions: React.FC<WalletOptionsProps> = ({
@@ -25,6 +26,7 @@ export const WalletOptions: React.FC<WalletOptionsProps> = ({
   setRouteName,
   setNotInstalledWallet,
   hide,
+  setAlertMessage,
 }) => {
   const [disabled, setDisabled] = useState(false);
   const [wallets, setWallets] = useState(selector.store.getState().wallets);
@@ -58,7 +60,7 @@ export const WalletOptions: React.FC<WalletOptionsProps> = ({
       logger.log(`Failed to select ${wallet.name}`);
       logger.error(err);
 
-      alert(`Failed to sign in with ${wallet.name}: ${err.message}`);
+      setAlertMessage(`Failed to sign in with ${wallet.name}: ${err.message}`);
     });
 
     if (response) {

From 0795ed5f1b62a199605394bfaf599c833094d418 Mon Sep 17 00:00:00 2001
From: amirsaran3 <amir.saran@sqa-consulting.com>
Date: Thu, 21 Apr 2022 15:55:42 +0200
Subject: [PATCH 2/3] Added X to alert modal, fixed mobile responsivenes

---
 .../src/lib/modal/components/AlertModal.tsx   | 14 +++++++++++++
 .../src/lib/modal/components/Modal.styles.ts  | 20 ++++++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/lib/modal/components/AlertModal.tsx b/packages/core/src/lib/modal/components/AlertModal.tsx
index 0be526ecf..cccd730d5 100644
--- a/packages/core/src/lib/modal/components/AlertModal.tsx
+++ b/packages/core/src/lib/modal/components/AlertModal.tsx
@@ -16,6 +16,20 @@ export const AlertModal: React.FC<AlertModalProps> = ({
   return (
     <div className="Modal-alert">
       <div className="Modal-alert-window">
+        <div className="Modal-alert-close">
+          <button onClick={close}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              fill="#A7A7A7"
+            >
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+            </svg>
+          </button>
+        </div>
         <div className="Modal-alert-message">{message}</div>
         <button onClick={close}>OK</button>
       </div>
diff --git a/packages/core/src/lib/modal/components/Modal.styles.ts b/packages/core/src/lib/modal/components/Modal.styles.ts
index f481c8fdd..fdff19d8e 100644
--- a/packages/core/src/lib/modal/components/Modal.styles.ts
+++ b/packages/core/src/lib/modal/components/Modal.styles.ts
@@ -325,17 +325,31 @@ export default `
 }
 
 .Modal-alert-window {
-  width: 500px;
+  width: 80%;
+  max-width: 500px;
   margin: 0 auto;
   margin-top: 2em;
   background: white;
   border-radius: 5px;
-  padding: 2em;
+  padding: 1.5em;
   box-shadow: 0 2px 10px 0 #626263;
 }
 
+.Modal-alert-close {
+  text-align: right;
+}
+
+.Modal-alert-close button {
+  border: 0;
+  cursor: pointer;
+  height: 24px;
+  padding: 0px;
+  background-color: transparent;
+}
+
 .Modal-alert-message {
-  margin-bottom: 1em;
+  margin-bottom: 1.5em;
+  font-size: 16px;
 }
 
 @media (prefers-color-scheme: dark) {

From 748a7c27e11d038e77deedd7ed1a467b388e32f7 Mon Sep 17 00:00:00 2001
From: amirsaran3 <amir.saran@sqa-consulting.com>
Date: Thu, 21 Apr 2022 16:24:49 +0200
Subject: [PATCH 3/3] Added support for dark mode

---
 .../src/lib/modal/components/Modal.styles.ts  | 82 +++++++++++--------
 .../core/src/lib/modal/components/Modal.tsx   |  7 +-
 2 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/packages/core/src/lib/modal/components/Modal.styles.ts b/packages/core/src/lib/modal/components/Modal.styles.ts
index fdff19d8e..6c08973a5 100644
--- a/packages/core/src/lib/modal/components/Modal.styles.ts
+++ b/packages/core/src/lib/modal/components/Modal.styles.ts
@@ -1,7 +1,7 @@
 export default `
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');
 
-.Modal {
+#near-wallet-selector-modal {
   --backdrop-bg: #26262630;
   --black: #262626;
   --black-rgb: 38, 38, 38;
@@ -272,6 +272,43 @@ export default `
   align-items: center;
 }
 
+.Modal-alert {
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+}
+
+.Modal-alert-window {
+  width: 80%;
+  max-width: 500px;
+  margin: 0 auto;
+  margin-top: 2em;
+  background: white;
+  border-radius: 5px;
+  padding: 1.5em;
+  box-shadow: 0 2px 10px 0 var(--backdrop-bg);
+}
+
+.Modal-alert-close {
+  text-align: right;
+}
+
+.Modal-alert-close button {
+  border: 0;
+  cursor: pointer;
+  height: 24px;
+  padding: 0px;
+  background-color: transparent;
+}
+
+.Modal-alert-message {
+  margin-bottom: 1.5em;
+  font-size: 16px;
+}
+
 .Modal-dark-theme .Modal-content {
   background-color: var(--dark-gray);
   color: var(--white);
@@ -315,41 +352,9 @@ export default `
     border-color: var(--black);
 }
 
-.Modal-alert {
-  z-index: 100;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-}
-
-.Modal-alert-window {
-  width: 80%;
-  max-width: 500px;
-  margin: 0 auto;
-  margin-top: 2em;
-  background: white;
-  border-radius: 5px;
-  padding: 1.5em;
-  box-shadow: 0 2px 10px 0 #626263;
-}
-
-.Modal-alert-close {
-  text-align: right;
-}
-
-.Modal-alert-close button {
-  border: 0;
-  cursor: pointer;
-  height: 24px;
-  padding: 0px;
-  background-color: transparent;
-}
-
-.Modal-alert-message {
-  margin-bottom: 1.5em;
-  font-size: 16px;
+.Modal-dark-theme .Modal-alert-window {
+  background-color: var(--dark-gray);
+  color: white;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -396,6 +401,11 @@ export default `
       background-color: rgba(var(--black-rgb), 0.8);
       border-color: var(--black);
   }
+
+  .Modal-alert-window {
+    background-color: var(--dark-gray);
+    color: white;
+  }
 }
 
 @keyframes outAnimation {
diff --git a/packages/core/src/lib/modal/components/Modal.tsx b/packages/core/src/lib/modal/components/Modal.tsx
index 9633d29bd..43f6694a7 100644
--- a/packages/core/src/lib/modal/components/Modal.tsx
+++ b/packages/core/src/lib/modal/components/Modal.tsx
@@ -90,15 +90,12 @@ export const Modal: React.FC<ModalProps> = ({
   }
 
   return (
-    <div>
+    <div className={getThemeClass(options?.theme)}>
       <style>{styles}</style>
       {alertMessage !== null && (
         <AlertModal message={alertMessage} setAlertMessage={setAlertMessage} />
       )}
-      <div
-        className={`Modal ${getThemeClass(options?.theme)}`}
-        onClick={handleDismissOutsideClick}
-      >
+      <div className="Modal" onClick={handleDismissOutsideClick}>
         <div className="Modal-content">
           <div className="Modal-header">
             <h2>Connect Wallet</h2>