From adca1f405724703a9159aac674f1b38874168070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arma=C4=9Fan=20=C3=9Cnl=C3=BC?=
 <36102404+armgnunlu@users.noreply.github.com>
Date: Tue, 22 Sep 2020 11:13:41 +0300
Subject: [PATCH] Resolved  #5324

---
 .../Pages/Index.cshtml                        |  65 ++--
 .../Components/Commenting/Default.cshtml      | 281 +++++++++---------
 .../Shared/Components/Commenting/default.css  |   7 +-
 .../Shared/Components/Rating/Default.cshtml   |  77 +++--
 .../Shared/Components/Rating/default.css      |   8 +
 .../Shared/Components/Rating/default.js       |   8 +-
 .../ReactionSelection/Default.cshtml          |   8 +-
 7 files changed, 256 insertions(+), 198 deletions(-)

diff --git a/modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml b/modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
index c33377a8cc..e61017dd4b 100644
--- a/modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
+++ b/modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
@@ -22,15 +22,26 @@
     </abp-card-body>
 </abp-card>
 
-@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
-{
-    @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "1" })
-}
-@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
-{
-    @await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "1" })
-}
-<hr class="my-5" />
+<abp-row>
+    <abp-column size-md="_6">
+        @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
+        {
+            @await Component.InvokeAsync(typeof(RatingViewComponent), new { entityType = "quote", entityId = "1" })
+        }
+    </abp-column>
+    <abp-column size-md="_6">
+        @if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
+        {
+            @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "1" })
+        }
+    </abp-column>
+    <abp-column size-md="_12">
+        @if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
+        {
+            @await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "1" })
+        }
+    </abp-column>
+</abp-row>
 <abp-card>
     <abp-card-body class="p-5">
         <abp-blockquote class="text-center">
@@ -41,19 +52,23 @@
         </abp-blockquote>
     </abp-card-body>
 </abp-card>
