[Frontend] Bottom bar restyled

WTD-1392
WTD-1362
Fixed font size in botttom bar;
Added font-smoothing to global.scss;
Bottom bar design restyled;

platform/commonUI/general/res/sass/_constants.scss

@@ -78,7 +78,7 @@ $btnFontSizeToH: 0.45;
 $ueTopBarH: 24px; // Change to when breadcrumb is enabled
 $ueTopBarEditH: 30px;
 $ueTopBarBtnH: 35px;
-$ueFooterH: 20px;
+$ueFooterH: 25px;
 $ueColMargin: 1.5%;
 $ueAppLogoW: 105px;
 //$ueBrowseViewBarH: $ueTopBarH; // was 30px
@@ -91,7 +91,7 @@ $colorOvrBlocker: rgba(black, 0.7);
 $colorOvrBg: $colorBodyBg;
 $colorOvrFg: $colorBodyFg;
 $ovrTopBarH: 60px;
-$ovrFooterH: 40px;
+$ovrFooterH: 42px;
 
 //Items
 $ueBrowseGridItemLg: 200px;

platform/commonUI/general/res/sass/_global.scss

@@ -29,10 +29,13 @@ a {
 }
 
 body, html {
+	-webkit-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: grayscale;
 	background-color: $colorBodyBg;
 	color: $colorBodyFg;
-	font-family: Helvetica, Arial, sans-serif;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 	font-size: 100%;
+	//font-weight: 500;
 	height: 100%;
 	width: 100%;
 	overflow: hidden;

platform/commonUI/general/res/sass/_hide-non-functional.scss

@@ -31,7 +31,7 @@
 
 	.browse-area.holder {
 		// When .browse.top-bar is hidden, set the top of the browse-area holder
-		top: $interiorMargin;
+		top: $bodyMargin;
 		> .contents.split-layout {
 			// Don't pad in from top and bottom
 			//top: 0; bottom: 0;

platform/commonUI/general/res/sass/themes/_theme-espresso.scss

@@ -19,5 +19,4 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* CONSTANTS */
-$bodyMargin: 5px;
+/* CONSTANTS */

platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss

@@ -20,24 +20,31 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .ue-bottom-bar {
+	background: $colorFooterBg;
 	color: lighten($colorBodyBg, 30%);
-	font-size: 0.65rem;
-	line-height: $ueFooterH - 4px;
+	font-size: .7rem;
+	//line-height: $ueFooterH - 4px;
+	//line-height: $ueFooterH;   // New status bar design
 	.status-holder {
-		@include border-radius($basicCr * 1.75);
+		//@include border-radius($basicCr * 1.75);   // New status bar design
 		@include box-sizing(border-box);
-		background: $colorFooterBg;
-        border-bottom: 1px solid lighten($colorBodyBg, 10%);
-		padding: 2px 5px;
+		//background: $colorFooterBg;
+        //border-bottom: 1px solid lighten($colorBodyBg, 10%);  // New status bar design
+		@include absPosDefault($interiorMargin);
+		@include ellipsize();
+		line-height: $ueFooterH - ($interiorMargin * 2);
+		right: 120px;
 		text-transform: uppercase;
 	}
 	.app-logo {
 		@include box-sizing(border-box);
+		@include absPosDefault($interiorMargin);
+		left: auto;
 		cursor: pointer;
-		font-size: 0.8em;
-		line-height: $ueFooterH - 10px;
-		padding-top: 1px;
-		text-transform: uppercase;
+		//font-size: 0.8em;
+		//line-height: $ueFooterH - 10px;
+		//padding-top: 1px;
+		//text-transform: uppercase;
 		&.logo-openmctweb {
 			background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
 		}
@@ -45,16 +52,16 @@
 }
 
 .status.block {
-	display: inline-block;
-	margin-right: $interiorMargin * 4;
+	//display: inline-block;
+	display: inline;  // New status bar design. Inline to support ellipsis overflow
+	margin-right: $interiorMargin * 2;
 	.status-indicator {
-		@include border-radius($controlCr * 0.9);
-		@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
-		@include text-shadow(rgba(black, 0.3) 0 0 2px);
+		//@include border-radius($controlCr * 0.9);
+		//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
+		//@include text-shadow(rgba(black, 0.3) 0 0 2px);
 		display: inline-block;
-		//font-size: 1.25em; // Normalized for new wtdsymbols font v2
-		//vertical-align: middle; // Normalized for new wtdsymbols font v2
 		margin-right: $interiorMarginSm;
+		color: $colorKey;
 		&.ok {
 			color: #009900;
 		}

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -30,7 +30,7 @@
 }
 
 .holder-all {
-	$myM: $interiorMarginSm;
+	$myM: 0; // $interiorMarginSm;
 	top: $myM;
 	right: $myM;
 	bottom: $myM;
@@ -93,7 +93,7 @@
 	.editor {
 		top: $bodyMargin + $ueTopBarH + ($interiorMargin);
 		right: $bodyMargin;
-		bottom: $bodyMargin + $ueFooterH + $interiorMargin;
+		bottom: $ueFooterH + $bodyMargin;
 		left: $bodyMargin;
 	}
 
@@ -119,15 +119,18 @@
 	}
 
 	.bottom-bar {
-        @include absPosDefault($bodyMargin);
+        //@include absPosDefault($bodyMargin);
+		@include absPosDefault(0);// New status bar design
 		top: auto;
 		height: $ueFooterH;
 		.status-holder {
-			right: $ueAppLogoW + $bodyMargin;
+			//right: $ueAppLogoW + $bodyMargin; New status bar design
+			z-index: 1;
 		}
 		.app-logo {
 			left: auto;
 			width: $ueAppLogoW;
+			z-index: 2;
 		}
 	}
 }