From 60d218f8b6cc9b668e94bfd22e9440d86f4965ff Mon Sep 17 00:00:00 2001
From: BOT Alex <44818698+MagicBOTAlex@users.noreply.github.com>
Date: Wed, 10 May 2023 03:46:11 +0200
Subject: [PATCH] Got text ontop of image!

---
 Otakians/Pages/Index.razor                    | 10 ++++++---
 Otakians/Pages/Index.razor.css                |  1 +
 Otakians/Properties/serviceDependencies.json  |  5 -----
 .../Properties/serviceDependencies.local.json |  6 -----
 Otakians/wwwroot/css/app.css                  | 22 ++++---------------
 Otakians/wwwroot/index.html                   |  2 +-
 6 files changed, 13 insertions(+), 33 deletions(-)
 create mode 100644 Otakians/Pages/Index.razor.css

diff --git a/Otakians/Pages/Index.razor b/Otakians/Pages/Index.razor
index 56ad84e..6219f7a 100644
--- a/Otakians/Pages/Index.razor
+++ b/Otakians/Pages/Index.razor
@@ -21,9 +21,13 @@
         @for (int i = 0; i < 25; i++)
         {
             <MudItem>
-                <MudPaper Class="md-8">
-                    <MudText Style="position: absolute; z-index: 1" Typo="Typo.h6">@RandomUsernames[random.Next(0, RandomUsernames.Length)]</MudText>
-                    <MudImage Style="position: relative" Class="rounded-lg ma-4" Src="@GetRandomImage()" Height="250" Width="250"></MudImage>
+                <MudPaper Class="md-8" Style="position:relative">
+                    <MudContainer Style="position:absolute;" Class="mt-4">
+                        <MudText Style="background-color:rgba(0, 0, 0, 0.4); backdrop-filter:blur(2px)" Class="pl-2 rounded-t-lg" Color="Color.Secondary" Typo="Typo.h6">@("@" + RandomUsernames[random.Next(0, RandomUsernames.Length)])</MudText>
+                    </MudContainer>
+                    <MudContainer>
+                            <MudImage Class="rounded-lg my-4" Src="@GetRandomImage()" Height="250" Width="250"></MudImage>
+                    </MudContainer>
                 </MudPaper>
             </MudItem>
         }
diff --git a/Otakians/Pages/Index.razor.css b/Otakians/Pages/Index.razor.css
new file mode 100644
index 0000000..5f28270
--- /dev/null
+++ b/Otakians/Pages/Index.razor.css
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Otakians/Properties/serviceDependencies.json b/Otakians/Properties/serviceDependencies.json
index 6758ba1..87c7ceb 100644
--- a/Otakians/Properties/serviceDependencies.json
+++ b/Otakians/Properties/serviceDependencies.json
@@ -1,10 +1,5 @@
 {
   "dependencies": {
-    "mssql2": {
-      "type": "mssql",
-      "connectionId": "ConnectionString",
-      "dynamicId": null
-    },
     "secrets1": {
       "type": "secrets",
       "connectionId": null
diff --git a/Otakians/Properties/serviceDependencies.local.json b/Otakians/Properties/serviceDependencies.local.json
index 3337618..27b0e7d 100644
--- a/Otakians/Properties/serviceDependencies.local.json
+++ b/Otakians/Properties/serviceDependencies.local.json
@@ -1,11 +1,5 @@
 {
   "dependencies": {
-    "mssql2": {
-      "secretStore": "LocalSecretsFile",
-      "type": "mssql.onprem",
-      "connectionId": "ConnectionString",
-      "dynamicId": null
-    },
     "secrets1": {
       "secretStore": null,
       "resourceId": null,
diff --git a/Otakians/wwwroot/css/app.css b/Otakians/wwwroot/css/app.css
index 070f2dd..33ab40d 100644
--- a/Otakians/wwwroot/css/app.css
+++ b/Otakians/wwwroot/css/app.css
@@ -2,24 +2,7 @@
 
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-h1:focus {
-    outline: none;
-}
-
-a, .btn-link {
-    color: #0071c1;
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+    background-color: black;
 }
 
 .content {
@@ -73,6 +56,8 @@ a, .btn-link {
     width: 8rem;
     height: 8rem;
     margin: 20vh auto 1rem auto;
+    background-color: dimgray;
+    border-radius: 5em;
 }
 
     .loading-progress circle {
@@ -93,6 +78,7 @@ a, .btn-link {
     position: absolute;
     text-align: center;
     font-weight: bold;
+    color: aliceblue;
     inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
 }
 
diff --git a/Otakians/wwwroot/index.html b/Otakians/wwwroot/index.html
index 85ffccd..e7e4a34 100644
--- a/Otakians/wwwroot/index.html
+++ b/Otakians/wwwroot/index.html
@@ -14,7 +14,7 @@
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
 </head>
 
-<body style="background-color:black;">
+<body>
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
     <div id="app">
         <svg class="loading-progress">