-
-<hr>
-@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
-{
-    @await Component.InvokeAsync(typeof(RatingViewComponent), new { entityType = "quote", entityId = "2" })
-}
-<hr>
-@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
-{
-    @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "2" })
-}
-@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
-{
-    @await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "2" })
-}
-<hr class="my-5" />
+<abp-row>
+    <abp-column size-md="_6">
+        @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
+        {
+            @await Component.InvokeAsync(typeof(RatingViewComponent), new { entityType = "quote", entityId = "2" })
+        }
+    </abp-column>
+    <abp-column size-md="_6">
+        @if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
+        {
+            @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "2" })
+        }
+    </abp-column>
+    <abp-column size-md="_12">
+        @if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
+        {
+            @await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "2" })
+        }
+    </abp-column>
+</abp-row> 
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
index f988dd29e7..1dc4ca37ff 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
@@ -15,189 +15,198 @@
 
 @{
     Func<dynamic, IHtmlContent> GetCommentTitle(CmsUserDto author, DateTime creationTime) =>
-        @<span>
-            <i class="far fa-comment-alt mr-2"></i>
-            @((string.IsNullOrWhiteSpace(author.Name)
+    @<span>
+        <i class="far fa-comment-alt mr-2"></i>
+        @((string.IsNullOrWhiteSpace(author.Name)
                 ? author.UserName
                 : author.Name + " " + author.Surname).Trim())
-            <small class="text-muted float-right" style="opacity: .5;">@creationTime.ToString()</small>
-        </span>;
+        <small class="text-muted float-right" style="opacity: .5; font-size: 14px">@creationTime.ToString()</small>
+    </span>;
 }
 @{
     Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) =>
-        @<div class="cms-comment-form-area bg-light card p-4 mx-0 mt-4  @(repliedCommentId.HasValue ? "my-1" : "mb-0")"
-              data-reply-id="@(repliedCommentId?.ToString() ?? "")"
-              style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
-            <form class="cms-comment-form">
-                <input hidden value="@(repliedCommentId?.ToString() ?? "")" name="repliedCommentId"/>
-                <div class="form-row">
-                    <div class="col">
-                        <div class="form-group">
-                            <textarea class="form-control" name="commentText" placeholder="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? L["YourComment"] : L["YourReply"])..." rows="3"></textarea>
-                        </div>
+    @<div class="cms-comment-form-area bg-light card p-3 mx-0 mt-4  @(repliedCommentId.HasValue ? "my-1" : "mb-0")"
+          data-reply-id="@(repliedCommentId?.ToString() ?? "")"
+          style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
+        <form class="cms-comment-form">
+            <input hidden value="@(repliedCommentId?.ToString() ?? "")" name="repliedCommentId" />
+            <div class="form-row">
+                <div class="col">
+                    <div class="form-group m-0">
+                        <textarea class="form-control" name="commentText" placeholder="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? L["YourComment"] : L["YourReply"])..." rows="3"></textarea>
                     </div>
-                    <div class="col-auto">
-                        <div class="text-right">
-                            @if (cancelButton)
-                            {
-                                <abp-button type="button" button-type="Outline_Secondary" class="reply-cancel-button mb-2" size="Block" data-reply-id="@(repliedCommentId?.ToString() ?? "")">
-                                    <i class="fa fa-times mr-1"></i> @L["Cancel"]
-                                </abp-button>
-                            }
-                            <abp-button type="submit" button-type="Primary" size="Block">
-                                <i class="fa fa-comment-alt mr-1"></i> @L["Send"]
+                </div>
+                <div class="col-auto">
+                    <div class="text-right">
+                        <abp-button type="submit" button-type="Primary" size="Block">
+                            <i class="fa fa-comment-alt mr-1"></i> @L["Send"]
+                        </abp-button>
+                        @if (cancelButton)
+                        {
+                            <abp-button type="button" button-type="Light" class="reply-cancel-button mb-2" size="Block_Small" data-reply-id="@(repliedCommentId?.ToString() ?? "")">
+                                <i class="fa fa-times mr-1"></i> @L["Cancel"]
                             </abp-button>
-                        </div>
+                        }
                     </div>
                 </div>
-            </form>
-        </div>;
+            </div>
+        </form>
+    </div>;
 }
 @{
     Func<dynamic, IHtmlContent> GetCommentContentArea(Guid id, string text) =>
-        @<div>
-            <div class="cms-comment-content-area" data-id="@id.ToString()">
-                <p class="m-0">
-                    @text
-                </p>
-            </div>
-        </div>;
+    @<div class="cms-comment-content-area" data-id="@id.ToString()">
+        <p class="m-0">
+            @text
+        </p>
+    </div>;
 }
 @{
     Func<dynamic, IHtmlContent> GetCommentActionArea(Guid id, Guid authorId, bool isReply) =>
-        @<div class="text-right">
-            @if (!isReply)
+    @<div class="inner-comment-buttons text-left">
+        @if (!isReply)
+        {
+            @if (CurrentUser.IsAuthenticated)
             {
-                @if (CurrentUser.IsAuthenticated)
-                {
-                    <a href="#" class="comment-reply-link btn btn-sm btn-primary" data-reply-id="@id.ToString()" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}_link")">
-                        <i class="fa fa-reply mr-1"></i> @L["Reply"]
-                    </a>
-                }
-                else
-                {
-                    <a href="@(Model.LoginUrl + "_" + id)" class="btn btn-sm btn-primary shadow-sm"> @L["LoginToReply"]</a>
-                }
+                <a href="#" class="comment-links comment-reply-link btn btn-sm  shadow-sm  btn-primary" data-reply-id="@id.ToString()" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}_link")">
+                    <i class="fa fa-reply mr -1"></i> @L["Reply"]
+                </a>
             }
-            @if (authorId == CurrentUser.Id)
+            else
             {
-                <a href="#" class="comment-delete-link btn btn-sm shadow-sm bg-white" data-id="@id.ToString()">
-                    <i class="fa fa-trash mr-1 text-danger"></i> @L["Delete"]
-                </a>
-
-
-                <a href="#" class="comment-edit-link btn btn-sm shadow-sm bg-white" data-id="@id.ToString()">
-                    <i class="fa fa-pencil mr-1 text-info"></i> @L["Edit"]
-                </a>
+                <a href="@(Model.LoginUrl + "_" + id)" class="btn btn-sm btn-light shadow-sm"> @L["LoginToReply"]</a>
             }
-        </div>;
+        }
+        @if (authorId == CurrentUser.Id)
+        {
+            <a href="#" class="comment-links comment-delete-link btn btn-sm shadow-sm btn-link text-muted bg-white " data-id="@id.ToString()">
+                <i class="fa fa-trash  mr -1"></i> @L["Delete"]
+            </a>
+            <a href="#" class="comment-links comment-edit-link  btn btn-sm shadow-sm  btn-link text-muted bg-white" data-id="@id.ToString()">
+                <i class="fa fa-pencil  mr -1 "></i> @L["Edit"]
+            </a>
+        }
+    </div>;
 }
 @{
     Func<dynamic, IHtmlContent> GetEditArea(Guid id, string text) =>
-        @<div>
-            <div class="cms-comment-edit-area" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}")" data-id="@id.ToString()" style="display:none">
-
-                <div class="card bg-light p-4 mx-0 mt-3">
-                    <form class="cms-comment-update-form">
-                        <input hidden value="@id.ToString()" name="id"/>
-                        <div class="form-group">
+    @<div class="cms-comment-edit-area" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}")" data-id="@id.ToString()" style="display:none">
+        <div class="card bg-light p-3 mx-0 mt-3">
+            <form class="cms-comment-update-form">
+                <input hidden value="@id.ToString()" name="id" />
+                <div class="form-row">
+                    <div class="col">
+                        <div class="form-group m-0">
                             <textarea class="form-control" name="commentText" rows="3">@text</textarea>
                         </div>
