From 291fd74a585971b95e86efd7a32d1ee50a7a5c34 Mon Sep 17 00:00:00 2001
From: Steven Giesel <stgiesel35@gmail.com>
Date: Wed, 26 Jun 2024 18:38:42 +0200
Subject: [PATCH] Overhaul Like Button

---
 .../Features/ShowBlogPost/Components/GithubSponsor.razor    | 2 +-
 .../Features/ShowBlogPost/Components/Like.razor             | 6 +++---
 .../Features/ShowBlogPost/Components/Like.razor.css         | 4 ++--
 .../Web/Features/ShowBlogPost/Components/LikeTests.cs       | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/GithubSponsor.razor b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/GithubSponsor.razor
index 582d634d..520fe14c 100644
--- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/GithubSponsor.razor
+++ b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/GithubSponsor.razor
@@ -1,4 +1,4 @@
-<a href="https://github.com/sponsors/@Name" class="text-decoration-none border border-dark rounded p-2 link" target="_blank">
+<a href="https://github.com/sponsors/@Name" class="text-decoration-none border border-dark rounded-pill p-2 link" target="_blank">
     <i class="github"></i> Sponsors
 </a>
 @code {
diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor
index 589cb3dd..b8562357 100644
--- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor
+++ b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor
@@ -1,9 +1,9 @@
 @using LinkDotNet.Blog.Domain
 @using LinkDotNet.Blog.Web.Features.Services
 @inject ILocalStorageService LocalStorage
-<div class="d-flex align-items-center">
-    <span class="clap-btn @BtnClass" @onclick="LikeBlogPost"></span> @BlogPost.Likes
-</div>
+<button class="d-flex align-items-center btn btn-outline-secondary gap-2 rounded-pill" @onclick="LikeBlogPost">
+	<span class="clap-btn @BtnClass"></span><div class="vr"></div><span class="px-2" id="like-counter">@BlogPost.Likes</span>
+</button>
 
 @code {
     [Parameter]
diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor.css b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor.css
index 5b40507c..ca6a5d77 100644
--- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor.css
+++ b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor.css
@@ -1,8 +1,8 @@
 .clap-btn {
     display: inline-block;
     Cursor: pointer;
-    width: 50px;
-    height: 50px;
+    width: 32px;
+    height: 32px;
     background: url('assets/ClapAnimation.webp') no-repeat 0 50%;
     background-size: 900%;
 }
diff --git a/tests/LinkDotNet.Blog.UnitTests/Web/Features/ShowBlogPost/Components/LikeTests.cs b/tests/LinkDotNet.Blog.UnitTests/Web/Features/ShowBlogPost/Components/LikeTests.cs
index 6ff5555d..a47e5202 100644
--- a/tests/LinkDotNet.Blog.UnitTests/Web/Features/ShowBlogPost/Components/LikeTests.cs
+++ b/tests/LinkDotNet.Blog.UnitTests/Web/Features/ShowBlogPost/Components/LikeTests.cs
@@ -16,7 +16,7 @@ public void ShouldDisplayLikes()
         var cut = Render<Like>(
             p => p.Add(l => l.BlogPost, blogPost));
 
-        var label = cut.Find("div").TextContent;
+        var label = cut.Find("#like-counter").TextContent;
 
         label.Should().Contain("1");
     }