frontdev/no-copy-admin-panel-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add styles fix some bugs

Browse Source
This commit is contained in:
smanylov
2026-05-13 14:37:54 +07:00
parent 9d40df3273
commit 80692d6446
2 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/styles/global-styles.scss
+16
View File
@@ -1309,6 +1309,22 @@
border-radius: 20px;
overflow: hidden;
.status {
&-active,
&-verified {
color: #166534;
}
&-expired,
&-unverified {
color: #991b1b;
}
&-pending {
color: #92400e;
}
}
&-content {
padding: 10px;
max-height: calc(90vh - 80px);
src/app/ui/users/user-info-modal-window.tsx
+33 -35
View File
@@ -63,11 +63,9 @@ export function UserInfoModalWindow({
};
const getGenderText = (gender: string) => {
return gender === 'MALE' ? 'Male' : 'Female';
return gender === 'MALE' ? t('male') : t('female');
};
console.log(userInfo)
return (
<div className="modal-window-view-user">
<div className="modal-window-view-user-content">
@@ -75,14 +73,14 @@ export function UserInfoModalWindow({
{/* Карточка информации о пользователе */}
<div className="user-info-card">
<div className="info-header">
<h4>{t('userInformation') || 'User Information'}</h4>
<h4>{t('userInformation')}</h4>
</div>
<div className="info-item">
<div className="info-label">
{t('fullName') || 'Full Name'}:
{t('fullName')}:
</div>
<div className="info-value">
{userInfo.fullName}
{userInfo?.fullName ? userInfo.fullName : '-'}
</div>
</div>
<div className="info-item">
@@ -90,15 +88,15 @@ export function UserInfoModalWindow({
{t('email')}:
</div>
<div className="info-value">
{userInfo.email}
{userInfo?.email ? userInfo.email : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('phone') || 'Phone'}:
{t('phone')}:
</div>
<div className="info-value">
{userInfo.phone}
{userInfo?.phone ? userInfo.phone : '-'}
</div>
</div>
<div className="info-item">
@@ -106,39 +104,39 @@ export function UserInfoModalWindow({
{t('company')}:
</div>
<div className="info-value">
{userInfo.company || '-'}
{userInfo?.company ? userInfo.company : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('gender') || 'Gender'}:
{t('gender')}:
</div>
<div className="info-value">
{getGenderText(userInfo.genderType)}
{getGenderText(userInfo?.genderType)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('birthday') || 'Birthday'}:
{t('birthday')}:
</div>
<div className="info-value">
{userInfo.birthday ? formatDate(userInfo.birthday) : '-'}
{userInfo?.birthday ? formatDate(userInfo.birthday) : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('createdAt') || 'Registered'}:
{t('createdAt')}:
</div>
<div className="info-value">
{formatDateTime(userInfo.createdAt)}
{formatDateTime(userInfo?.createdAt)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('verifiedStatus') || 'Verification Status'}:
{t('verifiedStatus')}:
</div>
<div className="info-value">
{getStatusBadge(userInfo.verifiedStatus)}
{getStatusBadge(userInfo?.verifiedStatus)}
</div>
</div>
<div className="info-item">
@@ -146,7 +144,7 @@ export function UserInfoModalWindow({
{t('active')}:
</div>
<div className="info-value">
{userInfo.active ? 'active' : 'not active'}
{userInfo?.active ? 'active' : 'not active'}
</div>
</div>
</div>
@@ -154,46 +152,46 @@ export function UserInfoModalWindow({
{/* Карточка информации о тарифе */}
<div className="user-info-card">
<div className="info-header">
<h4>{t('tariffInformation') || 'Tariff Information'}</h4>
<h4>{t('tariffInformation')}</h4>
</div>
<div className="info-item">
<div className="info-label">
{t('tariffName') || 'Tariff'}:
{t('tariffName')}:
</div>
<div className="info-value">
{userInfo.tariffInfo.tariffName}
{userInfo?.tariffInfo?.tariffName ? userInfo?.tariffInfo?.tariffName : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('tariffStatus') || 'Status'}:
{t('tariffStatus')}:
</div>
<div className="info-value">
{getStatusBadge(userInfo.tariffInfo.status)}
{getStatusBadge(userInfo?.tariffInfo?.status)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('tokens') || 'Tokens'}:
{t('tokens')}:
</div>
<div className="info-value">
{userInfo.tariffInfo.tokens || 0}
{userInfo?.tariffInfo?.tokens ? userInfo?.tariffInfo?.tokens : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('startDate') || 'Start Date'}:
{t('startDate')}:
</div>
<div className="info-value">
{formatDate(userInfo.tariffInfo.startTariff)}
{formatDate(userInfo?.tariffInfo?.startTariff)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('endDate') || 'End Date'}:
{t('endDate')}:
</div>
<div className="info-value">
{formatDate(userInfo.tariffInfo.endTariff)}
{formatDate(userInfo?.tariffInfo?.endTariff)}
</div>
</div>
</div>
@@ -202,22 +200,22 @@ export function UserInfoModalWindow({
{/* Карточка использования диска */}
<div className="user-info-card">
<div className="info-header">
<h4>{t('storageInformation') || 'Storage Information'}</h4>
<h4>{t('storageInformation')}</h4>
</div>
<div className="info-item">
<div className="info-label">
{t('diskUsage') || 'Disk Usage'}:
{t('diskUsage')}:
</div>
<div className="info-value">
{formatBytes(userInfo.tariffInfo.currentFileOnDisk)} / {formatBytes(userInfo.tariffInfo.maxFileOnDisk)}
{formatBytes(userInfo?.tariffInfo?.currentFileOnDisk)} / {formatBytes(userInfo?.tariffInfo?.maxFileOnDisk)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('fileCount') || 'Files'}:
{t('fileCount')}:
</div>
<div className="info-value">
{userInfo.tariffInfo.currentFileCounts} / {userInfo.tariffInfo.maxFileCounts}
{userInfo?.tariffInfo?.currentFileCounts} / {userInfo?.tariffInfo?.maxFileCounts}
</div>
</div>
</div>