hover button, tata letak button laporan new

components/Banding/TableSanksi.js

@@ -58,7 +58,7 @@ function TableSanksi({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color >
+														<Button className="color-3e3a8e btn-login" color >
 															<span className="font-color-white">
 																{linkName}
 															</span>

components/Main/TableLaporan.js

@@ -67,7 +67,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color>
+														<Button className="color-3e3a8e btn-login" color>
 															<span className="font-color-white">
 																{linkName}
 															</span>

components/Main/TableSanksi.js

@@ -55,7 +55,7 @@ function TableSanksi({ listData, to, linkName }) {
 																query: { id: data._id },
 															}}
 														>
-															<Button className="color-3e3a8e" color >
+															<Button className="color-3e3a8e btn-login" color >
 																<span className="font-color-white">
 																	{linkName}
 																</span>

components/PT/CabutSanksi/TableSanksiJawaban.js

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

components/PT/JawabanBanding/TableSanksiJawaban.js

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

components/PT/JawabanKeberatan/TableSanksiJawaban.js

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

components/PT/JawabanPencabutanSanksi/TableSanksiJawaban.js

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

components/PT/Keberatan/ModalPermohonan.js

@@ -136,10 +136,10 @@ export class ModalPermohonan extends Component {
 				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
 					<ModalBody>Apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
 					<ModalFooter>
-						<Button color="primary" onClick={this.toggleModal1}>
+						<Button color className=" color-3e3a8e btn-login" onClick={this.toggleModal1}>
 							Ya
 						</Button>{" "}
-						<Button color="secondary" onClick={this.props.toggleModal}>
+						<Button color="danger" onClick={this.props.toggleModal}>
 							Tidak
 						</Button>
 					</ModalFooter>
@@ -209,7 +209,7 @@ export class ModalPermohonan extends Component {
 								</FormGroup>
 							</ModalBody>
 							<ModalFooter>
-								<Button color="primary" type="submit">
+								<Button color className=" color-3e3a8e btn-login" type="submit">
 									Kirim
 								</Button>
 							</ModalFooter>

components/PT/TableSanksi.js

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

components/PT/TableSanksiJawaban.js

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

components/Pelaporan/TableLaporan.js

@@ -77,7 +77,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                                                             query: { id: data._id },
                                                         }}
                                                     >
-                                                        <Button className="color-3e3a8e" color>
+                                                        <Button className="color-3e3a8e btn-login loader" color>
                                                             <span className="font-color-white">
                                                                 {linkName}
                                                             </span>

components/Pemeriksaan/TableLaporan.js

@@ -61,7 +61,7 @@ function TableLaporan({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color >
+														<Button className="color-3e3a8e btn-login" color >
 															<span className="font-color-white">
 																{linkName}
 															</span>

components/Penjadwalan/TableLaporan.js

@@ -61,7 +61,7 @@ function TableLaporan({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e btn" color>
+														<Button className="color-3e3a8e btn-login loader" color>
 															<span className="font-color-white">
 																Edit
 															</span>

components/Sanksi/TableLaporan.js

@@ -58,7 +58,7 @@ function TableLaporan({ listData }) {
 															query: { id: data.sanksi || data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color>
+														<Button className="color-3e3a8e btn-login" color>
 															<span className="font-color-white">
 																{data.sanksi ? "Detail" : "Proses Sanksi"}
 															</span>

pages/app/banding/detail.js

@@ -168,7 +168,7 @@ class JawabanBanding extends Component {
 						<span className="font-color-white">Jawaban Permohonan Banding</span>
 						<div className="ml-auto">
 							<Link href="/app/banding">
-								<Button className="color-3e3a8e" color>
+								<Button className="color-3e3a8e btn-login" color>
 									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
@@ -271,7 +271,7 @@ class JawabanBanding extends Component {
 															</FormGroup>
 															<FormGroup row>
 																<div className="col-xl-10">
-																	<Button color className="color-3e3a8e" type="submit">
+																	<Button color className="color-3e3a8e btn-login" type="submit">
 																		<span className="font-color-white">Simpan</span>
 																	</Button>
 																</div>

pages/app/keberatan/detail.js

@@ -173,7 +173,7 @@ class DetailKeberatan extends Component {
 						<span className="font-color-white">Permohonan Keberatan</span>
 						<div className="ml-auto">
 							<Link href="/app/keberatan">
-								<Button className="color-3e3a8e" color>
+								<Button className="color-3e3a8e btn-login" color>
 									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
@@ -297,7 +297,7 @@ class DetailKeberatan extends Component {
 													<div className="row-xl-10"> */}
 															<FormGroup row>
 																<div className="col-xl-10">
-																	<Button color className="color-3e3a8e" type="submit">
+																	<Button color className="color-3e3a8e btn-login" type="submit">
 																		<span className="font-color-white">Simpan</span>
 																	</Button>
 																</div>

pages/app/laporan-delegasi/detail.js

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

pages/app/pemantauan-perbaikan/detail.js

@@ -41,7 +41,7 @@ class PemantauanDokumen extends Component {
 						</span>
 						<div className="ml-auto">
 							<Link href="/app/pemantauan-perbaikan">
-								<Button className="color-3e3a8e" color>
+								<Button className="color-3e3a8e btn-login" color>
 									<span className="font-color-white">
 										&lt; Kembali
 									</span>

pages/app/pencabutan-sanksi/detail.js

@@ -170,7 +170,7 @@ class JawabanPencabutanSanksi extends Component {
 						</span>
 						<div className="ml-auto">
 							<Link href="/app/pencabutan-sanksi">
-								<Button className="color-3e3a8e" color>
+								<Button className="color-3e3a8e btn-login" color>
 									<span className="font-color-white">
 										&lt; Kembali
 									</span>

pages/laporan/new/index.js

@@ -606,7 +606,7 @@ class App extends Component {
                       <FormGroup row>
                         <div className="posisi-btn-1 btn-radius">
                           <Button
-                            className="button-kirimlaporan"
+                            className="button-kirimlaporan btn-login"
                             color
                             type="submit"
                           >
@@ -627,16 +627,9 @@ class App extends Component {
               <ModalBody>
                 <FormGroup>
                   <div className="">
-                    <label className="modals-verifikasi font-color-white">
-                      Masukkan Kode Verifikasi
+                    <label className="modals-verifikasi">
+                      <b>Masukkan Kode Verifikasi</b>
                     </label>
-                    <Button
-                      className="ml-auto float-lg-right color-3e3a8e  btn-login"
-                      color
-                      type="cancel"
-                    >
-                      <span className="font-color-white">cancel</span>
-                    </Button>
                     <div className="border-2">
                       <Input
                         className="border-2"
@@ -707,7 +700,14 @@ class App extends Component {
                     )}
                 </Button>
                 <Button
-                  className="color-3e3a8e btn-login"
+                  className="color-3e3a8e  btn-login bg-danger"
+                  color
+                  type="cancel"
+                >
+                  <span className="font-color-white">cancel</span>
+                </Button>
+                <Button
+                  className="color-3e3a8e btn-login bg-success"
                   color
                   onClick={async () => {
                     if (this.state.kode) {
@@ -730,31 +730,6 @@ class App extends Component {
             <form className="form-horizontal">
               <ModalBody>
                 <FormGroup>
-                  {/* <div className="">
-                    <label className="modals-verifikasi font-color-white">
-                      Masukkan Kode Verifikasi
-                    </label>
-                    <Button
-                      className="ml-auto float-lg-right color-3e3a8e  btn-login"
-                      color
-                      type="cancel"
-                    >
-                      <span className="font-color-white">cancel</span>
-                    </Button>
-                    <div className="border-2">
-                      <Input
-                        className="border-2"
-                        onChange={(e) =>
-                          this.setState({ kode: e.target.value })
-                        }
-                        type="text"
-                      />
-                    </div>
-                    <p>
-                      *Kode verifikasi terkirim ke nomor WA {this.state.no_hp}
-                    </p>
-                  </div> */}
-
                   <p className="font-color-black">
                     NOTE : Diharapkan pelapor dapat mencatat ataupun mengingat
                     nomor laporan di bawah ini untuk mempermudah proses
@@ -785,46 +760,23 @@ class App extends Component {
                 </FormGroup>
               </ModalBody>
               <ModalFooter>
-
                 <Button
-                  className="btn-login"
+                  className="color-3e3a8e  btn-login bg-danger"
                   color
-                  onClick={async () => {
-                    await this.createLaporan(this.state.token);
-                  }}
+                  type="cancel"
                 >
-                  {this.state.loading ?
-                    (
-                      <div class="d-flex justify-content-center">
-                        <span
-                          class="spinner-border spinner-border-sm text-white"
-                          role="status"
-                        ></span>
-                        <span className="font-color-white">
-                          &nbsp; Diproses...
-                        </span>
-                      </div>
-                    ) : (
-                      <span className="font-color-white">
-                        Buat Laporan Tanpa Kode Verifikasi
-                      </span>
-                    )}
+                  <span className="font-color-white">cancel</span>
                 </Button>
                 <Button
-                  className="color-3e3a8e btn-login"
+                  className="btn-login bg-success"
                   color
                   onClick={async () => {
-                    if (this.state.kode) {
-                      await this.createLaporan(
-                        this.state.token,
-                        this.state.kode
-                      );
-                    } else {
-                      this.setState({ error: "Kode verifikasi harus diisi" });
-                    }
+                    await this.createLaporan(this.state.token);
                   }}
                 >
-                  <span className="font-color-white">Kirim</span>
+                  <span className="font-color-white">
+                    Kirim
+                  </span>
                 </Button>
               </ModalFooter>
             </form>

pages/pemantauan.js

@@ -169,7 +169,7 @@ class App extends Component {
                       <FormGroup row>
                         <div className="posisi-btn-1 btn-radius">
                           <Button
-                            className="button-lihatpemantauan"
+                            className="button-lihatpemantauan btn-login"
                             color
                             block
                             type="submit"

styles/bootstrap/_buttons.scss

@@ -327,6 +327,7 @@ input[type="button"] {
   background-color: transparent;
   padding: 5px;
   border-radius: 5px;
+  color: black;
 }
 .btn-verif {
   background-color: Transparent;