MT-168 Added New styles and refactored inner pages markup

src/main/webapp/WEB-INF/css/custom-theme.css

+/* 	File Name	:	custom-theme.css
+	Date		:	03/09/2018
+	Author		:	Vanavaraju Adabala
+*/
+/* ===== Common Styles  ===== */
+body {
+	background: #ffffff;
+	overflow: hidden;
+}
+.left {
+	float: left;
+}
+.right {
+	float: right;
+}
+.hide {
+	display: none;
+}
+.no-padding {
+	padding: 0;
+}
+.scroll-content {
+	height: 95%;
+	max-height: 500px;
+	overflow: auto;
+}
+/* For Scroll bar color */
+::-webkit-scrollbar {
+    width: 6px;
+}
+/* Track */
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #666666;
+}
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #999;
+}
+
+/* For Refersh icon rotate */
+i.fa.fa-refresh {
+    cursor: pointer;
+	transition: transform 1s ease-in-out;
+}
+i.fa.fa-refresh:hover {
+	transform:rotate(2700deg);
+    -ms-transform:rotate(270deg);
+    -webkit-transform:rotate(270deg);
+}
+/* ===== Header Styles  ===== */
+#header {
+	background: #eeeef6;
+	height: 52px;
+}
+#header .navbar-header {
+	background: #ffffff;
+	position: relative;
+	width: 225px;
+}
+#header .navbar-header img {
+    margin: 0 0 0 10px;
+}
+#header .navbar-header:after {
+	content: "";
+    border-left: 50px solid #fff;
+    border-bottom: 50px solid transparent;
+    position: absolute;
+    right: -50px;
+    top: 0;
+}
+#header .navbar-inverse {
+	background: #eeeef6;
+	border-bottom: 2px solid #00b4e5;
+	height: 53px;
+}
+#header .dropdown-toggle {
+	padding: 12px;
+}
+#header .dropdown-toggle .caret {
+	color: #000;
+	margin: -10px 0 0 10px;
+}
+#header .navbar-inverse .navbar-nav>.active>a:hover .dropdown.active.open {
+	background: blue;
+	display: block;
+	-webkit-transition: max-height 1s;
+	-moz-transition: max-height 1s;
+	-ms-transition: max-height 1s;
+	-o-transition: max-height 1s;
+	transition: max-height 1s;
+	max-height: 300px;
+}
+/* My Account */
+.my-account {
+	overflow: hidden;
+	padding: 0;
+}
+.my-account .card.hovercard .info .desc { 
+	border-top: solid 1px #ccc;
+    font-size: 13px;
+	line-height: 28px;
+}
+.my-account .card.hovercard .info .desc, .my-account .card.hovercard .info .title { 
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 215px; 
+}
+.my-account .card.hovercard .info .desc:last-child {
+	line-height: normal;
+}
+.my-account .card.hovercard .info .desc a {
+	color: #ff0000;
+}
+.my-account .card.hovercard .info .desc i, .my-account .card.hovercard .info .desc a i {
+	font-size: 14px;
+	margin: 5px 5px 0px 0;
+}
+/* .card.hovercard .info {
+
+} */
+
+/* Menu Navigation */
+.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
+	background: none;
+	color: #34495e;
+	line-height: normal;
+}
+.navbar-nav>li>.dropdown-menu {
+	/* height: 0px; */
+	border: 1px solid #00b4e5;
+	padding: 10px;
+	width: 350px;
+}
+
+/* Left Section */
+#sidebar-left {
+	float: left; 
+	/* margin: 0 15px 0 0; */
+	width: 225px;
+}
+#sidebar-wrapper {
+	background: #00b4e5 !important;	
+	height: 100%;
+	overflow: auto;
+	width: 100% !important;
+}
+#sidebar-wrapper .sidebar-nav {
+	list-style: none;
+	padding: 0;
+}
+#sidebar-wrapper .sidebar-nav li {
+	border-bottom: 1px dotted #34495e;
+	line-height: normal;
+	list-style: none;
+}
+#sidebar-wrapper .sidebar-nav li ul.manageGroup {
+	height: 250px;
+	overflow: hidden;
+	padding: 0;
+    transition: height 0.5s ease-out;
+}
+#sidebar-wrapper .sidebar-nav li ul.manageGroup.ng-hide {
+	height: 0;
+}
+#sidebar-wrapper .sidebar-nav li ul.manageGroup li a {
+	padding-left: 35px;
+}
+#sidebar-wrapper .sidebar-nav li ul.manageGroup:hover {
+	background: transparent;
+}
+#sidebar-wrapper .sidebar-nav li:last-child {
+	border: none;
+}
+#sidebar-wrapper .sidebar-nav li a {
+	color: #34495e;
+	display: block;
+	font-size: 13px;
+    padding: 12px;
+    text-decoration: none;
+}
+#sidebar-wrapper .sidebar-nav li a i {
+	transition: all .5s ease-in-out 0s;
+    -moz-transition: all .5s ease-in-out 0s;
+    -webkit-transition: all .5s ease-in-out 0s;
+    -o-transition: all .5s ease-in-out 0s;
+}
+#sidebar-wrapper .sidebar-nav li a:hover i {
+	margin: 0 12px 0 0;
+	transform: scale(1.4);
+	-moz-transform: scale(1.4);
+	-webkit-transform: scale(1.4);
+	-o-transform: scale(1.4);
+}
+#sidebar-wrapper .sidebar-nav li a.activeMenu {
+	background-color: #34495e;
+	color: #ffffff;
+}
+#sidebar-wrapper .sidebar-nav li a i {
+	font-size: 16px;
+	margin: 0 5px 0 0;
+}
+#sidebar-wrapper .sidebar-nav li>:hover, #sidebar-wrapper .sidebar-nav li a>:hover {
+	background: #34495e;
+	color: #fff;
+}
+
+
+/* ===== Main Container ===== */
+.main-container {
+	display: flex;
+	height: calc(100% - 105px);
+	overflow: hidden;
+}
+/* .main-container #sidebar-left, .main-container #main {
+	flex: 1;
+} */
+#main {
+	float: left;
+	height: 100%;
+	width: calc(100% - 225px);
+}
+#main h1 {
+	border-bottom: 1px solid #ccc;
+	font-size: 22px;
+	margin: 0 0 18px 0;
+	padding-bottom: 10px;
+}
+#main i.fa-refresh {
+	color: #333333;
+	font-size: 17px;
+}
+.add-emp {
+	border-bottom: 1px solid #ccc;
+	margin-left: -15px;
+	text-align: right;
+}
+.add-emp button {
+	font-size: 11px;
+	height: auto;
+	line-height: normal;
+	min-height: auto;
+	margin: 0 0 7px 8px;
+	padding: 8px;
+}
+.add-emp button i {
+	font-size: 12px;
+}
+.add-emp .state-select {
+	display: inline-block;
+	margin: 4px 10px;
+}
+.add-emp .state-select type["radio"] {
+	margin: 0 10px 0 0;
+}
+/* ===== Button Styles  ===== */
+.primary.md-raised {
+	background: green;
+}
+.form-group button {
+	cursor: pointer;
+	margin: 0;
+	padding: 0px 15px 0 10px;
+}
+.form-group button i {
+	font-size: 16px;
+	margin: 0 5px 0 0;	
+}
+.form-group button.md-primary {
+	background: #f8f8f8;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+}
+.form-group button.submit {
+    background-color: #bfd630;
+	border-color: #bfd630;
+	border-radius: 3px;
+	color: #333333;
+}
+
+
+
+/* ===== Footer Styles  ===== */
+#footer {
+	clear: both;
+}
+#footer .navbar-inverse, #footer .navbar-inverse {
+	background: #eeeef6;
+	border-top: 2px solid #00b4e5;
+	position: inherit;
+}
+#footer .navbar-inverse .copyrights {
+    background: #fff;
+    width: 225px;
+}
+#footer .navbar-inverse .copyrights:after {
+	content: "";
+    border-right: 50px solid transparent;
+    border-bottom: 50px solid #fff;
+    position: absolute;
+    right: -50px;
+    top: 0;
+}
+#footer .footer {
+	line-height: 50px;
+}
+#footer .footer p { 
+	margin: 0;
+}
+#footer .footer .img { 
+	margin: 6px 0 0 0;
+}
+/* Grid Styles */ 
+.ui-grid-contents-wrapper {
+	
+}
+.ui-grid {
+	border: none !important;
+}
+.ui-grid-viewport {
+	border: 1px solid #cccccc;
+}
+.ui-grid-contents-wrapper .ui-grid-header {
+	border: none;
+}
+.ui-grid-contents-wrapper .ui-grid-header .ui-grid-top-panel {
+	background: #34495e;
+	border-radius: 3px 3px 0 0;
+	color: #ffffff;
+}
+.ui-grid-contents-wrapper .ui-grid-header-cell {
+	border: none;
+	background: #eeeef6;
+}
+.ui-grid-contents-wrapper .ui-grid-header-cell > div {
+	background: #34495e;
+}
+.ui-grid-contents-wrapper .ui-grid-header-cell .ui-grid-filter-container {
+	background: #eeeef6;
+	padding: 4px 4px 4px 6px;
+}
+.ui-grid-contents-wrapper .ui-grid-header-cell .ui-grid-filter-container select {
+	height: 25px;
+}
+.ui-grid-selection-row-header-buttons {
+	padding: 3px 0;
+}
+.ui-grid-selection-row-header-buttons::before {
+	margin: 0;
+}
+/* .ui-grid-contents-wrapper .ui-grid-header-cell div:empty {
+	background: #eeeef6;
+    min-height: 30px;
+}
+.ui-grid-contents-wrapper .ui-grid-header-cell:last-child div:empty:last-child:after {
+	background: #eeeef6;
+	content: "";
+	display: inline-block;
+	width: 6px;
+	height: 30px;
+	position: absolute;
+	right: -6px;
+} */
+.ui-grid-contents-wrapper .ui-grid-cell-contents {
+	/* border-bottom: 1px solid #e5e5e5; */
+	padding: 10px 8px;
+}
+.ui-grid-contents-wrapper .ui-grid-render-container-body .ui-grid-canvas .ui-grid-cell {
+	border: none;
+	height: 40px;
+	line-height: 20px;
+	margin: 0;
+}
+
+.ui-grid-contents-wrapper .ui-grid-render-container-body .ui-grid-canvas {
+	font-size: 13px;
+	padding: 0;
+}
+.ui-grid-contents-wrapper .ui-grid-render-container-body .ui-grid-canvas .ui-grid-cell-contents, .ui-grid-contents-wrapper .ui-grid-render-container-body .ui-grid-canvas .ui-grid-cell:empty {
+	border-bottom: 1px solid #e5e5e5;
+}
+.ui-grid-contents-wrapper .ui-grid-render-container-body .ui-grid-canvas .ui-grid-cell p {
+	border-bottom: 1px solid #e5e5e5;
+	min-height: 40px;
+	padding-top: 6px;
+}
+.ui-grid-contents-wrapper .ui-grid-row:nth-child(even) .ui-grid-cell {
+	background-color: #fafafc;
+}
+.ui-grid-header-cell-row .ui-grid-column-menu-button {
+	position: absolute;
+	right: 0;
+	top: 6px;
+}
+.ui-grid-menu .ui-grid-menu-inner ul li .ui-grid-menu-item {
+	font-size: 12px;
+	padding: 5px 10px 6px 8px;
+}
+.ui-grid-pager-panel {
+	background: #fff;
+	border: solid 1px #ccc;
+	border-top: none;
+	font-size: 13px;
+	width: 99.8% !important;
+}
+.ui-grid-pager-panel .ui-grid-pager-control button {
+	background: #dddddd;
+	border-radius: 0;
+	border: none;
+	height: auto;
+	padding: 10px 12px;
+}
+.ui-grid-pager-panel .ui-grid-pager-control input {
+	background: 1px solid #ccc;
+	border-radius: 0;
+	height: auto;
+	margin: 0 8px;
+}
+.ui-grid-pager-panel .ui-grid-pager-row-count-picker {
+	height: 30px;
+	margin: 0 6px 0 0;
+	padding: 5px 10px 5px 0;
+}
+.ui-grid-pager-panel .ui-grid-pager-row-count-picker select {
+	height: 30px;
+	margin: 0 8px 0 0;
+}
+.ui-grid-canvas .ui-grid-row:hover {
+	background: green;
+}
+

