src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor

@@ -1,5 +1,8 @@
 @page "/Detail/{GameId:int}"
+@using GameIdeas.BlazorApp.Helpers
 @using GameIdeas.BlazorApp.Shared.Components.Header
+@using GameIdeas.BlazorApp.Shared.Components.Interest
+@using GameIdeas.BlazorApp.Shared.Constants
 @layout MainLayout
 
 <HeaderGameIdeas>
@@ -7,54 +10,89 @@
 </HeaderGameIdeas>
 
 <div class="detail-container">
-    <h1 class="header-1 expand-col-2">@Game.Title</h1>
+    <div class="section flex">
-    <div class="description">@Game.Description</div>
+        <a href="" class="square-button">@Icons.Back</a>
-    <div class="medias"></div>
+        <h1 class="header-1">@Game.Title</h1>
+        <Interest Value="Game.Interest" />
+    </div>
 
-    <div class="properties-tags expand-col-2">
-        <div class="properties-container">
 
+    <div class="section col-2">
+        <span class="description">@Game.Description</span>
+
+        <div class="medias"></div>
+    </div>
+
+    <div class="section dark col-2">
+        <div class="properties">
             <h2 class="header-2 grd-col-1">@ResourcesKey.Properties</h2>
-            @foreach (var property in Game.Properties ?? [])
+            <div class="pills">
-            {
+                @foreach (var property in Game.Properties ?? [])
-                <div class="pill body-lg">@property.Label</div>
+                {
-            }
+                    <div class="pill body-lg">@property.Label</div>
+                }
+            </div>
         </div>
-        <div class="tags-container">
+        <div class="tags">
             <h2 class="header-2">@ResourcesKey.Tags</h2>
-            @foreach (var property in Game.Tags ?? [])
+            <div class="pills">
-            {
+                @foreach (var property in Game.Tags ?? [])
-                <div class="pill body-lg">@property.Label</div>
+                {
-            }
+                    <div class="pill body-lg">@property.Label</div>
+                }
+            </div>
         </div>
     </div>
 
-    <div class="how-long-to-beat expand-col-2">
+    <div class="section col-2 first-larger">
-    </div>
+        <div class="additional-informations">
+            <h2 class="header-2">@ResourcesKey.About</h2>
+            <div class="informations">
+                @if (Game.ReleaseDate != null)
+                {
+                    <div class="information">
+                        <span class="body-sm">@ResourcesKey.ReleaseDate</span>
+                        <span class="body-lg">@Game.ReleaseDate?.ToShortDateString()</span>
+                    </div>
+                }
 
-    <div class="additional-informations">
+                @if (Game.StorageSpace != null)
-        <h2 class="header-2">@ResourcesKey.About</h2>
+                {
-        <div class="more-information">
+                    <div class="information">
-            
+                        <span class="body-sm">@ResourcesKey.StorageSize</span>
-        </div>
+                        <span class="body-lg">@GameHelper.GetFormatedStorageSpace(Game.StorageSpace)</span>
-        <div class="information">
+                    </div>
-            <span class="body-sm">@ResourcesKey.Platforms</span>
+                }
-            @foreach (var platform in Game.Platforms ?? [])
+
-            {
+                @if (Game.Developer != null)
-                <a class="body-lg" href="@platform.Url">@platform.Label</a>
+                {
-            }
+                    <div class="information">
-        </div>
+                        <span class="body-sm">@ResourcesKey.Developer</span>
-        <div class="information">
+                        <span class="body-lg">@Game.Developer?.Name</span>
-            <span class="body-sm">@ResourcesKey.Developer</span>
+                    </div>
-            <span class="body-lg">@Game.Developer?.Name</span>
+                }
+
+                @if (Game.Publisher != null)
+                {
+                    <div class="information">
+                        <span class="body-sm">@ResourcesKey.Publisher</span>
+                        <span class="body-lg">@Game.Publisher?.Name</span>
+                    </div>
+                }
+            </div>
         </div>
 
-        <div class="information">
+        <div class="platforms">
-            <span class="body-sm">@ResourcesKey.Publisher</span>
+            <h2 class="header-2">@ResourcesKey.Platforms</h2>
-            <span class="body-lg">@Game.Publisher?.Name</span>
+            <div class="pills">
+                @foreach (var platform in Game.Platforms ?? [])
+                {
+                    <a class="body-lg pill platform-pill" href="@platform.Url">@platform.Label</a>
+                }
+            </div>
         </div>
     </div>
 
-    <div class="files grd-col-2">
+    <div class="section">
     </div>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor.css

@@ -1,12 +1,103 @@
 .detail-container, .properties-tags {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
 }
 
