From 06ccd776f173aaeba9b228736eee254abe0ed6eb Mon Sep 17 00:00:00 2001
From: Ivan Yaremenchuk <trooper982@gmail.com>
Date: Sat, 20 Aug 2022 21:37:55 -0500
Subject: [PATCH] Add Checkmark component

---
 NftFaucetRadzen/Components/Checkmark.razor    |  5 +++
 NftFaucetRadzen/Components/Checkmark.razor.cs |  8 ++++
 NftFaucetRadzen/Components/NetworkList.razor  |  1 +
 .../Components/NetworkList.razor.cs           |  1 -
 NftFaucetRadzen/wwwroot/css/app.css           | 37 +++++++++++++++++++
 5 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 NftFaucetRadzen/Components/Checkmark.razor
 create mode 100644 NftFaucetRadzen/Components/Checkmark.razor.cs

diff --git a/NftFaucetRadzen/Components/Checkmark.razor b/NftFaucetRadzen/Components/Checkmark.razor
new file mode 100644
index 0000000..930f143
--- /dev/null
+++ b/NftFaucetRadzen/Components/Checkmark.razor
@@ -0,0 +1,5 @@
+<span class="checkmark" style=@(AnchorToTopRightCorner ? "position: absolute; top: 1em; right: 1em;" : string.Empty)>
+    <div class="checkmark_circle"></div>
+    <div class="checkmark_stem"></div>
+    <div class="checkmark_kick"></div>
+</span>
diff --git a/NftFaucetRadzen/Components/Checkmark.razor.cs b/NftFaucetRadzen/Components/Checkmark.razor.cs
new file mode 100644
index 0000000..ab9c12b
--- /dev/null
+++ b/NftFaucetRadzen/Components/Checkmark.razor.cs
@@ -0,0 +1,8 @@
+using Microsoft.AspNetCore.Components;
+
+namespace NftFaucetRadzen.Components;
+
+public partial class Checkmark
+{
+    [Parameter] public bool AnchorToTopRightCorner { get; set; }
+}
diff --git a/NftFaucetRadzen/Components/NetworkList.razor b/NftFaucetRadzen/Components/NetworkList.razor
index 800039e..49b7019 100644
--- a/NftFaucetRadzen/Components/NetworkList.razor
+++ b/NftFaucetRadzen/Components/NetworkList.razor
@@ -6,6 +6,7 @@
             <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>
+                    <Checkmark AnchorToTopRightCorner="true" />
                     <h4 class="mb-0">@network.Name</h4>
                     @if (network.ChainId.HasValue)
                     {
diff --git a/NftFaucetRadzen/Components/NetworkList.razor.cs b/NftFaucetRadzen/Components/NetworkList.razor.cs
index 06a20d3..e03051c 100644
--- a/NftFaucetRadzen/Components/NetworkList.razor.cs
+++ b/NftFaucetRadzen/Components/NetworkList.razor.cs
@@ -6,5 +6,4 @@ namespace NftFaucetRadzen.Components;
 public partial class NetworkList
 {
     [Parameter] public NetworkModel[] Data { get; set; }
-
 }
diff --git a/NftFaucetRadzen/wwwroot/css/app.css b/NftFaucetRadzen/wwwroot/css/app.css
index 7198794..051c6e9 100644
--- a/NftFaucetRadzen/wwwroot/css/app.css
+++ b/NftFaucetRadzen/wwwroot/css/app.css
@@ -75,3 +75,40 @@ a, .btn-link {
 .non-supported-container {
     background-color: #dfdfdf !important;
 }
+
+.checkmark {
+    display:inline-block;
+    width: 22px;
+    height:22px;
+    -ms-transform: rotate(45deg); /* IE 9 */
+    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+    transform: rotate(45deg);
+}
+
+.checkmark_circle {
+    position: absolute;
+    width:22px;
+    height:22px;
+    background-color: green;
+    border-radius:11px;
+    left:0;
+    top:0;
+}
+
+.checkmark_stem {
+    position: absolute;
+    width:3px;
+    height:9px;
+    background-color:#fff;
+    left:11px;
+    top:6px;
+}
+
+.checkmark_kick {
+    position: absolute;
+    width:3px;
+    height:3px;
+    background-color:#fff;
+    left:8px;
+    top:12px;
+}