Merge pull request #228 from amarie401/amlo/dashboard

changed UI colors for dashboard

src/Microsoft.Tye.Hosting/Dashboard/Shared/MainLayout.razor

@@ -10,7 +10,7 @@
             <a href="https://aka.ms/AA7q20u" target="_blank" id="bg-info-link">Tell us what you think!</a>
         </div>
         <div class="top-nav-item nav-item px-1">
-            <a href="https://github.com/dotnet/tye" target="_blank" id="bg-info-link">About</a>
+            <a href="https://aka.ms/tye" target="_blank" id="bg-info-link">About</a>
         </div>
     </div>
 

src/Microsoft.Tye.Hosting/wwwroot/css/site.css

@@ -9,7 +9,7 @@ a, .btn-link {
 }
 
 #bg-info-link{
-    background-color: #1a90d4;
+    background-color: #3d699b;
 }
 .btn-primary {
     color: #fff;
@@ -33,93 +33,93 @@ app {
     flex: 1;
 }
 
-    .main .top-row {
+.main .top-row {
-        background-color: #303030;
+     background-color:#6b7c8c;
-        border-bottom: 1px solid #d6d5d5;
+     border-bottom: 1px solid #d6d5d5;
-        justify-content: flex-end;
+    justify-content: flex-end;
-    }
+}
 
-        .main .top-row > a, .main .top-row .btn-link {
+.main .top-row > a, .main .top-row .btn-link {
-            white-space: nowrap;
+    white-space: nowrap;
-            margin-left: 1.5rem;
+    margin-left: 1.5rem;
-        }
+}
 
-        .main .top-row a:first-child {
+.main .top-row a:first-child {
-            overflow: hidden;
+    overflow: hidden;
-            text-overflow: ellipsis;
+    text-overflow: ellipsis;
-        }
+}
 
 .sidebar {
-    background-image: linear-gradient(180deg, #000 0%, #333 50%);
+    background-color: #f8f9fa;
 }
 
-    .sidebar .top-row {
+.sidebar .top-row {
-        background-color: #303030;
+     background-color: #6b7c8c;
-    }
+}
 
-    .sidebar .navbar-brand {
+.sidebar .navbar-brand {
-        font-size: 1.1rem;
+    font-size: 1.1rem;
-    }
+}
 
-    .sidebar .oi {
+.sidebar .oi {
-        width: 2rem;
+    width: 2rem;
-        font-size: 1.1rem;
+    font-size: 1.1rem;
-        vertical-align: text-top;
+    vertical-align: text-top;
-        top: -2px;
+    top: -2px;
-    }
+}
 
-    .sidebar .nav-item, top-nav-item {
+.sidebar .nav-item, top-nav-item {
-        font-size: 0.9rem;
+    font-size: 0.9rem;
-        padding-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
-    }
+}
 
-        .sidebar .nav-item:first-of-type {
+.sidebar .nav-item:first-of-type {
-            padding-top: 1rem;
+     padding-top: 1rem;
-        }
+}
-
+
-        .sidebar .nav-item:last-of-type {
+.sidebar .nav-item:last-of-type {
-            padding-bottom: 1rem;
+    padding-bottom: 1rem;
-        }
+}
-
+
-        .sidebar .nav-item a, .top-nav-item a {
+.sidebar .nav-item a, .top-nav-item a {
-            color: #d7d7d7;
+    color: white;
-            border-radius: 4px;
+    border-radius: 4px;
-            height: 3rem;
+    height: 3rem;
-            display: flex;
+    display: flex;
-            align-items: center;
+    align-items: center;
-            line-height: 3rem;
+    line-height: 3rem;
-            background-color: #3371e3;
+    background-color: #3d699b;
-        }
+}
-
+
-            .sidebar .nav-item a.active, .top-nav-item a.active {
+.sidebar .nav-item a.active, .top-nav-item a.active {
-                background-color: #0366d6;
+    background-color: #3d699b;
-                color: white;
+    color: white;
-            }
+}
-
+
-            .sidebar .nav-item a:hover, .top-nav-item a:hover {
+.sidebar .nav-item a:hover, .top-nav-item a:hover {
-                background-color: rgba(255,255,255,0.1);
+    background-color: rgb(156, 158, 160);
-                transition: 0.3s;
+    transition: 0.3s;
-                color: white;
+    color: white;
-            }
+}
 
 button.navbar-toggler {
     color: white;
     background-color: #303030;
 }
 
-     button.navbar-toggler:hover {
+button.navbar-toggler:hover {
-        color: #3371e3;
+    color: #3371e3;
-        background-color: #3371e3;
+    background-color: #3371e3;
-        transition: 0.3s;
+    transition: 0.3s;
-    }
+}
 
 .top-nav-item a {
     padding-left: 2rem;
     padding-right: 2rem;
     text-decoration: none;
-    background-color: #303030;
+    border: 1px solid #a2a2a2;
-    border: 1px solid rgba(255,255,255,.1);
     border-radius: .25rem;
+    color: white;
 }
 
 .content {
@@ -154,12 +154,12 @@ button.navbar-toggler {
     z-index: 1000;
 }
 
-    #blazor-error-ui .dismiss {
+#blazor-error-ui .dismiss {
-        cursor: pointer;
+    cursor: pointer;
-        position: absolute;
+    position: absolute;
-        right: 0.75rem;
+    right: 0.75rem;
-        top: 0.5rem;
+    top: 0.5rem;
-    }
+}
 
 @media (max-width: 767.98px) {
     .main .top-row:not(.auth) {