Update browser UI with new logo and colors (#7408)

browser/app/less/inc/form.less

@@ -170,10 +170,12 @@ select.form-control {
         position: absolute;
         left: 2px;
         top: 8px;
+        color: rgba(255, 255, 255, 0.5);
     }
 
     .ig-text {
         padding-left: 25px;
+        .placeholder(rgba(255, 255, 255, 0.5))
     }
 }
 

browser/app/less/inc/login.less

@@ -1,7 +1,7 @@
 .login {
     height: 100vh;
     min-height: 500px;
-    background: @dark-gray;
+    background: #002a37;
 
     text-align: center;
     &:before {
@@ -99,6 +99,7 @@
     Chrome autofill fix
 -------------------------------*/
 input:-webkit-autofill {
-     -webkit-box-shadow:0 0 0 50px @dark-gray inset !important;
+     -webkit-box-shadow:0 0 0 50px #002a37 inset !important;
      -webkit-text-fill-color: @white !important;
+    caret-color: white;
 }

browser/app/less/inc/mixin.less

@@ -50,3 +50,12 @@
     -webkit-animation: zoomIn 250ms, spin 700ms 250ms infinite linear;
     animation: zoomIn 250ms, spin 700ms 250ms infinite linear;
 }
+
+/*----------------------------------------
+    Placeholder
+-----------------------------------------*/
+.placeholder(@color) {
+    ::-webkit-input-placeholder { color: @color }
+    ::-moz-placeholder { color: @color }
+    :-ms-input-placeholder { color: @color }
+}

browser/app/less/inc/modal.less

@@ -32,7 +32,7 @@
     }
 
     .modal-content {
-        background-color: @dark-gray;
+        background-color: #00303f;
     }
 }
 
@@ -139,8 +139,8 @@
             top: 0;
             left: 0;
             position: absolute;
-            border-radius: 3px 0 0px 3px;
-            background-color: #23282C;
+            border-radius: 3px 0 0 3px;
+            background-color: #022631;
         }
     }
 }

browser/app/less/inc/sidebar.less

@@ -3,7 +3,7 @@
 ----------------------------*/
 .fe-sidebar {
 	width: @fe-sidebar-width;
-	background-color: @dark-gray;
+	background-color: @fe-sidebar-bg;
 	position: fixed;
 	height: 100%;
 	overflow: hidden;
@@ -27,7 +27,7 @@
 	}
 
 	a {
-		color: rgba(255, 255, 255, 0.58);
+		color: rgba(255, 255, 255, 0.75);
 
 		&:hover {
 			color: @white;
@@ -47,12 +47,14 @@
 	}
 
 	h2 {
-		margin: 13px 0 0 10px;
+		margin: 6px 0 0 13px;
 		font-weight: normal;
+		color: @white;
+		font-size: 20px;
 	}
 
 	img {
-		width: 32px;
+		width: 20px;
 	}
 }
 
@@ -95,7 +97,7 @@
 		}
 
 		&.active {
-			background-color: #282e32;
+			background-color: rgba(0,0,0,0.1);
 
 			& > a {
 				color: @white;
@@ -103,7 +105,7 @@
 		}
 
 		&:not(.active):hover {
-			background-color: rgba(0, 0, 0, 0.1);
+			background-color: rgba(0, 0, 0, 0.05);
 
 			& > a {
 				color: @white;
@@ -192,8 +194,7 @@
 	left: 0;
 	bottom: 0;
 	z-index: 1;
-	background: @dark-gray;
-	color: rgba(255, 255, 255, 0.4);
+	background-color: rgba(0,0,0,0.1);
 	font-size: 15px;
 	font-weight: 400;
 	width: @fe-sidebar-width;

browser/app/less/inc/variables.less

@@ -14,9 +14,11 @@
     File Explorer
 ----------------------------*/
 @fe-sidebar-width                   : 320px;
+@fe-sidebar-bg                      : #00303f;
 @text-muted-color                   : #BDBDBD;
 @text-strong-color                  : #333;
 
+
 /*--------------------------
     Colors
 ----------------------------*/