change colors and styles for complaint/case form

src/app/styles/violation-details.scss

@@ -142,11 +142,11 @@
 	}
 
 	.btn-primary-small {
-		border: 2px solid v.$status-in-work;
+		border: 2px solid v.$status-showed;
-		color: v.$status-in-work;
+		color: v.$status-showed;
 
 		&:hover {
-			background: v.$status-in-work;
+			background: v.$status-showed;
 			color: white;
 		}
 	}
@@ -292,6 +292,15 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+
+		.pagination-controls-pages button,
+		.pagination-controls .arrow {
+			color: v.$text-p;
+
+			&.current {
+				background-color: #e9ecef;
+			}
+		}
 	}
 
 	.source-status {
@@ -823,21 +832,42 @@
 		}
 	}
 
+
+	.note-form-flex {
+		display: flex;
+		gap: 10px;
+	}
+
+	.note-case-label {
+		font-weight: 600;
+		display: block;
+		background: #e9ecef;
+		color: v.$text-p;
+		padding: 5px 10px;
+	}
+
+	.note-case-input,
 	.note-textarea {
-		width: 100%;
+		background: v.$white;
-		min-height: 80px;
-		padding: 10px 20px;
-		border: 1px solid v.$border-color-1;
-		border-radius: 8px;
-		font-family: inherit;
-		resize: vertical;
 		box-sizing: border-box;
-		background: #f8fafc;
+		padding: 10px 20px;
+		border-radius: 0 0 8px 8px;
+
+		&:hover {
+			background: v.$bg-light;
+		}
 
 		&:focus {
 			outline: none;
-			box-shadow: 2px 2px 4px v.$shadow-1;
 		}
+	}
+
+	.note-textarea {
+		width: 100%;
+		min-height: 80px;
+		font-family: inherit;
+		resize: none;
+		vertical-align: top;
 
 		&-wrapper {
 			display: flex;
@@ -846,43 +876,32 @@
 		}
 	}
 
-	.note-form-flex {
-		display: flex;
-		gap: 10px;
-		margin-bottom: 10px;
-	}
-
 	.note-case-input {
-		border: 1px solid v.$border-color-1;
-		border-radius: 8px;
-		box-sizing: border-box;
-		background: #f8fafc;
-		padding: 10px 20px;
 
 		&::-webkit-outer-spin-button,
 		&::-webkit-inner-spin-button {
 			-webkit-appearance: none;
 			margin: 0;
 		}
-
-		&:focus {
-			outline: none;
-			box-shadow: 2px 2px 4px v.$shadow-1;
-		}
-
-		&::placeholder {
-			font-size: 12px;
-		}
-	}
-
-	.note-case-label {
-		font-weight: 600;
 	}
 
 	.note-form-group {
+		border: 1px solid #e9ecef;
+		box-sizing: border-box;
+		padding: 0px;
+		border-radius: 8px;
+		margin-bottom: 10px;
+		overflow: hidden;
+
 		input {
 			display: block;
 		}
+
+		input[name="amount"] {
+			&::placeholder {
+				font-size: 12px;
+			}
+		}
 	}
 }
 

src/app/ui/file-page/violation-table/case-complaint.tsx

@@ -86,20 +86,26 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 				<div className="note-form">
 					<form action={formAction}>
 						<input type="hidden" name="violationId" value={localViolation.id} />
-						<label
+						<section
-							className="note-case-label"
+							className="note-form-group"
-							htmlFor="note"
 						>
-							{t('text-of-the-complaint')}
+							<label
-						</label>
+								className="note-case-label"
-						<textarea
+								htmlFor="note"
-							name="note"
+							>
-							className="note-textarea"
+								{t('text-of-the-complaint')}
-							placeholder={`${t('text-area-error-fill-complaint-text')}...`}
+							</label>
-							value={noteText}
+
-							onChange={(e) => setNoteText(e.target.value)}
+							<textarea
-						>
+								name="note"
-						</textarea>
+								className="note-textarea"
+								placeholder={`${t('text-area-error-fill-complaint-text')}...`}
+								value={noteText}
+								onChange={(e) => setNoteText(e.target.value)}
+							>
+							</textarea>
+						</section>
+
 						<div
 							className="button-actions"
 						>

src/app/ui/file-page/violation-table/case-legal.tsx

@@ -86,8 +86,7 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 									className="note-case-label"
 									htmlFor="caseTitle"
 								>
-									{/* {t('case-name')} */}
+									{t('case-name')}
-									Название претензии
 								</label>
 								<input
 									type="text"
@@ -147,7 +146,7 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 						</div>
 
 						<section
-							className="note-textarea-wrapper"
+							className="note-form-group"
 						>
 							<label
 								className="note-case-label"
@@ -155,12 +154,14 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 							>
 								{t('text-of-the-case')}
 							</label>
