commit

components/Layout/Header.js

@@ -83,9 +83,9 @@ 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-inner.png" alt="App Logo" style={{ height: 35 }} />
-							</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" />
+							{/* </div> */}
 							<div className="brand-logo-collapsed">
 								<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" />
 							</div>

components/Main/Login.js

@@ -86,10 +86,10 @@ class Login extends Component {
 	render() {
 		return (
 			<Card className="card card-flat">
-				<img className="card-img-top" src="/static/img/logo-inner.png" alt="Logo" />
+				<img className="card-img-top" src="/static/img/Logo-Sidali.png" alt="Logo" />
 				<CardBody className="card-body">
 					{" "}
-					<h5 className="card-title text-center py-2 bg-gray">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h5>
+					<h5 className="card-title text-left py-2 bg-gray border-radius-login"><img className="icon-triangle" src="/static/img/icon-caution.png"></img><b>Login Menggunakan Akun PDDIKTI </b></h5>
 					{this.state.error}
 					<form onSubmit={this.onSubmit} method="post" name="formLogin">
 						<div className="form-group">
@@ -110,10 +110,9 @@ class Login extends Component {
 							/>
 							<span className="invalid-feedback">Field is required</span>
 						</div>
-						<div className="required">* Required fields</div>
-						<span>Login Menggunakan Akun PDDIKTI</span>
-
-						<Button color="info" type="submit" block className=" mt-3">
+						{/* <div className="required">* Required fields</div>
+						<span>Login Menggunakan Akun PDDIKTI</span> */}
+						<Button color="info" type="submit" block className=" mt-3 btn-login">
 							Login
 						</Button>
 					</form>

components/Public/DetailLaporan.js

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

pages/app/index.js

@@ -38,9 +38,9 @@ class App extends Component {
 	render() {
 		return (
 			<div>
-				<Navbar color="info" expand="md" dark>
+				<Navbar className="navbar-color" expand="md" dark>
 					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Sidali
+						<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -64,8 +64,18 @@ class App extends Component {
 								<hr className="my-4" />
 								<p>Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
 								<p className="lead">
+									{/* <Link href="/laporan/new">
+										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
+									</Link> */}
 									<Link href="/laporan/new">
-										<button className="btn btn-info btn-lg">Buat Laporan</button>
+									<Button color="info" className="btn-labeled">
+                        				<span className="btn-label"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/></span><text className="text-home-1">Buat Laporan</text>
+                    				</Button>
+									</Link>
+									<Link href="/laporan/new">
+									<Button color="info" className="btn-labeled-2">
+                        				<span className="btn-label"><img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon"/></span><text className="text-home-1">Pemantauan</text>
+                    				</Button>
 									</Link>
 								</p>
 							</Col>

pages/laporan/new/index.js

@@ -146,9 +146,9 @@ class App extends Component {
 		return (
 			<div>
 				<ToastContainer />
-				<Navbar color="info" expand="md" dark>
+				<Navbar className="navbar-color" expand="md" dark>
 					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Sidali
+					<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -187,26 +187,20 @@ class App extends Component {
 										onSubmit={this.handleKirim}
 									>
 										<Form className="form-horizontal">
-											<p className="lead bb">Identitas Pelapor</p>
-											<FormGroup row>
-												<div className="col-xl-10">
-													<div className="checkbox c-checkbox">
-														<label>
-															<Field name="is_private">{({ field }) => <Input type="checkbox" {...field} />}</Field>
-															<span className="fa fa-check"></span>Klik jika ingin merahasiakan identitas anda
-														</label>
-													</div>
+											<div class="header-1">
+    												<h2 class="card-title-1">Identitas Pelapor</h2>
 												</div>
+											<FormGroup row>
 											</FormGroup>
 											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nama Pelapor</label>
+												<label className="col-md-2 col-form-label">Nama Lengkap</label>
 												<div className="col-md-10">
 													<Field name="nama">{({ field }) => <Input type="text" {...field} />}</Field>
 													<ErrorMessage name="nama" component="div" className="form-text text-danger" />
 												</div>
 											</FormGroup>
 											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
+												<label className="col-md-2 col-form-label">Nomor Aktif</label>
 												<div className="col-md-10">
 													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
 													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
@@ -232,8 +226,19 @@ class App extends Component {
 													<Field name="foto">{({ field, form }) => <Input type="file" onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>
 													<ErrorMessage name="foto" component="div" className="form-text text-danger" />
 												</div>
+												<div className="col-xl-10">
+													<div className="checkbox c-checkbox">
+														<label>
+															<Field name="is_private">{({ field }) => <Input type="checkbox" {...field} />}</Field>
+															<span className="fa fa-check"></span><text>*</text>Klik jika ingin merahasiakan identitas anda
+														</label>
+													</div>
+												</div>
 											</FormGroup>
-											<p className="lead bb">Detail Laporan</p>
+											<div class="header-1">
+    												<h2 class="card-title-1">Detail Laporan</h2>
+												</div>
+											{/* <p className="lead bb">Detail Laporan</p> */}
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
 												<div className="col-md-10">
@@ -304,18 +309,19 @@ class App extends Component {
 													<div className="checkbox c-checkbox">
 														<label>
 															<Field name="setuju">{({ field }) => <Input type="checkbox" {...field} />}</Field>
-															<span className="fa fa-check"></span>Klik jika data yang anda laporkan sudah benar
+															<span className="fa fa-check"></span><text>*</text>Klik jika data yang anda laporkan sudah benar
 															<ErrorMessage name="setuju" component="div" className="form-text text-danger" />
 														</label>
 													</div>
 												</div>
 											</FormGroup>
 											<FormGroup row>
-												<div className="col-12 col-lg-2">
-													<Button color="info" block type="submit">
-														Kirim Laporan
+											<div className="posisi-btn-1">
+													<Button className="button-kirimlaporan" color="info" block type="submit">
+														<h3 className="text-kirimlaporan">Kirim Laporan</h3>
 													</Button>
-												</div>
+												
+											</div>
 											</FormGroup>
 										</Form>
 									</Formik>

pages/pemantauan.js

@@ -61,9 +61,9 @@ class App extends Component {
 		const { laporan, log } = this.state;
 		return (
 			<div>
-				<Navbar color="info" expand="md" dark>
+				<Navbar className="navbar-color" expand="md" dark>
 					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Sidali
+					<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -92,7 +92,10 @@ class App extends Component {
 										onSubmit={this.handleLihatPemantaun}
 									>
 										<Form className="form-horizontal">
-											<p className="lead bb">Pemantauan</p>
+												<div class="header-1">
+    												<h2 class="card-title-1">Pemantauan</h2>
+												</div>
+											{/* <p className="lead bb">Pemantauan</p> */}
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">Nomor Laporan</label>
 												<div className="col-md-10">
@@ -101,16 +104,16 @@ class App extends Component {
 												</div>
 											</FormGroup>
 											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
+												<label className="col-md-2 col-form-label">Nomor Aktif</label>
 												<div className="col-md-10">
 													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
 													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
 												</div>
 											</FormGroup>
 											<FormGroup row>
-												<div className="col-12 col-lg-2">
-													<Button color="info" block type="submit">
-														Lihat Pemantauan
+												<div className="posisi-btn-1">
+													<Button className="button-lihatpemantauan" color="info" block type="submit">
+														<h3 className="text-lihatpemantauan">Lihat Pemantauan</h3>
 													</Button>
 												</div>
 											</FormGroup>
@@ -120,15 +123,20 @@ class App extends Component {
 							</Card>
 							<Card className="card-default">
 								<CardBody>
+								<div class="header-1">
+    								<h2 class="card-title-1">Rekap Laporan</h2>
+								</div>
+								<div className="">
 									{laporan && log ? (
 										<>
 											<DetailLaporan data={laporan} />
-											<p className="lead bb">Pemantauan</p>
+											<p className="lead bb tengah">Pemantauan</p>
 											<Timeline data={log} noFile />{" "}
 										</>
 									) : (
-										"Tidak Ada Laporan"
+										<p className="tengah">Tidak Ada Laporan</p>
 									)}
+								</div>
 								</CardBody>
 							</Card>
 						</Col>

styles/app/common/bootstrap-reset.scss

@@ -88,7 +88,7 @@ hr {
     }
 }
 .card-body {
-    padding: 0.9375rem; //15px
+    padding: 20px; //15px
 }
 .card-footer {
     padding: 0.625rem 0.9375rem;

styles/app/common/button-extra.scss

@@ -87,15 +87,12 @@
 
 // Labels for buttons
 // --------------------------------------------------
-.btn-labeled {
-    padding-top: 0;
-    padding-bottom: 0;
-}
+
 
 .btn-label {
     position: relative;
     background: transparent;
-    background: rgba(0, 0, 0, 0.05);
+    // background: rgba(0, 0, 0, 0.05);
     display: inline-block;
     @include button-label-size($input-btn-padding-y, $input-btn-padding-x, $border-radius);
 }

styles/app/common/utils.scss

@@ -57,7 +57,7 @@
 .br { border-right: 1px solid $border-color;}
 .bl { border-left: 1px solid $border-color;}
 .bt { border-top: 1px solid $border-color;}
-.bb { border-bottom: 1px solid $border-color;}
+.bb { border-bottom: 0px solid $border-color;}
 .b, .ba  { @extend .br;@extend .bl;@extend .bt;@extend .bb; } // all borders
 
 

styles/app/layout/layout.scss

@@ -389,7 +389,7 @@ html, body, #__next, #__settings_provider, #__themes_provider {
     .wrapper {
         .topnavbar-wrapper {
             position: fixed;
-            top: 0;
+            top: 0px;
             width: 100%;
             z-index: $z-index-main-section + 10;
         }

styles/app/layout/sidebar.scss

@@ -14,7 +14,8 @@ $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:           #919DA8;
+$sidebar-heading-color:           #6FB9DE;
+// $sidebar-heading-color:           #6FB9DE;
 $sidebar-label-color:             $sidebar-item-color;
 
 $submenu-header-hg:               40px;   // Submenu header when hover collapse sidebar

styles/app/layout/top-navbar.scss

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

styles/bootstrap/_buttons.scss

@@ -140,3 +140,65 @@ input[type="button"] {
     width: 100%;
   }
 }
+
+.button-kirimlaporan{
+  // background: rgba(0, 0, 0, 0.05);
+  display: inline-block;
+background-color: #6FB9DE;
+width: 175px;
+height: 40px;
+
+}
+.text-kirimlaporan{
+  font-weight: 500;
+  font-size: 20px;
+  letter-spacing: 0.02em;
+  text-align: center;
+  padding-bottom: 5px;
+}
+.button-lihatpemantauan{
+  position: relative;
+  margin-left: auto;
+  // background: rgba(0, 0, 0, 0.05);
+  display: inline-block;
+  background-color: #6FB9DE;
+  width: 200px;
+  height: 40px;
+}
+.text-lihatpemantauan{
+  font-weight: 500;
+  font-size: 20px;
+  letter-spacing: 0.02em;
+  text-align: center;
+  padding-bottom: 5px
+}
+.btn-labeled {
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 20px;
+    margin-top: 3%;
+    background: #6FB9DE;
+
+}
+.btn-labeled-2{
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-left: 20px;
+    margin-top: 3%;
+    background: #6FB9DE;
+}
+.btn-login{
+  background: #6FB9DE;
+}
+.navbar-color{
+  background-color: #6FB9DE;
+}
+.posisi-btn-1{
+  position: relative;
+  margin-left: auto;
+  padding-right: 20px;
+}
+.tengah{
+text-align: center;
+padding: 30px;
+}

styles/bootstrap/_card.scss

@@ -135,7 +135,15 @@
 .card-img-top,
 .card-img-bottom {
   flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  width: 300px;
+  height: 150px;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  // width: 345.73px;
+  // height: 185px;
+
+  // Required because we use flexbox and this inherently applies align-self: stretch
 }
 
 .card-img,
@@ -284,3 +292,22 @@
     }
   }
 }
+
+.header-1{
+  background: #6FB9DE;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+  // width: 830px;
+  height: 45px;
+  margin-bottom: 30px;
+}
+.card-title-1{
+  margin-left: 10px;
+  padding: 10px;
+  font-size: 25px;
+text-align: left;
+color: rgba(255, 255, 255, 0.9);
+}
+.border-radius-login{
+  border-radius: 5px;
+}

styles/bootstrap/_forms.scss

@@ -100,6 +100,7 @@ select.form-control {
   margin-bottom: 0; // Override the `<label>/<legend>` default
   @include font-size(inherit); // Override the `<legend>` default
   line-height: $input-line-height;
+  margin-bottom: 15px;
 }
 
 .col-form-label-lg {

styles/bootstrap/_images.scss

@@ -6,7 +6,10 @@
 // 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: 37px;
 }
 
 
@@ -40,3 +43,62 @@
   @include font-size($figure-caption-font-size);
   color: $figure-caption-color;
 }
+
+.icon-pemantauan{
+  width: 35px;
+  height: 35px;
+  margin-right: -20px;
+}
+
+.icon-buatlaporan{
+  width: 35px;
+  height: 35px;
+  margin-right: -20px;
+}
+
+.img-text-vputih{
+  width: 55px;
+  height: 20px;
+  margin-left: 10px;
+}
+.icon-triangle{
+  width: 20px;
+  margin-right: 15px;
+  margin-left: 15px;
+  border-radius: 5px;
+}
+.identitas-pelapor{
+  width: 830px;
+  height: 50px;
+}
+.icon-pemantauan {
+  width: 35px;
+  height: 35px;
+  margin-right: -20px; }
+
+.icon-buatlaporan {
+  width: 35px;
+  height: 35px;
+  margin-right: -20px; }
+
+.img-text-vputih {
+  width: 55px;
+  height: 20px;
+  margin-left: 10px; }
+
+.icon-triangle {
+  width: 20px;
+  margin-right: 10px;
+  margin-left: 15px; }
+
+.identitas-pelapor {
+  width: 830px;
+  height: 50px; }
+
+  .img-fluid {
+    position: relative;
+    max-width: 100%;
+    height: auto;
+    width: 72px;
+    height: 37px; }
+  

styles/bootstrap/_type.scss

@@ -23,6 +23,7 @@ h6, .h6 { @include font-size($h6-font-size); }
 .lead {
   @include font-size($lead-font-size);
   font-weight: $lead-font-weight;
+  color: #000000;
 }
 
 // Type display classes
@@ -47,6 +48,10 @@ h6, .h6 { @include font-size($h6-font-size); }
   line-height: $display-line-height;
 }
 
+.text-home{
+  margin-left: 55px;
+}
+
 
 //
 // Horizontal rules
@@ -123,3 +128,9 @@ mark,
     content: "\2014\00A0"; // em dash, nbsp
   }
 }
+.display-5{
+  color: #000000;
+}
+.text-home-1{
+  font-size: 15px;
+}

styles/bootstrap/vendor/_mycss.scss

@@ -0,0 +1,3 @@
+.button-color{
+    background-color: #6FB9DE;
+  }

styles/themes/theme-a.scss

@@ -34,7 +34,8 @@ $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:           #919DA8;
+// $sidebar-heading-color:           #919DA8;
+$sidebar-heading-color:           #6FB9DE;
 $sidebar-label-color:             $sidebar-item-color;
 
 // OFFSIDEBAR