+                    </div>
+                    <div class="col-auto">
                         <div class="text-right">
-                            <abp-button type="button" button-type="Secondary" class="comment-edit-cancel-button" data-id="@id.ToString()"> @L["Cancel"] </abp-button>
-                            <abp-button type="submit" button-type="Primary"> @L["Update"] </abp-button>
+                            <abp-button type="submit" button-type="Primary" size="Block"> @L["Update"] </abp-button>
+                            <abp-button type="button" button-type="Light" size="Block_Small" class="comment-edit-cancel-button" data-id="@id.ToString()"><i class="fa fa-times mr-1"></i>  @L["Cancel"] </abp-button>
+
                         </div>
-                    </form>
+                    </div>
                 </div>
-            </div>
-        </div>;
+            </form>
+        </div>
+    </div>;
 }
 
 <div class="cms-comment-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
-    <div>
-        <h5 class="mb-0 mt-4">
-            <i class="fas fa-comment-alt"></i> @L["Comments"]
-        </h5>
-        <div>
-            @if (CurrentUser.IsAuthenticated)
-            {
-                <div id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}")">
-                    @GetCommentArea(null).Invoke(null)
-                </div>
-            }
-            else if (!string.IsNullOrWhiteSpace(Model.LoginUrl))
-            {
-                <div class="text-right">
-                    <a href="@Model.LoginUrl" class="btn btn-primary"> @L["LoginToAddComment"]</a>
-                </div>
-            }
+    @if (CurrentUser.IsAuthenticated)
+    {
+        <div id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}")">
+            @GetCommentArea(null).Invoke(null)
         </div>
-        @foreach (var comment in Model.Comments)
-        {
-            <div class="comment">
-                <div class="card p-4 mx-0 my-4">
-                    <h5>
-                        @GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
-                    </h5>
-
-                    @GetCommentContentArea(comment.Id, comment.Text).Invoke(null)
-
-                    @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
-                    {
-                        @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new {entityType = "comment", entityId = comment.Id.ToString()})
-                    }
+    }
+    else if (!string.IsNullOrWhiteSpace(Model.LoginUrl))
+    {
+        <div class="text-right">
+            <a href="@Model.LoginUrl" class="btn btn-primary"> @L["LoginToAddComment"]</a>
+        </div>
+    }
+    @foreach (var comment in Model.Comments)
+    {
+        <div class="comment">
+            <div class="card p-3 mx-0 my-4">
+                <h5>
+                    @GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
+                </h5>
 
-                    @GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
-                    @GetEditArea(comment.Id, comment.Text).Invoke(null)
+                @GetCommentContentArea(comment.Id, comment.Text).Invoke(null)
 
-                    @if (comment.Replies.Any())
-                    {
-                        @foreach (var reply in comment.Replies)
+            <div class="form-row mt-2">
+                <div class="col">
+                    <div class="my-2 ">
+                        @GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
+                    </div>
+                </div>
+                <div class="col-auto">
+                    <div class="reaction-in-comment">
+                        @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
                         {
-                            <div class="bg-light card p-4 mx-0 mt-3">
-                                <div class="comment">
-                                    <div>
+                            @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = comment.Id.ToString() })
+                        }
+                    </div>
+                </div>
+            </div>
+                @GetEditArea(comment.Id, comment.Text).Invoke(null)
 
