From d477e803abdcbfd70f99b4a008a4ec4a095b35de Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Sat, 4 Jan 2025 10:37:40 +0100
Subject: [PATCH] Upgraded mooncore packages. Added css variables for theming.
 Made all db calls use async/await

---
 .../Admin/ApiKeys/ApiKeysController.cs        |   2 +-
 .../OAuth2/LocalOAuth2Provider.cs             |   8 +-
 .../Moonlight.ApiServer.csproj                |   2 +-
 Moonlight.Client/Moonlight.Client.csproj      |   2 +-
 Moonlight.Client/Styles/additions/theme.css   | 122 ++++++++++++
 Moonlight.Client/Styles/mappings/mooncore.map |   9 +-
 Moonlight.Client/Styles/style.css             |   1 +
 Moonlight.Client/Styles/tailwind.config.js    | 179 +++++++++---------
 8 files changed, 224 insertions(+), 101 deletions(-)
 create mode 100644 Moonlight.Client/Styles/additions/theme.css

diff --git a/Moonlight.ApiServer/Http/Controllers/Admin/ApiKeys/ApiKeysController.cs b/Moonlight.ApiServer/Http/Controllers/Admin/ApiKeys/ApiKeysController.cs
index ead47432..7994b2c2 100644
--- a/Moonlight.ApiServer/Http/Controllers/Admin/ApiKeys/ApiKeysController.cs
+++ b/Moonlight.ApiServer/Http/Controllers/Admin/ApiKeys/ApiKeysController.cs
@@ -47,7 +47,7 @@ public class ApiKeysController : Controller
             Secret = secret
         };
 
-        var finalApiKey = ApiKeyRepository.Add(apiKey);
+        var finalApiKey = await ApiKeyRepository.Add(apiKey);
         
         return Mapper.Map<CreateApiKeyResponse>(finalApiKey);
     }
diff --git a/Moonlight.ApiServer/Implementations/OAuth2/LocalOAuth2Provider.cs b/Moonlight.ApiServer/Implementations/OAuth2/LocalOAuth2Provider.cs
index d1c82cc0..d4c43d92 100644
--- a/Moonlight.ApiServer/Implementations/OAuth2/LocalOAuth2Provider.cs
+++ b/Moonlight.ApiServer/Implementations/OAuth2/LocalOAuth2Provider.cs
@@ -41,7 +41,7 @@ public class LocalOAuth2Provider : ILocalProviderImplementation<User>
         return Task.FromResult(user);
     }
 
-    public Task<User> Register(string username, string email, string password)
+    public async Task<User> Register(string username, string email, string password)
     {
         if (UserRepository.Get().Any(x => x.Username == username))
             throw new HttpApiException("A user with that username already exists", 400);
@@ -56,8 +56,8 @@ public class LocalOAuth2Provider : ILocalProviderImplementation<User>
             Password = HashHelper.Hash(password)
         };
 
-        var finalUser = UserRepository.Add(user);
-        
-        return Task.FromResult(finalUser);
+        var finalUser = await UserRepository.Add(user);
+
+        return finalUser;
     }
 }
\ No newline at end of file
diff --git a/Moonlight.ApiServer/Moonlight.ApiServer.csproj b/Moonlight.ApiServer/Moonlight.ApiServer.csproj
index e5920de0..a50dfe2d 100644
--- a/Moonlight.ApiServer/Moonlight.ApiServer.csproj
+++ b/Moonlight.ApiServer/Moonlight.ApiServer.csproj
@@ -25,7 +25,7 @@
           <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
         <PackageReference Include="MoonCore" Version="1.8.1" />
-        <PackageReference Include="MoonCore.Extended" Version="1.2.4" />
+        <PackageReference Include="MoonCore.Extended" Version="1.2.5" />
         <PackageReference Include="MoonCore.PluginFramework" Version="1.0.5" />
         <PackageReference Include="Pomelo.EntityFrameworkCore.MySql" Version="8.0.2" />
         <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0"/>
