Updated circle page. Updated Api to allow any origin.

JSMR.Api/Program.cs

@@ -52,13 +52,15 @@ builder.Host.UseSerilog();
 builder.Services.AddCors(o =>
 {
     o.AddPolicy("ui-dev", p => p
-        .WithOrigins(
+        .AllowAnyOrigin()
-            "https://localhost:5173", // vite-like
+        //.WithOrigins(
-            "https://localhost:5001", // typical https dev
+        //    "*",
-            "http://localhost:5000",  // typical http dev
+        //    "https://localhost:5173", // vite-like
-            "https://localhost:7112", // blazor wasm dev https (adjust to your port)
+        //    "https://localhost:5001", // typical https dev
-            "http://localhost:5153"   // blazor wasm dev http (adjust to your port)
+        //    "http://localhost:5000",  // typical http dev
-        )
+        //    "https://localhost:7112", // blazor wasm dev https (adjust to your port)
+        //    "http://localhost:5153"   // blazor wasm dev http (adjust to your port)
+        //)
         .AllowAnyHeader()
         .AllowAnyMethod());
 });

JSMR.UI.Blazor/Pages/Circles.razor

@@ -36,6 +36,58 @@ else if (searchResults.Items.Length == 0)
 }
 else
 {
+    <div class="circle-item-container-2">
+        @foreach (var item in searchResults.Items)
+        {
+            <div class="circle-item">
+                @* <JImage @key="item.CircleId" ContainerClass="j-circle-image-container" ImageClass="j-circle-image" Source="@ImageUrlProvider.GetImageURL(item.LatestProductId, item.LatestVoiceWorkHasImage ?? false, item.LatestVoiceWorkSalesDate, "main")" /> *@
+                <div class="fdfs">
+                    <div class="circle-name">@item.Name</div>
+                    <div>@item.MakerId</div>
+                </div>
+                @if (item.Favorite)
+                {
+                    <MudChip T="string" Label="true" Color="Color.Info" Style="width: 100%" Variant="Variant.Outlined">Favorite</MudChip>
+                }
+                else if (item.Blacklisted)
+                {
+                    <MudChip T="string" Label="true" Color="Color.Warning" Style="width: 100%" Variant="Variant.Outlined">Blacklisted</MudChip>
+                }
+                else if (item.Spam)
+                {
+                    <MudChip T="string" Label="true" Color="Color.Error" Style="width: 100%" Variant="Variant.Outlined">Spam</MudChip>
+                }
+                else
+                {
+                    <MudChip T="string" Label="true" Style="width: 100%" Variant="Variant.Outlined">Normal</MudChip>
+                }
+
+                <div class="circle-star-container">
+                @if (item.Releases > 0)
+                {
+                    <div class="circle-star @GetStarRatingClass(item)"></div>
+                }
+                </div>
+
+                <div class="icon-text">
+                    <MudIcon Icon="@Icons.Material.Outlined.Headphones" />
+                    <span>@item.Releases</span>
+                    @if (item.Pending > 0)
+                    {
+                        <span>/</span>
+                        <span style="color: #ffa462">@item.Pending</span>
+                    }
+                </div>
+
+                <div class="icon-text">
+                    <MudIcon Icon="@Icons.Material.Outlined.ArrowCircleDown" />
+                    <span>@item.Downloads.ToString("n0")</span>
+                </div>
+
+            </div>
+        }
+    </div>
+
     <MudDataGrid Items="@searchResults.Items" Style="table-layout: fixed">
         <Columns>
             <TemplateColumn HeaderStyle="width: 12em">
@@ -134,6 +186,46 @@ else
 }
 
 <style>
+    .circle-item-container-2 {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5em;
+    }
+
+    .circle-item {
+        display: flex;
+        align-items: center;
+        padding: 1rem;
+        border-width: 2px;
+        border-top-color: #353B4C;
+        border-left-color: #212630;
+        border-right-color: #212531;
+        border-bottom-color: #212530;
+        border-radius: 30px;
+        background-image: linear-gradient(0deg, #1C2029, #1C1F28);
+        display: grid;
+        grid-template-columns: 1fr 100px 100px 100px 100px;
+        grid-column-gap: 2rem;
+    }
+
+    .circle-name {
+        color: #d2dce6;
+        font-size: 1.5rem;
+        font-weight: 500;
+        font-family: "M+ 1p";
+    }
+
+    .icon-text {
+        display: flex;
+        align-items: center;
+        gap: .5rem;
+        font-size: 1rem;
+    }
+
+        .icon-text > .mud-icon-root.mud-svg-icon {
+            fill: #737890;
+        }
+
     .mud-table-root {
         table-layout: fixed;
     }

JSMR.UI.Blazor/wwwroot/css/theme-frozen.css

@@ -1,6 +1,7 @@
 :root {
     --font-family: 'Poppins';
-    --background-color: rgb(16, 36, 50);
+    --background-color: #131419;
+    --background-color-original: rgb(16, 36, 50);
     --input-background-color: rgb(0,20,34);
     --input-border-color: #304562;
     --primary-text-color: rgb(180,200, 214);