-.medias {
+.flex {
-    grid-column: 2
-}
-
-.properties {
     display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.section {
+    padding: 20px 100px;
+}
+
+.col-2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 40px;
+}
+
+.first-larger {
+    grid-template-columns: 3fr 2fr;
+}
+
+.dark {
+    background: rgb(0, 0, 0, 0.4)
+}
+
+.header-1, .header-2 {
+    width: 100%;
+}
+
+.header-2 {
+    margin-bottom: 20px;
+}
+
+.pills, .informations {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 34px;
+}
+
+.additional-informations, .platforms {
+    padding: 20px;
+    background: var(--input-secondary);
+    box-shadow: var(--drop-shadow);
+    border-radius: var(--big-radius);
+}
+
+.pill {
+    width: fit-content;
+    height: 24px;
+    padding: 0 6px;
+    background: rgb(255, 255, 255, 0.2);
+    border-radius: var(--small-radius);
+    align-content: center;
+}
+
+.platform-pill {
+    color: var(--violet);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+    .platform-pill:hover {
+        text-decoration: underline;
+    }
+
+.square-button {
+    height: 28px;
+    min-height: 28px;
+    width: 28px;
+    min-width: 28px;
+    border-radius: var(--small-radius);
+    background: var(--input-primary);
+    overflow: hidden;
+    cursor: pointer;
+}
+
+    .square-button ::deep svg {
+        fill: var(--white);
+    }
+
+    .square-button:hover ::deep svg {
+        background: var(--input-selected);
+    }
+
+@media screen and (max-width: 1000px) {
+    .section {
+        padding: 20px;
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .col-2 {
+        grid-template-columns: 1fr;
+    }
+
+    .platforms {
+        grid-row: 1;
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor

@@ -1,4 +1,5 @@
 @using GameIdeas.BlazorApp.Helpers
+@using GameIdeas.BlazorApp.Shared.Components.Interest
 @using GameIdeas.BlazorApp.Shared.Constants
 @inherits GameBase
 
@@ -30,12 +31,7 @@
 
     <span class="storage">@GameHelper.GetFormatedStorageSpace(GameDto.StorageSpace)</span>
 
-    <div class="interest">
+    <Interest Value="GameDto.Interest" />
-        <span class="value" style="@($"color: var({GameHelper.GetInterestColor(GameDto.Interest, 5)})")">
-            @GameDto.Interest
-        </span>
-        <span class="max-value">/5</span>
-    </div>
 
     <button class="detail">@Icons.Triangle</button>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css

@@ -11,7 +11,7 @@
     overflow: hidden;
 }
 
-.row * {
+.row > * {
     max-height: 64px;
     height: fit-content;
     padding: 6px 0;
@@ -39,7 +39,7 @@
     background: var(--input-selected);
 }
 
-.release-date, .storage, .max-value {   
+.release-date, .storage {   
     color: rgb(184, 184, 184);
 }
 
@@ -50,7 +50,7 @@
     background: rgb(255, 255, 255, 0.2);
     border-radius: var(--small-radius);
     align-content: center;
-}
+} 
 
 .platforms, .tags {
     display: flex;
@@ -80,16 +80,6 @@
     fill: var(--white);
 }
 
-.value {
-    font-size: 24px;
-    font-weight: bold;
-}
-
-.max-value {
-    position: absolute;
-    transform: translate(2px, 10px);
-}
-
 @media screen and (max-width: 1000px) {
     .row {
         grid-template-columns: 48px 3fr 2fr 3fr 30px 30px;

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Interest/Interest.razor

@@ -0,0 +1,9 @@
+@using GameIdeas.BlazorApp.Helpers
+
+<div class="interest">
+    <span class="value" style="@($"color: var({GameHelper.GetInterestColor(Value, 5)})")">
+        @Value
+    </span>
+    <span class="max-value">/5</span>
+</div>
+

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Interest/Interest.razor.cs

@@ -0,0 +1,8 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Interest;
+
+public partial class Interest
+{
+    [Parameter] public int Value { get; set; }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Interest/Interest.razor.css

@@ -0,0 +1,16 @@
+.interest {
+    position: relative;
+    display: flex;
+}
+
+.value {
+    align-content: center;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.max-value {
+    align-content: center;
+    transform: translate(2px, 10px);
+    color: rgb(184, 184, 184);
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs

@@ -39,4 +39,8 @@ public static class Icons
     public readonly static MarkupString Check = new(OpenBraket +
         "<path d=\"M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z\" />" +
         CloseBraket);
+
+    public readonly static MarkupString Back = new(OpenBraket +
+        "<path d=\"M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z\" />" +
+        CloseBraket);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -150,6 +150,7 @@ code {
 }
 
 .header-1, .header-2, span, a {
+    display: block;
     color: var(--white);
     margin: 0;
     padding: 0;