TMSS-297: Updated style and class names

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

@@ -53,6 +53,10 @@ a{
   margin-bottom: 10px;
 }
 
+.main-content {
+  margin-top:20px;
+}
+
 .main-content span,a{
   font-size: 14px;
 }

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

@@ -23,14 +23,3 @@
     border-top: none;
    }
 }
-.app-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-}
-.app-header .app-header-name {
-    margin-bottom: 0;
-}
-.app-header .app-header-actions i {
-    margin-left: 20px;
-}
\ No newline at end of file

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

@@ -22,12 +22,12 @@ export default ({ title, subTitle, actions, ...props}) => {
     };
 
     return (
-        <div className="app-header">
+        <div className="page-header">
             <div className="title">
-                <h2 className="app-header-name">{title || page.title}</h2>
-                {(page.subTitle || subTitle) && <h6 className="app-header-subtitle">{subTitle || page.subTitle}</h6>}
+                <h2 className="page-title">{title || page.title}</h2>
+                {(page.subTitle || subTitle) && <h6 className="page-subtitle">{subTitle || page.subTitle}</h6>}
             </div>
-            <div className="app-header-actions">
+            <div className="page-action-menu">
                 {(actions || []).map(action => {
                     return (
                         <Link to={{ ...action.props }} title={action.title || ''} onClick={() => onClickLink(action)}>

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

@@ -12,3 +12,4 @@
 @import "./_dashboard";
 @import "./_breadcrumb";
 @import "./_viewtable";
+@import "./_pageheader";

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

+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    border-bottom: 1px solid #e0e0e0;
+    margin-bottom: 10px;
+    padding-bottom: 5px;
+}
+.page-title {
+    margin-bottom: 0;
+}
+.page-subtitle {
+    color: #b4b2b2;
+    font-size: 100%;
+    font-weight: 400;
+    margin-bottom: 0px;
+}
+.page-action-menu i {
+    margin-left: 5px;
+}
\ No newline at end of file