From 44a9e048e57134db3a82ca6734859073a3f1f9b2 Mon Sep 17 00:00:00 2001
From: Abbas Ali <abbas.lokhandwala@fetch.ai>
Date: Tue, 29 Oct 2024 11:15:12 +0530
Subject: [PATCH] fix: ui rebranding network change and access pages

---
 .../src/pages/access/basic-access.tsx         | 54 +++++++++++--------
 .../src/pages/access/style.module.scss        | 16 +++++-
 .../src/pages/access/viewing-key.tsx          | 54 +++++++++++--------
 .../pages/approveSwitchAccountPage/index.tsx  | 47 +++++++++-------
 .../style.module.scss                         | 25 +++++----
 .../pages/approveSwitchChainPage/index.tsx    | 47 +++++++++-------
 .../approveSwitchChainPage/style.module.scss  | 21 ++++----
 7 files changed, 163 insertions(+), 101 deletions(-)

diff --git a/packages/fetch-extension/src/pages/access/basic-access.tsx b/packages/fetch-extension/src/pages/access/basic-access.tsx
index 08ee3a827b..3d8b93bad3 100644
--- a/packages/fetch-extension/src/pages/access/basic-access.tsx
+++ b/packages/fetch-extension/src/pages/access/basic-access.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useMemo } from "react";
 
 import { useInteractionInfo } from "@keplr-wallet/hooks";
