redesign upload

components/Sanksi/UploadSurat.js

@@ -93,7 +93,7 @@ export class UploadSurat extends Component {
 					</div>
 				</FormGroup>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label"><span className="text-danger">*</span>Dokumen Surat Sanksi:</label>
+					<label className="col-md-2 col-form-label">Dokumen Surat Sanksi<span className="text-danger">*</span>:</label>
 					<div className="col-md-10">
 						<DropzoneWrapper className="" onDrop={this.onDrop}>
 							{({ getRootProps, getInputProps, isDragActive }) => {

pages/app/banding/detail.js

@@ -156,7 +156,7 @@ class JawabanBanding extends Component {
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
 				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 
@@ -237,8 +237,14 @@ class JawabanBanding extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
-																							</div>
+																								<div className="dropzone-style-1">
+																									<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																										<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																											<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
+																										</div>
+																									}
+																									</div>
+																								</div>																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
 																									<button

pages/app/keberatan/detail.js

@@ -161,7 +161,7 @@ class DetailKeberatan extends Component {
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
 				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 
@@ -260,7 +260,14 @@ class DetailKeberatan extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
+																								<div className="dropzone-style-1">
+																									<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																										<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																											<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
+																										</div>
+																									}
+																									</div>
+																								</div>
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">

pages/app/pencabutan-sanksi/detail.js

@@ -156,7 +156,7 @@ class JawabanPencabutanSanksi extends Component {
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
 				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 
@@ -255,8 +255,14 @@ class JawabanPencabutanSanksi extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
-																							</div>
+																								<div className="dropzone-style-1">
+																									<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																										<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																											<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
+																										</div>
+																									}
+																									</div>
+																								</div>																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
 																									<button

pages/pt/dokumen-perbaikan/detail.js

@@ -140,7 +140,7 @@ class DetailPerbaikanDoc extends Component {
 		const thumbs = files.map((file, index) => (
 			<div className="text-center" md={3} key={index}>
 				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 
@@ -209,8 +209,14 @@ class DetailPerbaikanDoc extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
-																							</div>
+																								<div className="dropzone-style-1">
+																									<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																										<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																											<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
+																										</div>
+																									}
+																									</div>
+																								</div>																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
 																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>

pages/pt/pencabutan-sanksi/detail.js

@@ -131,7 +131,7 @@ class DetailPencabutanSanksi extends Component {
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
 				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -187,8 +187,14 @@ class DetailPencabutanSanksi extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
-																							</div>
+																								<div className="dropzone-style-1">
+																									<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																										<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																											<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
+																										</div>
+																									}
+																									</div>
+																								</div>																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
 																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>

styles/bootstrap/_card.scss

@@ -383,9 +383,10 @@ float: right;
   // background-color: #9e9e9e;
   // width: 50px;
   padding-top: 10px;
-  border: 1px dotted black;
+  border: 1px solid #dde6e9;
   min-height: 70px;
   border-radius: 5px;
+  cursor: pointer;
 }
 .center-ver-hor{
   display: flex;