src/main/webapp/WEB-INF/templates/employee.html

-
-<div class="md-padding" style="width: 100%; padding: 3px 0px 0px 0px;"
-	id="popupContainer" ng-controller="employeeController"
+<div class="md-padding" id="popupContainer" ng-controller="employeeController"
 	ng-init="getEmployeeData()">
 	<div class="container-fluid mainDivHeaderClass">
 		<div class="row">
 			<div class="col-lg-12">
-				<p align="center" class="col-xs-11"
-					style="vertical-align: middle; font-weight: bold; font-size: 30px;">My
-					Login Details</p>
-				<p align="right" class="col-xs-1"
-					style="vertical-align: middle; font-weight: bold; font-size: 1.5em; margin-top: 8px; cursor: pointer;">
-					<i class="fa fa-refresh" aria-hidden="true"
-						ng-click="refreshPage()"></i>
-				</p>
+				<h1 class="no-padding">My Login Details
+					<a class="right">
+					<i class="fa fa-refresh" aria-hidden="true" ng-click="refreshPage()"></i></a>
+				</h1>
 			</div>
 			<div class="clearfix"></div>
 		</div>
 	</div>
-	<br />
 	<div class="form-horizontal">
-		<div class="form-group" style="padding-left:10px;">
-			<div class="form-inline col-lg-12 col-sm-offset-1">
-				<div class="form-group col-lg-4">
+		<div class="form-group">
+			<div class="form-inline col-lg-12">
+				<div class="form-group col-lg-4 col-sm-4">
 					<label class="control-label" for="empId">Employee ID: </label>
 					{{empId}}
 				</div>