diff --git a/Moonlight.Client/Moonlight.Client.csproj b/Moonlight.Client/Moonlight.Client.csproj
index 30538555..3e5e257b 100644
--- a/Moonlight.Client/Moonlight.Client.csproj
+++ b/Moonlight.Client/Moonlight.Client.csproj
@@ -27,7 +27,7 @@
         <PackageReference Include="MoonCore" Version="1.8.1" />
         <PackageReference Include="MoonCore.Blazor" Version="1.2.8" />
         <PackageReference Include="MoonCore.PluginFramework" Version="1.0.5"/>
-        <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.2.2" />
+        <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.2.3" />
     </ItemGroup>
 
     <!-- 
diff --git a/Moonlight.Client/Styles/additions/theme.css b/Moonlight.Client/Styles/additions/theme.css
new file mode 100644
index 00000000..0bef641d
--- /dev/null
+++ b/Moonlight.Client/Styles/additions/theme.css
@@ -0,0 +1,122 @@
+@layer base {
+    :root {
+        
+        /* Color Variables */
+        
+        /* Primary */
+        
+        --color-primary-50: 238 242 255;
+        --color-primary-100: 224 231 255;
+        --color-primary-200: 199 210 254;
+        --color-primary-300: 165 180 252;
+        --color-primary-400: 129 140 248;
+        --color-primary-500: 99 102 241;
+        --color-primary-600: 79 70 229;
+        --color-primary-700: 67 56 202;
+        --color-primary-800: 55 48 163;
+        --color-primary-900: 49 46 129;
+        --color-primary-950: 30 27 75;
+        
+        /* Secondary */
+        
+        --color-secondary-100: 249 249 249;
+        --color-secondary-200: 241 241 242;
+        --color-secondary-300: 219 223 233;
+        --color-secondary-400: 181 181 195;
+        --color-secondary-500: 153 161 183;
+        --color-secondary-600: 112 121 147;
+        --color-secondary-700: 68 78 107;
+        --color-secondary-800: 28 36 56;
+        --color-secondary-900: 17 23 33;
+        --color-secondary-950: 14 18 28;
+        
+        /* Tertiary */
+        
+        --color-tertiary-50: 245 243 255;
+        --color-tertiary-100: 237 233 254;
+        --color-tertiary-200: 221 214 254;
+        --color-tertiary-300: 196 181 253;
+        --color-tertiary-400: 167 139 250;
+        --color-tertiary-500: 139 92 246;
+        --color-tertiary-600: 124 58 237;
+        --color-tertiary-700: 109 40 217;
+        --color-tertiary-800: 91 33 182;
+        --color-tertiary-900: 76 29 149;
+        --color-tertiary-950: 46 16 101;
+        
+        /* Warning */
+        
+        --color-warning-50: 254 252 232;
+        --color-warning-100: 254 249 195;
+        --color-warning-200: 254 240 138;
+        --color-warning-300: 253 224 71;
+        --color-warning-400: 250 204 21;
+        --color-warning-500: 234 179 8;
+        --color-warning-600: 202 138 4;
+        --color-warning-700: 161 98 7;
+        --color-warning-800: 133 77 14;
+        --color-warning-900: 113 63 18;
+        --color-warning-950: 66 32 6;
+        
+        /* Danger */
+        
+        --color-danger-50: 254 242 242;
+        --color-danger-100: 254 226 226;
+        --color-danger-200: 254 202 202;
+        --color-danger-300: 252 165 165;
+        --color-danger-400: 248 113 113;
+        --color-danger-500: 239 68 68;
+        --color-danger-600: 220 38 38;
+        --color-danger-700: 185 28 28;
+        --color-danger-800: 153 27 27;
+        --color-danger-900: 127 29 29;
+        --color-danger-950: 69 10 10;
+        
+        /* Success */
+        
+        --color-success-50: 240 253 244;
+        --color-success-100: 220 252 231;
+        --color-success-200: 187 247 208;
+        --color-success-300: 134 239 172;
+        --color-success-400: 74 222 128;
+        --color-success-500: 34 197 94;
+        --color-success-600: 22 163 74;
+        --color-success-700: 21 128 61;
+        --color-success-800: 22 101 52;
+        --color-success-900: 20 83 45;
+        --color-success-950: 5 46 22;
+        
+        /* Info */
+        
+        --color-info-50: 239 246 255;
+        --color-info-100: 219 234 254;
+        --color-info-200: 191 219 254;
+        --color-info-300: 147 197 253;
+        --color-info-400: 96 165 250;
+        --color-info-500: 59 130 246;
+        --color-info-600: 37 99 235;
+        --color-info-700: 29 78 216;
+        --color-info-800: 30 64 175;
+        --color-info-900: 30 58 138;
+        --color-info-950: 23 37 84;
+        
+        /* Gray */
+        
+        --color-gray-100: 249 249 249;
+        --color-gray-200: 241 241 242;
+        --color-gray-300: 219 223 233;
+        --color-gray-400: 181 181 195;
+        --color-gray-500: 153 161 183;
+        --color-gray-600: 112 121 147;
+        --color-gray-700: 68 78 107;
+        --color-gray-750: 41 50 73;
+        --color-gray-800: 28 36 56;
+        --color-gray-900: 17 23 33;
+        --color-gray-950: 14 18 28;
+
+        /* Full Colors */
+        
+        --color-light: 255 255 255;
+        --color-dark: 0 0 0;
+    }
+}
\ No newline at end of file
diff --git a/Moonlight.Client/Styles/mappings/mooncore.map b/Moonlight.Client/Styles/mappings/mooncore.map
index 746a4e01..a6dd7db8 100755
--- a/Moonlight.Client/Styles/mappings/mooncore.map
+++ b/Moonlight.Client/Styles/mappings/mooncore.map
@@ -108,7 +108,6 @@
   "font-inter",
   "font-medium",
   "font-normal",
