button hover, fix bug pelapoan

components/Pelaporan/TableLaporan.js

@@ -9,7 +9,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
             <div className="card-body card-over">
                 <div className="margin-left-auto">
                     <Link href="/app/pelaporan/search">
-                        <Button className="color-3e3a8e" color>
+                        <Button className="btn-login" color>
                             <span className="font-color-white">
                                 Laporan baru
                             </span>
@@ -18,7 +18,24 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                     </Link>
                 </div>
                 {listData && (
-                    <Datatable options={{ responsive: false, ordering: true, keys: true }}>
+                    <Datatable options={
+                        {
+                            'paging': true, responsive: false, ordering: true, keys: false,
+                            oLanguage: {
+                                sSearch: '<em class="fa fa-search"></em>',
+                                sLengthMenu: '_MENU_ records per page',
+                                info: 'Showing page _PAGE_ of _PAGES_',
+                                zeroRecords: 'Nothing found - sorry',
+                                infoEmpty: 'No records available',
+                                infoFiltered: '(filtered from _MAX_ total records)',
+                                oPaginate: {
+                                    sNext: '<em class="fa fa-caret-right"></em>',
+                                    sPrevious: '<em class="fa fa-caret-left"></em>',
+                                    color: '#ffff'
+                                }
+                            },
+                        }
+                    }>
                         <table className="table w-100" data-order='[[3, "desc"]]'>
                             <thead>
                                 <tr>
@@ -77,7 +94,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                                                             query: { id: data._id },
                                                         }}
                                                     >
-                                                        <Button className="color-3e3a8e" color>
+                                                        <Button className="btn-login" color>
                                                             <span className="font-color-white">
                                                                 {linkName}
                                                             </span>

pages/app/pelaporan/detail.js

@@ -39,7 +39,7 @@ class DetailPelaporan extends Component {
 						<span className="font-color-white">Detail Pelaporan</span>
 						<div className="ml-auto">
 							<Link href="/app/pelaporan">
-								<Button className="color-3e3a8e" color>
+								<Button className="btn-login" color>
 									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>

pages/app/riwayat/index.js

@@ -16,6 +16,7 @@ import Maps from "@/components/Riwayat/Maps"
 import ChartRadar from "../../../components/Riwayat/ChartRadarBelum";
 import ChartRadarBelum from "../../../components/Riwayat/ChartRadarBelum";
 import ChartRadarSudah from "../../../components/Riwayat/ChartRadarSudah";
+import TableRadar from "../../../components/Riwayat/TableRadar";
 
 
 class Riwayat extends Component {
@@ -38,10 +39,9 @@ class Riwayat extends Component {
           <Col lg="6">
             <ChartRadarSudah />
           </Col>
-          <Col lg="12">
-            <ChartData />
-            <TableRiwayat />
-          </Col>
+          <TableRadar />
+          <ChartData />
+          <TableRiwayat />
         </Row>
       </ContentWrapper>
     );

pages/laporan/new/index.js

@@ -241,7 +241,7 @@ class App extends Component {
       });
     }
 
-    // const toastid = toast.loading("Please wait...");
+    const toastid = toast.loading("loading...");
     const success = await createLaporanPublic(token, formdata);
     if (!success) {
       // toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
@@ -249,6 +249,7 @@ class App extends Component {
         title: "Kode verifikasi salah",
         icon: "error",
         confirmButtonColor: "#3e3a8e",
+        // isLoading: true,
       });
       this.setState({ error: "Kode verifikasi tidak valid" });
     } else {

styles/bootstrap/_buttons.scss

@@ -3,18 +3,20 @@
 //
 // Base styles
 //
+$colorbutton : #3e3a8e;
+$colortheme : #3e3a8e;
 
 .btn {
   display: inline-block;
   font-family: $btn-font-family;
   font-weight: $btn-font-weight;
-  color: $body-color;
+  color: $colorbutton;
   text-align: center;
   text-decoration: if($link-decoration == none, null, none);
   white-space: $btn-white-space;
   vertical-align: middle;
   user-select: none;
-  background-color: transparent;
+  background-color: $colorbutton;
   border: $btn-border-width solid transparent;
   @include button-size(
     $btn-padding-y,
@@ -196,21 +198,32 @@ input[type="button"] {
   padding-bottom: 0;
   margin-right: 20px;
   margin-top: 3%;
-  background: #3e3a8e;
+  background: $colorbutton;
   display: inline;
   border-radius: 7px;
-}
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.9;
+}}
 .btn-labeled-2 {
   padding-top: 0;
   padding-bottom: 0;
   margin-top: 3%;
-  background: #3e3a8e;
+  background:$colorbutton;
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.9;
+}
 }
 .btn-login {
-  background: #3e3a8e;
+  background: $colorbutton;
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.8;
+}
 }
 .navbar-color {
-  background-color: #3e3a8e;
+  background-color: $colortheme;
 }
 .posisi-btn-1 {
   position: relative;
@@ -227,8 +240,12 @@ input[type="button"] {
 }
 .btn-colorpenjadwalan {
   // display: inline-block;
-  background-color: #3e3a8e;
-  height: 35px;
+  background-color:$colorbutton;
+  height: 35px;   
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.9;
+}
 }
 .text-btn-penjadwalan-1 {
   letter-spacing: 0.02em;
@@ -256,11 +273,15 @@ input[type="button"] {
 }
 .btn-header {
   display: inline-block;
-  background-color: #3e3a8e;
+  background-color: $colorbutton;
   width: auto;
   height: 34px;
   margin-left: 5px;
   border: 0;
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.9;
+}
 }
 .margin-l-5 {
   margin-right: 5px;
@@ -268,7 +289,7 @@ input[type="button"] {
 }
 .btn-radius .button-kirimlaporan {
   border: 0;
-  background-color: #3e3a8e;
+  background-color: $colorbutton;
 }
 .btn-radius .button-lihatpemantauan {
   border: 0;
@@ -282,8 +303,9 @@ input[type="button"] {
   color: #3e3a8e;
 }
 .margin-left-auto {
-  float: right;
+  float: left;
   margin-top: -3px;
+  margin-right: auto;
 }
 .icon-laporan-baru {
   margin-left: 5px;
@@ -292,7 +314,7 @@ input[type="button"] {
 }
 .modals {
   // height: 40px;
-  background-color: #3e3a8e;
+  background-color: $colortheme;
   padding: 5px;
   margin-bottom: -2px;
   border-radius: 5px;
@@ -303,7 +325,7 @@ input[type="button"] {
   border-radius: 5px;
 }
 .modals-verifikasi {
-  background-color: #3e3a8e;
+  background-color: $colortheme;
   padding: 5px;
   border-radius: 5px;
 }