caption pengisian laporan dan repair button

components/Main/Login.js

@@ -12,7 +12,7 @@ class Login extends Component {
 		super(props);
 		this.state = {
 			/* Group each form state in an object.
-           Property name MUST match the form name */
+		   Property name MUST match the form name */
 			error: null,
 			formLogin: {
 				username: "",
@@ -99,14 +99,14 @@ class Login extends Component {
 					<form onSubmit={this.onSubmit} method="post" name="formLogin">
 						<div className="form-group">
 							<label className="col-form-label">
-								Username<span className="text-warning">*</span>
+								Username <span className="star-color">*</span>
 							</label>
 							<Input type="text" name="username" invalid={this.hasError("formLogin", "username", "required")} onChange={this.validateOnChange} data-validate='["required"]' value={this.state.formLogin.username} />
 							{this.hasError("formLogin", "username", "required") && <span className="invalid-feedback">Field is required</span>}
 						</div>
 						<div className="form-group">
 							<label className="col-form-label">
-								Password<span className="text-warning">*</span>
+								Password <span className="star-color">*</span>
 							</label>
 							<Input
 								type="password"
@@ -121,11 +121,13 @@ class Login extends Component {
 						</div>
 						{/* <div className="required">* Required fields</div>
 						<span>Login Menggunakan Akun PDDIKTI</span> */}
-						<Button color="info" type="submit" block className=" mt-3 btn-login">
-							<text className="text-login">
-								<b>Login</b>
-							</text>
-						</Button>
+						<div className="btn-radius">
+							<Button color="info" type="submit" block className=" mt-3 btn-login">
+								<text className="text-login">
+									<b>Login</b>
+								</text>
+							</Button>
+						</div>
 					</form>
 				</CardBody>
 			</Card>

components/Pelaporan/InputData.js

@@ -51,10 +51,10 @@ const checkIfFilesAreCorrectType = (files) => {
 
 const selectInstanceId = 1;
 const laporanSchema = Yup.object().shape({
-	no_laporan: Yup.string().required("Wajib Diisi"),
-	keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required("Wajib Diisi"),
-	pelanggaran: Yup.array().min(1, "Wajib Diisi").required(),
-	dokumen: Yup.array().min(1, "Wajib Upload file").required().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+	no_laporan: Yup.string().required(""),
+	keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required(""),
+	pelanggaran: Yup.array().min(1, " ").required(),
+	dokumen: Yup.array().min(1, " ").required().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 export class InputData extends Component {
 	constructor(props) {
@@ -256,6 +256,7 @@ export class InputData extends Component {
 									)}
 								</Field>
 								<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+								<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 							</div>
 						</FormGroup>
 

pages/app/index.js

@@ -40,7 +40,7 @@ class App extends Component {
 			<div>
 				<Navbar className="navbar-color" expand="md" dark>
 					<NavbarBrand href="/">
-						<img className="img-fluid logo-nav" src="/static/img/Logo-vputih.png" alt="App 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" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
@@ -69,20 +69,24 @@ class App extends Component {
 										<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 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-button-home-1">Buat Laporan</text>
-										</Button>
+										<span className="btn-radius">
+											<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-button-home-1">Buat Laporan</text>
+											</Button>
+										</span>
 									</Link>
 									<Link href="/pemantauan">
-										<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-button-home-1">Pemantauan</text>
-										</Button>
+										<span className="btn-radius">
+											<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-button-home-1">Pemantauan</text>
+											</Button>
+										</span>
 									</Link>
 								</p>
 								<div>

pages/app/pelaporan/new.js

@@ -50,7 +50,7 @@ class PelaporanNew extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<p className="lead bb">Informasi Laporan</p>
+											<p className="lead bb">Informasi Laporan<span className="font-20">(wajib diisi)</span></p>
 											<InputData query={this.props.query} />
 										</Col>
 									</Row>

pages/laporan/new/index.js

@@ -48,12 +48,12 @@ const laporanSchema = Yup.object().shape({
 	nama: Yup.string().notRequired(),
 	setuju: Yup.boolean().isTrue("Harap diceklis"),
 	alamat: Yup.string().min(3, "Minimal 3 huruf").max(200, "Maksimal 200 huruf").notRequired(),
-	keterangan: Yup.string().min(3, "Minimal 3 huruf").max(200, "Maksimal 200 huruf").required("Wajib Diisi"),
+	keterangan: Yup.string().min(3, "Minimal 3 huruf").max(200, "Maksimal 200 huruf").required(""),
 	email: Yup.string().email().notRequired(),
-	pelanggaran_id: Yup.array().min(1, "Minimal terdapat 1 jenis pelanggaran").required("Wajib Diisi"),
-	pt_id: Yup.string().required("Wajib Diisi"),
+	pelanggaran_id: Yup.array().min(1, "Minimal terdapat 1 jenis pelanggaran").required(""),
+	pt_id: Yup.string().required(""),
 	foto: Yup.array().notRequired().test("filesize", "Maksimal ukuran foto 15mb", checkIfFilesAreTooBig).test("type", "harus jpeg/png", checkIfFilesAreCorrectType),
-	dokumen: Yup.array().min(1, "Wajib upload dokumen").required().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+	dokumen: Yup.array().min(1, " ").required().test("filesize", "Maksimal ukuran setiap dokumen 15mb", checkIfFilesAreTooBig),
 	is_private: Yup.boolean().notRequired(),
 });
 
@@ -314,7 +314,7 @@ class App extends Component {
 												</div>
 											</FormGroup>
 											<div class="header-1">
-												<h2 class="card-title-1">Detail Laporan</h2>
+												<h2 class="card-title-1">Detail Laporan<span className="font-20">(wajib diisi)</span></h2>
 											</div>
 											{/* <p className="lead bb">Detail Laporan</p> */}
 											<FormGroup row>
@@ -326,7 +326,7 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">
-													Perguruan Tinggi yang Dilaporkan<span className="star-color">*</span>
+													Perguruan Tinggi yang Dilaporkan<span className="star-color"></span>
 												</label>
 												<div className="col-md-10">
 													<Field name="pt_id">
@@ -348,7 +348,7 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">
-													Jenis Pelanggaran<span className="star-color">*</span>
+													Jenis Pelanggaran<span className="star-color"></span>
 												</label>
 												<div className="col-md-10">
 													<Field name="pelanggaran_id">
@@ -374,7 +374,7 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">
-													Keterangan Laporan<span className="star-color">*</span>
+													Keterangan Laporan<span className="star-color"></span>
 												</label>
 												<div className="col-md-10">
 													<Field name="keterangan">{({ field }) => <Input type="textarea" {...field} />}</Field>
@@ -388,6 +388,7 @@ class App extends Component {
 												<div className="col-md-10">
 													<Field name="dokumen">{({ field, form }) => <Input type="file" multiple onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>
 													<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+													<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 												</div>
 											</FormGroup>
 											<FormGroup row>
@@ -452,7 +453,7 @@ class App extends Component {
 						</form>
 					</Modal>
 				</ContentWrapper>
-			</div>
+			</div >
 		);
 	}
 }

styles/bootstrap/_buttons.scss

@@ -136,36 +136,44 @@ input[type="button"] {
 		width: 100%;
 	}
 }
-
+.posisi-btn-1 .button-kirimlaporan{
+	border-radius: 5px;
+}
 .button-kirimlaporan {
 	// background: rgba(0, 0, 0, 0.05);
 	display: inline-block;
 	background-color: #6fb9de;
-	width: 175px;
-	height: 40px;
+	width: 150px;
+	height: 33px;
+	margin-bottom: -15px;
+	
 }
 .text-kirimlaporan {
 	font-weight: 500;
-	font-size: 20px;
+	font-size: 17px;
 	letter-spacing: 0.02em;
 	text-align: center;
 	padding-bottom: 5px;
 }
-.button-lihatpemantauan {
+.posisi-btn-1 .button-lihatpemantauan {
+	border-radius: 5px;
 	position: relative;
 	margin-left: auto;
 	// background: rgba(0, 0, 0, 0.05);
 	display: inline-block;
 	background-color: #6fb9de;
-	width: 200px;
-	height: 40px;
+	width: 160px;
+	height: 35px;
+	margin-bottom: -5px;
+	
 }
 .text-lihatpemantauan {
-	font-weight: 500;
-	font-size: 20px;
+	// font-weight: 500;
+	font-size: 16px;
 	letter-spacing: 0.02em;
 	text-align: center;
-	padding-bottom: 5px;
+	// padding-bottom: 5px;
+	margin: -5px;
 }
 .btn-labeled {
 	padding-top: 0;
@@ -174,6 +182,7 @@ input[type="button"] {
 	margin-top: 3%;
 	background: #6fb9de;
 	display: inline;
+	border-radius: 7px;
 }
 .btn-labeled-2 {
 	padding-top: 0;
@@ -215,3 +224,14 @@ input[type="button"] {
 	margin-top: 20px;
 	margin-bottom: 15px;
 }
+.btn-radius .btn-labeled-2{
+	border-radius: 7px;
+	display: inline;
+}
+.btn-radius .btn-labeled{
+	border-radius: 7px;
+	display: inline;
+}
+.btn-radius .btn-login{
+	border-radius: 7px;
+}

styles/bootstrap/_type.scss

@@ -141,4 +141,11 @@ mark,
   padding: 0;
   font-size: 15px;
   border-radius: 10px;
+}
+.font-20{
+  font-size: 20px;
+  margin-left: 10px;
+}
+.mrgn-top-5{
+  margin-top: 5px;
 }