Add free badges and messages

Author: mythz

BlazorDiffusion/Components/Account/Pages/Login.razor

@@ -14,6 +14,8 @@
 
 <div class="mt-8 mx-auto max-w-lg">
     <div class="max-w-xl">
+        <h2 class="mb-8 text-center text-xl font-semibold leading-7 text-indigo-400">Generate Images for FREE!</h2>
+
         <Heading1>Use a local account to log in.</Heading1>
         <StatusMessage class="mb-3" Message="@errorMessage" />
         <section class="mt-4 sm:shadow overflow-hidden sm:rounded-md">

BlazorDiffusion/Components/Shared/SignInLink.razor

@@ -1,6 +1,7 @@
 @if (!HttpContext.User.IsAuthenticated())
 {
-    <div>
+    <div class="flex items-center">
+        <a href="/Account/Login" class="mr-4"><span class="inline-flex items-center rounded-md bg-sky-500/10 px-2 py-1 text-xs font-medium text-sky-400 ring-1 ring-inset ring-sky-500/20">Create for FREE!</span></a>
         <a href="/Account/Login" class="signin-link cursor-pointer -mx-3 block rounded-lg px-3 py-1.5 text-base font-semibold leading-7 text-white hover:bg-gray-800">Sign in &rarr;</a>
     </div>
 }

BlazorDiffusion/wwwroot/css/app.css

@@ -1553,10 +1553,6 @@ select{
   width: 1.75rem;
 }
 
-.w-72 {
-  width: 18rem;
-}
-
 .w-8 {
   width: 2rem;
 }
@@ -1597,10 +1593,6 @@ select{
   width: 100vw;
 }
 
-.w-64 {
-  width: 16rem;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -2218,6 +2210,11 @@ select{
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
+.border-indigo-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(67 56 202 / var(--tw-border-opacity));
+}
+
 .border-red-300 {
   --tw-border-opacity: 1;
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
@@ -2262,26 +2259,6 @@ select{
   border-color: rgb(234 179 8 / var(--tw-border-opacity));
 }
 
-.border-indigo-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(49 46 129 / var(--tw-border-opacity));
-}
-
-.border-indigo-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(79 70 229 / var(--tw-border-opacity));
-}
-
-.border-gray-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 24 39 / var(--tw-border-opacity));
-}
-
-.border-indigo-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(67 56 202 / var(--tw-border-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -2395,9 +2372,9 @@ select{
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
-.bg-indigo-800 {
+.bg-indigo-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(55 48 163 / var(--tw-bg-opacity));
+  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
 }
 
 .bg-indigo-900 {
@@ -2440,6 +2417,10 @@ select{
   background-color: rgb(14 165 233 / var(--tw-bg-opacity));
 }
 
+.bg-sky-500\/10 {
+  background-color: rgb(14 165 233 / 0.1);
+}
+
 .bg-sky-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(2 132 199 / var(--tw-bg-opacity));
@@ -2463,27 +2444,6 @@ select{
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
-.bg-indigo-900\/10 {
-  background-color: rgb(49 46 129 / 0.1);
-}
-
-.bg-indigo-900\/90 {
-  background-color: rgb(49 46 129 / 0.9);
-}
-
-.bg-indigo-900\/50 {
-  background-color: rgb(49 46 129 / 0.5);
-}
-
-.bg-indigo-900\/75 {
-  background-color: rgb(49 46 129 / 0.75);
-}
-
-.bg-indigo-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -3128,6 +3088,11 @@ select{
   color: rgb(186 230 253 / var(--tw-text-opacity));
 }
 
+.text-sky-400 {
+  --tw-text-opacity: 1;
+  color: rgb(56 189 248 / var(--tw-text-opacity));
+}
+
 .text-sky-500 {
   --tw-text-opacity: 1;
   color: rgb(14 165 233 / var(--tw-text-opacity));
@@ -3284,10 +3249,8 @@ select{
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.ring-2 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+.ring-inset {
+  --tw-ring-inset: inset;
 }
 
 .ring-black {
@@ -3300,38 +3263,32 @@ select{
   --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
 }
 
-.ring-indigo-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
-}
-
-.ring-red-500 {
+.ring-gray-800 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-900\/5 {
-  --tw-ring-color: rgb(24 24 27 / 0.05);
+  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
 
-.ring-indigo-600 {
+.ring-indigo-500 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
 }
 
 .ring-indigo-700 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(67 56 202 / var(--tw-ring-opacity));
 }
 
-.ring-indigo-900 {
+.ring-red-500 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(49 46 129 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
 }
 
-.ring-gray-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
+.ring-sky-500\/20 {
+  --tw-ring-color: rgb(14 165 233 / 0.2);
+}
+
+.ring-zinc-900\/5 {
+  --tw-ring-color: rgb(24 24 27 / 0.05);
 }
 
 .ring-opacity-5 {
@@ -3552,21 +3509,6 @@ select{
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
 
-.hover\:border-indigo-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(49 46 129 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-950:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(30 27 75 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(67 56 202 / var(--tw-border-opacity));
-}
-
 .hover\:border-indigo-500:hover {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
@@ -3810,11 +3752,6 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:ring-indigo-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(67 56 202 / var(--tw-ring-opacity));
-}
-
 .hover\:ring-indigo-500:hover {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));