From c4bef3d635d63401382ea3c58a0ab436bbf5d131 Mon Sep 17 00:00:00 2001
From: Miguel Cano Santana
 <55782155+miguelcanosantana@users.noreply.github.com>
Date: Sun, 26 Nov 2023 21:00:35 +0100
Subject: [PATCH] Updated styles.

---
 Layout/MainLayout.razor         |  7 +--
 Layout/NavBar.razor             | 13 +-----
 Layout/NavMenu.razor            | 39 ----------------
 Layout/NavMenu.razor.css        | 83 ---------------------------------
 Pages/CustomAffiliatePage.razor | 83 +++++++++++++++++++++------------
 wwwroot/css/app.css             |  9 ++++
 6 files changed, 66 insertions(+), 168 deletions(-)
 delete mode 100644 Layout/NavMenu.razor
 delete mode 100644 Layout/NavMenu.razor.css

diff --git a/Layout/MainLayout.razor b/Layout/MainLayout.razor
index bebe829..66145cd 100644
--- a/Layout/MainLayout.razor
+++ b/Layout/MainLayout.razor
@@ -1,7 +1,4 @@
 @inherits LayoutComponentBase
 
-    <NavBar></NavBar>
-
-    <main class="container">
-		@Body
-    </main>
+<NavBar></NavBar>
+@Body
diff --git a/Layout/NavBar.razor b/Layout/NavBar.razor
index 2f23464..9a3c355 100644
--- a/Layout/NavBar.razor
+++ b/Layout/NavBar.razor
@@ -11,15 +11,6 @@
         height: 25px;
     }
 
-    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
-        color: #fbfaf3;
-        background-color: #D1A43E;
-    }
-
-    .nav-pills {
-        margin-top: 10px;
-    }
-
     .img-nav {
         max-width: 160px;
     }
@@ -27,7 +18,7 @@
 </style>
 
 
-<nav class="navbar navbar-expand-md navbar-dark mb-4" style="background-color: #1A171B;">
+<nav class="navbar navbar-expand-md navbar-dark mb-1" style="background-color: #1A171B;">
     <div class="container-fluid">
 
         <a href="#"><img src="Images/WhiteLogo.svg" class="inmg-fluid img-nav" alt="Cirsa"></a>
@@ -75,8 +66,6 @@
     </div>
 </nav>
 
-<div class="small-space"></div>
-
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 
 @code {
diff --git a/Layout/NavMenu.razor b/Layout/NavMenu.razor
deleted file mode 100644
index bf888e1..0000000
--- a/Layout/NavMenu.razor
+++ /dev/null
@@ -1,39 +0,0 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">CirsaHackaton</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </div>
-</div>
-
-<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
-            </NavLink>
-        </div>
-    </nav>
-</div>
-
-@code {
-    private bool collapseNavMenu = true;
-
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
-
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
-    }
-}
diff --git a/Layout/NavMenu.razor.css b/Layout/NavMenu.razor.css
deleted file mode 100644
index 881d128..0000000
--- a/Layout/NavMenu.razor.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.navbar-toggler {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-.top-row {
-    height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep a {
-        color: #d7d7d7;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
-
-.nav-item ::deep a:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .collapse {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-    }
-    
-    .nav-scrollable {
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}
diff --git a/Pages/CustomAffiliatePage.razor b/Pages/CustomAffiliatePage.razor
index 695c2f3..bdb805d 100644
--- a/Pages/CustomAffiliatePage.razor
+++ b/Pages/CustomAffiliatePage.razor
@@ -5,49 +5,74 @@
 <PageTitle>PLACEHOLDER TITLE | Cirsa</PageTitle>
 
 
-<div class="container py-4 jumbotron-a">
-
-    <div class="container">
-        <div class="row">
-
-            <div class="col-12 col-md-6">
-
-                <!-- Description still loading -->
-                @if(customStyle == null)
-                {
-                    <p>Loading...</p>
-                }
-                //Loaded description
-                else
-                {
-                    <h4 class="fw-bold"> @customStyle.GetTitle() </h4>
-                    <p>
-                        @customStyle.GetSummary()
-                    </p>
-                }
+<style>
 
-            </div>
+    #everything-wrapper {
+        vertical-align: central;
+        background-image: url(@customStyle.GetBackgroundUrl());
+        height: 100vh;
+        width: 100vw;
+    }
+
+    #grey-wrapper {
+        background-color: #1a171b;
+        padding: 25px;
+        border-radius: 10px;
+    }
 
-            <div class="col-12 col-md-6">
+</style>
 
-                <form class="user-form">
+<div id="everything-wrapper">
 
-                    <div class="mb-3">
-                        <label for="exampleInputEmail1" class="form-label">Email</label>
-                        <input @bind-value="clientMail" @bind-value:event="oninput" type="email" class="form-control" id="emailInput" required>
+    <div class="container py-4 jumbotron-b">
+
+        <div class="container">
+            <div class="row">
+
+                <div class="col-12 col-md-6">
+
+                    <div id="grey-wrapper">
+                        <!-- Description still loading -->
+                        @if (customStyle == null)
+                        {
+                            <p>Loading...</p>
+                        }
+                        //Loaded description
+                        else
+                        {
+                            <h4 class="fw-bold"> @customStyle.GetTitle() </h4>
+                            <p>
+                                @customStyle.GetSummary()
+                            </p>
+                        }
                     </div>
-                    <button type="submit" @onclick="RegisterClient" class="btn button-gold-a">Continuar</button>
 
-                </form>
+                </div>
 
-            </div>
+                <div class="col-12 col-md-6">
 
+                    <form class="user-form">
+
+                        <div class="mb-3">
+                            <label for="exampleInputEmail1" class="form-label">Email</label>
+                            <input @bind-value="clientMail" @bind-value:event="oninput" type="email" class="form-control" id="emailInput" required>
+                        </div>
+                        <button type="submit" @onclick="RegisterClient" class="btn button-gold-a">Continuar</button>
+
+                    </form>
+
+                </div>
+
+            </div>
         </div>
+
     </div>
 
 </div>
 
 
+
+
 @code {
     [Parameter]
     public string affiliateUid { get; set; }
diff --git a/wwwroot/css/app.css b/wwwroot/css/app.css
index 9f9a929..10ad1c1 100644
--- a/wwwroot/css/app.css
+++ b/wwwroot/css/app.css
@@ -110,6 +110,15 @@ code {
     border-radius: 10px;
 }
 
+.jumbotron-b {
+    background: #1A171BB5;
+    max-width: 900px;
+    border-radius: 10px;
+    backdrop-filter: blur(5px);
+    border: 2px solid #f3ecce;
+    box-shadow: 0px 2px 30px -6px rgba(0,0,0,0.75);
+}
+
 .user-form {
     background-color: #1A171B;
     padding: 20px;