-				<div class="form-group col-lg-4">
+				<div class="form-group col-lg-4 col-sm-5">
 					<label class="control-label" for="empName">Employee Name: </label>
 					{{empName}}
 				</div>
-				<div class="form-group col-lg-4">
+				<div class="form-group col-lg-4 col-sm-4">
 					<label class="control-label" for="email">Email: </label>
 					{{empEmailId}}
 				</div>
 			</div>
 		</div>
-		<div class="form-group" style="padding-left:10px;">
-			<div class="form-inline col-lg-12 col-sm-offset-1">
-				<div class="form-group col-lg-4">
+		<div class="form-group">
+			<div class="form-inline col-lg-12">
+				<div class="form-group col-lg-4 col-sm-5">
 					<label class="control-label" for="fromDate">From Date: 
 					<md-datepicker ng-model="fromDate" md-placeholder="Enter date"
 						md-max-date="maxDate" onkeydown="return false"
 						ng-change="validateDates(fromDate, 'FromDate')"></md-datepicker></label>
 				</div>
-				<div class="form-group col-lg-4">
+				<div class="form-group col-lg-4 col-sm-5">
 					<label class="control-label" for="toDate">To Date: 
 					<md-datepicker ng-model="toDate" md-placeholder="Enter date"
 						md-max-date="maxDate" onkeydown="return false"
 						ng-change="validateDates(toDate, 'ToDate')"></md-datepicker></label>
 				</div>
