fix violation table styles

2026-04-23 11:42:54 +07:00
parent a508ede373
commit fc9dc836e7
4 changed files with 122 additions and 93 deletions
@@ -87,23 +87,45 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 					<form action={formAction}>
 						<input type="hidden" name="violationId" value={localViolation.id} />
 						<section
-							className="note-form-group"
+							className="note-form-section"
 						>
-							<label
-								className="note-case-label"
-								htmlFor="note"
+							<div
+								className="note-form-group"
 							>
-								{t('text-of-the-complaint')}
-							</label>
+								<label
+									className="note-case-label"
+									htmlFor="note"
+								>
+									{t('text-of-the-complaint')}
+								</label>

-							<textarea
-								name="note"
-								className="note-textarea"
-								placeholder={`${t('text-area-error-fill-complaint-text')}...`}
-								value={noteText}
-								onChange={(e) => setNoteText(e.target.value)}
-							>
-							</textarea>
+								<textarea
+									name="note"
+									className="note-textarea"
+									placeholder={`${t('text-area-error-fill-complaint-text')}...`}
+									value={noteText}
+									onChange={(e) => setNoteText(e.target.value)}
+								>
+								</textarea>
+							</div>
+
+							{state?.errorMessage?.textArea && (
+								<p
+									className="text-sm text-red-500"
+								>
+
+									{
+										state?.errorMessage?.textArea.split('&').map((e, index) => {
+											return (
+												<span key={index}>
+													{t(e)}
+													<br />
+												</span>
+											)
+										})
+									}
+								</p>
+							)}
 						</section>

 						<div
@@ -127,24 +149,6 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 							>
 								{t('submit-violation')}
 							</button>
-
-							{state?.errorMessage?.textArea && (
-								<p
-									className="text-sm text-red-500"
-								>
-
-									{
-										state?.errorMessage?.textArea.split('&').map((e, index) => {
-											return (
-												<span key={index}>
-													{t(e)}
-													<br />
-												</span>
-											)
-										})
-									}
-								</p>
-							)}
 						</div>
 					</form>

@@ -80,20 +80,25 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 							className="note-form-flex"
 						>
 							<section
-								className="note-form-group"
+								className="note-form-section"
 							>
-								<label
-									className="note-case-label"
-									htmlFor="caseTitle"
+								<div
+									className="note-form-group"
 								>
-									{t('case-name')}
-								</label>
-								<input
-									type="text"
-									name="caseTitle"
-									className="note-case-input"
-									placeholder={t('fill-title-of-the-case') + '...'}
-								/>
+									<label
+										className="note-case-label"
+										htmlFor="caseTitle"
+									>
+										{t('case-name')}
+									</label>
+									<input
+										type="text"
+										name="caseTitle"
+										className="note-case-input"
+										placeholder={t('fill-title-of-the-case') + '...'}
+									/>
+								</div>
+
 								{state?.errorMessage?.caseTitle && (
 									<p
 										className="text-sm text-red-500"
@@ -112,20 +117,25 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 								)}
 							</section>
 							<section
-								className="note-form-group"
+								className="note-form-section"
 							>
-								<label
-									className="note-case-label"
-									htmlFor="amount"
+								<div
+									className="note-form-group"
 								>
-									{t('amount-of-damage')}
-								</label>
-								<input
-									type="number"
-									name="amount"
-									className="note-case-input"
-									placeholder={t('enter-the-amount-of-damage') + '...'}
-								/>
+									<label
+										className="note-case-label"
+										htmlFor="amount"
+									>
+										{t('amount-of-damage')}
+									</label>
+									<input
+										type="number"
+										name="amount"
+										className="note-case-input"
+										placeholder={t('enter-the-amount-of-damage') + '...'}
+									/>
+								</div>
+
 								{state?.errorMessage?.amount && (
 									<p
 										className="text-sm text-red-500"
@@ -146,21 +156,25 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 						</div>

 						<section
-							className="note-form-group"
+							className="note-form-section"
 						>
-							<label
-								className="note-case-label"
-								htmlFor="note"
+							<div
+								className="note-form-group"
 							>
-								{t('text-of-the-case')}
-							</label>
+								<label
+									className="note-case-label"
+									htmlFor="note"
+								>
+									{t('text-of-the-case')}
+								</label>

-							<textarea
-								name="note"
-								className="note-textarea"
-								placeholder={t('fill-text-of-the-case') + '...'}
-							>
-							</textarea>
+								<textarea
+									name="note"
+									className="note-textarea"
+									placeholder={t('fill-text-of-the-case') + '...'}
+								>
+								</textarea>
+							</div>

 							{state?.errorMessage?.textArea && (
 								<p
@@ -187,25 +187,25 @@ export default function FilePageViolationInfo({ selectedViolation, caseType }: {
 										target.src = '/images/no-image.png';
 									}}
 								/>
-							</div>
-							<div className="violation-info-image-buttons">
-								<button
-									className="image-btn image-btn-view"
-									onClick={() => setIsModalOpen(true)}
-									title="Увеличить"
-								>
-									<IconFullScreen />
-								</button>
-								<button
-									className="image-btn image-btn-open"
-									onClick={openInNewTab}
-									title="Открыть в новой вкладке"
-								>
-									<IconFollowToLink />
-								</button>
+
+								<div className="violation-info-image-buttons">
+									<button
+										className="image-btn image-btn-view"
+										onClick={() => setIsModalOpen(true)}
+										title="Увеличить"
+									>
+										<IconFullScreen />
+									</button>
+									<button
+										className="image-btn image-btn-open"
+										onClick={openInNewTab}
+										title="Открыть в новой вкладке"
+									>
+										<IconFollowToLink />
+									</button>
+								</div>
 							</div>
 						</div>
-
 						<div
 							className="violation-info-right-side"
 						>