status color red and dark green, legend rekap (font-size small) and perkembangan (one point bigger from rekap)

components/Banding/TableSanksi.js

@@ -49,7 +49,7 @@ function TableSanksi({ listData, to, linkName }) {
 												</div>
 											</td>
 											{/* <td>{moment(data.createdAt).fromNow()}</td> */}
-											<td>{data.jawaban.banding ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
+											<td>{data.jawaban.banding ? <div className="badge badge-green">Sudah Dijawab</div> : <div className="badge badge-red">Belum Dijawab</div>}</td>
 											<td>
 												<div className="ml-auto">
 													<Link

components/Charts/chart-flot.scss

@@ -37,8 +37,9 @@
     display: block;
     width: 150%;
     height: 250px;
-    // font-size: large;
+    // font-size: 15px;
     .legend {
+        font-size: 13px;
         >table tr td {
             padding: 3px;
         }
@@ -92,12 +93,4 @@
     color: #f1f1f1;
     z-index: 5;
 }
-// .w-400{
-// //     width: 300px;
-//     margin: -5px;
-// //     height: 200px;
-// }
-// .w-401{
-// margin-right: -50px;
-// }
 

components/Keberatan/TableSanksi.js

@@ -49,7 +49,7 @@ function TableSanksi({ listData, to, linkName }) {
 												</div>
 											</td>
 											{/* <td>{moment(data.createdAt).fromNow()}</td> */}
-											<td>{data.jawaban?.keberatan ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
+											<td>{data.jawaban?.keberatan ? <div className="badge badge-green">Sudah Dijawab</div> : <div className="badge badge-red">Belum Dijawab</div>}</td>
 											<td>
 												<div className="ml-auto">
 													<Link

components/Pelaporan/InputData.js

@@ -3,7 +3,7 @@ import Router from "next/router";
 import { getPelanggaranPublic } from "@/actions/pelanggaran";
 import { createPelaporan } from "@/actions/pelaporan";
 import Select from "react-select";
-import { Row, Col, FormGroup, Input } from "reactstrap";
+import { Row, Col, FormGroup, Input, Button } from "reactstrap";
 import { connect } from "react-redux";
 import { ToastContainer, toast } from "react-toastify";
 import moment from "moment";
@@ -264,9 +264,11 @@ export class InputData extends Component {
 						</FormGroup>
 						<FormGroup row>
 							<div className="col-xl-10">
-								<button className="btn btn-sm btn-primary" type="submit" disabled={isSubmitting}>
-									Submit Laporan
-								</button>
+								<Button className="color-3e3a8e" color type="submit" disabled={isSubmitting}>
+									<span className="font-color-white">
+										Submit Laporan
+									</span>
+								</Button>
 							</div>
 						</FormGroup>
 					</Form>

components/Pemeriksaan/CaseProgress.js

@@ -13,12 +13,12 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 		data: [
 			{
 				// "label": "Complete",
-				color: "#5ab1ef",
+				color: "#1EA457",
 				data: [["Sudah diperiksa", data.evaluasi.hasEvaluasi]],
 			},
 			{
 				// "label": "In Progress",
-				color: "#52D489",
+				color: "#FD4233",
 				data: [["Belum diperiksa", data.evaluasi.notHasEvaluasi]],
 			},
 		],
@@ -59,12 +59,12 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 		data: [
 			{
 				label: "Sudah diperiksa",
-				color: "#287DAD",
+				color: "#1EA457",
 				data: [data.evaluasi.hasEvaluasi],
 			},
 			{
 				label: "Belum diperiksa",
-				color: "#52D489",
+				color: "#FD4233",
 				data: [data.evaluasi.notHasEvaluasi],
 			},
 		],

components/Pemeriksaan/TableLaporan.js

@@ -50,7 +50,7 @@ function TableLaporan({ listData, to, linkName }) {
 											</td>
 											<td>
 												{/* {data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>} */}
-												{data.evaluasi?.length ? <div className="badge badge-info">Sudah diperiksa</div> : <div className="badge badge-danger">Belum diperiksa</div>}
+												{data.evaluasi?.length ? <div className="badge badge-green">Sudah diperiksa</div> : <div className="badge badge-red">Belum diperiksa</div>}
 											</td>
 											{/* <td>{moment(data.createdAt).format("MM-DD-YYYY")}</td> */}
 											<td>

components/PencabutanSanksi/TableSanksi.js

@@ -49,7 +49,7 @@ function TableSanksi({ listData, to, linkName }) {
 												</div>
 											</td>
 											{/* <td>{moment(data.createdAt).fromNow()}</td> */}
-											<td>{data.jawaban?.cabut_sanksi ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
+											<td>{data.jawaban?.cabut_sanksi ? <div className="badge badge-green">Sudah Dijawab</div> : <div className="badge badge-red">Belum Dijawab</div>}</td>
 											<td>
 												<div className="ml-auto">
 													<Link

components/Penjadwalan/CaseProgress.js

@@ -13,12 +13,12 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 		data: [
 			{
 				// "label": "Complete",
-				color: "#5ab1ef",
+				color: "#1EA457",
 				data: [["Sudah ada jadwal", data.jadwal.hasJadwal]],
 			},
 			{
 				// "label": "In Progress",
-				color: "#52D489",
+				color: "#FD4233",
 				data: [["Belum ada jadwal", data.jadwal.notHasJadwal]],
 			},
 		],
@@ -59,12 +59,12 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 		data: [
 			{
 				label: "Sudah ada jadwal",
-				color: "#287DAD",
+				color: "#1EA457",
 				data: [data.jadwal.hasJadwal],
 			},
 			{
 				label: "Belum ada jadwal",
-				color: "#52D489",
+				color: "#FD4233",
 				data: [data.jadwal.notHasJadwal],
 			},
 		],

components/Penjadwalan/TableLaporan.js

@@ -50,7 +50,7 @@ function TableLaporan({ listData, to, linkName }) {
 											</td>
 											<td>
 												{/* {data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>} */}
-												{data.jadwal ? <div className="badge badge-info">Ada Jadwal</div> : <div className="badge badge-danger">Tidak ada jadwal</div>}
+												{data.jadwal ? <div className="badge badge-green">Ada Jadwal</div> : <div className="badge badge-red">Tidak ada jadwal</div>}
 											</td>
 											{/* <td>{moment(data.createdAt).format("MM-DD-YYYY")}</td> */}
 											<td>

components/Sanksi/CaseProgress.js

@@ -13,12 +13,12 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 		data: [
 			{
 				// "label": "Complete",
-				color: "#5ab1ef",
+				color: "#1EA457",
 				data: [["Sudah ditetapkan", data.sanksi.hasSanksi]],
 			},
 			{
 				// "label": "In Progress",
-				color: "#52D489",
+				color: "#FD4233",
 				data: [["Belum ditetapkan", data.sanksi.notHasSanksi]],
 			},
 		],
@@ -58,12 +58,12 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 		data: [
 			{
 				label: "Sudah ditetapkan",
-				color: "#287DAD",
+				color: "#1EA457",
 				data: [data.sanksi.hasSanksi],
 			},
 			{
 				label: "Belum ditetapkan",
-				color: "#52D489",
+				color: "#FD4233",
 				data: [data.sanksi.notHasSanksi],
 			},
 		],

components/Sanksi/TableLaporan.js

@@ -48,7 +48,7 @@ function TableLaporan({ listData }) {
 													</div>
 												</div>
 											</td>
-											<td>{data.sanksi ? <div className="badge badge-info">Sudah ditetapkan</div> : <div className="badge badge-danger">Belum ditetapkan</div>}</td>
+											<td>{data.sanksi ? <div className="badge badge-green">Sudah ditetapkan</div> : <div className="badge badge-red">Belum ditetapkan</div>}</td>
 											{/* <td>{moment(data.createdAt).format("MM-DD-YYYY")}</td> */}
 											<td>
 												<div className="ml-auto">

pages/app/pelaporan/new.js

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { getOnePT } from "@/actions/PT";
 import { connect } from "react-redux";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import { Row, Col, Card, CardHeader, CardBody, Button } from "reactstrap";
 import Loader from "@/components/Common/Loader";
 
 class PelaporanNew extends Component {
@@ -34,13 +34,17 @@ class PelaporanNew extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>
+						<div className="font-color-white">
 							Pelaporan Baru
 							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
 						</div>
 						<div className="ml-auto">
 							<Link href="/app/pelaporan/search">
-								<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/search.js

@@ -104,8 +104,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)}>
-											Buat Laporan
+										<Button color className="color-3e3a8e" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
+											<span className="font-color-white">
+												Buat Laporan
+											</span>
 										</Button>
 									</div>
 								</div>
@@ -122,13 +124,17 @@ class Search extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>
+					<div className="font-color-white">
 						Pelaporan
-						<small>Pilih Perguruan Tinggi</small>
+						<div className="font-color-white font-10">Pilih Perguruan Tinggi</div>
 					</div>
 					<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>

styles/app/common/bootstrap-reset.scss

@@ -407,3 +407,23 @@ $value in $theme-colors {
 .navbar .dropdown-menu {
     filter: none !important;
 }
+
+.badge-red {
+    color: #fff;
+    background-color: #FD4233; }
+    a.badge-info:hover, a.badge-info:focus {
+      color: #fff;
+      background-color: #FD4233; }
+    a.badge-info:focus, a.badge-info.focus {
+      outline: 0;
+      box-shadow: 0 0 0 0.2rem #FD4233; }
+
+      .badge-green {
+        color: #fff;
+        background-color: #1EA457; }
+        a.badge-info:hover, a.badge-info:focus {
+          color: #fff;
+          background-color: #1EA457; }
+        a.badge-info:focus, a.badge-info.focus {
+          outline: 0;
+          box-shadow: 0 0 0 0.2rem #1EA457; }

styles/app/layout/sidebar.scss

@@ -15,7 +15,7 @@ $sidebar-icon-color-active:       $nav-top-bg;
 $sidebar-bullet-color:            rgba(0,0,0,.25);
 $sidebar-bullet-color-active:     $sidebar-icon-color-active;
 
-$sidebar-heading-color:           #6FB9DE;
+$sidebar-heading-color:           #3e3a8e;
 // $sidebar-heading-color:           #6FB9DE;
 $sidebar-label-color:             $sidebar-item-color;
 

styles/bootstrap/_type.scss

@@ -148,4 +148,8 @@ mark,
 }
 .mrgn-top-5{
   margin-top: 5px;
+}
+.font-10{
+  margin-top: 3px;
+  font-size: 12px;
 }