-				<div class="form-group col-lg-4">
+				<div class="form-group col-lg-4 col-sm-2">
 					<label for="submitBtn"> <md-button
 							class="md-raised md-primary"
-							style="width:100px;background: cadetblue;"
 							ng-click="getEmployeeData()"> <i
-							class="fa fa-search fa-2x"
-							style="margin-top: 5px; font-size: 1.5em;"></i> Search</md-button></label>
+							class="fa fa-search fa-2x"></i> Search</md-button></label>
 				</div>
 			</div>
 		</div>
-		<div class="form-group" style="padding-left:10px;">
-			<div class="form-inline col-lg-12 col-sm-offset-1">
+		<div class="form-group">
+			<div class="form-inline col-lg-12 col-sm-12">
 				<label class="control-label" for="avgHrs">
 					Average Login hours:&nbsp;&nbsp; </label>{{avgLoginHrs}}
 			</div>
@@ -68,7 +59,7 @@
 		<div class="form-group">
 			<div class="form-inline col-lg-12">
 				<div id="gridTest" ui-grid="gridOptions" ui-grid-pagination 
-					class="myGrid" style="width:99%; height:300px;">
+					class="myGrid">
 					<div class="watermark" ng-show="!gridOptions.data.length">No
 						data available</div>
 				</div>