-  "font-scp",
   "font-semibold",
   "form-checkbox",
   "form-input",
@@ -121,6 +120,7 @@
   "gap-x-2",
   "gap-x-3",
   "gap-x-4",
+  "gap-x-5",
   "gap-x-6",
   "gap-y-2",
   "gap-y-5",
@@ -188,7 +188,6 @@
   "lg:inset-y-0",
   "lg:items-center",
   "lg:last:pr-8",
-  "lg:max-w-5xl",
   "lg:pl-72",
   "lg:px-8",
   "lg:w-72",
@@ -264,7 +263,6 @@
   "p-2.5",
   "p-4",
   "p-5",
-  "pb-1",
   "pb-3",
   "pb-4",
   "pl-12",
@@ -279,7 +277,6 @@
   "pr-3",
   "pr-8",
   "pt-0.5",
-  "pt-4",
   "pt-5",
   "pt-6",
   "px-2",
@@ -387,13 +384,15 @@
   "text-lg",
   "text-primary-500",
   "text-red-500",
-  "text-slate-400",
+  "text-secondary-500",
+  "text-secondary-600",
   "text-slate-600",
   "text-sm",
   "text-success-400",
   "text-success-500",
   "text-tertiary-500",
   "text-warning-400",
+  "text-warning-500",
   "text-white",
   "text-xl",
   "text-xs",
diff --git a/Moonlight.Client/Styles/style.css b/Moonlight.Client/Styles/style.css
index ae019c1d..d813692a 100644
--- a/Moonlight.Client/Styles/style.css
+++ b/Moonlight.Client/Styles/style.css
@@ -1,6 +1,7 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 
+@import "additions/theme.css";
 @import "additions/animations.css";
 @import "additions/fonts.css";
 @import "additions/buttons.css";
