From fcd5b331bd62f0cc26b69004ac5501fd98952b95 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Mon, 20 Feb 2023 13:16:32 +0100
Subject: [PATCH 1/3] feat: polish access node selection

---
 .../dialogs/EditAccessNodesDialog.tsx           | 12 +++++++-----
 src/app/routes/Chain.scss                       | 17 +++++++++--------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/app/components/dialogs/EditAccessNodesDialog.tsx b/src/app/components/dialogs/EditAccessNodesDialog.tsx
index 984e0fbf..02675ef6 100644
--- a/src/app/components/dialogs/EditAccessNodesDialog.tsx
+++ b/src/app/components/dialogs/EditAccessNodesDialog.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Dialog } from "..";
+import { Dialog, Tile } from "..";
 import { ServiceFactory, WaspClientService } from "../../../lib";
 import { PeeringNode } from "../../../lib/classes/services/peersService";
 
@@ -82,7 +82,6 @@ const EditAccessNodesDialog: React.FC<IEditAccessNodesDialog> = ({
         accessNodes.length === checkedNodes.length &&
         accessNodes.every((node, i) => node.publicKey === checkedNodes[i].publicKey)
     );
-
     return (
         <Dialog
             title="Edit access nodes"
@@ -118,9 +117,12 @@ const EditAccessNodesDialog: React.FC<IEditAccessNodesDialog> = ({
                     return (
                         <div className="access-nodes-item" key={node.publicKey}>
                             <input id={node.publicKey} type="checkbox" checked={isChecked} onChange={onChecked} />
-                            <label htmlFor={node.publicKey}>
-                                {node.peeringURL} <br />
-                                {node.publicKey}
+                            <label htmlFor={node.publicKey} className={isChecked ? "checked" : ""}>
+                                <Tile
+                                    displayHealth={node.isTrusted}
+                                    primaryText={node.publicKey}
+                                    secondaryText={`(${node.name}) ${node.peeringURL}`}
+                                />
                             </label>
                         </div>
                     );
diff --git a/src/app/routes/Chain.scss b/src/app/routes/Chain.scss
index 66325590..48a02022 100644
--- a/src/app/routes/Chain.scss
+++ b/src/app/routes/Chain.scss
@@ -8,7 +8,7 @@
 
   .access-nodes-item {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     width: 100%;
     margin-bottom: 16px;
 
@@ -17,19 +17,20 @@
     }
 
     input {
-      margin-top: 2px;
-      margin-right: 6px;
-      cursor: pointer;
-
-      @include phone-down {
-        margin-top: 4px;
-      }
+     display: none;
     }
 
     label {
       flex: 1;
       word-break: break-all;
       cursor: pointer;
+
+      &.checked {
+        .tile-content {
+          border: 1px solid var(--accent-primary);
+          background: #108cff33;
+        }
+      }
     }
   }
 }

From 1398d696c73fa2e4f268b7a0ebb6a3260877d184 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Mon, 20 Feb 2023 15:41:48 +0100
Subject: [PATCH 2/3] fix: remove border to prevent tile movement  content
 after select it

---
 src/app/routes/Chain.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/routes/Chain.scss b/src/app/routes/Chain.scss
index 48a02022..46a0ad68 100644
--- a/src/app/routes/Chain.scss
+++ b/src/app/routes/Chain.scss
@@ -17,7 +17,7 @@
     }
 
     input {
-     display: none;
+      display: none;
     }
 
     label {
@@ -27,7 +27,6 @@
 
       &.checked {
         .tile-content {
-          border: 1px solid var(--accent-primary);
           background: #108cff33;
         }
       }

From 987e9bc7315d94009b1a16d09185748a7628602d Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 21 Feb 2023 08:47:22 +0100
Subject: [PATCH 3/3] feat: replace label and fix spacing

---
 src/app/components/dialogs/EditAccessNodesDialog.tsx | 10 ++++++++--
 src/app/routes/Chain.scss                            |  3 +--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/components/dialogs/EditAccessNodesDialog.tsx b/src/app/components/dialogs/EditAccessNodesDialog.tsx
index 02675ef6..5cb36c84 100644
--- a/src/app/components/dialogs/EditAccessNodesDialog.tsx
+++ b/src/app/components/dialogs/EditAccessNodesDialog.tsx
@@ -117,13 +117,19 @@ const EditAccessNodesDialog: React.FC<IEditAccessNodesDialog> = ({
                     return (
                         <div className="access-nodes-item" key={node.publicKey}>
                             <input id={node.publicKey} type="checkbox" checked={isChecked} onChange={onChecked} />
-                            <label htmlFor={node.publicKey} className={isChecked ? "checked" : ""}>
+                            <div
+                                className={`${isChecked ? "checked" : ""} access-nodes-item-box`}
+                                onClick={onChecked}
+                                onKeyDown={onChecked}
+                                role="button"
+                                tabIndex={0}
+                            >
                                 <Tile
                                     displayHealth={node.isTrusted}
                                     primaryText={node.publicKey}
                                     secondaryText={`(${node.name}) ${node.peeringURL}`}
                                 />
-                            </label>
+                            </div>
                         </div>
                     );
                 })}
diff --git a/src/app/routes/Chain.scss b/src/app/routes/Chain.scss
index 46a0ad68..f6c5dd11 100644
--- a/src/app/routes/Chain.scss
+++ b/src/app/routes/Chain.scss
@@ -10,7 +10,6 @@
     display: flex;
     align-items: center;
     width: 100%;
-    margin-bottom: 16px;
 
     &:hover {
       color: var(--text-color-secondary);
@@ -20,7 +19,7 @@
       display: none;
     }
 
-    label {
+    .access-nodes-item-box {
       flex: 1;
       word-break: break-all;
       cursor: pointer;