menu penjadwalan

components/Extras/calendar.view.js

@@ -85,7 +85,7 @@ class Calendar extends Component {
 		return nextState.dataLaporan !== this.state.dataLaporan;
 	}
 
-	getStatus = () => (this.props.user.role.id === 2021 ? statusLLDIKTI : status);
+	getStatus = () => (this.props.user?.role.id === 2021 ? statusLLDIKTI : status);
 
 	getDataEvent = () => {
 		const dataEvent = this.state.dataLaporan.data.map((e) => ({
@@ -171,12 +171,12 @@ class Calendar extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>Jadwal Pemeriksaan</div>
-					<div className="ml-auto">
+					<div><h3>Jadwal Pemeriksaan</h3></div>
+					{/* <div className="ml-auto">
 						<Link href="/app/penjadwalan">
 							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 						</Link>
-					</div>
+					</div> */}
 				</div>
 				<div className="calendar-app">
 					{laporan.data ? (
@@ -201,14 +201,19 @@ class Calendar extends Component {
 							<div className="row">
 								<div className="col-lg-12 col-md-6 col-12">
 									<Card className="card-default">
-										<CardHeader>
+										{/* <CardHeader>
 											<CardTitle tag="h4">Status Pelaporan</CardTitle>
-										</CardHeader>
-										<CardBody>
+										</CardHeader> */}
+										<div class="header-penjadwalan">
+    										<h2 class="card-title-1">Status Pelaporan</h2>
+										</div>
+										<CardBody> 
 											<Select value={selectedOption} onChange={this.handleChangeSelect} options={this.getStatus()} required />
-											<Button onClick={this.handleSimpan} className="mt-2" color="primary" block disabled={laporan.data?.evaluasi.length}>
-												Simpan
+											<div className="btn-simpanjadwal">
+											<Button onClick={this.handleSimpan} className="btn-colorpenjadwalan" color="info" block disabled={laporan.data?.evaluasi.length}>
+											<h4 className="text-btn-penjadwalan-1">Simpan</h4>
 											</Button>
+											</div>
 										</CardBody>
 									</Card>
 									{selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? (
@@ -216,9 +221,12 @@ class Calendar extends Component {
 									) : (
 										<>
 											<Card className="card-default" title="">
-												<CardHeader>
+												{/* <CardHeader>
 													<CardTitle tag="h4">Input Jadwal</CardTitle>
-												</CardHeader>
+												</CardHeader> */}
+												<div class="header-penjadwalan">
+    												<h2 class="card-title-1">Input Jadwal</h2>
+												</div>
 												<CardBody>
 													<Formik
 														enableReinitialize={true}
@@ -233,9 +241,9 @@ class Calendar extends Component {
 														{() => (
 															<Form>
 																<FormGroup>
-																	<label className="col-form-label">Warna</label>
-																	<div className="badge d-block" style={{ backgroundColor: this.state.color, color: "white" }}>
-																		{this.state.color}
+																	{/* <label className="col-form-label">Warna</label> */}
+																	<div className="warna-penjadwalan-block" style={{ backgroundColor: this.state.color, color: "white" }}>
+																		{/* {this.state.color} */}
 																	</div>
 																</FormGroup>
 
@@ -244,43 +252,47 @@ class Calendar extends Component {
 																	<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
 																	<ErrorMessage name="judul" component="div" className="form-text text-danger" />
 																</FormGroup>
-																<FormGroup>
-																	<label className="col-form-label">Dari Tanggal</label>
-																	<Field name="dari_tanggal">
-																		{({ field, form }) => (
-																			<Datetime
-																				timeFormat={false}
-																				inputProps={{ className: "form-control" }}
-																				value={field.value}
-																				onChange={(e) => {
-																					form.setFieldValue(field.name, e);
-																				}}
-																			/>
-																		)}
-																	</Field>
+																<FormGroup className="uk-form-tanggal-1">
+																		{/* <div className="uk-form-tanggal-1"> */}
+																			<label className="col-form-label">Dari Tanggal</label>
+																			<Field name="dari_tanggal">
+																				{({ field, form }) => (
+																					<Datetime
+																						timeFormat={false}
+																						inputProps={{ className: "form-control" }}
+																						value={field.value}
+																						onChange={(e) => {
+																							form.setFieldValue(field.name, e);
+																						}}
+																					/>
+																				)}
+																			</Field>
+																		
 																	<ErrorMessage name="dari_tanggal" component="div" className="form-text text-danger" />
+																	{/* </div> */}
 																</FormGroup>
-																<FormGroup>
-																	<label className="col-form-label">Sampai Tanggal</label>
-																	<Field name="sampai_tanggal">
-																		{({ field, form }) => (
-																			<Datetime
-																				timeFormat={false}
-																				inputProps={{ className: "form-control" }}
-																				value={field.value}
-																				onChange={(e) => {
-																					form.setFieldValue(field.name, e);
-																				}}
-																			/>
-																		)}
-																	</Field>
+																<FormGroup className="uk-form-tanggal-2">
+																		{/* <div className="uk-form-tanggal-2"> */}
+																			<label className="col-form-label">Sampai Tanggal</label>
+																			<Field name="sampai_tanggal">
+																				{({ field, form }) => (
+																					<Datetime
+																						timeFormat={false}
+																						inputProps={{ className: "form-control" }}
+																						value={field.value}
+																						onChange={(e) => {
+																							form.setFieldValue(field.name, e);
+																						}}
+																					/>
+																				)}
+																			</Field>
 																	<ErrorMessage name="sampai_tanggal" component="div" className="form-text text-danger" />
+																	{/* </div> */}
 																</FormGroup>
-
-																<FormGroup row>
-																	<div className="col-xl-12">
-																		<Button color="primary" block type="submit" disabled={laporan.data?.evaluasi.length}>
-																			Simpan Jadwal
+																<FormGroup>
+																	<div className="btn-simpanpenjadwalan">
+																		<Button className= "btn-colorpenjadwalan" color= "info" block type="submit" disabled={laporan.data?.evaluasi.length}>
+																			<h4 className="text-btn-penjadwalan-1">Simpan</h4>
 																		</Button>
 																	</div>
 																</FormGroup>

components/Layout/Menu.js

@@ -11,19 +11,25 @@ const Menu = [
 	},
 	{
 		name: "Pelaporan",
+		path: "/app/pelaporan",
 		icon: "icon-notebook",
-		translate: "sidebar.nav.LAPORAN",
-		submenu: [
-			{
-				name: "List Laporan",
-				path: "/app/pelaporan",
-			},
-			{
-				name: "Laporan ditutup",
-				path: "/app/laporan-ditutup",
-			},
-		],
+		translate: "sidebar.nav.PELAPORAN",
 	},
+	// {
+	// 	name: "Pelaporan",
+	// 	icon: "icon-notebook",
+	// 	translate: "sidebar.nav.LAPORAN",
+	// 	submenu: [
+	// 		{
+	// 			name: "List Laporan",
+	// 			path: "/app/pelaporan",
+	// 		},
+	// 		{
+	// 			name: "Laporan ditutup",
+	// 			path: "/app/laporan-ditutup",
+	// 		},
+	// 	],
+	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",

components/Layout/MenuLLDIKTI.js

@@ -11,19 +11,25 @@ const Menu = [
 	},
 	{
 		name: "Pelaporan",
+		path: "/app/pelaporan",
 		icon: "icon-notebook",
-		translate: "sidebar.nav.LAPORAN",
-		submenu: [
-			{
-				name: "List Laporan",
-				path: "/app/pelaporan",
-			},
-			{
-				name: "Laporan ditutup",
-				path: "/app/laporan-ditutup",
-			},
-		],
+		translate: "sidebar.nav.PELAPORAN",
 	},
+	// {
+	// 	name: "Pelaporan",
+	// 	icon: "icon-notebook",
+	// 	translate: "sidebar.nav.LAPORAN",
+	// 	submenu: [
+	// 		{
+	// 			name: "List Laporan",
+	// 			path: "/app/pelaporan",
+	// 		},
+	// 		{
+	// 			name: "Laporan ditutup",
+	// 			path: "/app/laporan-ditutup",
+	// 		},
+	// 	],
+	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",

components/Main/DetailLaporan.js

@@ -9,7 +9,7 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 		<>
 			{(!data.user.isPrivate || user.role.id === 2020) && (
 				<>
-					{noTitle ? "" : <p className="lead bb">Identitas Pelapor - {data.user.isPublic ? "Umum" : "Internal"}</p>}
+					{noTitle ? "" : <div className="header-1"><h2 className="card-title-1">Identitas Pelapor - {data.user.isPublic ? "Umum" : "Internal"}</h2></div>}
 					<FormGroup row>
 						<Col md="4">Nama Pelapor:</Col>
 						<Col md="8">
@@ -55,7 +55,7 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 					)}
 				</>
 			)}
-			{noTitle ? "" : <p className="lead bb">Detail Laporan</p>}
+			{noTitle ? "" : <div className="header-1"><h2 className="card-title-1">Detail Laporan</h2></div>}
 			<form className="form-horizontal">
 				<FormGroup row>
 					<Col md="4">Nomor Laporan:</Col>
@@ -89,22 +89,6 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 						</Scrollable>
 					</Col>
 				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Dibuat Pada:</Col>
-					<Col md="8">
-						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
-					</Col>
-				</FormGroup>
-				{!noStatus && data.aktif ? (
-					<FormGroup row>
-						<Col md="4">Status:</Col>
-						<Col md="8">
-							<div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
-						</Col>
-					</FormGroup>
-				) : (
-					""
-				)}
 				<FormGroup row>
 					<Col md="4">Dokumen Pendukung:</Col>
 					<Col md="8">
@@ -128,6 +112,22 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 						</Scrollable>
 					</Col>
 				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Dibuat Pada:</Col>
+					<Col md="8">
+						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
+					</Col>
+				</FormGroup>
+				{!noStatus && data.aktif ? (
+					<FormGroup row>
+						<Col md="4">Status:</Col>
+						<Col md="8">
+							<div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
+						</Col>
+					</FormGroup>
+				) : (
+					""
+				)}
 			</form>
 		</>
 	);

components/Public/DetailLaporan.js

@@ -6,12 +6,12 @@ import { API_URL } from "@/env";
 function DetailLaporan({ data }) {
 	return (
 		<>
-			<p className="lead bb">Detail Laporan</p>
+			<p className="lead bb tengah">Detail Laporan</p>
 			<form className="form-horizontal">
 				<FormGroup row>
 					<Col md="4">Nomor Laporan:</Col>
 					<Col md="8">
-						<strong>{data._number}</strong>
+						<strong>{data.no_laporan}</strong>
 					</Col>
 				</FormGroup>
 				<FormGroup row>

pages/app/index.js

@@ -40,7 +40,8 @@ class App extends Component {
 			<div>
 				<Navbar className="navbar-color" expand="md" dark>
 					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
+						<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" />
+						<img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -68,14 +69,20 @@ class App extends Component {
 										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
 									</Link> */}
 									<Link href="/laporan/new">
-									<Button color="info" className="btn-labeled">
-                        				<span className="btn-label"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/></span><text className="text-home-1">Buat Laporan</text>
-                    				</Button>
+										<Button color="info" className="btn-labeled">
+											<span className="btn-label">
+												<img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon" />
+											</span>
+											<text className="text-home-1">Buat Laporan</text>
+										</Button>
 									</Link>
-									<Link href="/laporan/new">
-									<Button color="info" className="btn-labeled-2">
-                        				<span className="btn-label"><img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon"/></span><text className="text-home-1">Pemantauan</text>
-                    				</Button>
+									<Link href="/pemantauan">
+										<Button color="info" className="btn-labeled-2">
+											<span className="btn-label">
+												<img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon" />
+											</span>
+											<text className="text-home-1">Pemantauan</text>
+										</Button>
 									</Link>
 								</p>
 							</Col>

pages/pemantauan.js

@@ -126,15 +126,15 @@ class App extends Component {
 								<div class="header-1">
     								<h2 class="card-title-1">Rekap Laporan</h2>
 								</div>
-								<div className="tengah">
+								<div className="">
 									{laporan && log ? (
 										<>
 											<DetailLaporan data={laporan} />
-											<p className="lead bb">Pemantauan</p>
+											<p className="lead bb tengah">Pemantauan</p>
 											<Timeline data={log} noFile />{" "}
 										</>
 									) : (
-										"Tidak Ada Laporan"
+										<p className="tengah">Tidak Ada Laporan</p>
 									)}
 								</div>
 								</CardBody>

styles/app/layout/layout.scss

@@ -158,6 +158,7 @@ html, body, #__next, #__settings_provider, #__themes_provider {
             margin: -$content-padding;
             margin-bottom: $content-padding;
             padding: $content-padding;
+            background-color: #E3F0FF;
             button,
             .btn {
                 margin: 0;

styles/bootstrap/_buttons.scss

@@ -201,4 +201,23 @@ height: 40px;
 .tengah{
 text-align: center;
 padding: 30px;
-}
+}
+.btn-simpanpenjadwalan{
+  margin-left: auto;
+  width: 100px;
+}
+.btn-colorpenjadwalan{
+  // display: inline-block;
+  background-color: #6FB9DE;
+  height: 35px;
+}
+.text-btn-penjadwalan-1{
+  letter-spacing: 0.02em;
+  text-align: center;
+}
+.btn-simpanjadwal{
+  margin-left: auto;
+  width: 100px;
+  margin-top: 20px;
+  margin-bottom: 15px;
+}

styles/bootstrap/_card.scss

@@ -310,4 +310,18 @@ color: rgba(255, 255, 255, 0.9);
 }
 .border-radius-login{
   border-radius: 5px;
-}
+}
+
+.header-penjadwalan{
+  background: #6FB9DE;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+  // width: 830px;
+  height: 45px;
+  margin: 20px;
+}
+.warna-penjadwalan-block{
+  height: 35px;
+  width: 60px;
+  margin-left: auto;
+}

styles/bootstrap/_forms.scss

@@ -346,3 +346,24 @@ textarea.form-control {
     }
   }
 }
+
+.uk-form-tanggal-1{
+  position: relative;
+  width: 47%;
+  float: left;
+
+  
+}
+.uk-form-tanggal-2{
+  position: relative;
+  
+  width: 47%;
+  float: right;
+}
+// .heading-penjadwalan-2{
+//   margin: 20px;
+//   margin-top:-20px;
+//   margin-right: 20px;
+//   padding: 20px;
+//   background-color: #E3F0FF;
+// }

styles/themes/theme-a.scss

@@ -2,178 +2,181 @@
 @import "../bootstrap/functions";
 @import "../bootstrap/variables";
 @import "../bootstrap/mixins";
-@import '../app/common/variables';
-
+@import "../app/common/variables";
 
 // LAYOUT
 
-$content-bg:                    #f5f7fa;
-$aside-bg:                      #fff;
+$content-bg: #f5f7fa;
+$aside-bg: #fff;
 
 // NAVBAR TOP
 
-$nav-top-bg:                    $info;
-$nav-top-bg-start:              $nav-top-bg;
-$nav-top-bg-end:                $info-light;
-$nav-header-bg:                 transparent;
+$nav-top-bg: #6fb9de;
+$nav-top-bg-start: $nav-top-bg;
+$nav-top-bg-end: $info-light;
+$nav-header-bg: transparent;
 
-$nav-top-item:                  #fff;
-$nav-top-item-active:           darken($nav-top-bg, 20%);
+$nav-top-item: #fff;
+$nav-top-item-active: darken($nav-top-bg, 20%);
 
 // SIDEBAR
 
-$sidebar-bg:                      $aside-bg;
+$sidebar-bg: $aside-bg;
 
-$sidebar-item-color:              #515253;
-$sidebar-item-color-active:       $nav-top-bg;
-$sidebar-item-bg-active:          darken($sidebar-bg, 1%);
+$sidebar-item-color: #515253;
+$sidebar-item-color-active: $nav-top-bg;
+$sidebar-item-bg-active: darken($sidebar-bg, 1%);
 
-$sidebar-icon-color:              inherits;
-$sidebar-icon-color-active:       $nav-top-bg;
+$sidebar-icon-color: inherits;
+$sidebar-icon-color-active: $nav-top-bg;
 
-$sidebar-bullet-color:            rgba(0,0,0,.25);
-$sidebar-bullet-color-active:     $sidebar-icon-color-active;
+$sidebar-bullet-color: rgba(0, 0, 0, 0.25);
+$sidebar-bullet-color-active: $sidebar-icon-color-active;
 
 // $sidebar-heading-color:           #919DA8;
-$sidebar-heading-color:           #6FB9DE;
-$sidebar-label-color:             $sidebar-item-color;
+$sidebar-heading-color: #6fb9de;
+$sidebar-label-color: $sidebar-item-color;
 
 // OFFSIDEBAR
 
-$offsidebar-bg:           #fff;
+$offsidebar-bg: #fff;
 $offsidebar-border-color: greyscale(darken($offsidebar-bg, 20%));
-$offsidebar-color:        $body-color;
+$offsidebar-color: $body-color;
 
 .theme-a {
-
-    /* ========================================================================
+	/* ========================================================================
        Component: layout
      ========================================================================== */
-    &.wrapper {
-        background-color: $content-bg;
-    }
+	&.wrapper {
+		background-color: $content-bg;
+	}
 
-    /* ========================================================================
+	/* ========================================================================
        Component: top-navbar
      ========================================================================== */
-    .topnavbar {
-        background-color: $nav-top-bg;
-        @include gradient-x($nav-top-bg-start, $nav-top-bg-end);
-
-        @include media-breakpoint-up(lg) {
-            .navbar-nav > .nav-item.show > .nav-link {
-                &, &:hover, &:focus {
-                    box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
-                }
-            }
-        }
-
-        .navbar-nav > .nav-item > .navbar-text {
-            color: $nav-top-item;
-        }
-
-        .navbar-nav > .nav-item > .nav-link,
-        .navbar-nav > .nav-item.show > .nav-link {
-            color: $nav-top-item;
-            &:hover, &:focus {
-                color: $nav-top-item-active;
-            }
-        }
-
-        .dropdown-item.active, .dropdown-item:active {
-            background-color: $nav-top-bg;
-        }
-    }
-
-    /* ========================================================================
+	.topnavbar {
+		background-color: $nav-top-bg;
+		@include gradient-x($nav-top-bg-start, $nav-top-bg-end);
+
+		@include media-breakpoint-up(lg) {
+			.navbar-nav > .nav-item.show > .nav-link {
+				&,
+				&:hover,
+				&:focus {
+					box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
+				}
+			}
+		}
+
+		.navbar-nav > .nav-item > .navbar-text {
+			color: $nav-top-item;
+		}
+
+		.navbar-nav > .nav-item > .nav-link,
+		.navbar-nav > .nav-item.show > .nav-link {
+			color: $nav-top-item;
+			&:hover,
+			&:focus {
+				color: $nav-top-item-active;
+			}
+		}
+
+		.dropdown-item.active,
+		.dropdown-item:active {
+			background-color: $nav-top-bg;
+		}
+	}
+
+	/* ========================================================================
        Component: sidebar
      ========================================================================== */
-    .sidebar {
-        background-color: $sidebar-bg;
-
-        .nav-heading {
-            color: $sidebar-heading-color;
-        }
-    }
-
-    // Items
-    .sidebar-nav {
-        > li {
-            > a, > .nav-item {
-                color: $sidebar-item-color;
-
-                &:focus, &:hover {
-                    color: $sidebar-item-color-active;
-                }
-
-                // Item icon
-                > em {
-                    color: $sidebar-icon-color;
-                }
-
-            }
-
-            // Active item state
-            &.active, &.open {
-                &, > a, > .nav-item, .sidebar-nav {
-                    background-color: $sidebar-item-bg-active;
-                    color: $sidebar-item-color-active;
-                }
-
-                > .nav-item > em, > a > em {
-                    color: $sidebar-icon-color-active;
-                }
-
-            }
-
-            &.active {
-                border-left-color: $sidebar-item-color-active;
-            }
-
-        }
-
-    }
-
-    .sidebar-subnav {
-        background-color: $sidebar-bg;
-
-        > .sidebar-subnav-header {
-            color: $sidebar-item-color;
-        }
-
-        > li {
-            > a, > .nav-item {
-                color: $sidebar-item-color;
-
-                &:focus, &:hover {
-                    color: $sidebar-item-color-active;
-                }
-
-            }
-
-            &.active {
-                > a, > .nav-item {
-                    color: $sidebar-icon-color-active;
-
-                    &:after {
-                        border-color: $sidebar-bullet-color-active;
-                        background-color: $sidebar-bullet-color-active;
-                    }
-
-                }
-
-            }
-
-        }
-
-    }
-
-    /* ========================================================================
+	.sidebar {
+		background-color: $sidebar-bg;
+
+		.nav-heading {
+			color: $sidebar-heading-color;
+		}
+	}
+
+	// Items
+	.sidebar-nav {
+		> li {
+			> a,
+			> .nav-item {
+				color: $sidebar-item-color;
+
+				&:focus,
+				&:hover {
+					color: $sidebar-item-color-active;
+				}
+
+				// Item icon
+				> em {
+					color: $sidebar-icon-color;
+				}
+			}
+
+			// Active item state
+			&.active,
+			&.open {
+				&,
+				> a,
+				> .nav-item,
+				.sidebar-nav {
+					background-color: $sidebar-item-bg-active;
+					color: $sidebar-item-color-active;
+				}
+
+				> .nav-item > em,
+				> a > em {
+					color: $sidebar-icon-color-active;
+				}
+			}
+
+			&.active {
+				border-left-color: $sidebar-item-color-active;
+			}
+		}
+	}
+
+	.sidebar-subnav {
+		background-color: $sidebar-bg;
+
+		> .sidebar-subnav-header {
+			color: $sidebar-item-color;
+		}
+
+		> li {
+			> a,
+			> .nav-item {
+				color: $sidebar-item-color;
+
+				&:focus,
+				&:hover {
+					color: $sidebar-item-color-active;
+				}
+			}
+
+			&.active {
+				> a,
+				> .nav-item {
+					color: $sidebar-icon-color-active;
+
+					&:after {
+						border-color: $sidebar-bullet-color-active;
+						background-color: $sidebar-bullet-color-active;
+					}
+				}
+			}
+		}
+	}
+
+	/* ========================================================================
        Component: offsidebar
      ========================================================================== */
-    .offsidebar {
-        border-left: 1px solid $offsidebar-border-color;
-        background-color: $offsidebar-bg;
-        color: $offsidebar-color;
-    }
+	.offsidebar {
+		border-left: 1px solid $offsidebar-border-color;
+		background-color: $offsidebar-bg;
+		color: $offsidebar-color;
+	}
 }

styles/themes/theme-e.scss

@@ -2,177 +2,180 @@
 @import "../bootstrap/functions";
 @import "../bootstrap/variables";
 @import "../bootstrap/mixins";
-@import '../app/common/variables';
-
+@import "../app/common/variables";
 
 // LAYOUT
 
-$content-bg:                    #f5f7fa;
-$aside-bg:                      $gray-dark;
+$content-bg: #f5f7fa;
+$aside-bg: $gray-dark;
 
 // NAVBAR TOP
 
-$nav-top-bg:                    $info-dark;
-$nav-top-bg-start:              $nav-top-bg;
-$nav-top-bg-end:                $info;
-$nav-header-bg:                 transparent;
+$nav-top-bg: #6fb9de;
+$nav-top-bg-start: $nav-top-bg;
+$nav-top-bg-end: $info-light;
+$nav-header-bg: transparent;
 
-$nav-top-item:                  #fff;
-$nav-top-item-active:           darken($nav-top-bg, 20%);
+$nav-top-item: #fff;
+$nav-top-item-active: darken($nav-top-bg, 20%);
 
 // SIDEBAR
 
-$sidebar-bg:                      $aside-bg;
+$sidebar-bg: $aside-bg;
 
-$sidebar-item-color:              #e1e2e3;
-$sidebar-item-color-active:       $nav-top-bg;
-$sidebar-item-bg-active:          darken($sidebar-bg, 1%);
+$sidebar-item-color: #e1e2e3;
+$sidebar-item-color-active: $nav-top-bg;
+$sidebar-item-bg-active: darken($sidebar-bg, 1%);
 
-$sidebar-icon-color:              inherits;
-$sidebar-icon-color-active:       $nav-top-bg;
+$sidebar-icon-color: inherits;
+$sidebar-icon-color-active: $nav-top-bg;
 
-$sidebar-bullet-color:            rgba(0,0,0,.25);
-$sidebar-bullet-color-active:     $sidebar-icon-color-active;
+$sidebar-bullet-color: rgba(0, 0, 0, 0.25);
+$sidebar-bullet-color-active: $sidebar-icon-color-active;
 
-$sidebar-heading-color:           #919DA8;
-$sidebar-label-color:             $sidebar-item-color;
+$sidebar-heading-color: #919da8;
+$sidebar-label-color: $sidebar-item-color;
 
 // OFFSIDEBAR
 
-$offsidebar-bg:           #fff;
+$offsidebar-bg: #fff;
 $offsidebar-border-color: greyscale(darken($offsidebar-bg, 20%));
-$offsidebar-color:        $body-color;
+$offsidebar-color: $body-color;
 
 .theme-e {
-
-    /* ========================================================================
+	/* ========================================================================
        Component: layout
      ========================================================================== */
-    &.wrapper {
-        background-color: $content-bg;
-    }
+	&.wrapper {
+		background-color: $content-bg;
+	}
 
-    /* ========================================================================
+	/* ========================================================================
        Component: top-navbar
      ========================================================================== */
-    .topnavbar {
-        background-color: $nav-top-bg;
-        @include gradient-x($nav-top-bg-start, $nav-top-bg-end);
-
-        @include media-breakpoint-up(lg) {
-            .navbar-nav > .nav-item.show > .nav-link {
-                &, &:hover, &:focus {
-                    box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
-                }
-            }
-        }
-
-        .navbar-nav > .nav-item > .navbar-text {
-            color: $nav-top-item;
-        }
-
-        .navbar-nav > .nav-item > .nav-link,
-        .navbar-nav > .nav-item.show > .nav-link {
-            color: $nav-top-item;
-            &:hover, &:focus {
-                color: $nav-top-item-active;
-            }
-        }
-
-        .dropdown-item.active, .dropdown-item:active {
-            background-color: $nav-top-bg;
-        }
-    }
-
-    /* ========================================================================
+	.topnavbar {
+		background-color: $nav-top-bg;
+		@include gradient-x($nav-top-bg-start, $nav-top-bg-end);
+
+		@include media-breakpoint-up(lg) {
+			.navbar-nav > .nav-item.show > .nav-link {
+				&,
+				&:hover,
+				&:focus {
+					box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
+				}
+			}
+		}
+
+		.navbar-nav > .nav-item > .navbar-text {
+			color: $nav-top-item;
+		}
+
+		.navbar-nav > .nav-item > .nav-link,
+		.navbar-nav > .nav-item.show > .nav-link {
+			color: $nav-top-item;
+			&:hover,
+			&:focus {
+				color: $nav-top-item-active;
+			}
+		}
+
+		.dropdown-item.active,
+		.dropdown-item:active {
+			background-color: $nav-top-bg;
+		}
+	}
+
+	/* ========================================================================
        Component: sidebar
      ========================================================================== */
-    .sidebar {
-        background-color: $sidebar-bg;
-
-        .nav-heading {
-            color: $sidebar-heading-color;
-        }
-    }
-
-    // Items
-    .sidebar-nav {
-        > li {
-            > a, > .nav-item {
-                color: $sidebar-item-color;
-
-                &:focus, &:hover {
-                    color: $sidebar-item-color-active;
-                }
-
-                // Item icon
-                > em {
-                    color: $sidebar-icon-color;
-                }
-
-            }
-
-            // Active item state
-            &.active, &.open {
-                &, > a, > .nav-item, .sidebar-nav {
-                    background-color: $sidebar-item-bg-active;
-                    color: $sidebar-item-color-active;
-                }
-
-                > .nav-item > em, > a > em {
-                    color: $sidebar-icon-color-active;
-                }
-
-            }
-
-            &.active {
-                border-left-color: $sidebar-item-color-active;
-            }
-
-        }
-
-    }
-
-    .sidebar-subnav {
-        background-color: $sidebar-bg;
-
-        > .sidebar-subnav-header {
-            color: $sidebar-item-color;
-        }
-
-        > li {
-            > a, > .nav-item {
-                color: $sidebar-item-color;
-
-                &:focus, &:hover {
-                    color: $sidebar-item-color-active;
-                }
-
-            }
-
-            &.active {
-                > a, > .nav-item {
-                    color: $sidebar-icon-color-active;
-
-                    &:after {
-                        border-color: $sidebar-bullet-color-active;
-                        background-color: $sidebar-bullet-color-active;
-                    }
-
-                }
-
-            }
-
-        }
-
-    }
-
-    /* ========================================================================
+	.sidebar {
+		background-color: $sidebar-bg;
+
+		.nav-heading {
+			color: $sidebar-heading-color;
+		}
+	}
+
+	// Items
+	.sidebar-nav {
+		> li {
+			> a,
+			> .nav-item {
+				color: $sidebar-item-color;
+
+				&:focus,
+				&:hover {
+					color: $sidebar-item-color-active;
+				}
+
+				// Item icon
+				> em {
+					color: $sidebar-icon-color;
+				}
+			}
+
+			// Active item state
+			&.active,
+			&.open {
+				&,
+				> a,
+				> .nav-item,
+				.sidebar-nav {
+					background-color: $sidebar-item-bg-active;
+					color: $sidebar-item-color-active;
+				}
+
+				> .nav-item > em,
+				> a > em {
+					color: $sidebar-icon-color-active;
+				}
+			}
+
+			&.active {
+				border-left-color: $sidebar-item-color-active;
+			}
+		}
+	}
+
+	.sidebar-subnav {
+		background-color: $sidebar-bg;
+
+		> .sidebar-subnav-header {
+			color: $sidebar-item-color;
+		}
+
+		> li {
+			> a,
+			> .nav-item {
+				color: $sidebar-item-color;
+
+				&:focus,
+				&:hover {
+					color: $sidebar-item-color-active;
+				}
+			}
+
+			&.active {
+				> a,
+				> .nav-item {
+					color: $sidebar-icon-color-active;
+
+					&:after {
+						border-color: $sidebar-bullet-color-active;
+						background-color: $sidebar-bullet-color-active;
+					}
+				}
+			}
+		}
+	}
+
+	/* ========================================================================
        Component: offsidebar
      ========================================================================== */
-    .offsidebar {
-        border-left: 1px solid $offsidebar-border-color;
-        background-color: $offsidebar-bg;
-        color: $offsidebar-color;
-    }
+	.offsidebar {
+		border-left: 1px solid $offsidebar-border-color;
+		background-color: $offsidebar-bg;
+		color: $offsidebar-color;
+	}
 }