isc30 · isc30 · Apr 30, 2020 · Apr 27, 2020 · Apr 27, 2020 · Apr 28, 2020
diff --git a/demo/WasmHost/App.razor b/demo/WasmHost/App.razor
@@ -1,7 +1,9 @@
 <LazyRouter AppAssembly="@typeof(Program).Assembly">
     <Loading Context="moduleName">
         <LayoutView Layout="@typeof(MainLayout)">
-            <p>Loading... please wait</p>
+            <div class="pureCenter full light">
+                <div class="loader light"></div>
+            </div>
         </LayoutView>
     </Loading>
     <Found Context="routeData">

diff --git a/demo/WasmHost/Pages/Counter.razor b/demo/WasmHost/Pages/Counter.razor
@@ -7,7 +7,7 @@
 <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
 <Lazy Name="SimpleComponent">
-    <div>LOADING SIMPLECOMPONENT...</div>
+    <div class="loader light"></div>
 </Lazy>
 
 <Lazy Name="NamedComponent" />

diff --git a/demo/WasmHost/Shared/MainLayout.razor b/demo/WasmHost/Shared/MainLayout.razor
@@ -5,10 +5,6 @@
 </div>
 
 <div class="main">
-    <div class="top-row px-4">
-        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
-    </div>
-
     <div class="content px-4">
         @Body
     </div>

diff --git a/demo/WasmHost/Shared/NavMenu.razor b/demo/WasmHost/Shared/NavMenu.razor
@@ -7,32 +7,32 @@
 
 <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
     <ul class="nav flex-column">
-        <li class="nav-item px-3">
+        <li class="nav-item">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </li>
-        <li class="nav-item px-3">
+        <li class="nav-item">
             <NavLink class="nav-link" href="counter">
                 <span class="oi oi-plus" aria-hidden="true"></span> Counter
             </NavLink>
         </li>
-        <li class="nav-item px-3">
+        <li class="nav-item">
             <NavLink class="nav-link" href="fetchdata">
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch Data
             </NavLink>
         </li>
-        <li class="nav-item px-3">
+        <li class="nav-item">
             <NavLink class="nav-link" href="simple-page">
                 <span class="oi oi-list-rich" aria-hidden="true"></span> (Lazy) Simple Page
             </NavLink>
         </li>
-        <li class="nav-item px-3">
+        <li class="nav-item">
             <NavLink class="nav-link" href="page-with-param/hello">
                 <span class="oi oi-list-rich" aria-hidden="true"></span> (Lazy) Page with Param
             </NavLink>
         </li>
-        <li class="nav-item px-3">
+        <li class="nav-item">
             <NavLink class="nav-link" href="@Guid.NewGuid()">
                 <span class="oi oi-list-rich" aria-hidden="true"></span> (404) Error Page
             </NavLink>

diff --git a/demo/WasmHost/wwwroot/404.html b/demo/WasmHost/wwwroot/404.html
@@ -26,20 +26,19 @@
 
 <body>
     <app>
-        <div class="pureCenter">
-            <div class="loader"></div>
+        <div class="pureCenter overlay light">
+            <div class="loader light"></div>
         </div>
     </app>
 
-    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
-    <link href="css/site.css" rel="stylesheet" />
-
     <div id="blazor-error-ui">
         An unhandled error has occurred.
         <a href="" class="reload">Reload</a>
         <a class="dismiss">🗙</a>
     </div>
 
+    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
+    <link href="css/site.css" rel="stylesheet" />
     <script src="_framework/blazor.webassembly.js"></script>
 </body>
 

diff --git a/demo/WasmHost/wwwroot/css/global.css b/demo/WasmHost/wwwroot/css/global.css
@@ -3,13 +3,46 @@
 }
 
 .pureCenter {
-    width: 100vw;
-    height: 100vh;
-    position:relative;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    background-color: #000000;
-    color: #ffffff;
 }
