Edit JoinArea and MemberArea for Organization profile page

src/EventHub.Web/Pages/Organizations/Components/JoinArea/Default.cshtml

@@ -2,7 +2,7 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @inject IHtmlLocalizer<EventHubResource> L
 @model EventHub.Web.Pages.Organizations.Components.JoinArea.JoinAreaViewComponent.MembershipAreaViewComponentModel
-<abp-card class="mb-3" data-organization-id="@Model.OrganizationId">
+<abp-card class="detail-head mt-5 font-weight-bold" data-organization-id="@Model.OrganizationId">
     <abp-card-body>
         @if (Model.IsLoggedIn)
         {

src/EventHub.Web/Pages/Organizations/Components/MembersArea/Default.cshtml

@@ -1,14 +1,15 @@
 @model EventHub.Web.Pages.Organizations.Components.MembersArea.MembersAreaViewComponent.MembersAreaViewComponentModel
-<abp-card class="mb-3" data-organization-id="@Model.OrganizationId">
+<h5 class="detail-head mt-5 font-weight-bold" data-organization-id="@Model.OrganizationId">Members (@Model.TotalCount)</h5> 
-    <abp-card-body>
+<div>
-        <abp-card-title>Members (@Model.TotalCount)</abp-card-title>
+    @foreach (var member in Model.Members)
-        <abp-card-text>
+    {
-            <ul id="OrganizationMemberList">
+        <img gravatar-email="@member.Email" default-image="Wavatar" gravatar-size="60" class="org-avatar avatar rounded-circle"/>
-                @foreach (var member in Model.Members)
+    }
-                {
+</div> 
-                    <li class="border p-2 mb-2"><i class="fas fa-user"></i> @Model.GetMemberName(member)</li>
+@if (Model.TotalCount > 10)
-                }
+{
-            </ul>
+    // ToDo: Implement show more!!!
-        </abp-card-text>
+    <button class="btn btn-secondary btn-lg mt-3">
-    </abp-card-body>
+        Show More
-</abp-card>
+    </button>
+}

src/EventHub.Web/Pages/Organizations/Components/MembersArea/members-area.css

@@ -1,5 +0,0 @@
-#OrganizationMemberList
-{
-    list-style: none;
-    padding: 0;
-}