Restyled like button

Author: linkdotnet

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor

@@ -1,8 +1,8 @@
 @using LinkDotNet.Blog.Domain
 @using LinkDotNet.Blog.Web.Features.Services
 @inject ILocalStorageService localStorage
-<div class="like-container">
-    <button class="btn @BtnClass" @onclick="LikeBlogPost"><i class="far fa-thumbs-up"></i> @BlogPost.Likes @LikeText</button>
+<div class="d-flex align-items-center">
+    <span class="clap-btn @BtnClass" @onclick="LikeBlogPost"></span> @BlogPost.Likes
 </div>
 
 @code {
@@ -14,10 +14,8 @@
 
     private bool HasLiked { get; set; }
 
-    private string BtnClass => HasLiked ? "btn-secondary" : "btn-primary";
+    private string BtnClass => HasLiked ? "clap-active" : string.Empty;
 
-    private string LikeText => BlogPost.Likes == 1 ? "Like" : "Likes";
-    
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Like.razor.css

@@ -0,0 +1,22 @@
+.clap-btn {
+    display: inline-block;
+    Cursor: pointer;
+    width: 50px;
+    height: 50px;
+    background: url('assets/ClapAnimation.png') no-repeat 0 50%;
+    background-size: 900%;
+}
+
+.clap-active {
+    animation-name: animate;
+    animation-duration: .8s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+    animation-timing-function: steps(8);
+}
+
+@keyframes animate {
+     0%   { background-position: left;  }
+     50%  { background-position: right; }
+     100% { background-position: right; }
+ }

src/LinkDotNet.Blog.Web/wwwroot/assets/ClapAnimation.png

@@ -8,20 +8,17 @@ namespace LinkDotNet.Blog.UnitTests.Web.Features.ShowBlogPost.Components;
 
 public class LikeTests : TestContext
 {
-    [Theory]
-    [InlineData(0, "0 Likes")]
-    [InlineData(1, "1 Like")]
-    [InlineData(2, "2 Likes")]
-    public void ShouldDisplayLikes(int likes, string expectedText)
+    [Fact]
+    public void ShouldDisplayLikes()
     {
         Services.AddScoped(_ => Mock.Of<ILocalStorageService>());
-        var blogPost = new BlogPostBuilder().WithLikes(likes).Build();
+        var blogPost = new BlogPostBuilder().WithLikes(1).Build();
         var cut = RenderComponent<Like>(
             p => p.Add(l => l.BlogPost, blogPost));
 
-        var label = cut.Find("button").TextContent;
+        var label = cut.Find("div").TextContent;
 
-        label.Should().Contain(expectedText);
+        label.Should().Contain("1");
     }
 
     [Fact]
@@ -39,7 +36,7 @@ public void ShouldInvokeEventWhenButtonClicked()
                     wasLike = b;
                 }));
 
-        cut.Find("button").Click();
+        cut.Find("span").Click();
 
         wasClicked.Should().BeTrue();
         wasLike.Should().BeTrue();
@@ -55,7 +52,7 @@ public void ShouldSetLocalStorageVariableOnClick()
         var cut = RenderComponent<Like>(
             p => p.Add(l => l.BlogPost, blogPost));
 
-        cut.Find("button").Click();
+        cut.Find("span").Click();
 
         localStorage.Verify(l => l.SetItemAsync("hasLiked/id", true), Times.Once);
     }
@@ -74,7 +71,7 @@ public void ShouldCheckLocalStorageOnInit()
             p => p.Add(l => l.BlogPost, blogPost)
                 .Add(l => l.OnBlogPostLiked, b => wasLike = b));
 
-        cut.Find("button").Click();
+        cut.Find("span").Click();
 
         wasLike.Should().BeFalse();
     }
@@ -93,7 +90,7 @@ public void ShouldCheckStorageOnClickAgainAndDoNothingOnMismatch()
         localStorage.Setup(l => l.ContainKeyAsync("hasLiked/id")).ReturnsAsync(true);
         localStorage.Setup(l => l.GetItemAsync<bool>("hasLiked/id")).ReturnsAsync(true);
 
-        cut.Find("button").Click();
+        cut.Find("span").Click();
 
         wasClicked.Should().BeFalse();
     }