feat: add window with profile and logout buttons. add notification component

2026-05-10 18:43:35 +03:00
parent 84e4fcdaec
commit 01685e3811
7 changed files with 273 additions and 20 deletions
--- a/src/shared/ui/Notification/Notification.module.css
+++ b/src/shared/ui/Notification/Notification.module.css
@@ -0,0 +1,108 @@
+.notification {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 18px;
+  min-width: 280px;
+  max-width: 360px;
+  border-radius: 12px;
+  background: var(--bg-mid);
+  border: 1px solid var(--glass-border);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  animation: slideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.notificationWrapper {
+  display: flex;
+  gap: 12px;
+}
+
+.notification.closing {
+  animation: slideOut 0.25s cubic-bezier(0.55, 0, 1, 0.45) forwards;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(calc(100% + 24px));
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(calc(100% + 24px));
+    opacity: 0;
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  margin-top: 1px;
+}
+
+.success .icon {
+  background: var(--success);
+  color: #fff;
+}
+
+.error .icon {
+  background: var(--error);
+  color: #fff;
+}
+
+.info .icon {
+  background: var(--interactive);
+  color: #fff;
+}
+
+.warning .icon {
+  background: #f59e0b;
+  color: #fff;
+}
+
+.message {
+  flex: 1;
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  margin-top: 2px;
+  transition: color 0.15s;
+}
+
+.close:hover {
+  color: var(--text-primary);
+}