Premium themes (#619)

* Show premium themes in the online demo.

* Set the id of the theme dropdown.

* Update colors in theme picker

* Style theme picker with Pro badges

* Update pro themes.

Co-authored-by: yordanov <vasil@yordanov.info>

RadzenBlazorDemos/Services/ThemeService.cs

@@ -19,8 +19,9 @@ namespace RadzenBlazorDemos
             public string Content { get; set; }
             public string TitleText { get; set; }
             public string ContentText { get; set; }
+            public bool Premium { get; set; }
         }
-        public static readonly Theme[] Themes = new [] 
+        public static readonly Theme[] Themes = new []
         {
             new Theme {
                 Text = "Material",
@@ -34,6 +35,32 @@ namespace RadzenBlazorDemos
                 TitleText = "#212121",
                 ContentText = "#bdbdbd"
             },
+            new Theme {
+                Text = "Material Dark",
+                Value = "material-dark",
+                Premium = true,
+                Primary = "#bb86fc",
+                Secondary = "#01a299",
+                Base = "#121212",
+                Header = "#333333",
+                Sidebar = "#252525",
+                Content = "#252525",
+                TitleText = "#ffffff",
+                ContentText = "#a0a0a0"
+            },
+            new Theme {
+                Text = "Fluent",
+                Value = "fluent",
+                Premium = true,
+                Primary = "#0078d4",
+                Secondary = "#2b88d8",
+                Base = "#f5f5f5",
+                Header = "white",
+                Sidebar = "gray",
+                Content = "white",
+                TitleText = "black",
+                ContentText = "black"
+            },
             new Theme {
                 Text = "Standard",
                 Value = "standard",
@@ -58,7 +85,7 @@ namespace RadzenBlazorDemos
                 TitleText = "#28363c",
                 ContentText = "#95a4a8"
             },
-            new Theme { 
+            new Theme {
                 Text = "Dark",
                 Value="dark",
                 Primary = "#ff6d41",
@@ -82,7 +109,7 @@ namespace RadzenBlazorDemos
                 TitleText = "#2b3a50",
                 ContentText = "#7293b6"
             },
-            new Theme { 
+            new Theme {
                 Text = "Software",
                 Value = "software",
                 Primary = "#598087",

RadzenBlazorDemos/Shared/MainLayout.razor

@@ -28,7 +28,7 @@
                     <a href="/docs/" title="Radzen Blazor Components Documentation" class="mx-2 mx-lg-3" target="_blank">Documentation</a>
                     <a href="https://www.radzen.com/" title="Create .NET Core web applications fast & easy" class="text-nowrap mx-2 mx-lg-3" target="_blank">About Radzen</a>
                 </div>
-                <RadzenDropDown class="mx-0 mx-lg-3" style="width: 220px;" TValue="string" TextProperty="Text" ValueProperty="Value" Data="@ThemeService.Themes" Value="@ThemeService.CurrentTheme" Change="@ChangeTheme" >
+                <RadzenDropDown class="mx-0 mx-lg-3" id="themes" style="width: 220px;" TValue="string" TextProperty="Text" ValueProperty="Value" Data="@ThemeService.Themes" Value="@ThemeService.CurrentTheme" Change="@ChangeTheme" >
                     <ValueTemplate>
                         @context.Text Theme
                     </ValueTemplate>
@@ -47,6 +47,10 @@
                                 <rect width="80" height="6" fill="@context.Header"/>
                             </svg>
                             @context.Text
+                            @if (context.Premium)
+                            {
+                                <RadzenBadge title="To use it in your application you need an active Radzen Professional or Enterprise subscription.">PRO</RadzenBadge>
+                            }
                         </div>
                     </Template>
                 </RadzenDropDown>

RadzenBlazorDemos/Theme.razor

@@ -1,7 +1,13 @@
 @inject NavigationManager NavigationManager
 @inject ThemeService ThemeService
-<link href="_content/Radzen.Blazor/css/@(ThemeService.CurrentTheme)-base.css" rel="stylesheet" />
+
+<link href="@Href" rel="stylesheet" />
+
 @code {
+    bool IsPremiumTheme => ThemeService.CurrentTheme == "fluent" || ThemeService.CurrentTheme == "material-dark";
+
+    string Href => IsPremiumTheme ? $"/css/{ThemeService.CurrentTheme}-base.css" : $"_content/Radzen.Blazor/css/{ThemeService.CurrentTheme}-base.css";
+
     protected override void OnInitialized()
     {
         ThemeService.Initialize(NavigationManager);

RadzenBlazorDemos/wwwroot/css/site.css

@@ -242,6 +242,15 @@ body {
     text-decoration: none;
 }
 
+#popup-themes {
+    width: 300px !important;
+    height: 400px;
+}
+
+#popup-themes .rz-dropdown-items-wrapper {
+    max-height: 400px !important;
+}
+
 /* CTA Buttons */
 
 .cta-strip {