-                                        <h5>
-                                            @GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null)
-                                        </h5>
+                @if (comment.Replies.Any())
+                {
+                    @foreach (var reply in comment.Replies)
+                    {
+                        <div class="bg-light card p-3 mx-0 mt-3">
+                            <div class="comment">
+                                <h5>
+                                    @GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null)
+                                </h5>
 
-                                        @GetCommentContentArea(reply.Id, reply.Text).Invoke(null)
+                                @GetCommentContentArea(reply.Id, reply.Text).Invoke(null)
 
+                            <div class="form-row mt-2">
+                                <div class="col">
+                                    <div class="my-2 ">
+                                        @GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null)
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <div class="reaction-in-comment">
                                         @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
                                         {
-                                            @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new {entityType = "comment", entityId = reply.Id.ToString()})
+                                            @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = reply.Id.ToString() })
                                         }
-
-                                        @GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null)
-                                        @GetEditArea(reply.Id, reply.Text).Invoke(null)
                                     </div>
                                 </div>
                             </div>
-                        }
-                        @if (comment.Replies.Count >= 3)
-                        {
-                            <div class="text-right mt-4">
-                                @if (CurrentUser.IsAuthenticated)
-                                {
-                                    <a href="#" class="comment-reply-link btn btn-sm btn-primary" data-reply-id="@comment.Id.ToString()">
-                                        <i class="fa fa-reply mr-1"></i> @L["Reply"]
-                                    </a>
-                                }
-                                else
-                                {
-                                    <a href="@(Model.LoginUrl + "_" + comment.Id)" class="btn btn-sm btn-primary shadow-sm"> @L["LoginToReply"]</a>
-                                }
+
+                                @GetEditArea(reply.Id, reply.Text).Invoke(null)
                             </div>
-                        }
+                        </div>
                     }
-                    @if (CurrentUser.IsAuthenticated)
+                    @if (comment.Replies.Count >= 3)
                     {
-                        @GetCommentArea(comment.Id, true).Invoke(null)
+                        <div class=" mt-2">
+                            @if (CurrentUser.IsAuthenticated)
+                            {
+                                <a href="#" class="comment-links  comment-reply-link btn btn-primary btn-sm"  data-reply-id="@comment.Id.ToString()">
+                                    <i class="fa fa-reply mr-1"></i> @L["Reply"]
+                                </a>
+                            }
+                            else
+                            {
+                                <a href="@(Model.LoginUrl + "_" + comment.Id)" class="btn btn-sm btn-light shadow-sm"> @L["LoginToReply"]</a>
+                            }
+                        </div>
                     }
+                }
+                @if (CurrentUser.IsAuthenticated)
+                {
+                    @GetCommentArea(comment.Id, true).Invoke(null)
+                }
 
-                </div>
             </div>
-        }
-    </div>
+        </div>
+    }
 </div>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/default.css
index 5f282702bb..1cb708c4a6 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/default.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/default.css
@@ -1 +1,6 @@
-
\ No newline at end of file
+.cms-reaction-select-icon:hover{
+    text-decoration: none;
+}
+.comment-links:hover { 
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml
index 82397e49c4..de6424d083 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml
@@ -5,42 +5,57 @@
 @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel
 @inject IHtmlLocalizer<CmsKitResource> L
 
-<div class="cms-rating-area container" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
-    @if (CurrentUser.IsAuthenticated)
-    {
-        <div class="m-auto">
-            <span class="my-rating-5" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)"></span>
-            <span class="live-rating">@(Model.CurrentRating != null ? Model.CurrentRating + " | " : 0 + "")</span>
+<div class="text-center text-md-left">
+    <div class="cms-rating-area d-inline-block px-2 py-1 my-2  card border-0 shadow-sm " data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
+        @if (CurrentUser.IsAuthenticated)
+        {
+            <span class="my-rating" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)"></span>
+            <small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + "  " : 0 + "")</small>
             @if (Model.CurrentRating != null)
             {
-                <a href="#" class="rating-undo-link m-auto">
-                    <i class="fa fa-undo"></i> @L["Undo"]
+                <a href="#" class="rating-undo-link">
+                    <small class="text-muted"><i class="fa fa-undo"></i> @L["Undo"]</small>
                 </a>
             }