diff --git a/Moonlight.Client/Styles/tailwind.config.js b/Moonlight.Client/Styles/tailwind.config.js
index 1ac81f62..f10f2aa8 100644
--- a/Moonlight.Client/Styles/tailwind.config.js
+++ b/Moonlight.Client/Styles/tailwind.config.js
@@ -12,109 +12,110 @@ module.exports = {
             },
             colors: {
                 primary: {
-                    50: '#eef2ff',
-                    100: '#e0e7ff',
-                    200: '#c7d2fe',
-                    300: '#a5b4fc',
-                    400: '#818cf8',
-                    500: '#6366f1',
-                    600: '#4f46e5',
-                    700: '#4338ca',
-                    800: '#3730a3',
-                    900: '#312e81',
-                    950: '#1e1b4b'
+                    50: 'rgb(var(--color-primary-50))',
+                    100: 'rgb(var(--color-primary-100))',
+                    200: 'rgb(var(--color-primary-200))',
+                    300: 'rgb(var(--color-primary-300))',
+                    400: 'rgb(var(--color-primary-400))',
+                    500: 'rgb(var(--color-primary-500))',
+                    600: 'rgb(var(--color-primary-600))',
+                    700: 'rgb(var(--color-primary-700))',
+                    800: 'rgb(var(--color-primary-800))',
+                    900: 'rgb(var(--color-primary-900))',
+                    950: 'rgb(var(--color-primary-950))'
                 },
                 secondary: {
-                    100: '#F9F9F9',
-                    200: '#F1F1F2',
-                    300: '#DBDFE9',
-                    400: '#B5B5C3',
-                    500: '#99A1B7',
-                    600: '#707993',
-                    700: '#444e6b',
-                    750: '#293249',
-                    800: '#1c2438',
-                    900: '#111721',
-                    950: '#0e121c',
+                    100: 'rgb(var(--color-secondary-100))',
+                    200: 'rgb(var(--color-secondary-200))',
+                    300: 'rgb(var(--color-secondary-300))',
+                    400: 'rgb(var(--color-secondary-400))',
+                    500: 'rgb(var(--color-secondary-500))',
+                    600: 'rgb(var(--color-secondary-600))',
+                    700: 'rgb(var(--color-secondary-700))',
+                    800: 'rgb(var(--color-secondary-800))',
+                    900: 'rgb(var(--color-secondary-900))',
+                    950: 'rgb(var(--color-secondary-950))'
                 },
                 tertiary: {
-                    50: '#f5f3ff',
-                    100: '#ede9fe',
-                    200: '#ddd6fe',
-                    300: '#c4b5fd',
-                    400: '#a78bfa',
-                    500: '#8b5cf6',
-                    600: '#7c3aed',
-                    700: '#6d28d9',
-                    800: '#5b21b6',
-                    900: '#4c1d95',
-                    950: '#2e1065'
+                    50: 'rgb(var(--color-tertiary-50))',
+                    100: 'rgb(var(--color-tertiary-100))',
+                    200: 'rgb(var(--color-tertiary-200))',
+                    300: 'rgb(var(--color-tertiary-300))',
+                    400: 'rgb(var(--color-tertiary-400))',
+                    500: 'rgb(var(--color-tertiary-500))',
+                    600: 'rgb(var(--color-tertiary-600))',
+                    700: 'rgb(var(--color-tertiary-700))',
+                    800: 'rgb(var(--color-tertiary-800))',
+                    900: 'rgb(var(--color-tertiary-900))',
+                    950: 'rgb(var(--color-tertiary-950))'
                 },
                 warning: {
-                    50: '#fefce8',
-                    100: '#fef9c3',
-                    200: '#fef08a',
-                    300: '#fde047',
-                    400: '#facc15',
-                    500: '#eab308',
-                    600: '#ca8a04',
-                    700: '#a16207',
-                    800: '#854d0e',
-                    900: '#713f12',
-                    950: '#422006'
+                    50: 'rgb(var(--color-warning-50))',
+                    100: 'rgb(var(--color-warning-100))',
+                    200: 'rgb(var(--color-warning-200))',
+                    300: 'rgb(var(--color-warning-300))',
+                    400: 'rgb(var(--color-warning-400))',
+                    500: 'rgb(var(--color-warning-500))',
+                    600: 'rgb(var(--color-warning-600))',
+                    700: 'rgb(var(--color-warning-700))',
+                    800: 'rgb(var(--color-warning-800))',
+                    900: 'rgb(var(--color-warning-900))',
+                    950: 'rgb(var(--color-warning-950))'
                 },
                 danger: {
-                    50: '#fef2f2',
-                    100: '#fee2e2',
-                    200: '#fecaca',
-                    300: '#fca5a5',
-                    400: '#f87171',
-                    500: '#ef4444',
-                    600: '#dc2626',
-                    700: '#b91c1c',
-                    800: '#991b1b',
-                    900: '#7f1d1d',
-                    950: '#450a0a'
+                    50: 'rgb(var(--color-danger-50))',
+                    100: 'rgb(var(--color-danger-100))',
+                    200: 'rgb(var(--color-danger-200))',
+                    300: 'rgb(var(--color-danger-300))',
+                    400: 'rgb(var(--color-danger-400))',
+                    500: 'rgb(var(--color-danger-500))',
+                    600: 'rgb(var(--color-danger-600))',
+                    700: 'rgb(var(--color-danger-700))',
+                    800: 'rgb(var(--color-danger-800))',
+                    900: 'rgb(var(--color-danger-900))',
+                    950: 'rgb(var(--color-danger-950))'
                 },
                 success: {
-                    50: '#f0fdf4',
-                    100: '#dcfce7',
-                    200: '#bbf7d0',
-                    300: '#86efac',
-                    400: '#4ade80',
-                    500: '#22c55e',
-                    600: '#16a34a',
-                    700: '#15803d',
-                    800: '#166534',
-                    900: '#14532d',
-                    950: '#052e16'
+                    50: 'rgb(var(--color-success-50))',
+                    100: 'rgb(var(--color-success-100))',
+                    200: 'rgb(var(--color-success-200))',
+                    300: 'rgb(var(--color-success-300))',
+                    400: 'rgb(var(--color-success-400))',
+                    500: 'rgb(var(--color-success-500))',
+                    600: 'rgb(var(--color-success-600))',
+                    700: 'rgb(var(--color-success-700))',
+                    800: 'rgb(var(--color-success-800))',
+                    900: 'rgb(var(--color-success-900))',
+                    950: 'rgb(var(--color-success-950))'
                 },
                 info: {
-                    50: '#eff6ff',
-                    100: '#dbeafe',
-                    200: '#bfdbfe',
-                    300: '#93c5fd',
-                    400: '#60a5fa',
-                    500: '#3b82f6',
-                    600: '#2563eb',
-                    700: '#1d4ed8',
-                    800: '#1e40af',
-                    900: '#1e3a8a',
-                    950: '#172554'
+                    50: 'rgb(var(--color-info-50))',
+                    100: 'rgb(var(--color-info-100))',
+                    200: 'rgb(var(--color-info-200))',
+                    300: 'rgb(var(--color-info-300))',
+                    400: 'rgb(var(--color-info-400))',
+                    500: 'rgb(var(--color-info-500))',
+                    600: 'rgb(var(--color-info-600))',
+                    700: 'rgb(var(--color-info-700))',
+                    800: 'rgb(var(--color-info-800))',
+                    900: 'rgb(var(--color-info-900))',
+                    950: 'rgb(var(--color-info-950))'
                 },
                 gray: {
-                    100: '#F9F9F9',
-                    200: '#F1F1F2',
-                    300: '#DBDFE9',
-                    400: '#B5B5C3',
-                    500: '#99A1B7',
-                    600: '#707993',
-                    700: '#444e6b',
-                    750: '#293249',
-                    800: '#1c2438',
-                    900: '#111721',
-                    950: '#0e121c',
-                }
+                    100: 'rgb(var(--color-gray-100))',
+                    200: 'rgb(var(--color-gray-200))',
+                    300: 'rgb(var(--color-gray-300))',
+                    400: 'rgb(var(--color-gray-400))',
+                    500: 'rgb(var(--color-gray-500))',
+                    600: 'rgb(var(--color-gray-600))',
+                    700: 'rgb(var(--color-gray-700))',
+                    750: 'rgb(var(--color-gray-750))',
+                    800: 'rgb(var(--color-gray-800))',
+                    900: 'rgb(var(--color-gray-900))',
+                    950: 'rgb(var(--color-gray-950))'
+                },
+                white: 'rgb(var(--color-light))',
+                black: 'rgb(var(--color-dark))'
             },
             animation: {
                 'shimmer': 'shimmer 2s linear infinite',