layout home

src/assets/sass/app.css

+.main-color{
+  background-color: #1a2d3e !important;
+}
+
+.sub-color{
+  background-color: #f0f1f3 !important;
+}
 
 .gradient-purple {
   background: linear-gradient(to top, #9b59b6 10%, #e74c3c 100%);
@@ -127,6 +134,18 @@
               padding: 5px 15px;
               border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
               color: #444444; }
+              .active {
+                -webkit-transition: all .25s ease;
+                -moz-transition: all .25s ease;
+                -ms-transition: all .25s ease;
+                -o-transition: all .25s ease;
+                transition: all .25s ease;
+                color: #fff;
+                background-color: #62dafc;
+                border-top-right-radius: 20px;
+                border-bottom-right-radius: 20px;
+              }
+      
 
 .color-white {
   color: #fff; }
@@ -5968,6 +5987,7 @@
   font-size: 10pt;
   text-align: center;
   cursor: pointer;
+  outline: 'none';
   /*&:focus {
   	box-shadow: 0 0 0 4px $pos-color;
   }*/ }

src/container/Beranda.js

@@ -5,7 +5,7 @@ class Beranda extends Component {
     render() {
         return (
             <div style={{ flex: 1 }}>
-                <div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 20 }}>
+                <div style={{ height: 150, width: '100%', padding: 20 }} className={"main-color"}>
                     <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
                     <Typography style={{ fontSize: '12px', color: 'white', marginTop: 50 }}>Task Yang Harus Dikerjakan</Typography>
                 </div>

src/container/BudgetTahunan.js

@@ -99,7 +99,7 @@ export default class BudgetTahunan extends Component {
         ]
         return (
             <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
-                <div style={{ height: 78, backgroundColor: '#354960', display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                     <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
                 </div>
                 <div style={{ padding: 20, width: '100%' }}>

src/container/BudgetTahunan/BalanceSheet.js

@@ -254,7 +254,7 @@ export default class BalanceSheet extends Component {
         ]
         return (
             <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
-                <div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                     <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
                 </div>
                 <div style={{ flex: 1, padding: 20, width: '100%' }}>

src/container/HomePage.js

@@ -84,7 +84,7 @@ class HomePage extends Component {
         }]
         return (
             <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
-                <div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                     <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
                 </div>
                 <div style={{ flex: 1, padding: 20, width: '100%' }}>

src/container/Laporan/DashboardCAT.js

@@ -32,8 +32,8 @@ export default class DashboardCAT extends Component {
             { value: '2016', label: '2016' },
         ]
         return (
-            <div style={{}}>
-                <div style={{ backgroundColor: '#354960', padding: 28 }}>
+            <div className='a-s-p-mid no-header'>
+                <div className={"main-color"} style={{ padding: 28 }}>
                     <Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
                 </div>
                 <div className="padding-20px">

src/container/MasterData/Parameter/Parameter.js

@@ -155,7 +155,7 @@ export default class Parameter extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
-                <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+                <div className={"main-color"} style={{ height: 199, width: '100%' }} />
                 <div>
                     <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
                         <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Parameter</label>

src/container/MasterData/Perusahaan/Perusahaan.js

@@ -263,7 +263,7 @@ export default class Perusahaan extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
-                <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+                <div className={"main-color"} style={{ height: 199, width: '100%' }} />
                 {this.state.visiblePerusahaan === true ?
                     <div>
                         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/MasterData/ReportItems.js

@@ -113,7 +113,7 @@ export default class ReportItems extends Component {
             <div>
                 {this.state.itemReport === true ?
                     <div style={{ height: this.props.height }}>
-                    <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+                    <div className={"main-color"} style={{ height: 199, width: '100%' }} />
                         <div>
                             <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
                                 <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Master Data - Item Report</label>
@@ -200,7 +200,7 @@ export default class ReportItems extends Component {
                     />
                 :
                 <div style={{ height: this.props.height }}>
-                        <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
+                        <div style={{ height: 199, width: '100%' }} className={"main-color"}/>
                         <div> 
                             <div>
                                 <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/MasterData/UnitBisnis.js

@@ -352,7 +352,7 @@ export default class UnitBisnis extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
-                <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+                <div style={{ height: 199, width: '100%' }} className={"main-color"}/>
                 {this.state.visibleUnitBisnis === true ?
                     <div>
                         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/MasterData/formReportItems/VisualReportItems.js

@@ -58,7 +58,7 @@ export default class VisualReportItems extends Component {
         return (
             <div>    
                 <div style={{ height: this.props.height }}>
-                    <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
+                    <div style={{ height: 199, width: '100%' }} className={"main-color"} />
                         <div>
                             <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
                                 <label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label>

src/container/Otorisasi/User.js

@@ -289,7 +289,7 @@ export default class UserRole extends Component {
     return (
       <div style={{ height: this.props.height }}>
         {/* <Row> */}
-        <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+        <div className={"main-color"} style={{ height: 199, width: '100%' }} />
         {this.state.visibleUser ? <div>
           <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
             <label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - User</label>

src/container/Otorisasi/UserRole.js

@@ -178,7 +178,7 @@ class UserRole extends Component {
     return (
       <div style={{ height: this.props.height }}>
         {/* <Row> */}
-        <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+        <div className={"main-color"} style={{ height: 199, width: '100%' }} />
         <div>
           <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
             <label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - Role & Otorisasi</label>