-import { Button } from "reactstrap";
+import { ButtonV2 } from "@components-v2/buttons/button";
 
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../stores";
@@ -57,12 +57,15 @@ export const AccessPage: FunctionComponent = observer(() => {
   }, [waitingPermission]);
 
   return (
-    <EmptyLayout style={{ height: "100%", paddingTop: "80px" }}>
+    <EmptyLayout
+      className={style["emptyLayout"]}
+      style={{ height: "100%", paddingTop: "80px" }}
+    >
       <div className={style["container"]}>
         <img
-          src={require("@assets/logo-256.svg")}
+          src={require("@assets/png/ASI-Logo-Icon-white.png")}
           alt="logo"
-          style={{ width: "92px", height: "92px", margin: "0 auto" }}
+          style={{ width: "180px", height: "40px", margin: "0 auto" }}
         />
         <h1 className={style["header"]}>
           <FormattedMessage id="access.title" />
@@ -96,11 +99,16 @@ export const AccessPage: FunctionComponent = observer(() => {
         </ul>
         <div style={{ flex: 1 }} />
         <div className={style["buttons"]}>
-          <Button
-            className={style["button"]}
-            color="danger"
-            outline
-            onClick={async (e) => {
+          <ButtonV2
+            styleProps={{
+              padding: "10px",
+              height: "40px",
+              fontSize: "0.9rem",
+              background: "transparent",
+              color: "white",
+              border: "1px solid rgba(255,255,255,0.4)",
+            }}
+            onClick={async (e: any) => {
               e.preventDefault();
 
               if (waitingPermission) {
@@ -117,14 +125,19 @@ export const AccessPage: FunctionComponent = observer(() => {
                 }
               }
             }}
-            data-loading={permissionStore.isLoading}
-          >
-            <FormattedMessage id="access.button.reject" />
-          </Button>
-          <Button
-            className={style["button"]}
-            color="primary"
-            onClick={async (e) => {
+            dataLoading={permissionStore.isLoading}
+            text={<FormattedMessage id="access.button.reject" />}
+          />
+          <ButtonV2
+            styleProps={{
+              padding: "10px",
+              height: "40px",
+              fontSize: "0.9rem",
+              background: "white",
+              color: "black",
+              border: "1px solid rgba(255,255,255,0.4)",
+            }}
+            onClick={async (e: any) => {
               e.preventDefault();
 
               if (waitingPermission) {
@@ -142,10 +155,9 @@ export const AccessPage: FunctionComponent = observer(() => {
               }
             }}
             disabled={!waitingPermission}
-            data-loading={permissionStore.isLoading}
-          >
-            <FormattedMessage id="access.button.approve" />
-          </Button>
+            dataLoading={permissionStore.isLoading}
+            text={<FormattedMessage id="access.button.approve" />}
+          />
         </div>
       </div>
     </EmptyLayout>
diff --git a/packages/fetch-extension/src/pages/access/style.module.scss b/packages/fetch-extension/src/pages/access/style.module.scss
index a0f361eb71..3dbf65da56 100644
--- a/packages/fetch-extension/src/pages/access/style.module.scss
+++ b/packages/fetch-extension/src/pages/access/style.module.scss
@@ -1,3 +1,11 @@
+.emptyLayout {
+  background-color: #000d3d;
+  background-image: url("../../public/assets/svg/wireframe/bg.svg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -6,18 +14,20 @@
   .header {
     margin-top: 20px;
     text-align: center;
+    color: white;
   }
 
   .paragraph {
     text-align: center;
     padding: 0 24px;
     overflow-y: auto;
+    color: white;
   }
 
   .permission {
     margin-top: 30px;
     font-size: 14px;
-    color: #525f7f;
+    color: white;
     text-align: center;
   }
 
@@ -27,7 +37,7 @@
     padding: 0;
     width: fit-content;
     margin: auto;
-    color: #525f7f;
+    color: white;
 
     li:before {
       content: "- ";
@@ -36,6 +46,8 @@
 
   .buttons {
     display: flex;
+    margin-bottom: 20px;
+    gap: 10px;
   }
 
   .button {
diff --git a/packages/fetch-extension/src/pages/access/viewing-key.tsx b/packages/fetch-extension/src/pages/access/viewing-key.tsx
index 0ad630bc68..65d5242a05 100644
--- a/packages/fetch-extension/src/pages/access/viewing-key.tsx
+++ b/packages/fetch-extension/src/pages/access/viewing-key.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useEffect, useMemo } from "react";
 
 import { useInteractionInfo } from "@keplr-wallet/hooks";
-import { Button } from "reactstrap";
+import { ButtonV2 } from "@components-v2/buttons/button";
 
 import { ChainIdHelper } from "@keplr-wallet/cosmos";
 
@@ -45,12 +45,15 @@ export const Secret20ViewingKeyAccessPage: FunctionComponent = observer(() => {
   }, [waitingPermission]);
 
   return (
-    <EmptyLayout style={{ height: "100%", paddingTop: "80px" }}>
+    <EmptyLayout
+      className={style["emptyLayout"]}
+      style={{ height: "100%", paddingTop: "80px" }}
+    >
       <div className={style["container"]}>
         <img
-          src={require("@assets/logo-256.svg")}
+          src={require("@assets/png/ASI-Logo-Icon-white.png")}
           alt="logo"
-          style={{ width: "92px", height: "92px", margin: "0 auto" }}
+          style={{ width: "180px", height: "40px", margin: "0 auto" }}
         />
         <h1 className={style["header"]}>
           <FormattedMessage id="access.viewing-key.title" />
@@ -78,11 +81,16 @@ export const Secret20ViewingKeyAccessPage: FunctionComponent = observer(() => {
         </ul>
         <div style={{ flex: 1 }} />
         <div className={style["buttons"]}>
-          <Button
-            className={style["button"]}
-            color="danger"
-            outline
-            onClick={async (e) => {
+          <ButtonV2
+            styleProps={{
+              padding: "10px",
+              height: "40px",
+              fontSize: "0.9rem",
+              background: "transparent",
+              color: "white",
+              border: "1px solid rgba(255,255,255,0.4)",
+            }}
+            onClick={async (e: any) => {
               e.preventDefault();
 
               if (waitingPermission) {
@@ -100,14 +108,19 @@ export const Secret20ViewingKeyAccessPage: FunctionComponent = observer(() => {
                 }
               }
             }}
-            data-loading={permissionStore.isLoading}
-          >
-            <FormattedMessage id="access.viewing-key.button.reject" />
-          </Button>
-          <Button
-            className={style["button"]}
-            color="primary"
-            onClick={async (e) => {
+            dataLoading={permissionStore.isLoading}
+            text={<FormattedMessage id="access.viewing-key.button.reject" />}
+          />
+          <ButtonV2
+            styleProps={{
+              padding: "10px",
+              height: "40px",
+              fontSize: "0.9rem",
+              background: "white",
+              color: "black",
+              border: "1px solid rgba(255,255,255,0.4)",
+            }}
+            onClick={async (e: any) => {
               e.preventDefault();
 
               if (waitingPermission) {
@@ -131,10 +144,9 @@ export const Secret20ViewingKeyAccessPage: FunctionComponent = observer(() => {
                 ChainIdHelper.parse(waitingPermission.data.chainIds[0])
                   .identifier
             }
-            data-loading={permissionStore.isLoading}
-          >
-            <FormattedMessage id="access.viewing-key.button.approve" />
-          </Button>
+            dataLoading={permissionStore.isLoading}
+            text={<FormattedMessage id="access.viewing-key.button.approve" />}
+          />
         </div>
       </div>
     </EmptyLayout>
diff --git a/packages/fetch-extension/src/pages/approveSwitchAccountPage/index.tsx b/packages/fetch-extension/src/pages/approveSwitchAccountPage/index.tsx
index e5677c7ec9..d06048680a 100644
--- a/packages/fetch-extension/src/pages/approveSwitchAccountPage/index.tsx
+++ b/packages/fetch-extension/src/pages/approveSwitchAccountPage/index.tsx
@@ -1,6 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { useNavigate } from "react-router";
-import { Button } from "reactstrap";
 
 import style from "./style.module.scss";
 import { EmptyLayout } from "@layouts/empty-layout";
@@ -13,6 +12,7 @@ import { messageAndGroupListenerUnsubscribe } from "@graphQL/messages-api";
 import { InExtensionMessageRequester } from "@keplr-wallet/router-extension";
 import { ListAccountsMsg } from "@keplr-wallet/background";
 import { BACKGROUND_PORT } from "@keplr-wallet/router";
+import { ButtonV2 } from "@components-v2/buttons/button";
 
 export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
   () => {
@@ -85,7 +85,7 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
     }
 
     return (
-      <EmptyLayout style={{ height: "100%" }}>
+      <EmptyLayout className={style["emptyLayout"]} style={{ height: "100%" }}>
         {isLoadingPlaceholder ? (
           <div className={style["container"]}>
             <div className={style["content"]}>
@@ -181,7 +181,7 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
                     <div className={style["imageBackground"]} />
                     <img
                       className={style["logoImage"]}
-                      src={require("@assets/logo-256.svg")}
+                      src={require("@assets/png/Black-white-circle.png")}
                       alt="chain logo"
                     />
                   </div>
@@ -194,7 +194,7 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
                     <div className={style["imageBackground"]} />
                     <img
                       className={style["logoImage"]}
-                      src={require("../../public/assets/logo-256.svg")}
+                      src={require("@assets/png/Black-white-circle.png")}
                       alt="keplr logo"
                     />
                   </div>
@@ -234,12 +234,17 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
               </div>
             }
             <div className={style["buttons"]}>
-              <Button
-                className={style["button"]}
-                color="danger"
-                outline
+              <ButtonV2
+                styleProps={{
+                  padding: "10px",
+                  height: "40px",
+                  fontSize: "0.9rem",
+                  background: "transparent",
+                  color: "white",
+                  border: "1px solid rgba(255,255,255,0.4)",
+                }}
                 disabled={!accountSwitchStore.waitingSuggestedAccount}
-                data-loading={accountSwitchStore.isLoading}
+                dataLoading={accountSwitchStore.isLoading}
                 onClick={async (e: any) => {
                   e.preventDefault();
 
@@ -254,17 +259,22 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
                     navigate("/");
                   }
                 }}
-              >
-                <FormattedMessage id="chain.suggested.button.reject" />
-              </Button>
-              <Button
-                className={style["button"]}
-                color="primary"
+                text={<FormattedMessage id="chain.suggested.button.reject" />}
+              />
+              <ButtonV2
+                styleProps={{
+                  padding: "10px",
+                  height: "40px",
+                  fontSize: "0.9rem",
+                  background: "white",
+                  color: "black",
+                  border: "1px solid rgba(255,255,255,0.4)",
+                }}
                 disabled={
                   !accountSwitchStore.waitingSuggestedAccount ||
                   addressIndex === -1
                 }
-                data-loading={accountSwitchStore.isLoading}
+                dataLoading={accountSwitchStore.isLoading}
                 onClick={async (e: any) => {
                   e.preventDefault();
 
@@ -299,9 +309,8 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
                     navigate("/");
                   }
                 }}
-              >
-                <FormattedMessage id="chain.suggested.button.approve" />
-              </Button>
+                text={<FormattedMessage id="chain.suggested.button.approve" />}
+              />
             </div>
           </div>
         )}
diff --git a/packages/fetch-extension/src/pages/approveSwitchAccountPage/style.module.scss b/packages/fetch-extension/src/pages/approveSwitchAccountPage/style.module.scss
index b1df64593f..6b83fc8fd5 100644
--- a/packages/fetch-extension/src/pages/approveSwitchAccountPage/style.module.scss
+++ b/packages/fetch-extension/src/pages/approveSwitchAccountPage/style.module.scss
@@ -1,3 +1,11 @@
+.emptyLayout {
+  background-color: #000d3d;
+  background-image: url("../../public/assets/svg/wireframe/bg.svg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -179,11 +187,6 @@
         .imageBackground {
           width: 80px;
           height: 80px;
-          background: linear-gradient(
-            315deg,
-            #0084da 13.07%,
-            rgba(0, 132, 218, 0.31) 85.23%
-          );
           border-radius: 50%;
           opacity: 0.3;
         }
@@ -219,9 +222,10 @@
       margin-top: 18px;
       text-align: center;
       font-weight: 600;
-      font-size: 24px;
+      font-size: 22px;
       line-height: 29px;
-      color: #2c2e53;
+      color: white;
+      word-wrap: break-word;
     }
 
     .tag {
@@ -256,9 +260,8 @@
 
       flex: 1;
 
-      /* Platinum/Platinum 300 */
-
-      color: #566172;
+      color: white;
+      word-wrap: break-word;
     }
 
     .chainDetailContainer {
@@ -381,6 +384,8 @@
   .buttons {
     justify-self: flex-end;
     display: flex;
+    margin-bottom: 20px;
+    gap: 10px;
   }
 
   .button {
diff --git a/packages/fetch-extension/src/pages/approveSwitchChainPage/index.tsx b/packages/fetch-extension/src/pages/approveSwitchChainPage/index.tsx
index e16bf7f9fe..6dccbb1d06 100644
--- a/packages/fetch-extension/src/pages/approveSwitchChainPage/index.tsx
+++ b/packages/fetch-extension/src/pages/approveSwitchChainPage/index.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { useNavigate } from "react-router";
-import { Button } from "reactstrap";
+import { ButtonV2 } from "@components-v2/buttons/button";
 
 import style from "./style.module.scss";
 import { EmptyLayout } from "@layouts/empty-layout";
@@ -48,7 +48,7 @@ export const ApproveSwitchChainPage: FunctionComponent = observer(() => {
   }
 
   return (
-    <EmptyLayout style={{ height: "100%" }}>
+    <EmptyLayout className={style["emptyLayout"]} style={{ height: "100%" }}>
       {isLoadingPlaceholder ? (
         <div className={style["container"]}>
           <div className={style["content"]}>
@@ -144,7 +144,7 @@ export const ApproveSwitchChainPage: FunctionComponent = observer(() => {
                   <div className={style["imageBackground"]} />
                   <img
                     className={style["logoImage"]}
-                    src={require("@assets/logo-256.svg")}
+                    src={require("@assets/png/Black-white-circle.png")}
                     alt="chain logo"
                   />
                 </div>
@@ -157,7 +157,7 @@ export const ApproveSwitchChainPage: FunctionComponent = observer(() => {
                   <div className={style["imageBackground"]} />
                   <img
                     className={style["logoImage"]}
-                    src={require("../../public/assets/logo-256.svg")}
+                    src={require("@assets/png/Black-white-circle.png")}
                     alt="keplr logo"
                   />
                 </div>
@@ -211,12 +211,17 @@ export const ApproveSwitchChainPage: FunctionComponent = observer(() => {
             </div>
           }
           <div className={style["buttons"]}>
-            <Button
-              className={style["button"]}
-              color="danger"
-              outline
+            <ButtonV2
+              styleProps={{
+                padding: "10px",
+                height: "40px",
+                fontSize: "0.9rem",
+                background: "transparent",
+                color: "white",
+                border: "1px solid rgba(255,255,255,0.4)",
+              }}
               disabled={!chainSwitchStore.waitingSuggestedChainId}
-              data-loading={chainSwitchStore.isLoading}
+              dataLoading={chainSwitchStore.isLoading}
               onClick={async (e: any) => {
                 e.preventDefault();
 
@@ -231,14 +236,19 @@ export const ApproveSwitchChainPage: FunctionComponent = observer(() => {
                   navigate("/");
                 }
               }}
-            >
-              <FormattedMessage id="chain.suggested.button.reject" />
-            </Button>
-            <Button
-              className={style["button"]}
-              color="primary"
+              text={<FormattedMessage id="chain.suggested.button.reject" />}
+            />
+            <ButtonV2
+              styleProps={{
+                padding: "10px",
+                height: "40px",
+                fontSize: "0.9rem",
+                background: "white",
+                color: "black",
+                border: "1px solid rgba(255,255,255,0.4)",
+              }}
               disabled={!chainSwitchStore.waitingSuggestedChainId}
-              data-loading={chainSwitchStore.isLoading}
+              dataLoading={chainSwitchStore.isLoading}
               onClick={async (e: any) => {
                 e.preventDefault();
 
@@ -264,9 +274,8 @@ export const ApproveSwitchChainPage: FunctionComponent = observer(() => {
                   navigate("/");
                 }
               }}
-            >
-              <FormattedMessage id="chain.suggested.button.approve" />
-            </Button>
+              text={<FormattedMessage id="chain.suggested.button.approve" />}
+            />
           </div>
         </div>
       )}
diff --git a/packages/fetch-extension/src/pages/approveSwitchChainPage/style.module.scss b/packages/fetch-extension/src/pages/approveSwitchChainPage/style.module.scss
index b1df64593f..c0c62bf13d 100644
--- a/packages/fetch-extension/src/pages/approveSwitchChainPage/style.module.scss
+++ b/packages/fetch-extension/src/pages/approveSwitchChainPage/style.module.scss
@@ -1,3 +1,11 @@
+.emptyLayout {
+  background-color: #000d3d;
+  background-image: url("../../public/assets/svg/wireframe/bg.svg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -179,11 +187,6 @@
         .imageBackground {
           width: 80px;
           height: 80px;
-          background: linear-gradient(
-            315deg,
-            #0084da 13.07%,
-            rgba(0, 132, 218, 0.31) 85.23%
-          );
           border-radius: 50%;
           opacity: 0.3;
         }
@@ -221,7 +224,7 @@
       font-weight: 600;
       font-size: 24px;
       line-height: 29px;
-      color: #2c2e53;
+      color: white;
     }
 
     .tag {
@@ -256,9 +259,7 @@
 
       flex: 1;
 
-      /* Platinum/Platinum 300 */
-
-      color: #566172;
+      color: white;
     }
 
     .chainDetailContainer {
@@ -381,6 +382,8 @@
   .buttons {
     justify-self: flex-end;
     display: flex;
+    margin-bottom: 20px;
+    gap: 10px;
   }
 
   .button {