faglo/main_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter 2

Browse Source
This commit is contained in:
Daniil
2026-04-04 14:51:40 +03:00
parent 10a1d28f77
commit 0523ef3d72
191 changed files with 12065 additions and 2658 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/notifications/NotificationBell/NotificationBell.module.scss
+9 -1
View File
@@ -5,6 +5,8 @@
// Rounded hover for ghost icon button
:global(.rt-IconButton) {
border-radius: variables.$radius-sm;
transition: background-color variables.$duration-normal variables.$ease-out,
color variables.$duration-normal variables.$ease-out;
}
}
@@ -17,7 +19,7 @@
height: 16px;
padding: 0 4px;
border-radius: 9999px;
background-color: #ef4444;
background-color: var(--color-danger);
color: #fff;
font-size: 10px;
font-weight: 700;
@@ -26,4 +28,10 @@
pointer-events: none;
border: 1.5px solid variables.$bg-default;
box-sizing: content-box;
animation: badgePulse 2s var(--ease-out) infinite;
}
@keyframes badgePulse {
0%, 100% { transform: translate(50%, -50%) scale(1); }
50% { transform: translate(50%, -50%) scale(1.08); }
}
src/features/notifications/NotificationPopup/NotificationPopup.module.scss
+37 -20
View File
@@ -8,42 +8,48 @@
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 360px;
width: 380px;
max-height: 480px;
background-color: variables.$bg-surface;
background-color: variables.$bg-default;
border: 1px solid variables.$border-default;
border-radius: variables.$radius-md;
box-shadow: variables.$shadow-lg;
box-shadow: var(--shadow-lg);
z-index: 100;
display: flex;
flex-direction: column;
overflow: hidden;
animation: popupEntrance 0.2s var(--ease-out) both;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid variables.$border-subtle;
padding: 14px 16px;
border-bottom: 1px solid variables.$border-default;
}
.title {
@include typography.font-body-14(600);
@include typography.font-body-14(700);
letter-spacing: -0.006em;
color: variables.$text-primary;
}
.readAllBtn {
@include typography.font-caption-m;
font-weight: 500;
font-weight: 600;
color: variables.$purple-500;
background: none;
border: none;
cursor: pointer;
padding: 0;
padding: 4px 8px;
border-radius: variables.$radius-sm;
transition: background-color variables.$duration-normal variables.$ease-out,
color variables.$duration-normal variables.$ease-out;
&:hover {
color: variables.$purple-700;
background-color: variables.$bg-surface;
}
}
@@ -57,10 +63,10 @@
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background-color 0.15s;
transition: background-color variables.$duration-normal variables.$ease-out;
&:hover {
background-color: variables.$bg-hover;
background-color: variables.$bg-surface;
}
&:not(:last-child) {
@@ -78,7 +84,7 @@
}
.itemTitle {
@include typography.font-body-14(500);
@include typography.font-body-14(600);
color: variables.$text-primary;
display: flex;
align-items: center;
@@ -109,23 +115,23 @@
padding: 1px 6px;
border-radius: 9999px;
font-size: 11px;
font-weight: 500;
font-weight: 600;
line-height: 16px;
}
.statusRunning {
background-color: #dbeafe;
color: #1d4ed8;
background-color: hsl(262, 50%, 94%);
color: hsl(262, 72%, 45%);
}
.statusDone {
background-color: #dcfce7;
color: #15803d;
background-color: hsl(150, 30%, 92%);
color: hsl(150, 50%, 30%);
}
.statusFailed {
background-color: #fee2e2;
color: #b91c1c;
background-color: hsl(0, 80%, 95%);
color: hsl(0, 65%, 40%);
}
.progressBar {
@@ -141,12 +147,23 @@
height: 100%;
background-color: variables.$purple-500;
border-radius: 2px;
transition: width 0.3s ease;
transition: width 0.4s var(--ease-out);
}
.empty {
padding: 32px 16px;
padding: 40px 16px;
text-align: center;
@include typography.font-body-14(400);
color: variables.$text-tertiary;
}
@keyframes popupEntrance {
from {
opacity: 0;
transform: translateY(-4px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}