src/main/webapp/WEB-INF/templates/footer.html

 <footer>
 	<nav class="navbar navbar-fixed-bottom navbar-inverse"
 		role="navigation">
-		<div class="row col-lg-12">
-			<div class="col-lg-11 col-xs-8 text-center">
-				<p style="padding-top:15px;">&copy Nisum
-					Consulting Ltd 2018</p>
+		<div class="footer">
+			<div class="col-lg-1 col-xs-3 copyrights">
+				<p>&copy Nisum Consulting Ltd 2018</p>
 			</div>
-			<div class="col-lg-1 col-xs-2">
-				<img class="img img-rounded" src="images/logo.png" style="width:180px;height:45px;margin-left:-55px;"/>
+			<div class="col-lg-10 col-xs-9">
+				<img class="img img-rounded right" alt="nisum" src="images/nisum-small.png"/>
 			</div>
 		</div>
 	</nav>

src/main/webapp/WEB-INF/templates/header.html

@@ -8,42 +8,34 @@
 					class="icon-bar"></span> <span class="icon-bar"></span> <span
 					class="icon-bar"></span>
 			</button>
-			<img src="images/nisum-logo1.png" width="200" height="50" style="padding-left: 20px"/>
+			<img src="images/myteam.png" width="200" height="50" alt="myTeam"/>
 		</div>
 			
 		<div class="collapse navbar-collapse" id="b-menu-1">
 			<ul class="nav navbar-nav navbar-right">
 				<li class="active"><a href="#">Signed in as <b>{{empName}}</b></a></li>
 				<li class="dropdown active"><a href="#" class="dropdown-toggle"
-					data-toggle="dropdown"> <i class="fa fa-user-circle-o fa-2x" aria-hidden="true"
-												style="font-size: 1.5em;"></i><b class="caret" style="margin-top:-4px;"></b>
+					data-toggle="dropdown"> <i class="fa fa-user-circle-o fa-2x" aria-hidden="true"></i><b class="caret"></b>
 				</a>
-					<ul class="dropdown-menu">
+					<ul class="dropdown-menu my-account">
 						<li>
-							<div class="col-lg-12" style="padding-right: 5px;padding-left: 5px;">
+							<div class="col-lg-12 no-padding">
 								<div class="card hovercard">
 									<div class="cardheader"></div>
-									<div class="avatar">
+									<div class="avatar left">
 										<img ng-alt="{{empName}}" ng-src="{{profilePicUrl}}">
 									</div>
-									<div class="info">
+									<div class="info right">
 										<div class="title">{{empName}}</div>
-										<div style="height:5px;"></div>
 										<div class="desc">
-											<i class="fa fa-id-badge fa-2x" aria-hidden="true"
-												style="font-size: 1.3em;"></i> {{empId}}
+											<i class="fa fa-id-badge fa-2x" aria-hidden="true"></i> {{empId}}
 										</div>
-										<div style="height:5px;"></div>
 										<div class="desc">
-											<i class="fa fa-envelope fa-2x" aria-hidden="true"
-												style="font-size: 1.3em;"></i> {{empEmailId}}
+											<i class="fa fa-envelope fa-2x" aria-hidden="true"></i> {{empEmailId}}
 										</div>
-										<div style="height:5px;"></div>
 										<div class="desc">
-											<a href="#" ng-click="logout()"
-												style="padding: 3px 0px; color: #fff;"><i
-												class="fa fa-sign-out fa-2x" aria-hidden="true"
-												style="font-size: 1.5em;"></i> Logout</a>
+											<a href="#" ng-click="logout()"><i
+												class="fa fa-sign-out fa-2x" aria-hidden="true"></i> Logout</a>
 										</div>
 									</div>
 								</div>

