Overhaul Like Button

linkdotnet · Jun 26, 2024 · 291fd74 · 291fd74
1 parent 22a4e86
commit 291fd74
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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");
     }