+
+.overlay {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+    .overlay.dark {
+        background-color: black;
+        color: white;
+    }
+
+    .overlay.light {
+        background-color: white;
+        color: black;
+    }
+
+.full {
+    position: absolute;
+    top:0; left:0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: black;
+    color: white;
+}
+
+    .full.dark {
+        background-color: black;
+        color: white;
+    }
+
+    .full.light {
+        background-color: white;
+        color: black;
+    }
diff --git a/demo/WasmHost/wwwroot/css/loader.css b/demo/WasmHost/wwwroot/css/loader.css
@@ -1,14 +1,22 @@
 .loader {
-    border: 3px solid #ffffff;
+    border: 3px solid;
     border-radius: 50%;
-    border-top: 1.5em solid white;
+    border-top: 1.5em solid;
     width: 3em;
     height: 3em;
 
     -webkit-animation: spin 1.5s cubic-bezier(.68,-0.55,.27,1.55) infinite; /* Safari */
     animation: spin 1.5s cubic-bezier(.68,-0.55,.27,1.55) infinite;
 }
 
+    .loader.light {
+        color: black;
+    }
+
+    .loader.dark {
+        color: white;
+    }
+
 /* Safari */
 @-webkit-keyframes spin {
     0% {

diff --git a/demo/WasmHost/wwwroot/css/site.css b/demo/WasmHost/wwwroot/css/site.css
@@ -1,7 +1,7 @@
 @import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
 
 html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: Roboto, sans-serif;
 }
 
 a, .btn-link {
@@ -21,17 +21,18 @@ app {
 }
 
 .top-row {
-    height: 3.5rem;
+    height: 5rem;
     display: flex;
     align-items: center;
 }
 
 .main {
     flex: 1;
+    position: relative;
 }
 
     .main .top-row {
-        background-color: #f7f7f7;
+        background-color: rgb(109, 94, 172);
         border-bottom: 1px solid #d6d5d5;
         justify-content: flex-end;
     }
@@ -47,58 +48,59 @@ app {
 }
 
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    background-color: #3f4a59;
+    color: rgb(255, 255, 255);
 }
 
     .sidebar .top-row {
-        background-color: rgba(0,0,0,0.4);
+        background-color: #6d5eac;
     }
 
     .sidebar .navbar-brand {
-        font-size: 1.1rem;
+        font-size: 1.25rem;
     }
 
     .sidebar .oi {
-        width: 2rem;
         font-size: 1.1rem;
         vertical-align: text-top;
         top: -2px;
+        margin-right: 1rem;
     }
 
     .sidebar .nav-item {
         font-size: 0.9rem;
-        padding-bottom: 0.5rem;
     }
 
-        .sidebar .nav-item:first-of-type {
+        /*.sidebar .nav-item:first-of-type {
             padding-top: 1rem;
         }
 
         .sidebar .nav-item:last-of-type {
             padding-bottom: 1rem;
-        }
+        }*/
 
         .sidebar .nav-item a {
-            color: #d7d7d7;
-            border-radius: 4px;
-            height: 3rem;
+            color: rgb(255, 255, 255);
+            height: 4rem;
             display: flex;
             align-items: center;
             line-height: 3rem;
         }
 
             .sidebar .nav-item a.active {
-                background-color: rgba(255,255,255,0.25);
-                color: white;
+                background-color: #239b8f;
             }
 
             .sidebar .nav-item a:hover {
-                background-color: rgba(255,255,255,0.1);
-                color: white;
+                background-color: rgba(0,0,0,0.1);
+            }
+
+            .sidebar .nav-item a.active:hover {
+                background-color: #239b8f;
             }
 
 .content {
-    padding-top: 1.1rem;
+    padding-top: 1.5rem;
 }
 
 .navbar-toggler {

diff --git a/demo/WasmHost/wwwroot/index.html b/demo/WasmHost/wwwroot/index.html
@@ -26,8 +26,8 @@
 
 <body>
     <app>
-        <div class="pureCenter">
-            <div class="loader"></div>
+        <div class="pureCenter overlay light">
+            <div class="loader light"></div>
         </div>
     </app>