From 0a9e36d96ef1a713217bc4e211b5eefccb9ec0a6 Mon Sep 17 00:00:00 2001
From: Ivan Yaremenchuk <trooper982@gmail.com>
Date: Sun, 21 Aug 2022 19:52:48 -0500
Subject: [PATCH] Add 'box-selected' css class

---
 NftFaucetRadzen/Components/NetworkList.razor | 5 ++++-
 NftFaucetRadzen/wwwroot/css/app.css          | 6 +++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/NftFaucetRadzen/Components/NetworkList.razor b/NftFaucetRadzen/Components/NetworkList.razor
index 8a5ff65..dae5694 100644
--- a/NftFaucetRadzen/Components/NetworkList.razor
+++ b/NftFaucetRadzen/Components/NetworkList.razor
@@ -2,7 +2,10 @@
 
 <RadzenDataList WrapItems="true" Data="@Data" TItem="NetworkModel" >
     <Template Context="network">
-        <RadzenCard class=@("box" + (network.IsSupported ? string.Empty : " non-supported-container")) Style="width: 250px;" onclick="@(async () => await ToggleSelection(network.Id))">
+        <RadzenCard class=@("box"
+                            + (network.IsSupported ? string.Empty : " box-disabled")
+                            + (SelectedNetworkIds != null && SelectedNetworkIds.Contains(network.Id) ? " box-selected" : string.Empty))
+                    Style="width: 250px;" onclick="@(async () => await ToggleSelection(network.Id))">
             <div class="d-flex flex-row align-items-center">
                 <RadzenImage Path=@("./images/" + (network.ImageName ?? "ethereum.svg")) Class="float-left mr-3" Style="width: 80px; height: 80px; margin-right: 1em;" />
                 <div>
diff --git a/NftFaucetRadzen/wwwroot/css/app.css b/NftFaucetRadzen/wwwroot/css/app.css
index 051c6e9..eadd1c1 100644
--- a/NftFaucetRadzen/wwwroot/css/app.css
+++ b/NftFaucetRadzen/wwwroot/css/app.css
@@ -72,10 +72,14 @@ a, .btn-link {
     box-shadow: 0 0 11px rgba(33,33,33,.2);
 }
 
-.non-supported-container {
+.box-disabled {
     background-color: #dfdfdf !important;
 }
 
+.box-selected {
+    border: solid 0.2em green !important;
+}
+
 .checkmark {
     display:inline-block;
     width: 22px;