+
 							<textarea
 								name="note"
 								className="note-textarea"
 								placeholder={t('fill-text-of-the-case') + '...'}
 							>
 							</textarea>
+
 							{state?.errorMessage?.textArea && (
 								<p
 									className="text-sm text-red-500"

src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx

@@ -6,6 +6,7 @@ import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
 import { MatchStatus } from '@/app/actions/violationActions';
 import { useEffect, useState } from 'react';
 import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
+import { useTranslations } from 'next-intl';
 
 type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;
 
@@ -14,6 +15,7 @@ const STATUSES_IN_WORK = ['COMPLAINT_IN_WORK', 'LEGAL_IN_WORK', 'COMPLAINT_AND_L
 type TabType = 'complaint' | 'legal'
 
 export default function FilePageViolationInfoTabs({ selectedViolation, updateStatusHandler }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler }) {
+	const t = useTranslations('Global');
 	const [activeTab, setActiveTab] = useState<TabType>('complaint');
 	const [showTabs, setShowTabs] = useState(false);
 	const isInWork = STATUSES_IN_WORK.includes(selectedViolation.status);
@@ -61,7 +63,9 @@ export default function FilePageViolationInfoTabs({ selectedViolation, updateSta
 	if (!isInWork && !showTabs) {
 		return (
 			<div className="violation-info-choice">
-				<h4>Вы можете</h4>
+				<h4>
+					{t('you-can')}
+				</h4>
 				<div className="violation-info-choice-buttons">
 					<button
 						className="btn btn-primary"
@@ -70,11 +74,11 @@ export default function FilePageViolationInfoTabs({ selectedViolation, updateSta
 							setActiveTab('complaint');
 						}}
 					>
-						Подать жалобу
+						{t('file-a-complaint')}
 					</button>
 
 					<span>
-						или
+						{t('or')}
 					</span>
 
 					<button
@@ -84,7 +88,7 @@ export default function FilePageViolationInfoTabs({ selectedViolation, updateSta
 							setActiveTab('legal');
 						}}
 					>
-						Подать притензию
+						{t('file-a-claim')}
 					</button>
 				</div>
 			</div>
@@ -98,13 +102,13 @@ export default function FilePageViolationInfoTabs({ selectedViolation, updateSta
 					className={`btn-s btn-primary ${activeTab === 'complaint' ? 'active' : ''} ${localViolation.status === 'COMPLAINT_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? '' : 'action'}`}
 					onClick={() => setActiveTab('complaint')}
 				>
-					{localViolation.status === 'COMPLAINT_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? 'Жалоба' : 'Подать жалобу'}
+					{localViolation.status === 'COMPLAINT_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? t('complaint') : t('file-a-complaint')}
 				</button>
 				<button
 					className={`btn-s btn-primary ${activeTab === 'legal' ? 'active' : ''} ${localViolation.status === 'LEGAL_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? '' : 'action'}`}
 					onClick={() => setActiveTab('legal')}
 				>
-					{localViolation.status === 'LEGAL_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? 'Претензия' : 'Подать претензию'}
+					{localViolation.status === 'LEGAL_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? t('case') : t('file-a-claim')}
 				</button>
 			</div>
 			<div className="violation-info-content">

src/i18n/messages/en.json

@@ -409,6 +409,7 @@
 		"type": "Type",
 		"lawyer": "Lawyer",
 		"not-assigned": "Not assigned",
+		"case": "Case",
 		"create-case": "Create case",
 		"case-name": "Case name",
 		"amount-of-damage": "Amount of damage",
@@ -424,7 +425,11 @@
 		"under-moderation": "Under moderation",
 		"full-link": "Full link",
 		"follow-the-link": "Follow the link",
-		"date-of-discovery": "Date of discovery"
+		"date-of-discovery": "Date of discovery",
+		"file-a-claim": "File a claim",
+		"file-a-complaint": "File a complaint",
+		"you-can": "You can",
+		"complaint": "Complaint"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -409,6 +409,7 @@
 		"type": "Тип",
 		"lawyer": "Адвокат",
 		"not-assigned": "Не назначено",
+		"case": "Претензия",
 		"create-case": "Создать претензию",
 		"case-name": "Название претензии",
 		"amount-of-damage": "Сумма ущерба",
@@ -424,7 +425,11 @@
 		"under-moderation": "На модерации",
 		"full-link": "Полная ссылка",
 		"follow-the-link": "Перейти",
-		"date-of-discovery": "Дата обнаружения"
+		"date-of-discovery": "Дата обнаружения",
+		"file-a-claim": "Подать претензию",
+		"file-a-complaint": "Подать жалобу",
+		"you-can": "Вы можете",
+		"complaint": "Жалоба"
 	},
 	"Login-register-form": {
 		"and": "и",