From 22d4ee356bbc37d0c37dfdb34db2722a59c18414 Mon Sep 17 00:00:00 2001
From: GianfrancoBazzani <bazzanigianfranco@gmail.com>
Date: Mon, 2 Sep 2024 18:24:01 +0200
Subject: [PATCH] :recycle: Replace read only button with X to close the modal

---
 client/src/containers/App.js           |   8 +-
 client/src/gamedata/ar/strings.json    |   1 -
 client/src/gamedata/en/strings.json    |   1 -
 client/src/gamedata/es/strings.json    |   1 -
 client/src/gamedata/fr/strings.json    |   1 -
 client/src/gamedata/ja/strings.json    |   1 -
 client/src/gamedata/pt_br/strings.json |   1 -
 client/src/gamedata/ru/strings.json    |   1 -
 client/src/gamedata/tr/strings.json    |   1 -
 client/src/gamedata/zh_cn/strings.json |   1 -
 client/src/gamedata/zh_tw/strings.json |   1 -
 client/src/styles/app.css              | 112 +++++++++++++------------
 12 files changed, 62 insertions(+), 68 deletions(-)

diff --git a/client/src/containers/App.js b/client/src/containers/App.js
index 7b7060994..b7baba979 100644
--- a/client/src/containers/App.js
+++ b/client/src/containers/App.js
@@ -221,6 +221,11 @@ class App extends React.Component {
           {/*not Account Connected window*/}
           <div className="account-connection-window-bg">
             <div className="account-connection-window">
+              <button
+                className="account-connection-close-x fas fa-x "
+                onClick={this.continueInReadOnly}
+              >
+              </button>
               <h1>{randBadIcon()}</h1>
               <br />
               <h2>{strings.accountNotConnectedTitle}</h2>
@@ -237,9 +242,6 @@ class App extends React.Component {
                 >
                   {strings.connectAccount}
                 </button>
-                <button className="buttons" onClick={this.continueInReadOnly}>
-                  {strings.continueInReadOnly}
-                </button>
               </div>
             </div>
           </div>
diff --git a/client/src/gamedata/ar/strings.json b/client/src/gamedata/ar/strings.json
index 45a4f856a..e052fe024 100644
--- a/client/src/gamedata/ar/strings.json
+++ b/client/src/gamedata/ar/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "احصل على نسخة جديدة",
   "accountNotConnectedTitle": "حساب MetaMask غير متصل",
   "accountNotConnectedMessage": "لبدء مغامرتك، قم بتوصيل محفظة MetaMask الخاصة بك! تتفاعل لعبتنا بشكل مباشر مع عقود Ethernaut على السلسلة، مما يعني أن أفعالك في اللعبة مسجلة على blockchain. من خلال ربط حساب MetaMask الخاص بك، يمكنك التفاعل بأمان مع هذه العقود الذكية، مما يسمح لك بحل التحديات والتقدم في اللعبة.",
-  "continueInReadOnly" : "متابعة في القراءة فقط",
   "connectAccount": "يتصل",
   "deployMessageTitle": "لم يتم نشر اللعبة",
   "deployMessage": "تدُعم اللُعبة حاليًا هذه الشبكات فقط:",
diff --git a/client/src/gamedata/en/strings.json b/client/src/gamedata/en/strings.json
index e06cb0de0..077904155 100644
--- a/client/src/gamedata/en/strings.json
+++ b/client/src/gamedata/en/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "Get new instance",
   "accountNotConnectedTitle": "MetaMask account not connected",
   "accountNotConnectedMessage": "To begin your adventure, connect your MetaMask wallet! Our game interacts directly with Ethernaut on-chain contracts, which means that your actions in the game are recorded on the blockchain. By linking your MetaMask account, you can securely engage with these smart contracts, allowing you to solve challenges, and progress in the game.",
-  "continueInReadOnly" : "Continue in read-only",
   "connectAccount": "Connect",
   "deployMessageTitle": "Game not deployed",
   "deprecatedNetwork": "Network deprecated",
diff --git a/client/src/gamedata/es/strings.json b/client/src/gamedata/es/strings.json
index c95cdd65f..afed6ab74 100644
--- a/client/src/gamedata/es/strings.json
+++ b/client/src/gamedata/es/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "Nueva instancia",
   "accountNotConnectedTitle": "Cuenta MetaMask no conectada",
   "accountNotConnectedMessage": "Para comenzar tu aventura, conecta tu billetera MetaMask. Nuestro juego interactúa directamente con los contratos en cadena de Ethernaut, lo que significa que tus acciones en el juego quedan registradas en la cadena de bloques. Al vincular tu cuenta MetaMask, puedes interactuar de forma segura con estos contratos inteligentes, lo que te permite resolver desafíos y progresar en el juego.",
-  "continueInReadOnly" : "Modo solo lectura",
   "connectAccount": "Conectar",
   "deployMessageTitle": "Juego no desplegado",
   "deprecatedNetwork": "Red obsoleta",
diff --git a/client/src/gamedata/fr/strings.json b/client/src/gamedata/fr/strings.json
index 2af67b085..20cd09e0a 100644
--- a/client/src/gamedata/fr/strings.json
+++ b/client/src/gamedata/fr/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "Créer une nouvelle instance",
   "accountNotConnectedTitle": "Compte MetaMask non connecté",
   "accountNotConnectedMessage": "Pour commencer votre aventure, connectez votre portefeuille MetaMask ! Notre jeu interagit directement avec les contrats on-chain d'Ethernaut, ce qui signifie que vos actions dans le jeu sont enregistrées sur la blockchain. En liant votre compte MetaMask, vous pouvez interagir en toute sécurité avec ces contrats intelligents, vous permettant de résoudre des défis et de progresser dans le jeu.",
-  "continueInReadOnly" : "mode lecture seule",
   "connectAccount": "Connecter",
   "deployMessageTitle": "Jeu non déployé",
   "deprecatedNetwork": "Réseau obsolète",
diff --git a/client/src/gamedata/ja/strings.json b/client/src/gamedata/ja/strings.json
index f31a72be3..177ed8bcc 100644
--- a/client/src/gamedata/ja/strings.json
+++ b/client/src/gamedata/ja/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "インスタンスの生成",
   "accountNotConnectedTitle": "MetaMask アカウントが接続されていません",
   "accountNotConnectedMessage": "冒険を始めるには、MetaMask ウォレットを接続してください。私たちのゲームは Ethernaut オンチェーン コントラクトと直接やり取りします。つまり、ゲーム内でのアクションはブロックチェーンに記録されます。MetaMask アカウントをリンクすることで、これらのスマート コントラクトに安全に関与し、課題を解決してゲームを進めることができます。",
-  "continueInReadOnly" : "読み取り専用モード",
   "connectAccount": "接続する",
   "deployMessageTitle": "ゲームが展開されていません",
   "deployMessage": "現在、ゲームはこれらのネットワークのみをサポートしています:",
diff --git a/client/src/gamedata/pt_br/strings.json b/client/src/gamedata/pt_br/strings.json
index ab5942419..7553a13e0 100644
--- a/client/src/gamedata/pt_br/strings.json
+++ b/client/src/gamedata/pt_br/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "Obter nova instância",
   "accountNotConnectedTitle": "Conta MetaMask não ligada",
   "accountNotConnectedMessage": "Para começar a sua aventura, ligue a sua carteira MetaMask! O nosso jogo interage diretamente com os contratos on-chain do Ethernaut, o que significa que as suas ações no jogo são registadas na blockchain. Ao ligar a sua conta MetaMask, pode interagir com segurança com estes contratos inteligentes, permitindo-lhe resolver desafios e progredir no jogo.",
-  "continueInReadOnly" : "modo de leitura apenas",
   "connectAccount": "Ligar",
   "deployMessageTitle": "Jogo não implantado",
   "deprecatedNetwork": "Rede obsoleta",
diff --git a/client/src/gamedata/ru/strings.json b/client/src/gamedata/ru/strings.json
index fafdc9d17..7f0eee3dd 100644
--- a/client/src/gamedata/ru/strings.json
+++ b/client/src/gamedata/ru/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "Создать новый инстанс",
   "accountNotConnectedTitle": "Учетная запись MetaMask не подключена",
   "accountNotConnectedMessage": "Чтобы начать приключение, подключите свой кошелек MetaMask! Наша игра напрямую взаимодействует с ончейн-контрактами Ethernaut, что означает, что ваши действия в игре записываются в блокчейн. Подключив свой аккаунт MetaMask, вы можете безопасно взаимодействовать с этими смарт-контрактами, что позволит вам решать задачи и продвигаться в игре.",
-  "continueInReadOnly" : "режим только для чтения",
   "connectAccount": "Bağlamak",
   "deployMessageTitle": "Игра не развернута",
   "deprecatedNetwork": "заброшенная сеть",
diff --git a/client/src/gamedata/tr/strings.json b/client/src/gamedata/tr/strings.json
index 9c519b2d4..0c6b9a6b3 100644
--- a/client/src/gamedata/tr/strings.json
+++ b/client/src/gamedata/tr/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "Yeni durum al",
   "accountNotConnectedTitle": "MetaMask hesabı bağlı değil",
   "accountNotConnectedMessage": "Maceranıza başlamak için MetaMask cüzdanınızı bağlayın! Oyunumuz doğrudan Ethernaut zincir üstü sözleşmeleriyle etkileşime girer, bu da oyundaki eylemlerinizin blok zincirinde kaydedildiği anlamına gelir. MetaMask hesabınızı bağlayarak bu akıllı sözleşmelerle güvenli bir şekilde etkileşime girebilir, zorlukları çözebilir ve oyunda ilerleyebilirsiniz.",
-  "continueInReadOnly" : "salt okunur modu",
   "connectAccount": "Bağlamak",
   "deployMessageTitle": "Oyun dağıtılmadı",
   "deprecatedNetwork": "Ağ kullanımdan kaldırıldı",
diff --git a/client/src/gamedata/zh_cn/strings.json b/client/src/gamedata/zh_cn/strings.json
index b7fcbd083..d136c5065 100644
--- a/client/src/gamedata/zh_cn/strings.json
+++ b/client/src/gamedata/zh_cn/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "生成新实例",
   "accountNotConnectedTitle": "MetaMask 帐户未连接",
   "accountNotConnectedMessage": "要开始您的冒险，请连接您的 MetaMask 钱包！我们的游戏直接与 Ethernaut 链上合约交互，这意味着您在游戏中的行为会记录在区块链上。通过链接您的 MetaMask 帐户，您可以安全地与这些智能合约互动，从而让您解决​​挑战并在游戏中取得进展。", 
-  "continueInReadOnly" : "只读模式",
   "connectAccount": "连接",
   "deployMessageTitle": "Game not deployed",
   "deprecatedNetwork": "Network deprecated",
diff --git a/client/src/gamedata/zh_tw/strings.json b/client/src/gamedata/zh_tw/strings.json
index dcf99ecf4..88705e573 100644
--- a/client/src/gamedata/zh_tw/strings.json
+++ b/client/src/gamedata/zh_tw/strings.json
@@ -28,7 +28,6 @@
   "getNewInstance": "產生新實例",
   "accountNotConnectedTitle": "MetaMask 帳戶未連接",
   "accountNotConnectedMessage": "要開始您的冒險，請連接您的 MetaMask 錢包！我們的遊戲直接與 Ethernaut 鏈上合約交互，這意味著您在遊戲中的行為都會記錄在區塊鏈上。透過連結您的 MetaMask 帳戶，您可以安全地使用這些智能合約，從而解決挑戰並在遊戲中取得進展。",
-  "continueInReadOnly" : "唯讀模式",
   "connectAccount": "連接",
   "deployMessageTitle": "遊戲未部署",
   "deprecatedNetwork": "網路已棄用",
diff --git a/client/src/styles/app.css b/client/src/styles/app.css
index 88f2274b0..0b1a7279c 100644
--- a/client/src/styles/app.css
+++ b/client/src/styles/app.css
@@ -85,7 +85,6 @@ ul {
   margin-top: -15%;
 } */
 
-
 .lines {
   margin-bottom: 4%;
   margin-top: 2%;
@@ -154,19 +153,18 @@ button :hover {
   align-items: center;
 }
 
-
 .top-banner {
   display: flex;
   gap: 10%;
   align-items: center;
   justify-content: space-between;
-   width: 100%;
+  width: 100%;
   height: 80px;
   border-radius: 6px;
   border: 2px solid var(--secondary-color);
   margin-bottom: 4%;
   margin-top: 2%;
-  padding: 2%
+  padding: 2%;
 }
 
 .top-banner-text {
@@ -205,7 +203,7 @@ nav li {
   font-family: helvetica, sans-serif;
 }
 
-.nav-links button i:hover{
+.nav-links button i:hover {
   outline: none;
   background: transparent;
 }
@@ -275,7 +273,7 @@ nav li {
   margin-bottom: 2em;
 }
 
-.account-connection-window-bg{
+.account-connection-window-bg {
   position: fixed;
   top: 0;
   left: 0;
@@ -287,7 +285,7 @@ nav li {
 }
 
 .account-connection-window {
-  position: fixed;
+  position: relative;
   top: 20%;
   width: 40%;
   left: 30%;
@@ -303,22 +301,29 @@ nav li {
 
 .account-connection-window h1 {
   text-align: center;
-} 
+}
 
 .account-connection-window h2 {
   font-size: 2.5em;
   text-align: center;
-} 
+}
 
 .account-connection-window p {
   font-size: 1.1em;
   text-align: justify;
 }
 
-.connect-button{
- margin-left: auto;
+.account-connection-close-x {
+  position: absolute;
+  right: 2.5%;
+  top: 2.5%;
+  width: 1.75rem;
+  height: 1.75rem;
 }
 
+.connect-button {
+  margin-left: auto;
+}
 
 .deploy-window-bg {
   position: fixed;
@@ -477,10 +482,10 @@ nav li {
   padding-left: 50px;
   padding-right: 50px;
 }
-.author-section-border{
+.author-section-border {
   border: none !important;
 }
-.author-section{
+.author-section {
   width: 60%;
   margin-left: 20%;
 
@@ -603,13 +608,12 @@ footer {
   display: none;
 }
 
-
 /* --------- styles for multi dropdowns --------------*/
-.multi-dropdown{
+.multi-dropdown {
   padding: 0% 0px;
 }
 
-.multi-dropdown__icon{
+.multi-dropdown__icon {
   color: var(--primary-color);
   background-color: var(--secondary-color);
   padding: 4px 9px;
@@ -622,11 +626,11 @@ footer {
   font-size: 20px;
 }
 
-.multi-dropdown__icon:hover{
-  opacity: 0.90;
+.multi-dropdown__icon:hover {
+  opacity: 0.9;
 }
 
-.multi-dropdown__dropdown{
+.multi-dropdown__dropdown {
   background-color: var(--secondary-color);
   color: var(--primary-color);
   border: solid 10px var(--secondary-color);
@@ -639,31 +643,31 @@ footer {
   margin-top: 5px;
 }
 
-.multi-dropdown__dropdown.--closed{
+.multi-dropdown__dropdown.--closed {
   display: none;
 }
 
-.multi-dropdown__dropdown > div{
+.multi-dropdown__dropdown > div {
   background-color: var(--primary-color);
-  color:  var(--secondary-color);
+  color: var(--secondary-color);
   margin-bottom: 7px;
   transition: 300ms;
 }
-.multi-dropdown__dropdown > div:last-of-type{
+.multi-dropdown__dropdown > div:last-of-type {
   margin-bottom: 0;
 }
 
-.multi-dropdown__dropdown div:hover{
+.multi-dropdown__dropdown div:hover {
   opacity: 0.95;
 }
 
-.single-dropdown{
+.single-dropdown {
   padding-top: 5px;
   padding-bottom: 5px;
   border-radius: 5px;
 }
 
-.single-dropdown.--hidden{
+.single-dropdown.--hidden {
   display: none;
 }
 
@@ -687,37 +691,37 @@ footer {
   gap: 3px;
 }
 
-.single-dropdown > div.hide{
+.single-dropdown > div.hide {
   display: none;
 }
 
-.dropdown-pill{
-  background-color:  var(--secondary-color);
-  color:  var(--primary-color);
+.dropdown-pill {
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
   border-radius: 3px;
   padding: 5px 10px;
   cursor: pointer;
   line-height: 16px;
 }
 
-.dropdown-pill a, .dropdown-pill span{
+.dropdown-pill a,
+.dropdown-pill span {
   text-decoration: none;
-  color:  var(--secondary-color);
+  color: var(--secondary-color);
 }
 
-.dropdown-pill div{
+.dropdown-pill div {
   display: flex;
   align-items: center;
 }
 
-.dropdown-pill.--left{
+.dropdown-pill.--left {
   text-align: left;
 }
 
-
-.single-dropdown a{
+.single-dropdown a {
   text-decoration: none;
-  color:  var(--primary-color);;
+  color: var(--primary-color);
 }
 
 .toggle.--small {
@@ -730,7 +734,7 @@ footer {
   height: 15px;
 }
 
-.filled-icon{
+.filled-icon {
   background-color: var(--secondary-color);
   color: var(--primary-color);
   width: fit-content;
@@ -738,7 +742,7 @@ footer {
   border-radius: 5px;
 }
 
-.filled-icon svg{
+.filled-icon svg {
   fill: var(--primary-color);
   display: inline-block;
   height: 13px;
@@ -749,7 +753,7 @@ footer {
 }
 
 /* --------- styles for multi dropdowns --------------*/
-@media only screen and (max-width: 1029px){
+@media only screen and (max-width: 1029px) {
   :root {
     margin-left: 10%;
     margin-right: 10%;
@@ -766,20 +770,18 @@ footer {
 .tooltip-container {
   background-color: var(--secondary-color);
   color: var(--primary-color);
-  padding:5px 10px;
+  padding: 5px 10px;
   border-radius: 5px;
 }
 
 @media only screen and (max-width: 956px) {
-  .multi-dropdown__dropdown{
+  .multi-dropdown__dropdown {
     margin-left: -15.8em;
   }
-  
 }
 
-
 @media only screen and (max-width: 885px) {
-  .appcontainer{
+  .appcontainer {
     width: 100vw;
   }
 
@@ -796,18 +798,18 @@ footer {
     width: 95%;
   }
 
-  .multi-dropdown{
+  .multi-dropdown {
     padding: 4px 9px;
   }
 
-  .header-ul{
+  .header-ul {
     display: flex;
     margin-right: 20px;
   }
-  .helpcontainer{
+  .helpcontainer {
     width: calc(100vw - 40px);
   }
-  .header-ul > .dropdown.chains{
+  .header-ul > .dropdown.chains {
     display: none;
   }
 
@@ -840,7 +842,7 @@ footer {
     width: calc(100vw - 40px);
   }
 
-  .author-section-border{
+  .author-section-border {
     padding: 0;
   }
 
@@ -866,10 +868,10 @@ footer {
   align-items: center;
 }
 
- .page-not-found-title{
-    margin-top: 3rem;
- }
+.page-not-found-title {
+  margin-top: 3rem;
+}
 
- .page-not-found-text{
+.page-not-found-text {
   margin-top: 1rem;
-}
\ No newline at end of file
+}