-        </div>
-        if (Model.Ratings != null)
-        {
-            <div class="row text-center col-6 mt-3">
-                @foreach (var rating in Model.Ratings)
-                {
-                    <div class="side col-2">
-                        <div>@rating.StarCount @L["Star"]</div>
-                    </div>
-                    <div class="middle col-8">
-                        <div class="bar-container">
-                            <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
+            if (Model.Ratings != null)
+            {
+                <a href="#" class="text-muted ml-1" data-toggle="modal" data-target="#ratingDetail">
+                    <i class="fas fa-info-circle"></i>
+                </a>
+
+                <div class="modal fade" id="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
+                    <div class="modal-dialog modal-dialog-centered" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+
+                                <div class="row text-center">
+                                    @foreach (var rating in Model.Ratings)
+                                    {
+                                        <div class="col">
+                                            <label>@rating.StarCount @L["Star"]</label>
+                                            <div class="bar-container">
+                                                <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
+                                            </div>
+                                            <div><small class="text-muted">@rating.Count Rate(s)</small> </div>
+                                        </div>
+                                    }
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <div class="side col-2">
-                        <div>@rating.Count</div>
-                    </div>
-                }
-            </div>
+                </div>
+            }
+        }
+        else
+        {
+            <span class="my-rating" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
+            <span class="rating-login"></span>
         }
-    }
-    else
-    {
-        <span class="my-rating-5" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
-        <span class="rating-login"></span>
-    }
+    </div>
 </div>
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css
index c38f44cace..eb46cf8f04 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css
@@ -41,4 +41,12 @@
     .right {
         display: none;
     }
+}
+
+.jq-star {
+    top: -2px !important;
+    position: relative;
+}
+.rating-undo-link:hover {
+    text-decoration:none;
 }
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js
index 431fd7884b..4c7d9bed72 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js
@@ -14,11 +14,17 @@
             }
 
             function registerCreateOfNewRating() {
-                $widget.find(".my-rating-5").each(function () {
+                $widget.find(".my-rating").each(function () {
                         var authenticated = $(this).attr("data-authenticated");
 
                         $(this).starRating({
                             initialRating: 0,
+                            starSize: 16,
+                            emptyColor: '#eee',
+                            hoverColor: '#ffc107',
+                            activeColor: '#ffc107',
+                            useGradient: false,
+                            strokeWidth: 0,
                             disableAfterRate: true,
                             useFullStars: true,
                             readOnly: authenticated === "True",
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
index f49cfde336..b95d679fda 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
@@ -4,8 +4,8 @@
 
 @if (CurrentUser.IsAuthenticated || Model.Reactions.Count(r => r.Count > 0) > 0)
 {
-    <div class="text-right">
-        <div class="px-2 py-1 my-3 card border-0 shadow-sm d-inline-block">
+    <div class="text-center text-md-right">
+        <div class="px-2 py-1 my-2 card border-0 shadow-sm d-inline-block">
             <span class="cms-reaction-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
 
                 @if (CurrentUser.IsAuthenticated)
@@ -24,9 +24,9 @@
                 }
                 @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
                 {
-                    <span class="ml-3 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name" data-click-action="@(CurrentUser.IsAuthenticated ? "true" : "false")">
+                    <span class="ml-1 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name" data-click-action="@(CurrentUser.IsAuthenticated ? "true" : "false")">
                         <i class="@reaction.Icon"></i>
-                        <small class="text-muted" style="opacity: .75;">@(reaction.Count)</small>
+                        <small class="text-muted" style="opacity: .45;">@(reaction.Count)</small>
                     </span>
                 }
             </span>