src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor

@@ -8,7 +8,8 @@
 
     @Body
     
-    <span class="orb red"></span>
-    <span class="orb blue"></span>
-    <span class="orb green"></span>
 </div>
+
+<span class="orb red"></span>
+<span class="orb blue"></span>
+<span class="orb green"></span>

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css

@@ -1,41 +1,37 @@
 .page {
-    background: var(--background);
+    height: 100%;
-    overflow: hidden
+    overflow: hidden;
+    z-index: 1;
 }
 
 .orb {
     position: absolute;
     border-radius: 100%;
+    z-index: -1;
 }
 
 .green {
-    position: absolute;
     width: 80vh;
     height: 80vh;
     top: -20vh;
     background: #315941;
     filter: blur(30vh);
-    z-index: -999;
 }
 
 .blue {
-    position: absolute;
     width: 80vw;
     height: 80vw;
     left: 10vw;
     top: 50vh;
     background: #3A4156;
     filter: blur(30vh);
-    z-index: -999;
 }
 
 .red {
-    position: absolute;
     width: 100vh;
     height: 100vh;
     left: 60vw;
-    top: -30vh;
+    top: -40vh;
     background: #593533;
     filter: blur(30vh);
-    z-index: -999;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor

@@ -12,28 +12,30 @@
         <div class="add-container">
             <div class="add-buttons">
                 <div class="first-button button">
-                    <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+                    <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                     </svg>
                 </div>
-                <div class="button">
+                <div class="second-button button" @onclick=HandleMoreAddClickedAsync>
-                    <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+                    <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M1 3H23L12 22" />
                     </svg>
                 </div>
             </div>
             
-            <div class="dropdown-more-add">
+            <div @ref=DropdownAdd class="dropdown-container" @onfocusout=HandlerDropdownAddFocusOut tabindex="1000">
-                <div class="drowdown-more-element">
+                <div class="dropdown-more-add @(AddButtonsVisile ? string.Empty : "invisible")">
-                    @ResourcesKey.ManualAdd
+                    <div class="drowdown-more-element">
+                        @ResourcesKey.ManualAdd
+                    </div>
+                    <div class="drowdown-more-element">
+                        @ResourcesKey.AutoAdd
+                    </div>
                 </div>
-                <div class="drowdown-more-element">
+            </div> 
-                    @ResourcesKey.AutoAdd
-                </div>
-            </div>
         </div>
         <div class="icon-container">
-            <svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+            <svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                 <path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
             </svg>
         </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs

@@ -4,8 +4,22 @@ namespace GameIdeas.BlazorApp.Shared.Components;
 
 public partial class HeaderLayout : LayoutComponentBase
 {
-    private Task HandleIconClicked()
+    private bool AddButtonsVisile = false;
+    private ElementReference DropdownAdd;
+
+    private void HandleIconClicked()
     {
         throw new NotImplementedException();
     }
+
+    private async Task HandleMoreAddClickedAsync()
+    {
+        AddButtonsVisile = !AddButtonsVisile;
+        await DropdownAdd.FocusAsync();
+    }
+        
+    private void HandlerDropdownAddFocusOut()
+    {
+        AddButtonsVisile = false;
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css

@@ -5,7 +5,6 @@
     align-items: flex-end;
     padding: 0px 10px;
     height: 40px;
-    width: 100%;
 }
 
 .icon-container {
@@ -17,6 +16,15 @@
     height: 100%;
 }
 
+    .icon-container img {
+        max-height: 85%;
+        max-width: 85%;
+    }
+
+.icon-container:hover {
+    cursor: pointer;
+}
+
 .account-add-container {
     display: flex;
     flex-direction: row;
@@ -26,6 +34,7 @@
 
 .add-container {
     overflow: visible;
+    margin-right: 40px;
 }
 
 .add-buttons {
@@ -33,6 +42,7 @@
     flex-direction: row;
     background: var(--violet);
     border-radius: var(--small-radius);
+    overflow: hidden;
 }
 
 .button {
@@ -44,23 +54,50 @@
 }
 
 .first-button {
-    border-right: 1px solid var(--line-black);
+    border-right: 2px solid var(--line-black);
+}
+
+.second-button .button-icon {
+    padding: 6px;
 }
 
 .button-icon {
-    color: var(--white);
+    fill: var(--white);
 }
 
+    .button-icon:hover {
+        background: var(--line-black);
+        cursor: pointer;
+    }
+
+
 .account-icon {
-    color: var(--light-grey);
+    fill: var(--light-grey);
 }
 
 .dropdown-more-add {
+    margin-top: 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
     background: var(--violet);
     box-shadow: var(--drop-shadow);
     border-radius: var(--small-radius);
+    position: fixed;
+    padding: 4px;
+    animation-name: fade-in;
+    animation-duration: 0.4s
 }
 
 .drowdown-more-element {
-    width: 100%;
+    width: fit-content;
+}
+
+.drowdown-more-element:hover {
+    color: var(--light-grey);
+    cursor: pointer;
+}
+
+.invisible {
+    display: none;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -18,16 +18,21 @@
 
 html {
     font-family: 'Noto Sans', sans-serif;
-    font-size: 12px
+    font-size: 12px;
+    color: var(--white)
 }
 
-html, body, .app {
+html, body, #app {
     margin: 0;
     padding: 0;
     height: 100%;
     overflow: hidden;
 }
 
+#app {
+    background: var(--background);
+}
+
 h1:focus {
     outline: none;
 }
@@ -137,4 +142,9 @@ code {
 
 .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
     text-align: start;
+}
+
+@keyframes fade-in {
+    0% {opacity: 0}
+    100% {opacity: 1}
 }