src/main/webapp/WEB-INF/templates/home.html

 <html>
 <body>
 	<header id="header" ng-include="'templates/header.html'" ng-controller="headerController"></header>
-	<div id="sidebar-left" ng-include="'templates/leftmenu.html'" ng-controller="leftmenuController"></div>
-	<div id="main" ng-include="'templates/employee.html'"></div>
+	<div class="main-container">
+		<div id="sidebar-left" ng-include="'templates/leftmenu.html'" ng-controller="leftmenuController"></div>
+		<div id="main" ng-include="'templates/employee.html'"></div>
+	</div>
 	<footer id="footer" ng-include="'templates/footer.html'"></footer>
 </body>
 </html>
\ No newline at end of file

src/main/webapp/WEB-INF/templates/index.html

@@ -31,7 +31,8 @@
 	<script src="js/pdf/angular-pdf.min.js"></script>
 	<script src="js/pdf/print.min.js"></script>
 	<link rel="stylesheet" href="css/bootstrap.min.css"></link>
-	<link rel="stylesheet" href="css/default-styles.css"></link>
+	<!-- <link rel="stylesheet" href="css/default-styles.css"></link> -->
+	<link rel="stylesheet" href="css/custom-theme.css"></link>
 	<script src="js/bootstrap.min.js"></script>
 	<script src="js/angular-idle.js"></script>
 	<script src="http://ui-grid.info/release/ui-grid.js"></script>
@@ -46,9 +47,9 @@
 
    
 	<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
-	<link rel="stylesheet" href="css/leftmenu.css"></link>
+	<!-- <link rel="stylesheet" href="css/leftmenu.css"></link> -->
 	<link rel="stylesheet" href="css/pdf-viewer.css"></link>
-	<link rel="stylesheet" href="css/user-profile.css"></link>
+	<!-- <link rel="stylesheet" href="css/user-profile.css"></link> -->
 	<script src="js/app.js"></script>
 	<script src="js/date-text-filter.js"></script>
 	<script src="js/ui-grid-edit-datepicker.js"></script>

src/main/webapp/WEB-INF/templates/leftmenu.html

@@ -10,13 +10,13 @@
 								aria-hidden="false"> </i> <span style="margin-left: 15px;">{{manageItem.menu}}</span></a></i> 
 			</li> -->
 
-		<li> <a href="#" ng-click="toggleManage()" ng-show="manageGroup.length > 0"> <i class="fa fa-users" style="font-size: 1.5em; margin-right: 15px;" aria-hidden="true"></i> Manage Group <i class="fa fa-caret-down" style="margin-left: 15px;"></i></a> 
+		<li> <a href="#" ng-click="toggleManage()" ng-show="manageGroup.length > 0"> <i class="fa fa-users" aria-hidden="true"></i> Manage Group <i class="fa fa-caret-down"></i></a> 
 			<ul ng-hide="custom" class="manageGroup">
 					
 				<li ng-repeat="manageItem in manageGroup"> 
 					<a href="#" class="navbarMenu" ng-click="setTemplateUrl(manageItem.path)"><i
-								class="{{manageItem.icon}}" style="font-size: 1.5em;"
-								aria-hidden="false"> </i> <span style="margin-left: 15px;">{{manageItem.menu}}</span></a></i> 
+								class="{{manageItem.icon}}"
+								aria-hidden="false"> </i> <span>{{manageItem.menu}}</span></a></i> 
 						</li>
 						 
 			</ul>
@@ -24,8 +24,8 @@
 
 				<li ng-repeat="nonManageItem in nonManageGroup" ng-click="togglenonManage()" class="nonManageGroup">
 					<a href="#" class="navbarMenu" ng-click="setTemplateUrl(nonManageItem.path)">
-						<i class="{{nonManageItem.icon}}" style="font-size: 1.5em;" aria-hidden="false"></i>
-						<span style="margin-left: 15px;">{{nonManageItem.menu}}</span>
+						<i class="{{nonManageItem.icon}}" aria-hidden="false"></i>
+						<span>{{nonManageItem.menu}}</span>
 					</a>
 				</li>
 	

