main color v.1

components/Banding/TableSanksi.js

@@ -58,8 +58,10 @@ function TableSanksi({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button color="primary" size="sm">
-															{linkName}
+														<Button className="color-3e3a8e" color >
+															<span className="font-color-white">
+																{linkName}
+															</span>
 														</Button>
 													</Link>
 												</div>

components/Charts/chart-flot.scss

@@ -37,6 +37,7 @@
     display: block;
     width: 150%;
     height: 250px;
+    // font-size: large;
     .legend {
         >table tr td {
             padding: 3px;

components/Extras/calendar.view.js

@@ -178,10 +178,16 @@ class Calendar extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>Membuat Jadwal Pemeriksaan</div>
+					<span className="font-color-white">
+						Membuat Jadwal Pemeriksaan
+					</span>
 					<div className="ml-auto">
 						<Link href="/app/penjadwalan">
-							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							<Button className="color-3e3a8e" color>
+								<span className="font-color-white">
+									&lt; Kembali
+								</span>
+							</Button>
 						</Link>
 					</div>
 				</div>
@@ -250,8 +256,8 @@ class Calendar extends Component {
 															</FormGroup>
 														)}
 														<div className="btn-simpanjadwal">
-															<Button className="text-btn-penjadwalan-1 btn-colorpenjadwalan" color="primary" block disabled={laporan.data?.evaluasi.length}>
-																<h4 className="text-btn-penjadwalan-1">Simpan</h4>
+															<Button className="text-btn-penjadwalan-1 btn-colorpenjadwalan color-3e3a8e" color block disabled={laporan.data?.evaluasi.length}>
+																<h4 className="text-btn-penjadwalan-1 font-color-white">Simpan</h4>
 															</Button>
 														</div>
 													</Form>
@@ -334,8 +340,8 @@ class Calendar extends Component {
 
 																<FormGroup>
 																	<div className="btn-simpanpenjadwalan">
-																		<Button color="info" className="btn-colorpenjadwalan" block type="submit" disabled={laporan.data?.evaluasi.length}>
-																			<h4 className="text-btn-penjadwalan-1">Simpan</h4>
+																		<Button className="btn-colorpenjadwalan" color block type="submit" disabled={laporan.data?.evaluasi.length}>
+																			<h4 className="text-btn-penjadwalan-1 font-color-white">Simpan</h4>
 																		</Button>
 																	</div>
 																</FormGroup>

components/Keberatan/TableSanksi.js

@@ -58,8 +58,10 @@ function TableSanksi({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button color="primary" size="sm">
-															{linkName}
+														<Button className="color-3e3a8e" color >
+															<span className="font-color-white">
+																{linkName}
+															</span>
 														</Button>
 													</Link>
 												</div>

components/Layout/ContentWrapper.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 /**
  * Wrapper element for template content
  */
-const ContentWrapper = props =>(
+const ContentWrapper = props => (
     <div className="content-wrapper">
         {props.unwrap ?
             (<div className="unwrap">{props.children}</div>)

components/Layout/Header.js

@@ -83,11 +83,13 @@ class Header extends Component {
 					{/* START navbar header */}
 					<div className="navbar-header">
 						<a className="navbar-brand" href="#/">
-							{/* <div className="brand-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" />
-							{/* </div> */}
+							<div className="brand-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" /> */}
+								<img className="width-133" src="/static/img/logo-sidali.png" alt="App Logo" />
+							</div>
 							<div className="brand-logo-collapsed">
-								<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" />
+								<img className="width-50" src="/static/img/Logo-vputih.png" alt="App Logo" />
 							</div>
 						</a>
 					</div>

components/Layout/Sidebar.js

@@ -44,7 +44,7 @@ const outerHeight = (elem, includeMargin) => {
 };
 
 /**
-    Component to display headings on sidebar
+	Component to display headings on sidebar
 */
 const SidebarItemHeader = ({ item }) => (
 	<li className="nav-heading">
@@ -55,7 +55,7 @@ const SidebarItemHeader = ({ item }) => (
 );
 
 /**
-    Normal items for the sidebar
+	Normal items for the sidebar
 */
 const SidebarItem = ({ item, isActive, className, onMouseEnter }) => (
 	<li className={isActive ? "active" : ""} onMouseEnter={onMouseEnter}>
@@ -76,7 +76,7 @@ const SidebarItem = ({ item, isActive, className, onMouseEnter }) => (
 );
 
 /**
-    Build a sub menu with items inside and attach collapse behavior
+	Build a sub menu with items inside and attach collapse behavior
 */
 const SidebarSubItem = ({ item, isActive, handler, children, isOpen, onMouseEnter }) => (
 	<li className={isActive ? "active" : ""}>
@@ -100,7 +100,7 @@ const SidebarSubItem = ({ item, isActive, handler, children, isOpen, onMouseEnte
 );
 
 /**
-    Component used to display a header on menu when using collapsed/hover mode
+	Component used to display a header on menu when using collapsed/hover mode
 */
 const SidebarSubHeader = ({ item }) => <li className="sidebar-subnav-header">{item.name}</li>;
 
@@ -133,7 +133,7 @@ const FloatingNav = ({ item, target, routeActive, isFixed, closeFloatingNav }) =
 };
 
 /**
-    The main sidebar component
+	The main sidebar component
 */
 class Sidebar extends Component {
 	menu = [];

components/Main/Login.js

@@ -69,7 +69,7 @@ class Login extends Component {
 				axiosAPI.defaults.headers.common["Authorization"] = auth.data.token;
 				if (auth.data.user.role.id === 2022) {
 					Router.push({ pathname: "/pt/pemantauan" });
-				} else if ([2020, 2021].includes(auth.data.user.role.id)) {
+				} else if ([2020, 2021, 2023].includes(auth.data.user.role.id)) {
 					Router.push({ pathname: "/app/pemantauan" });
 				} else {
 					this.setState({ error: "Akun tidak ada" });
@@ -122,9 +122,9 @@ class Login extends Component {
 						{/* <div className="required">* Required fields</div>
 						<span>Login Menggunakan Akun PDDIKTI</span> */}
 						<div className="btn-radius">
-							<Button color="info" type="submit" block className=" mt-3 btn-login">
+							<Button color type="submit" block className=" mt-3 btn-login">
 								<text className="text-login">
-									<b>Login</b>
+									<b className="font-color-white">Login</b>
 								</text>
 							</Button>
 						</div>

components/Main/TableLaporan.js

@@ -67,8 +67,10 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 															query: { id: data._id },
 														}}
 													>
-														<Button color="primary" size="sm">
-															{linkName}
+														<Button className="color-3e3a8e" color>
+															<span className="font-color-white">
+																{linkName}
+															</span>
 														</Button>
 													</Link>
 												</div>

components/Main/TableSanksi.js

@@ -55,8 +55,10 @@ function TableSanksi({ listData, to, linkName }) {
 																query: { id: data._id },
 															}}
 														>
-															<Button color="primary" size="sm">
-																{linkName}
+															<Button className="color-3e3a8e" color >
+																<span className="font-color-white">
+																	{linkName}
+																</span>
 															</Button>
 														</Link>
 													</div>

components/PT/CabutSanksi/TableSanksiJawaban.js

@@ -39,7 +39,11 @@ function TableSanksi({ listData, to, linkName }) {
 									<td>
 										{data.sanksi.cabut_sanksi?.jawaban ? (
 											<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
-												<Button color="primary">{linkName}</Button>
+												<Button className="color-3e3a8e" color >
+													<span className="font-color-white">
+														{linkName}
+													</span>
+												</Button>
 											</Link>
 										) : (
 											<div className="badge-info badge">Menunggu Jawaban</div>

components/PT/JawabanBanding/DetailJawaban.js

@@ -48,7 +48,12 @@ function DetailJawaban({ data, sanksiId }) {
 						query: { id: sanksiId },
 					}}
 				>
-					<Button color="primary">Perbaiki Dokumen</Button>
+					{/* <Button color="primary">Perbaiki Dokumen</Button> */}
+					<Button color className="color-3e3a8e">
+						<span className="font-color-white">
+							Perbaiki Dokumen
+						</span>
+					</Button>
 				</Link>
 			)}
 		</>

components/PT/JawabanBanding/TableSanksiJawaban.js

@@ -49,7 +49,11 @@ function TableSanksi({ listData, to, linkName }) {
 									<td>
 										{data.jawaban?.banding ? (
 											<Link href={{ pathname: to, query: { id: data._id } }}>
-												<Button color="primary">{linkName}</Button>
+												<Button className="color-3e3a8e" color >
+													<span className="font-color-white">
+														{linkName}
+													</span>
+												</Button>
 											</Link>
 										) : (
 											<div className="badge-info badge">Menunggu Jawaban</div>

components/PT/JawabanKeberatan/TableSanksiJawaban.js

@@ -49,7 +49,11 @@ function TableSanksi({ listData, to, linkName }) {
 									<td>
 										{data.jawaban?.keberatan ? (
 											<Link href={{ pathname: to, query: { id: data._id } }}>
-												<Button color="primary">{linkName}</Button>
+												<Button className="color-3e3a8e" color >
+													<span className="font-color-white">
+														{linkName}
+													</span>
+												</Button>
 											</Link>
 										) : (
 											<div className="badge-info badge">Menunggu Jawaban</div>

components/PT/JawabanPencabutanSanksi/TableSanksiJawaban.js

@@ -48,7 +48,11 @@ function TableSanksi({ listData, to, linkName }) {
 									<td>
 										{data.jawaban?.cabut_sanksi ? (
 											<Link href={{ pathname: to, query: { id: data._id } }}>
-												<Button color="primary">{linkName}</Button>
+												<Button className="color-3e3a8e" color >
+													<span className="font-color-white">
+														{linkName}
+													</span>
+												</Button>
 											</Link>
 										) : (
 											<div className="badge-info badge">Menunggu Jawaban</div>

components/PT/TableSanksi.js

@@ -47,7 +47,11 @@ function TableSanksi({ listData, to, linkName }) {
 									{/* <td>{moment(data.createdAt).format("DD MMMM YYYY")}</td> */}
 									<td>
 										<Link href={{ pathname: to, query: { id: data._id } }}>
-											<Button color="primary">{linkName}</Button>
+											<Button className="color-3e3a8e" color >
+												<span className="font-color-white">
+													{linkName}
+												</span>
+											</Button>
 										</Link>
 									</td>
 								</tr>

components/Pelaporan/CaseProgress.js

@@ -68,7 +68,7 @@ function CaseProgress({ data, nextButton, prevButton, tahun, newLaporan, excel }
 		}
 	};
 
-	const ChartPie = {
+	const Rekapitulasi = {
 		data: [
 			{
 				label: "Pelaporan masuk",
@@ -134,7 +134,7 @@ function CaseProgress({ data, nextButton, prevButton, tahun, newLaporan, excel }
 				<div className="header-1">
 					<h2 className="card-title-1">Rekapitulasi</h2>
 				</div>
-				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
+				<FlotChart options={Rekapitulasi.options} data={Rekapitulasi.data} className="flot-chart" height="250px" />
 			</div>
 			<div className="card-body">
 				<div className="header-1">

components/Pemeriksaan/InputEvaluasi.js

@@ -230,8 +230,10 @@ export default class InputEvaluasi extends Component {
 						</FormGroup>
 						<FormGroup row>
 							<div className="col-xl-10">
-								<button className="btn btn-sm btn-primary" type="submit">
-									Simpan Evaluasi
+								<button className="btn btn-sm color-3e3a8e" type="submit">
+									<span className="font-color-white">
+										Simpan Evaluasi
+									</span>
 								</button>
 							</div>
 						</FormGroup>

components/Pemeriksaan/TableLaporan.js

@@ -61,8 +61,10 @@ function TableLaporan({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button color="primary" size="sm">
-															{linkName}
+														<Button className="color-3e3a8e" color >
+															<span className="font-color-white">
+																{linkName}
+															</span>
 														</Button>
 													</Link>
 												</div>
@@ -75,7 +77,7 @@ function TableLaporan({ listData, to, linkName }) {
 					</Datatable>
 				)}
 			</div>
-		</div>
+		</div >
 	);
 }
 

components/PencabutanSanksi/TableSanksi.js

@@ -58,8 +58,10 @@ function TableSanksi({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button color="primary" size="sm">
-															{linkName}
+														<Button className="color-3e3a8e" color >
+															<span className="font-color-white">
+																{linkName}
+															</span>
 														</Button>
 													</Link>
 												</div>

components/Penjadwalan/CaseProgress.js

@@ -9,7 +9,7 @@ import MorrisChart from "@/components/Charts//Morris";
 import { Button } from "reactstrap";
 
 function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
-	const ChartBar = {
+	const Perkembangan = {
 		data: [
 			{
 				// "label": "Complete",
@@ -55,7 +55,7 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 		},
 	};
 
-	const ChartPie = {
+	const Rekapitulasi = {
 		data: [
 			{
 				label: "Sudah ada jadwal",
@@ -114,14 +114,14 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 					<h2 className="card-title-1">Perkembangan</h2>
 				</div>
 				<div className="w-401">
-					<FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
+					<FlotChart options={Perkembangan.options} data={Perkembangan.data} className="flot-chart" height="200px" />
 				</div>
 			</div>
 			<div className="card-body">
 				<div className="header-1">
 					<h2 className="card-title-1">Rekapitulasi</h2>
 				</div>
-				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
+				<FlotChart options={Rekapitulasi.options} data={Rekapitulasi.data} className="flot-chart" height="250px" />
 			</div>
 		</div>
 	);

components/Penjadwalan/TableLaporan.js

@@ -61,8 +61,11 @@ function TableLaporan({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button color="primary" size="sm">
-															Edit
+														<Button className="color-3e3a8e btn" color>
+															<span className="font-color-white">
+																Edit
+															</span>
+
 														</Button>
 													</Link>
 												</div>

components/Sanksi/TableLaporan.js

@@ -58,8 +58,10 @@ function TableLaporan({ listData }) {
 															query: { id: data.sanksi || data._id },
 														}}
 													>
-														<Button color="primary" size="sm">
-															{data.sanksi ? "Detail" : "Proses Sanksi"}
+														<Button className="color-3e3a8e" color>
+															<span className="font-color-white">
+																{data.sanksi ? "Detail" : "Proses Sanksi"}
+															</span>
 														</Button>
 													</Link>
 												</div>

pages/app/banding/detail.js

@@ -163,10 +163,16 @@ class JawabanBanding extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Jawaban Permohonan Banding</div>
+						<span className="font-color-white">
+							Jawaban Permohonan Banding
+						</span>
 						<div className="ml-auto">
 							<Link href="/app/banding">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; kembali</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>
@@ -263,8 +269,10 @@ class JawabanBanding extends Component {
 															</FormGroup>
 															<FormGroup row>
 																<div className="col-xl-10">
-																	<Button color="primary" type="submit">
-																		Simpan
+																	<Button color className="color-3e3a8e" type="submit">
+																		<span className="font-color-white">
+																			Simpan
+																		</span>
 																	</Button>
 																</div>
 															</FormGroup>

pages/app/banding/index.js

@@ -25,7 +25,11 @@ class Banding extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Banding</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Banding
+					</span>
+				</div>
 				<Row>
 					{/* <Col lg="4">
 						<CaseProgress />

pages/app/index.js

@@ -40,8 +40,7 @@ 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="width-133" src="/static/img/logo-sidali.png" alt="App Logo" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -70,21 +69,21 @@ class App extends Component {
 									</Link> */}
 									<Link href="/laporan/new">
 										<span className="btn-radius">
-											<Button color="info" className="btn-labeled">
+											<Button color="" className="btn-labeled">
 												<span className="btn-label">
 													<img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon" />
 												</span>
-												<text className="text-button-home-1">Buat Laporan</text>
+												<text className="text-button-home-1 font-color-white">Buat Laporan</text>
 											</Button>
 										</span>
 									</Link>
 									<Link href="/pemantauan">
 										<span className="btn-radius">
-											<Button color="info" className="btn-labeled-2">
+											<Button color className="btn-labeled-2">
 												<span className="btn-label">
 													<img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon" />
 												</span>
-												<text className="text-button-home-1">Pemantauan</text>
+												<text className="text-button-home-1 font-color-white">Pemantauan</text>
 											</Button>
 										</span>
 									</Link>

pages/app/keberatan/detail.js

@@ -168,10 +168,16 @@ class DetailKeberatan extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Permohonan Keberatan</div>
+						<span className="font-color-white">
+							Permohonan Keberatan
+						</span>
 						<div className="ml-auto">
 							<Link href="/app/keberatan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; kembali</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>
@@ -288,8 +294,10 @@ class DetailKeberatan extends Component {
 													<div className="row-xl-10"> */}
 															<FormGroup row>
 																<div className="col-xl-10">
-																	<Button color="primary" type="submit">
-																		Simpan
+																	<Button color className="color-3e3a8e" type="submit">
+																		<span className="font-color-white">
+																			Simpan
+																		</span>
 																	</Button>
 																</div>
 															</FormGroup>

pages/app/keberatan/index.js

@@ -25,7 +25,11 @@ class Keberatan extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Keberatan</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Keberatan
+					</span>
+				</div>
 				<Row>
 					{/* <Col lg="4">
 						<CaseProgress />

pages/app/laporan-delegasi/detail.js

@@ -6,7 +6,7 @@ import { getLog } from "@/actions/log";
 import DetailLaporan from "@/components/Main/DetailLaporan";
 import Link from "next/link";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardBody, FormGroup } from "reactstrap";
+import { Row, Col, Card, CardBody, Button, FormGroup } from "reactstrap";
 import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
 import Scrollable from "@/components/Common/Scrollable";
@@ -40,10 +40,16 @@ class DetailPelaporan extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Detail Laporan Delegasi</div>
+						<span className="font-color-white">
+							Detail Laporan Delegasi
+						</span>
 						<div className="ml-auto">
 							<Link href="/app/laporan-delegasi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>

pages/app/laporan-delegasi/index.js

@@ -51,8 +51,7 @@ class Pelaporan extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>Laporan Delegasi</div>
-					<div className="ml-auto"></div>
+					<div className="font-color-white">Laporan Delegasi</div>
 				</div>
 				<Row>
 					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} excel={this.excel} /> : <Loader />}</Col>

pages/app/pelaporan/detail.js

@@ -5,7 +5,7 @@ import { getOneLaporan } from "@/actions/pelaporan";
 import DetailLaporan from "@/components/Main/DetailLaporan";
 import Link from "next/link";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardBody } from "reactstrap";
+import { Row, Col, Card, Button, CardBody } from "reactstrap";
 import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
 
@@ -34,10 +34,16 @@ class DetailPelaporan extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Detail Pelaporan</div>
+						<span className="font-color-white">
+							Detail Pelaporan
+						</span>
 						<div className="ml-auto">
 							<Link href="/app/pelaporan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>

pages/app/pelaporan/index.js

@@ -55,11 +55,13 @@ class Pelaporan extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					Pelaporan
+					<span className="font-color-white">
+						Pelaporan
+					</span>
 					<div className="ml-auto"></div>
 					<Link href="/app/penjadwalan">
-						<Button className="btn-header" color="info">
-							<h4>Penjadwalan &gt;</h4>
+						<Button className="btn-header" color>
+							<h4 className="font-color-white">Penjadwalan &gt;</h4>
 						</Button>
 					</Link>
 				</div>
@@ -69,7 +71,7 @@ class Pelaporan extends Component {
 						<div className="mb-3 d-flex">
 							<div>
 								<Link href="/app/pelaporan/search">
-									<Button color="primary">Laporan Baru</Button>
+									<Button className="color-3e3a8e" color="purple">Laporan Baru</Button>
 								</Link>
 							</div>
 						</div>

pages/app/pemantauan-perbaikan/detail.js

@@ -6,7 +6,7 @@ import DetailPT from "@/components/Main/DetailPT";
 import Riwayat from "@/components/DocPerbaikan/Riwayat";
 import { getOneSanksi } from "@/actions/sanksi";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardBody } from "reactstrap";
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
 import { getPT } from "@/actions/PT";
 import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
@@ -36,10 +36,16 @@ class PemantauanDokumen extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Detail Pemantauan Perbaikan</div>
+						<span className="font-color-white">
+							Detail Pemantauan Perbaikan
+						</span>
 						<div className="ml-auto">
 							<Link href="/app/pemantauan-perbaikan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>

pages/app/pemantauan-perbaikan/index.js

@@ -25,7 +25,11 @@ class PemantauanPerbaikan extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Pemantauan Perbaikan</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Pemantauan Perbaikan
+					</span>
+				</div>
 				<Row>
 					{/* <Col lg="4">
 						<CaseProgress />

pages/app/pemantauan/index.js

@@ -97,8 +97,10 @@ class Search extends Component {
 										{this.props.user?.role.id === 2021 ? "" : <p>Pembina: {pt.pembina.nama}</p>}
 									</div>
 									<div className="ml-auto">
-										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
-											View
+										<Button className="color-3e3a8e" color size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
+											<span className="font-color-white">
+												View
+											</span>
 										</Button>
 									</div>
 								</div>
@@ -115,9 +117,9 @@ class Search extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>
+					<div className="font-color-white">
 						Search
-						<small>Search and filter results</small>
+						{/* <small className="font-color-white">Search and filter results</small> */}
 					</div>
 				</div>
 				<Row>

pages/app/pemantauan/timeline.js

@@ -54,7 +54,7 @@ class Pemantauan extends Component {
 			<ContentWrapper unwrap>
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Pemantauan {pt?.data && pt.data.nama}</div>
+						<div className="font-color-white">Pemantauan {pt?.data && pt.data.nama}</div>
 						<div className="ml-auto">
 							<Link href="/app/pemantauan">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
@@ -99,8 +99,11 @@ class Pemantauan extends Component {
 																<td>
 																	<div>
 
-																		<Button color="primary" onClick={(e) => this.handleLihatPemantaun(e, data._id)}>
-																			Detail
+																		<Button color className="color-3e3a8e" onClick={(e) => this.handleLihatPemantaun(e, data._id)}>
+																			<span className="font-color-white">
+																				Detail
+																			</span>
+
 																		</Button>
 
 																	</div>

pages/app/pemeriksaan/index.js

@@ -54,19 +54,21 @@ class Pemeriksaan extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>Evaluasi</div>
+					<span className="font-color-white">
+						Evaluasi
+					</span>
 					<div className="ml-auto">
 						<Link href="/app/penjadwalan">
 							<span className="margin-l-5">
-								<Button className="btn-header" color="info">
-									<h4>&lt; Penjadwalan</h4>
+								<Button className="btn-header" color>
+									<h4 className="font-color-white">&lt; Penjadwalan</h4>
 								</Button>
 							</span>
 						</Link>
 
 						<Link href="/app/sanksi">
-							<Button className="btn-header" color="info">
-								<h4>Sanksi &gt;</h4>
+							<Button className="btn-header" color>
+								<h4 className="font-color-white">Sanksi &gt;</h4>
 							</Button>
 						</Link>
 					</div>

pages/app/pemeriksaan/new.js

@@ -7,7 +7,7 @@ import InputEvaluasi from "@/components/Pemeriksaan/InputEvaluasi";
 import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
 import { getOneLaporan } from "@/actions/pelaporan";
 import Link from "next/link";
-import { Row, Col, Card, CardBody, CardHeader, CardTitle } from "reactstrap";
+import { Row, Col, Card, CardBody, CardHeader, CardTitle, Button } from "reactstrap";
 import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
 
@@ -44,10 +44,14 @@ class PemeriksaanNew extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Evaluasi Pemeriksaan</div>
+						<span className="font-color-white">Evaluasi Pemeriksaan</span>
 						<div className="ml-auto">
 							<Link href="/app/pemeriksaan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>

pages/app/pencabutan-sanksi/detail.js

@@ -166,10 +166,16 @@ class JawabanPencabutanSanksi extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Jawaban Permohonan Pencabutan Sanksi</div>
+						<span className="font-color-white">
+							Jawaban Permohonan Pencabutan Sanksi
+						</span>
 						<div className="ml-auto">
 							<Link href="/app/pencabutan-sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; kembali</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>
@@ -280,8 +286,10 @@ class JawabanPencabutanSanksi extends Component {
 															</FormGroup>
 															<FormGroup>
 																<div className="row-xl-10">
-																	<Button color="primary" type="submit">
-																		Simpan
+																	<Button color className="color-3e3a8e" type="submit">
+																		<span className="font-color-white">
+																			Simpan
+																		</span>
 																	</Button>
 																</div>
 															</FormGroup>

pages/app/pencabutan-sanksi/index.js

@@ -25,7 +25,11 @@ class PencabutanSanksi extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Permohonan Pencabutan Sanksi</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Permohonan Pencabutan Sanksi
+					</span>
+				</div>
 				<Row>
 					{/* <Col lg="4">
 						<CaseProgress />

pages/app/penjadwalan/index.js

@@ -54,19 +54,21 @@ class Penjadwalan extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>Penjadwalan Evaluasi</div>
+					<span className="font-color-white">
+						Penjadwalan Evaluasi
+					</span>
 					<div className="ml-auto">
 						<Link href="/app/pelaporan">
 							<span className="margin-l-5">
-								<Button className="btn-header" color="info">
-									<h4>&lt; Pelaporan</h4>
+								<Button className="btn-header" color>
+									<h4 className="font-color-white">&lt; Pelaporan</h4>
 								</Button>
 							</span>
 						</Link>
 
 						<Link href="/app/pemeriksaan">
-							<Button className="btn-header" color="info">
-								<h4>Pemeriksaan &gt;</h4>
+							<Button className="btn-header" color>
+								<h4 className="font-color-white">Pemeriksaan &gt;</h4>
 							</Button>
 						</Link>
 					</div>

pages/app/sanksi/detail.js

@@ -40,10 +40,16 @@ class Detail extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Detail Sanksi</div>
+						<span className="font-color-white">
+							Detail Sanksi
+						</span>
 						<div className="ml-auto">
 							<Link href="/app/sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>

pages/app/sanksi/index.js

@@ -54,11 +54,13 @@ class Sanksi extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>Sanksi</div>
+					<span className="font-color-white">
+						Sanksi
+					</span>
 					<div className="ml-auto">
 						<Link href="/app/pemeriksaan">
-							<Button className="btn-header" color="info">
-								<h4>&lt; Pemeriksaan</h4>
+							<Button className="btn-header" color>
+								<h4 className="font-color-white">&lt; Pemeriksaan</h4>
 							</Button>
 						</Link>
 					</div>

pages/app/sanksi/proses.js

@@ -94,10 +94,14 @@ class ProsesSanksi extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Penetapan Sanksi</div>
+						<span className="font-color-white">Penetapan Sanksi</span>
 						<div className="ml-auto">
 							<Link href="/app/sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>
@@ -172,8 +176,10 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button className="ml-auto" color="primary" onClick={this.toggleStep("2")}>
-													Next
+												<Button className="ml-auto color-3e3a8e" color onClick={this.toggleStep("2")}>
+													<span className="font-color-white">
+														Next
+													</span>
 												</Button>
 											</div>
 										</TabPane>
@@ -192,11 +198,15 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color="secondary" onClick={this.toggleStep("1")}>
-													Previous
+												<Button color className="color-3e3a8e" onClick={this.toggleStep("1")}>
+													<span className="font-color-white">
+														Previous
+													</span>
 												</Button>
-												<Button className="ml-auto" color="primary" onClick={this.toggleStep("3")}>
-													Next
+												<Button className="ml-auto color-3e3a8e" color onClick={this.toggleStep("3")}>
+													<span className="font-color-white">
+														Next
+													</span>
 												</Button>
 											</div>
 										</TabPane>
@@ -207,11 +217,15 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color="secondary" onClick={this.toggleStep("2")}>
-													Previous
+												<Button colorclassName="color-3e3a8e" onClick={this.toggleStep("2")}>
+													<span className="font-color-white">
+														Previous
+													</span>
 												</Button>
-												<Button className="ml-auto" color="primary" onClick={this.toggleStep("4")}>
-													Next
+												<Button className="ml-auto color-3e3a8e" color onClick={this.toggleStep("4")}>
+													<span className="font-color-white">
+														Next
+													</span>
 												</Button>
 											</div>
 										</TabPane>
@@ -222,11 +236,15 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color="secondary" onClick={this.toggleStep("3")}>
-													Previous
+												<Button color className="color-3e3a8e" onClick={this.toggleStep("3")}>
+													<span className="font-color-white">
+														Previous
+													</span>
 												</Button>
-												<Button className="ml-auto" color="primary" onClick={this.toggleStep("5")}>
-													Next
+												<Button className="ml-auto color-3e3a8e" color onClick={this.toggleStep("5")}>
+													<span className="font-color-white">
+														Next
+													</span>
 												</Button>
 											</div>
 										</TabPane>
@@ -237,11 +255,15 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color="secondary" onClick={this.toggleStep("4")}>
-													Previous
+												<Button color="secondary" className="color-3e3a8e" onClick={this.toggleStep("4")}>
+													<span className="font-color-white">
+														Previous
+													</span>
 												</Button>
-												<Button className="ml-auto" color="primary" onClick={this.done}>
-													Done
+												<Button className="ml-auto color-3e3a8e" color onClick={this.done}>
+													<span className="font-color-white">
+														Done
+													</span>
 												</Button>
 											</div>
 										</TabPane>

pages/laporan/new/index.js

@@ -236,8 +236,7 @@ class App extends Component {
 				<ToastContainer />
 				<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="width-133" src="/static/img/logo-sidali.png" alt="App Logo" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -429,8 +428,8 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<div className="posisi-btn-1 btn-radius">
-													<Button className="button-kirimlaporan" color="info" block type="submit">
-														<h3 className="text-kirimlaporan">Kirim Laporan</h3>
+													<Button className="button-kirimlaporan" color type="submit">
+														<h3 className="text-kirimlaporan font-color-white">Kirim Laporan</h3>
 													</Button>
 												</div>
 											</FormGroup>

pages/pemantauan.js

@@ -65,7 +65,7 @@ class App extends Component {
 			swal.fire({
 				title: 'Data ditemukan',
 				icon: 'success',
-				confirmButtonColor: '#6FB9DE',
+				confirmButtonColor: '#3E3A8E',
 			})
 		} else {
 			this.setState({ laporan: null, log: null });
@@ -73,7 +73,7 @@ class App extends Component {
 			swal.fire({
 				title: 'Data tidak ditemukan',
 				icon: 'error',
-				confirmButtonColor: '#6FB9DE',
+				confirmButtonColor: '#3E3A8E',
 			})
 		}
 	};
@@ -85,8 +85,7 @@ class App extends Component {
 				<ToastContainer />
 				<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="width-133" src="/static/img/logo-sidali.png" alt="App Logo" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -135,8 +134,8 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<div className="posisi-btn-1 btn-radius">
-													<Button className="button-lihatpemantauan" color="info" block type="submit">
-														<h3 className="text-lihatpemantauan">Lihat Pemantauan</h3>
+													<Button className="button-lihatpemantauan" color block type="submit">
+														<h3 className="text-lihatpemantauan font-color-white">Lihat Pemantauan</h3>
 													</Button>
 												</div>
 											</FormGroup>

pages/pt/dokumen-perbaikan/detail.js

@@ -149,10 +149,16 @@ class DetailPerbaikanDoc extends Component {
 				{pt && <Header data={pt} />}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Dokumen Perbaikan</div>
+						<span className="font-color-white">
+							Dokumen Perbaikan
+						</span>
 						<div className="ml-auto">
 							<Link href="/pt/dokumen-perbaikan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>
@@ -230,8 +236,8 @@ class DetailPerbaikanDoc extends Component {
 															</FormGroup>
 															<FormGroup row>
 																<div className="col-xl-10">
-																	<Button color="primary" type="submit">
-																		Kirim
+																	<Button color className="color-3e3a8e" type="submit">
+																		<span className="font-color-white">Kirim</span>
 																	</Button>
 																</div>
 															</FormGroup>

pages/pt/dokumen-perbaikan/index.js

@@ -24,7 +24,11 @@ class Pelaporan extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Dokumen Perbaikan</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Dokumen Perbaikan
+					</span>
+				</div>
 				<Row>
 					<Col lg={12}>{sanksi.data?.length ? <TableSanksi listData={sanksi.data} to="/pt/dokumen-perbaikan/detail" linkName="Detail" /> : sanksi.data ? "" : <Loader />}</Col>
 				</Row>

pages/pt/jawaban-banding/detail.js

@@ -36,10 +36,16 @@ class JawabanBanding extends Component {
 				{pt && <Header data={pt} />}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Jawaban Atas Permohonan Banding</div>
+						<span className="font-color-white">
+							Jawaban Atas Permohonan Banding
+						</span>
 						<div className="ml-auto">
 							<Link href="/pt/jawaban-banding">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>

pages/pt/jawaban-banding/index.js

@@ -24,7 +24,11 @@ class JawabanKeberatan extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Jawaban Atas Permohonan Banding</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Jawaban Atas Permohonan Banding
+					</span>
+				</div>
 				<Row>
 					<Col lg={12}>{sanksi.data?.length ? <TableSanksi listData={sanksi.data} to="/pt/jawaban-banding/detail" linkName="Detail" /> : sanksi.data ? "" : <Loader />}</Col>
 				</Row>

pages/pt/jawaban-keberatan/detail.js

@@ -47,10 +47,16 @@ class JawabanKeberatan extends Component {
 				{pt && <Header data={pt} />}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Jawaban Atas Permohonan Keberatan</div>
+						<span className="font-color-white">
+							Jawaban Atas Permohonan Keberatan
+						</span>
 						<div className="ml-auto">
 							<Link href="/pt/jawaban-keberatan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>
@@ -70,8 +76,10 @@ class JawabanKeberatan extends Component {
 																Setelah membaca jawaban permohonan keberatan atas pengenaan sanksi, jika Perguruan Tinggi bermaksud mengajukan permohonan banding kepada atasan pemberi sanksi maka dapat
 																menekan tombol di bawah ini paling lambat {moment(sanksi.data.batas_waktu.banding).format("DD MMMM YYYY")}
 															</p>
-															<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data.pengajuan.banding || false}>
-																Ajukan Banding
+															<Button color className="color-3e3a8e" onClick={this.toggleModal} disabled={sanksi.data.pengajuan.banding || false}>
+																<span className="font-color-white">
+																	Ajukan Banding
+																</span>
 															</Button>
 														</>
 													) : (

pages/pt/jawaban-keberatan/index.js

@@ -24,7 +24,11 @@ class JawabanKeberatan extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Jawaban Atas Permohonan Keberatan</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Jawaban Atas Permohonan Keberatan
+					</span>
+				</div>
 				<Row>
 					<Col lg={12}>{sanksi.data?.length ? <TableSanksi listData={sanksi.data} to="/pt/jawaban-keberatan/detail" linkName="Detail" /> : sanksi.data ? "" : <Loader />} </Col>
 				</Row>

pages/pt/jawaban-pencabutan-sanksi/detail.js

@@ -35,10 +35,16 @@ class DetailJawabanPencabutanSanksi extends Component {
 				{pt && <Header data={pt} />}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Jawaban Permohonan Pencabutan Sanksi</div>
+						<span className="font-color-white">
+							Jawaban Permohonan Pencabutan Sanksi
+						</span>
 						<div className="ml-auto">
 							<Link href="/pt/jawaban-pencabutan-sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>

pages/pt/jawaban-pencabutan-sanksi/index.js

@@ -24,7 +24,11 @@ class JawabanCabutSanksi extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Jawaban Permohonan Pencabutan Sanksi</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Jawaban Permohonan Pencabutan Sanksi
+					</span>
+				</div>
 				<Row>
 					<Col lg={12}>{sanksi.data?.length ? <TableSanksi listData={sanksi.data} to="/pt/jawaban-pencabutan-sanksi/detail" linkName="Detail" /> : sanksi.data ? "" : <Loader />}</Col>
 				</Row>

pages/pt/keberatan/detail.js

@@ -44,10 +44,16 @@ class Keberatan extends Component {
 				{pt && <Header data={pt} />}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Permohonan Keberatan</div>
+						<span className="font-color-white">
+							Permohonan Keberatan
+						</span>
 						<div className="ml-auto">
 							<Link href="/pt/keberatan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>
@@ -65,8 +71,10 @@ class Keberatan extends Component {
 															Setelah membaca surat keputusan sanksi tersebut, jika Perguruan Tinggi bermaksud mengajukan permohonan keberatan maka dapat menekan tombol di bawah ini paling lambat{" "}
 															{moment(sanksi.data.batas_waktu.keberatan).format("DD MMMM YYYY")}
 														</p>
-														<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data.pengajuan?.keberatan || false}>
-															Ajukan Permohonan Keberatan
+														<Button color className="color-3e3a8e" onClick={this.toggleModal} disabled={sanksi.data.pengajuan?.keberatan || false}>
+															<span className="font-color-white">
+																Ajukan Permohonan Keberatan
+															</span>
 														</Button>
 													</>
 												) : (

pages/pt/keberatan/index.js

@@ -23,7 +23,10 @@ class Keberatan extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Permohonan Keberatan</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Permohonan Keberatan
+					</span></div>
 				<Row>
 					<Col lg={12}>{sanksi.data?.length ? <TableSanksi listData={sanksi.data} to="/pt/keberatan/detail" linkName="Detail" /> : sanksi.data ? "Tidak ada Sanksi" : <Loader />}</Col>
 				</Row>

pages/pt/pencabutan-sanksi/detail.js

@@ -139,10 +139,16 @@ class DetailPencabutanSanksi extends Component {
 				{pt && <Header data={pt} />}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Permohonan Pencabutan Sanksi</div>
+						<span className="font-color-white">
+							Permohonan Pencabutan Sanksi
+						</span>
 						<div className="ml-auto">
 							<Link href="/pt/pencabutan-sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>
@@ -201,8 +207,10 @@ class DetailPencabutanSanksi extends Component {
 															</FormGroup>
 															<FormGroup>
 																<div className="row-xl-10">
-																	<Button color="primary" disabled={sanksi.data?.pengajuan?.cabut_sanksi || false} type="submit">
-																		Kirim
+																	<Button color className="color-3e3a8e" disabled={sanksi.data?.pengajuan?.cabut_sanksi || false} type="submit">
+																		<span className="font-color-white">
+																			Kirim
+																		</span>
 																	</Button>
 																</div>
 															</FormGroup>

pages/pt/pencabutan-sanksi/index.js

@@ -24,7 +24,11 @@ class PencabutanSanksi extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Permohonan Pencabutan Sanksi</div>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Permohonan Pencabutan Sanksi
+					</span>
+				</div>
 				<Row>
 					<Col lg={12}>{sanksi.data?.length ? <TableSanksi listData={sanksi.data} to="/pt/pencabutan-sanksi/detail" linkName="Detail" /> : sanksi.data ? "Tidak ada Sanksi" : <Loader />}</Col>
 				</Row>

styles/app/layout/layout-extra.scss

@@ -177,3 +177,6 @@ $float-space: 15px;
         }
     }
 }
+.content-heading-modif{
+    background-color: aqua;
+}

styles/app/layout/layout.scss

@@ -19,7 +19,7 @@ $aside-wd-collapsed-text: 90px;
 $aside-bg: #fff;
 
 $content-bg: $body-bg;
-$content-heading-bg: #fafbfc;
+$content-heading-bg: #a9a7c9;
 $content-heading-border: #cfdbe2;
 $content-padding: 20px;
 

styles/app/layout/sidebar.scss

@@ -6,7 +6,8 @@ $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-bg-active:          darken($sidebar-bg, 1%); 
+// $sidebar-item-bg-active:          #6fb9de; 
 
 $sidebar-icon-color:              inherits;
 $sidebar-icon-color-active:       $nav-top-bg;
@@ -47,6 +48,7 @@ $scrollbar-wd:                    17px;
         letter-spacing: .035em;
         pointer-events: none;
         cursor: default;
+        // background-color:#515253;
     }
 }
 
@@ -76,6 +78,7 @@ $scrollbar-wd:                    17px;
             letter-spacing: .025em;
             font-weight: normal;
             cursor: pointer;
+            // background-color: #6FB9DE;
 
             &:focus,
             &:hover {
@@ -98,7 +101,7 @@ $scrollbar-wd:                    17px;
             >a,
             >.nav-item,
             .sidebar-nav {
-                background-color: $sidebar-item-bg-active;
+                background-color: #d8d8e8;
                 color: $sidebar-item-color-active;
             }
             >.nav-item>em,

styles/app/layout/top-navbar.scss

@@ -12,9 +12,9 @@ $nav-header-wd-toggled:         $aside-wd-collapsed;
 
 $nav-header-wd-toggled-text:    $aside-wd-collapsed-text;
 
-$nav-top-bg:                    #6FB9DE;
+$nav-top-bg:                    #3E3A8E;
 $nav-top-bg-start:              $nav-top-bg;
-$nav-top-bg-end:                $info-light;
+$nav-top-bg-end:                $nav-top-bg;
 $nav-header-bg:                 transparent;
 
 $nav-top-item-mobile:           $nav-top-bg;

styles/bootstrap/_buttons.scss

@@ -161,7 +161,7 @@ input[type="button"] {
 	margin-left: auto;
 	// background: rgba(0, 0, 0, 0.05);
 	display: inline-block;
-	background-color: #6fb9de;
+	background-color: #3E3A8E;
 	width: 160px;
 	height: 35px;
 	margin-bottom: -5px;
@@ -180,7 +180,7 @@ input[type="button"] {
 	padding-bottom: 0;
 	margin-right: 20px;
 	margin-top: 3%;
-	background: #6fb9de;
+	background: #3E3A8E;
 	display: inline;
 	border-radius: 7px;
 }
@@ -188,13 +188,13 @@ input[type="button"] {
 	padding-top: 0;
 	padding-bottom: 0;
 	margin-top: 3%;
-	background: #6fb9de;
+	background: #3E3A8E;
 }
 .btn-login {
-	background: #6fb9de;
+	background: #3E3A8E;
 }
 .navbar-color {
-	background-color: #6fb9de;
+	background-color: #3E3A8E;
 }
 .posisi-btn-1 {
 	position: relative;
@@ -211,7 +211,7 @@ input[type="button"] {
 }
 .btn-colorpenjadwalan {
 	// display: inline-block;
-	background-color: #6fb9de;
+	background-color: #3e3a8e;
 	height: 35px;
 }
 .text-btn-penjadwalan-1 {
@@ -240,7 +240,7 @@ input[type="button"] {
 }
 .btn-header{
 	display: inline-block;
-	background-color: #6fb9de;
+	background-color: #3E3A8E;
 	width: auto;
 	height: 34px;
 	margin-left: 5px;
@@ -252,6 +252,7 @@ input[type="button"] {
 }
 .btn-radius .button-kirimlaporan{
 	border: 0;
+	background-color: #3E3A8E;
 }
 .btn-radius .button-lihatpemantauan{
 	border: 0;
@@ -260,4 +261,8 @@ input[type="button"] {
 	border: 0;
 	padding: 0;
 	
+}
+.color-3e3a8e{
+	background-color: #3E3A8E;
+	color: #3E3A8E;
 }

styles/bootstrap/_card.scss

@@ -289,7 +289,7 @@
 }
 
 .header-1 {
-	background: #6fb9de;
+	background: #3E3A8E;
 	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 	border-radius: 5px;
 	// width: 830px;
@@ -307,7 +307,7 @@
 }
 
 .header-penjadwalan {
-	background: #6fb9de;
+	background: #3E3A8E;
 	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 	border-radius: 5px;
 	// width: 830px;
@@ -352,5 +352,8 @@
 		font-size: 20px;
 		text-align: center;
 	}
+	.font-color-white{
+		color: #FFFFFF;
+	}
 
 

styles/bootstrap/_images.scss

@@ -6,10 +6,7 @@
 // which weren't expecting the images within themselves to be involuntarily resized.
 // See also https://github.com/twbs/bootstrap/issues/18178
 .img-fluid {
-  position: relative;
   @include img-fluid();
-  width: 72px;
-  height: auto;
 }
 
 
@@ -98,12 +95,12 @@
   width: 830px;
   height: 50px; }
 
-  .img-fluid {
-    position: relative;
-    max-width: 100%;
-    height: auto;
-    width: 72px;
-    height: 37px; }
+  // .img-fluid {
+  //   position: relative;
+  //   max-width: 100%;
+  //   height: auto;
+  //   width: 72px;
+  //   height: 37px; }
   .ditbaga-logo{
     margin-top: 55%;
 
@@ -129,4 +126,12 @@
   }
   .icon-eksport{
     margin-top: 5px;
-  }
+  }
+
+  .width-133{
+    width: 133px;
+    height: auto;
+  }
+.width-50{
+  width: 60px;
+}