Redesign and placeholder installer view.

Wabbajack.App.Blazor/Components/Logo.razor

@@ -1,6 +0,0 @@
-<img class="logo" src="images/Logo_Dark_Transparent.png" alt="Wabbajack Logo">
-<img class="letters" src="images/Letters_Dark_Transparent.png" alt="Wabbajack Logo">
-
-@code {
-    
-}

Wabbajack.App.Blazor/Components/Logo.razor.scss

@@ -1,19 +0,0 @@
-.logo {
-  padding: 0.5rem 4rem;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  vertical-align: middle;
-  max-width: 100%;
-  height: auto;
-}
-
-.letters {
-  padding: 0.5rem 2rem;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  vertical-align: middle;
-  max-width: 100%;
-  height: auto;
-}

Wabbajack.App.Blazor/Components/ModlistItem.razor

@@ -1,17 +1,21 @@
-<div class="item">
+@namespace Wabbajack.App.Blazor.Components
-    <img src="@ImageURL" alt="@Title Image">
+
-    <div class="info">
+<div class="item">
-        <div class="title">@Title</div>
+    <div class="display">
-        <div class="description">@Description</div>
+        <img src="@Metadata.Links.ImageUri" class="image" alt="@Metadata.Title Image">
+        <div class="interaction">
+            <img src="images/icons/install.svg" class="install" alt="Install" @onclick="Download">
+            <img src="images/icons/info.svg" class="more" alt="Information">
         </div>
     </div>