src/main/webapp/WEB-INF/templates/myOrg.html

-<div class="md-padding" style="width: 100%; padding: 3px 0px 0px 0px;"
-	id="popupContainer" ng-controller="assignRoleController"
+<div class="md-padding" id="popupContainer" ng-controller="assignRoleController"
 	ng-init="getOrgEmps()">
 	<div class="container-fluid mainDivHeaderClass">
 		<div class="row">
 			<div class="col-lg-12">
-				<p align="center" class="col-xs-11"
-					style="vertical-align: middle; font-weight: bold; font-size: 30px;">My Org</p>
-				<p align="right" class="col-xs-1"
-					style="vertical-align: middle; font-weight: bold; font-size: 1.5em; margin-top: 8px; cursor: pointer;">
-					<i class="fa fa-refresh" aria-hidden="true"
-						ng-click="refreshPageOrg()"></i>
-				</p>
+				<h1 class="no-padding">My Org
+					<a class="right"><i class="fa fa-refresh" aria-hidden="true"
+						ng-click="refreshPageOrg()"></i></a>
+				</h1>
 			</div>
 			<div class="clearfix"></div>
 		</div>
 	</div>
-	<div class="row col-lg-12" style="height: 15px;"></div>
-	<div class="row col-lg-12">
-		<div class="col-lg-1" style="float: left;padding-left:20px;">
+	<div class="row col-lg-12"></div>
+	<div class="row">
+		<div class="col-lg-1">
 			<!-- <div class="input-group" style="box-shadow: 1px 1px 1px 1px rgba(0,0,0,.26);">
 				<input type="text" ng-model="empSearchId" id="empSearchId"
 					ng-blur="validateEmpId()" class="form-control"
@@ -31,8 +27,7 @@
 				</span> 
 			</div> -->
 		</div>
-		<div class="col-lg-1"
-			style="cursor: pointer; float: right; right: 75px;">
+		<div class="col-lg-1">
 			<!-- <md-button class="md-raised md-primary"
 				style="width:142px;background: cadetblue;"
 				ng-click="assignRole('Add', parentData)"> <i
@@ -41,13 +36,13 @@
 			Employee</md-button> -->
 		</div>
 	</div>
-	<div class="row col-lg-12" style="height: 15px;"></div>
-	<div class="row col-lg-12" style="margin-left: 0px;">
-
-		<div id="gridTest" ui-grid="gridOptionsOrgView" ui-grid-pagination
-			class="myGrid" style="width:99%;height:370px;margin-left:0px;">
-			<div class="watermark" ng-show="!gridOptionsOrgView.data.length">No
-				data available</div>
+	<div class="row">
+		<div class="col-lg-12">
+			<div id="gridTest" ui-grid="gridOptionsOrgView" ui-grid-pagination
+				class="myGrid">
+				<div class="watermark" ng-show="!gridOptionsOrgView.data.length">No
+					data available</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file

src/main/webapp/WEB-INF/templates/myProjectAllocations.html

-<div class="md-padding" style="width: 100%; padding: 3px 0px 0px 0px;"
-	id="popupContainer" ng-controller="myProjectAllocationsController"
+<div class="md-padding" id="popupContainer" ng-controller="myProjectAllocationsController"
 	ng-init="getMyProjectAllocations()">
 	<div class="container-fluid mainDivHeaderClass">
 		<div class="row">
 			<div class="col-lg-12">
-				<p align="center" class="col-xs-11"
-					style="vertical-align: middle; font-weight: bold; font-size: 30px;">My Project Allocations </p>
-				<p align="right" class="col-xs-1"
-					style="vertical-align: middle; font-weight: bold; font-size: 1.5em; margin-top: 8px; cursor: pointer;">
-					<i class="fa fa-refresh" aria-hidden="true"
-						ng-click="refreshPage()"></i>
-				</p>
+				<h1 class="no-padding">My Project Allocations
+					<a class="right"><i class="fa fa-refresh" aria-hidden="true"
+					ng-click="refreshPage()"></i></a>
+				</h1>
 			</div>
 			<div class="clearfix"></div>
 		</div>
 	</div>
