Ui Consistency

SAS/TMSS/frontend/tmss_webapp/src/App.js

@@ -62,11 +62,11 @@ class App extends Component {
         this.menu = [ 
             //{label: 'Dashboard', icon: 'pi pi-fw pi-home', to:'/dashboard',section: 'dashboard'},
         {label: 'Cycle', icon:'pi pi-fw pi-spinner', to:'/cycle',section: 'cycle'},
-        {label: 'Project', icon: 'fab fa-fw fa-wpexplorer', to:'/project',section: 'project'},
+        {label: 'Project', icon: 'pi pi-fw pi-compass', to:'/project',section: 'project'},
         {label: 'Scheduling Units', icon: 'pi pi-fw pi-calendar', to:'/schedulingunit',section: 'schedulingunit'},
         {label: 'Tasks', icon: 'pi pi-fw pi-check-square', to:'/task'},
-        {label: 'Workflow', icon: 'pi pi-sitemap', to:'/su/workflow',section: 'workflow'},
-        {label: 'Week View', icon: 'fab fa fa-calendar-alt', to:'/su/timelineview/week',section: 'su/timelineview/week'},
+        {label: 'Workflow', icon: 'pi pi-fw pi-sitemap', to:'/su/workflow',section: 'workflow'},
+        {label: 'Week View', icon: 'pi pi-fw pi-calendar-times', to:'/su/timelineview/week',section: 'su/timelineview/week'},
         {label: 'Reports', icon: 'pi pi-fw pi-chart-bar', to:'/reports',section: 'reports'},
     ];
     }

SAS/TMSS/frontend/tmss_webapp/src/layout/_variables.scss

@@ -13,6 +13,9 @@ $menuitemBadgeBgColor:#007be5;
 $menuitemBadgeColor:#ffffff;
 $submenuFontSize:13px;
 $menuitemActiveRouteColor:#1fa1fc;
+$menuitemHoverBgColor:#c5cae9;
+
+
 
 /* Menu Light */
 $menuBgColorFirst:#f3f4f9;

SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppMenu.js

@@ -103,10 +103,8 @@ class AppSubmenu extends Component {
 
 		if (item.to) {
 			return (
-				//<NavLink activeClassName="active-route" to={item.to} onClick={(e) => this.onMenuItemClick(e, item, i)} exact target={item.target}>
-				<a href={item.to} className="active-route" onClick={(e) => this.onMenuItemClick(e, item, i)} exact="true" target={item.target}>
+				<a href={item.to} className="active-route" onClick={(e) => this.onMenuItemClick(e, item, i)}  target={item.target}>
                     {content}
-               {/* </NavLink> */}
                 </a>
 			)
 		}
@@ -121,12 +119,11 @@ class AppSubmenu extends Component {
 	}
     
     render() {        
-        let items = this.props.items && this.props.items.map((item, i) => {
+        let items = this.props.items?.map((item, i) => {
             let active = this.state.activeIndex === i;
-            // let styleClass = classNames(item.badgeStyleClass, {'active-menuitem': active && !item.to});
             let styleClass = classNames(item.badgeStyleClass, {'active-menuitem': active && item.to});
             return (
-                <li className={styleClass} key={i}>
+                <li className={styleClass} key={item.label}>
                     {item.items && this.props.root===true && <div className='arrow'></div>}
                     {this.renderLink(item, i)}
                     <AppSubmenu toggleDirtyDialog={this.props.toggleDirtyDialog} isEditDirty={this.props.isEditDirty} history={this.props.history} items={item.items} onMenuItemClick={this.props.onMenuItemClick}/>

SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_menu.scss

@@ -2,11 +2,15 @@
     padding-bottom: 120px;
 }
 
+
+
+
 .layout-menu {
     list-style-type: none;
     margin: 0;
     padding: 0;
 
+        
     li {
         a {
             cursor: pointer;
@@ -56,7 +60,7 @@
 
     > li {
         > a {
-            padding: 1em;
+            padding: 10px;
 
             span {
                 font-size: $fontSize;
@@ -130,6 +134,8 @@
 
                 &:hover {
                     color: $menuitemHoverColor;
+                    background-color: $menuitemHoverBgColor;
+                
                 }
             }