-
+    @if (Status == DownloadStatus.Downloading)
-@code {
+    {
-    [Parameter]
+        <Progress Percentage=PercentDownloaded></Progress>
-    public string ImageURL { get; set; }
-    [Parameter]
-    public string Title { get; set; }
-    [Parameter]
-    public string Description { get; set; }
-    
     }
+    <div class="info">
+        <div class="title">@Metadata.Title</div>
+        <div class="author">@Metadata.Author</div>
+        <div class="description">@Metadata.Description</div>
+    </div>
+    <div class="tags"></div>
+</div>

Wabbajack.App.Blazor/Components/ModlistItem.razor.cs

@@ -0,0 +1,64 @@
+using System;
+using System.Diagnostics;
+using System.Reactive.Disposables;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Microsoft.CodeAnalysis;
+using Microsoft.Extensions.Logging;
+using Wabbajack.DTOs;
+using Wabbajack.Networking.WabbajackClientApi;
+using Wabbajack.RateLimiter;
+using Wabbajack.Services.OSIntegrated.Services;
+
+namespace Wabbajack.App.Blazor.Components
+{
+    public partial class ModlistItem
+    {
+        //[Inject] private ILogger                   _logger     { get; set; }
+        [Inject] private ModListDownloadMaintainer _maintainer { get; set; }
+        //[Inject] private Client                    _wjClient   { get; set; }
+
+        [Parameter] public ModlistMetadata Metadata { get; set; }
+
+        public  DownloadStatus      Status            { get; set; }
+        public  double             PercentDownloaded { get; set; }
+        private CompositeDisposable _disposables      { get; set; }
+
+        private async Task Download()
+        {
+            await using Timer timer = new(_ => InvokeAsync(StateHasChanged));
+            timer.Change(TimeSpan.FromMilliseconds(500), TimeSpan.FromMilliseconds(500));
+            try
+            {
+                _disposables = new CompositeDisposable();
+                Status       = DownloadStatus.Downloading;
+
+                (IObservable<Percent> progress, Task task) = _maintainer.DownloadModlist(Metadata);
+                IDisposable dispose = progress.Subscribe(p =>
+                {
+                    PercentDownloaded = p.Value * 100;
+                });
+
+                await task;
+                //await _wjClient.SendMetric("downloading", Metadata.Title);
+                //await UpdateStatus();
+                Debug.Print("##### WE DOWNLOADED THE THING!");
+                dispose.Dispose();
+            }
+            catch (Exception e)
+            {
+                Debug.Print(e.Message);
+            }
+
+            await timer.DisposeAsync();
+        }
+        
+        public enum DownloadStatus
+        {
+            NotDownloaded,
+            Downloading,
+            Downloaded
+        }
+    }
+}

Wabbajack.App.Blazor/Components/ModlistItem.razor.scss

@@ -1,28 +1,89 @@
-.item {
+@import "../Shared/Globals.scss";
+
+$display-height: 225px;
+$hover-icon-size: 75px;
+
+.item {
   width: 400px;
   height: 400px;
-  border-radius: 0.75rem;
   overflow: hidden;
-  margin: 1rem;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(7px);
+  -webkit-backdrop-filter: blur(7px);
+  border: 1px solid rgba(255, 255, 255, 0.31);
+
+  &:hover .display .image {
+    filter: blur(2px) brightness(70%);
+  }
+
+  &:hover .display .interaction {
+    opacity: 1;
+  }
+
+  .display {
+    position: relative;
+    height: $display-height;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .image {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: all 250ms ease-in-out;
+    }
+
+    .interaction {
+      position: absolute;
+      opacity: 0;
+      transition: all 250ms ease-in-out;
 
       img {
-    width: 100%;
+        width: $hover-icon-size;
-    height: 225px;
+        height: $hover-icon-size;
-    object-fit: cover;
+        margin: 0;
-    border-radius: 0.75rem;
+        transition: all 150ms ease-in-out;
+        
+        &:hover {
+          margin-left: 10px;
+          margin-right: 10px;
+          transform: scale(1.25);
+        }
+      }
+    }
   }
 
   .info {
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+
     .title {
       color: white;
       font-weight: 100;
-      font-size: 2.25rem;
+      font-size: 2rem;
       line-height: 2.5rem;
       margin: 0;
     }
 
+    .author {
+      color: lightgray;
+      font-size: 1rem;
+    }
+
     .description {
       color: grey;
+      font-size: 0.9rem;
     }
   }
+
+  .tags {
+    border-radius: 0.5rem;
+  }
 }

Wabbajack.App.Blazor/Components/Navbar.razor

@@ -1,11 +0,0 @@
-<nav>
-    <a href="">Home</a>
-    <a href="/gallery">Gallery</a>
-    <a href="">Install</a>
-    <a href="">Compile</a>
-    <a href="">Settings</a>
-</nav>
-
-@code {
-    
-}

Wabbajack.App.Blazor/Components/Navbar.razor.scss

@@ -1,20 +0,0 @@
-@use "../Shared/Globals";
-
-nav {
-  font-weight: 100;
-  font-size: 1.5em;
-  line-height: 2rem;
-  padding-top: 1rem;
-}
-
-a {
-  color: white;
-  display: block;
-  padding: 0.5rem 2rem;
-  text-decoration: none;
-  transition: background-color .25s ease-in-out;
-
-  &:hover {
-    background-color: Globals.$accent-color;
-  }
-}

Wabbajack.App.Blazor/Components/Progress.razor

@@ -0,0 +1,7 @@
+<progress value="@Percentage" max="100"> </progress>
+
+@code {
+
+    [Parameter]
+    public double Percentage { get; set; }
+}

Wabbajack.App.Blazor/Components/Progress.razor.scss

@@ -0,0 +1,5 @@
+progress {
+  width: 100%;
+  height: 3px;
+  appearance: none;
+} 

Wabbajack.App.Blazor/Components/Sidebar.razor

@@ -1,7 +0,0 @@
-<div class="sidebar">
-    <Logo/>
-    <Navbar/>
-</div>
-@code {
-    
-}

Wabbajack.App.Blazor/Components/Sidebar.razor.scss

@@ -1,7 +0,0 @@
-@use "../Shared/Globals";
-
-.sidebar {
-  background-color: Globals.$secondary-background-color;
-  color: white;
-  width: 18rem;
-}

Wabbajack.App.Blazor/Components/TopBar.razor

@@ -0,0 +1,21 @@
+<header id="top-bar">
+    <nav>
+        <ul>
+            <li>
+                <a href="/">Home</a>
+            </li>
+            <li>
+                <a href="/gallery">Gallery</a>
+            </li>
+            <li>
+                <a href="/install">Install</a>
+            </li>
+            <li>
+                <a href="/">Compile</a>
+            </li>
+            <li>
+                <a href="/">Settings</a>
+            </li>
+        </ul>
+    </nav>
+</header>

Wabbajack.App.Blazor/Components/TopBar.razor.scss

@@ -0,0 +1,39 @@
+@import "../Shared/Globals.scss";
+
+#top-bar {
+  position: fixed;
+  width: calc(100% - #{$sidebar-width});
+  height: $header-height;
+  background-color: transparent;
+  backdrop-filter: blur(5px) grayscale(10%);
+  z-index: 2;
+
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: 10px;
+
+  nav {
+    font-weight: 100;
+    font-size: 1.1em;
+    line-height: 2rem;
+  }
+  
+  ul {
+    li {
+      display: inline-block;
+      margin-right: 10px;
+      a {
+        color: white;
+        display: block;
+        padding: 0.5rem 2rem;
+        text-decoration: none;
+        transition: background-color .25s ease-in-out;
+
+        &:hover {
+          border-bottom: 2px solid $accent-color;
+        }
+      }
+    }
+  }
+}

Wabbajack.App.Blazor/MainWindow.xaml

@@ -6,7 +6,7 @@
         xmlns:local="clr-namespace:Wabbajack.App.Blazor"
         xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
         mc:Ignorable="d"
-        Title="MainWindow" Height="600" Width="1000" MinHeight="600" MinWidth="900">
+        Title="MainWindow" Height="750" Width="1200" MinHeight="600" MinWidth="900">
     <Grid Background="#121212">
         <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{StaticResource services}" x:Name="blazorWebView1">
             <blazor:BlazorWebView.RootComponents>

Wabbajack.App.Blazor/Pages/Gallery.razor

@@ -8,35 +8,24 @@
 @inject Client _client
 
 <div id="content">
-    @foreach (ModListItem item in listItems)
+    @if (_listItems.Count > 0)
     {
-        <ModlistItem ImageURL=@item.ImageURL Title=@item.Title Description=@item.Description></ModlistItem>
+        foreach (ModlistMetadata item in _listItems)
+        {
+            <ModlistItem Metadata=@item></ModlistItem>
+        }
     }
 </div>
 
 @code {
-    List<ModListItem> listItems = new();
+    List<ModlistMetadata> _listItems = new();
-
-    private class ModListItem
-    {
-        public readonly string Title;
-        public readonly string Description;
-        public readonly string ImageURL;
-
-        public ModListItem(string title, string description, string imageUrl)
-        {
-            Description = description;
-            ImageURL = imageUrl;
-            Title = title;
-        }
-    }
 
     protected override async Task OnInitializedAsync()
     {
         try
         {
             ModlistMetadata[] modLists = await _client.LoadLists();
-            listItems = modLists.Select(x => new ModListItem(x.Title, x.Description, x.Links.ImageUri)).ToList();
+            _listItems = modLists.ToList();
             StateHasChanged();
         }
         catch (Exception ex)

Wabbajack.App.Blazor/Pages/Install.razor

@@ -0,0 +1,26 @@
+@page "/install"
+@layout Shared.MainLayout
+
+<div id="content">
+    <div class="image"></div>
+    <div class="info">
+        <div class="step">Downloading</div>
+        <div class="description">Downloading missing archives...</div>
+        <div class="number">16 of 228 archives downloaded</div>
+        <div class="number">128.27 GB remaining</div>
+        <div class="number">5.6 MB/s</div>
+        <div class="log">
+            <p>Downloaded A Cool Mod</p>
+            <p>Downloaded Some Mod With a Long Name</p>
+            <p>Downloaded An Even Longer Name Why Do They Do This</p>
+            <p>Downloaded An Archive From MEGA Wow It's a Miracle</p>
+            <p>Downloaded Archive Mod Something Long</p>
+        </div>
+    </div>
+    <div class="preview">
+        <div class="mod-image"></div>
+        <div class="mod-name">Manbeast - A Werewolf Overhaul</div>
+        <div class="mod-author">Simon Magus and colinswrath</div>
+        <div class="mod-info">Manbeast is a complete overhaul of Skyrim’s Werewolf system designed to balance existing Werewolf mechanics and add powerful new lycanthropic abilities to the game.</div>
+    </div>
+</div>

Wabbajack.App.Blazor/Pages/Install.razor.cs

@@ -0,0 +1,5 @@
+namespace Wabbajack.App.Blazor.Pages;
+
+public partial class Install
+{
+}

Wabbajack.App.Blazor/Pages/Install.razor.scss

@@ -0,0 +1,77 @@
+@import "../Shared/Globals.scss";
+
+#content {
+  display: flex;
+  height: 100%;
+  align-content: center;
+  justify-content: space-around;
+  align-items: center;
+  color: white;
+  
+  .image {
+    position: absolute;
+    background-image: url("images/modlist-image.png");
+    width: calc(100% - #{$sidebar-width});
+    height: calc(100% - #{$header-height});
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    filter: blur(25px) brightness(50%);
+    z-index: -1;
+  }
+  .info {
+    width: fit-content;
+    height: fit-content;
+    
+    .step {
+      margin-left: -20px;
+      font-size: 5rem;
+      font-weight: 100;
+    }
+    
+    .description {
+      margin-left: -10px;
+      font-size: 2rem;
+      font-weight: 100;
+    }
+    
+    .number {
+      color: rgba(255, 255, 255, 0.75);
+    }
+    .log {
+      margin-top: 20px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+  .preview {
+    width: 800px;
+    height: 450px;
+    margin-top: -150px;
+    .mod-feature {
+      margin-left: -10px;
+      font-size: 2rem;
+      font-weight: 100;
+    }
+    .mod-image {
+      background-image: url("https://staticdelivery.nexusmods.com/mods/1704/images/44746/44746-1611463256-105629958.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      width: 100%;
+      height: 100%;
+    }
+    .mod-name {
+      font-size: 2rem;
+      font-weight: 100;
+    } 
+    .mod-author {
+      font-size: 1.1rem;
+      font-weight: 100;
+    }
+    .mod-info {
+      margin-top: 20px;
+      margin-left: 10px;
+      color: rgba(255, 255, 255, 0.75);
+    }
+  }
+}

Wabbajack.App.Blazor/Shared/Globals.scss

@@ -1,3 +1,6 @@
 $primary-background-color: #121212;
 $secondary-background-color: #0A0A0A;
 $accent-color: #5E437F;
+
+$header-height: 65px;
+$sidebar-width: 75px;

Wabbajack.App.Blazor/Shared/MainLayout.razor

@@ -1,13 +1,13 @@
-@using Components
+@inherits LayoutComponentBase
-@inherits LayoutComponentBase
 
 @* This is required because layout components can't access scoped CSS. *@
 <link rel="stylesheet" href="MainLayout.Razor.css">
 
-<div class="main">
+<div id="background"></div>
-    <Sidebar/>
+<SideBar/>
-    <div class="page">
+<div id="wrapper">
+    <TopBar/>
+    <div id="page">
         @Body
     </div>
-
 </div>

Wabbajack.App.Blazor/Shared/MainLayout.razor.scss

@@ -1,13 +1,20 @@
-@use "Globals";
+@import "./Globals.scss";
 
-.main {
+#background {
-  position: relative;
+  position: fixed;
-  display: flex;
+  height: 100vh;
-  background-color: Globals.$primary-background-color;
+  width: 100%;
-  min-height: 100vh;
+  background: linear-gradient(320deg, #151022, #1f0d2a, #100214);
+  z-index: -1;
 }
 
-.page {
+#wrapper {
-  padding: 0.5rem;
+  width: calc(100% - #{$sidebar-width});
-  flex: 1 1 0;
+  float: right;
+  height: 100%;
+}
+
+#page {
+  margin-top: $header-height;
+  height: calc(100% - #{$sidebar-width});
 }

Wabbajack.App.Blazor/Wabbajack.App.Blazor.csproj

@@ -26,6 +26,9 @@
     <ItemGroup>
         <Content Remove="Pages\*.scss" />
         <Content Include="Pages\*.scss" Watch="false" />
+        <Content Update="wwwroot\*">
+          <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+        </Content>
     </ItemGroup>
 
     <ItemGroup>

Wabbajack.App.Blazor/wwwroot/images/icons/discord.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+     width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+    <path d="M9.593 10.971c-.542 0-.969.475-.969 1.055c0 .578.437 1.055.969 1.055c.541 0 .968-.477.968-1.055c.011-.581-.427-1.055-.968-1.055zm3.468 0c-.542 0-.969.475-.969 1.055c0 .578.437 1.055.969 1.055c.541 0 .968-.477.968-1.055c-.001-.581-.427-1.055-.968-1.055z"
+          fill="#FFF"/>
+    <path d="M17.678 3H4.947A1.952 1.952 0 0 0 3 4.957v12.844c0 1.083.874 1.957 1.947 1.957H15.72l-.505-1.759l1.217 1.131l1.149 1.064L19.625 22V4.957A1.952 1.952 0 0 0 17.678 3zM14.01 15.407s-.342-.408-.626-.771c1.244-.352 1.719-1.13 1.719-1.13c-.39.256-.76.438-1.093.562a6.679 6.679 0 0 1-3.838.398a7.944 7.944 0 0 1-1.396-.41a5.402 5.402 0 0 1-.693-.321c-.029-.021-.057-.029-.085-.048a.117.117 0 0 1-.039-.03c-.171-.094-.266-.16-.266-.16s.456.76 1.663 1.121c-.285.36-.637.789-.637.789c-2.099-.067-2.896-1.444-2.896-1.444c0-3.059 1.368-5.538 1.368-5.538c1.368-1.027 2.669-.998 2.669-.998l.095.114c-1.71.495-2.499 1.245-2.499 1.245s.21-.114.561-.275c1.016-.446 1.823-.57 2.156-.599c.057-.009.105-.019.162-.019a7.756 7.756 0 0 1 4.778.893s-.751-.712-2.366-1.206l.133-.152s1.302-.029 2.669.998c0 0 1.368 2.479 1.368 5.538c0-.001-.807 1.376-2.907 1.443z"
+          fill="#FFF"/>
+</svg>

Wabbajack.App.Blazor/wwwroot/images/icons/disk.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+     width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36">
+    <path class="clr-i-outline clr-i-outline-path-1"
+          d="M34 21.08L30.86 8.43A2 2 0 0 0 28.94 7H7.06a2 2 0 0 0-1.93 1.47L2 21.08a1 1 0 0 0 0 .24V29a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2v-7.69a1 1 0 0 0 0-.23zM4 29v-7.56L7.06 9h21.87L32 21.44V29z"
+          fill="#FFF"/>
+    <path class="clr-i-outline clr-i-outline-path-2" d="M6 20h24v2H6z" fill="#FFF"/>
+    <path class="clr-i-outline clr-i-outline-path-3" d="M26 24h4v2h-4z" fill="#FFF"/>
+</svg>

Wabbajack.App.Blazor/wwwroot/images/icons/github.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+     width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+    <g fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+              d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
+              fill="#FFF"/>
+    </g>
+</svg>

Wabbajack.App.Blazor/wwwroot/images/icons/info.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+     width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372z"
+          fill="#FFF"/>
+    <path d="M464 336a48 48 0 1 0 96 0a48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+          fill="#FFF"/>
+</svg>

Wabbajack.App.Blazor/wwwroot/images/icons/install.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+     width="1024" height="1024" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
+    <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+          fill="#FFF"/>
+</svg>

Wabbajack.App.Blazor/wwwroot/images/icons/patreon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+     width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+    <circle cx="14.508" cy="9.831" r="6.496" fill="#FFF"/>
+    <path d="M2.996 3.335H6.17v17.33H2.996z" fill="#FFF"/>
+</svg>

Wabbajack.App.Blazor/wwwroot/images/icons/play.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+     width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372z"
+          fill="#FFF"/>
+    <path d="M719.4 499.1l-296.1-215A15.9 15.9 0 0 0 398 297v430c0 13.1 14.8 20.5 25.3 12.9l296.1-215a15.9 15.9 0 0 0 0-25.8zm-257.6 134V390.9L628.5 512L461.8 633.1z"
+          fill="#FFF"/>
+</svg>