-	<div class="row col-lg-12" style="height: 15px;margin-left: 20px;"></div>
-<div class="row col-lg-12">
-			<div class="col-xs-6" style="margin-left: 20px;">
-				<p>
-					<b>List of your current and previous project allocations: </b>
-					
-				</p>
-			</div>
-			
+	<div class="row">
+		<div class="col-lg-12">
+			<p><b>List of your current and previous project allocations: </b></p>
 		</div>
-		<div class="row col-lg-12" style="height: 15px;"></div>
-	<div class="row col-lg-12" style="margin-left: 0px;">
-
-		<div id="gridTest" ui-grid="gridOptions" ui-grid-pagination
-			class="myGrid" style="width:99%;height:380px;" >
-			<div class="watermark" ng-show="!gridOptions.data.length">No
-				data available</div>
+		<div class="col-lg-12">
+			<div id="gridTest" ui-grid="gridOptions" ui-grid-pagination
+				class="myGrid">
+				<div class="watermark" ng-show="!gridOptions.data.length">No
+					data available</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file

src/main/webapp/WEB-INF/templates/myTeam.html

-<div class="md-padding" style="width: 100%; padding: 3px 0px 0px 0px;"
-	id="popupContainer" ng-controller="projectMyTeamController"
+<div class="md-padding" id="popupContainer" ng-controller="projectMyTeamController"
 	ng-init="getMyTeamDetails()">
 	<div class="container-fluid mainDivHeaderClass">
 		<div class="row">
 			<div class="col-lg-12">
-				<p align="center" class="col-xs-11"
-					style="vertical-align: middle; font-weight: bold; font-size: 30px;">My Team </p>
-				<p align="right" class="col-xs-1"
-					style="vertical-align: middle; font-weight: bold; font-size: 1.5em; margin-top: 8px; cursor: pointer;">
-					<!-- <i class="fa fa-refresh" aria-hidden="true"
-						ng-click="refreshPage()"></i> -->
-				</p>
+				<h1 class="no-padding">My Team</h1>
 			</div>
 			<div class="clearfix"></div>
 		</div>
 	</div>
-	<div class="row col-lg-12" style="height: 15px;"></div>
-	<div class="row col-lg-12">
-		<div class="col-lg-1" style="float: left;padding-left:20px;">
-		</div>
-		<div class="col-lg-1"
-			style="cursor: pointer; float: right; right: 75px;">
-		</div>
-	</div>
-	<div class="row col-lg-12" style="height: 15px;"></div>
-	<div class="row col-lg-12" style="padding-top: 4%;margin-left:0px;">
-
-		<div id="gridTest" ui-grid="gridOptions" ui-grid-pagination
-			class="myGrid" style="width:99%;height:370px;margin-left:0px;">
-			<div class="watermark" ng-show="!gridOptions.data.length">No
-				data available</div>
+	<div class="row">
+		<div class="col-lg-12">
+			<div id="gridTest" ui-grid="gridOptions" ui-grid-pagination
+				class="myGrid">
+				<div class="watermark" ng-show="!gridOptions.data.length">No
+					data available</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file

src/main/webapp/WEB-INF/templates/progressDialog.html

@@ -8,14 +8,12 @@ stroke:orange;
 }
 </style>
 </head>
-<md-dialog aria-label="Progress Template" style="width:420px;height:180px;background:transparent;" id="progressTemplate">
+<md-dialog aria-label="Progress Template" id="progressTemplate">
 <form ng-cloak name="myForm">
 	<md-dialog-content>
-	<div class="md-dialog-content">
-		<p
-			style="color: #fff; font-size: 1.35em; vertical-align: middle; text-align:center;">
-			{{progressText}}</p>
-			<i class="fa fa-spinner fa-pulse fa-3x fa-fw" style="left:42%;position:relative;color:orange;"></i>
+	<div class="md-dialog-content text-center">
+		<p> {{progressText}}</p>
+		<i class="fa fa-gear fa-spin fa-5x fa-fw"></i>
 	</div>
 	</md-dialog-content>
 </form>