@ermis-network/ermis-chat-react 1.0.2 → 1.0.4

package/src/styles/_channel-info.css

@@ -78,7 +78,7 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -89,7 +89,7 @@
 }
 
 .ermis-channel-info__cover-edit-btn:hover {
-  color: var(--ermis-color-primary, #005fff);
+  color: var(--ermis-accent);
   background-color: var(--ermis-bg-hover);
 }
 
@@ -144,7 +144,7 @@
 }
 
 .ermis-channel-info__action-btn--danger {
-  color: var(--ermis-color-danger, #dc3545);
+  color: var(--ermis-color-danger);
 }
 
 .ermis-channel-info__action-btn:hover {
@@ -152,7 +152,7 @@
 }
 
 .ermis-channel-info__action-btn--danger:hover {
-  color: var(--ermis-color-danger, #dc3545);
+  color: var(--ermis-color-danger);
   opacity: 0.8;
 }
 
@@ -203,7 +203,7 @@
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 600;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   letter-spacing: 0.5px;
 }
 
@@ -258,16 +258,16 @@
 }
 
 .ermis-channel-info__member-role--owner {
-  color: var(--ermis-color-danger, #ff4d4f);
+  color: var(--ermis-color-danger);
 }
 .ermis-channel-info__member-role--moder {
-  color: var(--ermis-color-primary, #005fff);
+  color: var(--ermis-accent);
 }
 .ermis-channel-info__member-role--member {
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
 }
 .ermis-channel-info__member-role--pending {
-  color: var(--ermis-color-warning, #faad14);
+  color: var(--ermis-color-danger);
 }
 
 .ermis-channel-info__add-member-wrap {
@@ -282,7 +282,7 @@
   background: transparent;
   border: 1px dashed var(--ermis-border-base);
   border-radius: 8px;
-  color: var(--ermis-color-primary, #005fff);
+  color: var(--ermis-accent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -294,7 +294,7 @@
 
 .ermis-channel-info__add-member-btn:hover {
   background-color: var(--ermis-bg-hover);
-  border-color: var(--ermis-color-primary, #005fff);
+  border-color: var(--ermis-accent);
 }
 
 /* ============================================
@@ -328,7 +328,7 @@
   border: none;
   border-bottom: 2px solid transparent;
   cursor: pointer;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   font-size: 13px;
   font-weight: 500;
   transition: color 0.2s ease, border-color 0.2s ease;
@@ -340,8 +340,8 @@
 }
 
 .ermis-channel-info__media-tab--active {
-  color: var(--ermis-color-primary, #005fff);
-  border-bottom-color: var(--ermis-color-primary, #005fff);
+  color: var(--ermis-accent);
+  border-bottom-color: var(--ermis-accent);
 }
 
 .ermis-channel-info__media-tab-label {
@@ -363,7 +363,7 @@
 }
 
 .ermis-channel-info__media-tab--active .ermis-channel-info__media-tab-count {
-  background: var(--ermis-color-primary, #005fff);
+  background: var(--ermis-accent);
   color: #fff;
 }
 
@@ -503,7 +503,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   overflow: hidden;
 }
 
@@ -532,7 +532,7 @@
 
 .ermis-channel-info__link-domain {
   font-size: 12px;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -540,7 +540,7 @@
 
 .ermis-channel-info__link-date {
   font-size: 11px;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -578,7 +578,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   gap: 1px;
 }
 
@@ -587,7 +587,7 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.3px;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   line-height: 1;
 }
 
@@ -613,18 +613,18 @@
   align-items: center;
   gap: 4px;
   font-size: 12px;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
 }
 
 .ermis-channel-info__file-meta-dot {
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
 }
 
 .ermis-channel-info__file-download {
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   padding: 6px;
   border-radius: 6px;
   display: flex;
@@ -636,7 +636,7 @@
 
 .ermis-channel-info__file-download:hover {
   background-color: var(--ermis-bg-secondary);
-  color: var(--ermis-color-primary, #005fff);
+  color: var(--ermis-accent);
 }
 
 /* ============================================
@@ -650,7 +650,7 @@
   justify-content: center;
   padding: 40px 16px;
   gap: 12px;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
   font-size: 13px;
 }
 
@@ -662,7 +662,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--ermis-text-tertiary);
+  color: var(--ermis-text-muted);
 }
 
 .ermis-channel-info__media-loading {
@@ -676,7 +676,7 @@
   width: 24px;
   height: 24px;
   border: 2px solid var(--ermis-border-base);
-  border-top-color: var(--ermis-color-primary, #005fff);
+  border-top-color: var(--ermis-accent);
   border-radius: 50%;
   animation: ermis-spin 0.7s linear infinite;
 }
@@ -733,7 +733,7 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--ermis-color-primary, #005fff);
+  color: var(--ermis-accent);
   font-size: 13px;
   font-weight: 500;
   padding: 4px 8px;
@@ -783,7 +783,7 @@
 }
 
 .ermis-channel-info__edit-input:focus {
-  border-color: var(--ermis-color-primary, #005fff);
+  border-color: var(--ermis-accent);
   box-shadow: 0 0 0 2px rgba(0, 95, 255, 0.15);
 }
 
@@ -807,7 +807,7 @@
 }
 
 .ermis-channel-info__edit-textarea:focus {
-  border-color: var(--ermis-color-primary, #005fff);
+  border-color: var(--ermis-accent);
   box-shadow: 0 0 0 2px rgba(0, 95, 255, 0.15);
 }
 
@@ -831,8 +831,8 @@
 }
 
 .ermis-channel-info__edit-toggle--on {
-  background: var(--ermis-color-primary, #005fff);
-  border-color: var(--ermis-color-primary, #005fff);
+  background: var(--ermis-accent);
+  border-color: var(--ermis-accent);
 }
 
 .ermis-channel-info__edit-toggle-thumb {
@@ -865,7 +865,7 @@
   background: rgba(220, 53, 69, 0.08);
   border: 1px solid rgba(220, 53, 69, 0.2);
   border-radius: 8px;
-  color: var(--ermis-color-danger, #dc3545);
+  color: var(--ermis-color-danger);
   font-size: 13px;
 }
 
@@ -906,7 +906,7 @@
 }
 
 .ermis-channel-info__edit-btn--save {
-  background: var(--ermis-color-primary, #005fff);
+  background: var(--ermis-accent);
   color: #fff;
 }
 

package/src/styles/_channel-list.css

@@ -161,15 +161,15 @@
 
 /* --- Pending channel indicator --- */
 .ermis-channel-list__item--pending {
-  border-left: 3px solid var(--ermis-color-amber-500, #f59e0b);
-  background-color: var(--ermis-color-amber-50, #fffbeb);
+  border-left: 3px solid var(--ermis-color-danger);
+  background-color: var(--ermis-bg-hover);
 }
 
 .ermis-channel-list__pending-badge {
   display: inline-flex;
   padding: 3px 6px;
-  background-color: var(--ermis-color-amber-100, #fef3c7);
-  color: var(--ermis-color-amber-700, #b45309);
+  background-color: var(--ermis-bg-hover);
+  color: var(--ermis-color-danger);
   border-radius: 6px;
   font-size: 0.6rem;
   font-weight: 600;
@@ -186,7 +186,7 @@
   padding: 16px 12px 6px 16px;
   background-color: transparent;
   cursor: pointer;
-  color: var(--ermis-text-muted, #65676b);
+  color: var(--ermis-text-muted);
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -196,7 +196,7 @@
 }
 
 .ermis-channel-list__accordion-header:hover {
-  color: var(--ermis-accent, #005fff);
+  color: var(--ermis-accent);
 }
 
 .ermis-channel-list__accordion-header--static {
@@ -204,7 +204,7 @@
 }
 
 .ermis-channel-list__accordion-header--static:hover {
-  color: var(--ermis-text-muted, #65676b);
+  color: var(--ermis-text-muted);
 }
 
 .ermis-channel-list__accordion-icon {

package/src/styles/_create-channel-modal.css

@@ -13,7 +13,7 @@
 .ermis-create-channel__tabs {
   display: flex;
   gap: 8px;
-  background-color: var(--ermis-bg-secondary, #111118);
+  background-color: var(--ermis-bg-secondary);
   padding: 4px;
   border-radius: var(--ermis-radius-md, 0.5rem);
   margin-bottom: var(--ermis-spacing-sm, 0.5rem);
@@ -26,7 +26,7 @@
   text-align: center;
   font-size: var(--ermis-font-size-sm, 0.875rem);
   font-weight: 500;
-  color: var(--ermis-text-muted, #6b7280);
+  color: var(--ermis-text-muted);
   background: transparent;
   border: none;
   cursor: pointer;
@@ -34,12 +34,12 @@
 }
 
 .ermis-create-channel__tab:hover {
-  color: var(--ermis-text-primary, #e5e7eb);
+  color: var(--ermis-text-primary);
 }
 
 .ermis-create-channel__tab--active {
   background-color: var(--ermis-bg-active, rgba(99, 102, 241, 0.12));
-  color: var(--ermis-text-primary, #e5e7eb);
+  color: var(--ermis-text-primary);
 }
 
 /* Form Fields */
@@ -52,7 +52,7 @@
 .ermis-create-channel__label {
   font-size: var(--ermis-font-size-sm, 0.875rem);
   font-weight: 500;
-  color: var(--ermis-text-primary, #e5e7eb);
+  color: var(--ermis-text-primary);
 }
 
 .ermis-create-channel__input,
@@ -61,8 +61,8 @@
   padding: 10px 12px;
   border-radius: var(--ermis-radius-md, 0.5rem);
   border: 1px solid var(--ermis-border, rgba(255, 255, 255, 0.08));
-  background-color: var(--ermis-bg-secondary, #111118);
-  color: var(--ermis-text-primary, #e5e7eb);
+  background-color: var(--ermis-bg-secondary);
+  color: var(--ermis-text-primary);
   font-size: var(--ermis-font-size-sm, 0.875rem);
   font-family: inherit;
   outline: none;
@@ -71,7 +71,7 @@
 
 .ermis-create-channel__input:focus,
 .ermis-create-channel__textarea:focus {
-  border-color: var(--ermis-accent, #6366f1);
+  border-color: var(--ermis-accent);
 }
 
 .ermis-create-channel__textarea {
@@ -90,7 +90,7 @@
   position: relative;
   width: 44px;
   height: 24px;
-  background-color: var(--ermis-bg-secondary, #111118);
+  background-color: var(--ermis-bg-secondary);
   border: 1px solid var(--ermis-border, rgba(255, 255, 255, 0.08));
   border-radius: 12px;
   cursor: pointer;
@@ -99,8 +99,8 @@
 }
 
 .ermis-create-channel__toggle--on {
-  background-color: var(--ermis-accent, #6366f1);
-  border-color: var(--ermis-accent, #6366f1);
+  background-color: var(--ermis-accent);
+  border-color: var(--ermis-accent);
 }
 
 .ermis-create-channel__toggle-thumb {
@@ -126,7 +126,7 @@
 .ermis-create-channel__users-title {
   font-size: var(--ermis-font-size-sm, 0.875rem);
   font-weight: 500;
-  color: var(--ermis-text-primary, #e5e7eb);
+  color: var(--ermis-text-primary);
   margin-bottom: var(--ermis-spacing-xs, 0.25rem);
 }
 
@@ -136,7 +136,7 @@
   align-items: center;
   gap: var(--ermis-spacing-xs, 0.25rem);
   padding: var(--ermis-spacing-sm, 0.5rem);
-  color: var(--ermis-error, #ef4444);
+  color: var(--ermis-color-danger);
   background-color: rgba(239, 68, 68, 0.1);
   border-radius: var(--ermis-radius-sm, 0.375rem);
   font-size: var(--ermis-font-size-sm, 0.875rem);
@@ -166,7 +166,7 @@
 
 .ermis-create-channel__btn--cancel {
   background-color: transparent;
-  color: var(--ermis-text-primary, #e5e7eb);
+  color: var(--ermis-text-primary);
 }
 
 .ermis-create-channel__btn--cancel:hover:not(:disabled) {
@@ -174,7 +174,7 @@
 }
 
 .ermis-create-channel__btn--create {
-  background-color: var(--ermis-accent, #6366f1);
+  background-color: var(--ermis-accent);
   color: #fff;
 }
 

package/src/styles/_message-bubble.css

@@ -139,7 +139,7 @@
 }
 
 .ermis-message-status-icon--failed {
-  color: var(--ermis-color-error, #f44336);
+  color: var(--ermis-color-danger);
 }
 
 .ermis-message-bubble--own .ermis-message-list__item-time {
@@ -224,6 +224,64 @@
 }
 
 /* --- Signal messages (call events) --- */
+.ermis-signal-message {
+  display: flex;
+  align-items: center;
+  gap: var(--ermis-spacing-sm);
+  padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
+  border-radius: var(--ermis-radius-md);
+  background-color: var(--ermis-signal-bg);
+  min-width: 180px;
+}
+
+.ermis-signal-message__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--ermis-radius-full);
+}
+
+.ermis-signal-message__icon--success {
+  background-color: rgba(84, 214, 44, 0.12);
+  color: var(--ermis-signal-success);
+}
+
+.ermis-signal-message__icon--missed {
+  background-color: rgba(255, 72, 66, 0.12);
+  color: var(--ermis-signal-missed);
+}
+
+.ermis-signal-message__body {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.ermis-signal-message__text {
+  font-size: var(--ermis-font-size-sm);
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.ermis-signal-message__text--success {
+  color: var(--ermis-signal-success);
+}
+
+.ermis-signal-message__text--missed {
+  color: var(--ermis-signal-missed);
+}
+
+.ermis-signal-message__duration {
+  font-size: var(--ermis-font-size-xs);
+  color: var(--ermis-text-muted);
+  line-height: 1.3;
+}
+
+/* Legacy class kept for backward compatibility */
 .ermis-message-list__signal-text {
   font-size: var(--ermis-font-size-sm);
   color: inherit;
@@ -231,6 +289,33 @@
   word-break: break-word;
 }
 
+/* --- Signal message inside own bubble (accent bg) --- */
+.ermis-message-bubble--own .ermis-signal-message {
+  background-color: var(--ermis-signal-own-bg);
+}
+
+.ermis-message-bubble--own .ermis-signal-message__icon--success {
+  background-color: rgba(134, 239, 172, 0.2);
+  color: var(--ermis-signal-own-success);
+}
+
+.ermis-message-bubble--own .ermis-signal-message__icon--missed {
+  background-color: rgba(252, 165, 165, 0.2);
+  color: var(--ermis-signal-own-missed);
+}
+
+.ermis-message-bubble--own .ermis-signal-message__text--success {
+  color: var(--ermis-signal-own-success);
+}
+
+.ermis-message-bubble--own .ermis-signal-message__text--missed {
+  color: var(--ermis-signal-own-missed);
+}
+
+.ermis-message-bubble--own .ermis-signal-message__duration {
+  color: var(--ermis-signal-own-duration);
+}
+
 /* --- Attachments --- */
 
 /* When message has attachments, constrain entire content column (quote + bubble) */
@@ -304,7 +389,7 @@
   width: 100%;
   max-width: 300px;
   min-height: 120px;
-  background-color: var(--ermis-bg-hover, #2a2a4a);
+  background-color: var(--ermis-bg-hover);
 }
 
 /* Blurred thumbnail preview (shown while full image loads) */
@@ -328,12 +413,7 @@
   width: 100%;
   height: 100%;
   z-index: 1;
-  background: linear-gradient(
-    110deg,
-    var(--ermis-bg-hover, #2a2a4a) 30%,
-    var(--ermis-bg-active, #3a3a5a) 50%,
-    var(--ermis-bg-hover, #2a2a4a) 70%
-  );
+  background: linear-gradient(110deg, var(--ermis-bg-hover) 30%, var(--ermis-bg-active) 50%, var(--ermis-bg-hover) 70%);
   background-size: 200% 100%;
   animation: ermis-shimmer 1.5s ease-in-out infinite;
 }
@@ -552,17 +632,29 @@
   padding-top: 2px;
 }
 
+@keyframes ermis-receipt-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.5) translateY(5px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
 .ermis-read-receipts__avatars {
   display: flex;
   flex-direction: row;
   align-items: center;
   cursor: default;
   position: relative;
+  animation: ermis-receipt-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
 }
 
 .ermis-read-receipts__avatar {
   flex-shrink: 0;
-  border: 1.5px solid var(--ermis-bg-primary, #1a1a2e);
+  border: 1.5px solid var(--ermis-bg-primary);
   border-radius: 50%;
   box-sizing: content-box;
 }
@@ -579,12 +671,12 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: var(--ermis-bg-hover, #2a2a4a);
-  color: var(--ermis-text-muted, #888);
+  background-color: var(--ermis-bg-hover);
+  color: var(--ermis-text-muted);
   font-size: 0.5rem;
   font-weight: 700;
   margin-left: -4px;
-  border: 1.5px solid var(--ermis-bg-primary, #1a1a2e);
+  border: 1.5px solid var(--ermis-bg-primary);
   box-sizing: content-box;
   flex-shrink: 0;
 }
@@ -618,8 +710,8 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  background-color: var(--ermis-bg-secondary, #1e1e3a);
-  border: 1px solid var(--ermis-border, #333);
+  background-color: var(--ermis-bg-secondary);
+  border: 1px solid var(--ermis-border);
   border-radius: var(--ermis-radius-md, 8px);
   padding: var(--ermis-spacing-xs, 6px) var(--ermis-spacing-sm, 8px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
@@ -643,7 +735,7 @@
 
 .ermis-read-receipts__tooltip-name {
   font-size: var(--ermis-font-size-xs, 0.75rem);
-  color: var(--ermis-text-primary, #e0e0e0);
+  color: var(--ermis-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -651,6 +743,6 @@
 
 .ermis-read-receipts__tooltip-time {
   font-size: 0.625rem;
-  color: var(--ermis-text-muted, #888);
+  color: var(--ermis-text-muted);
   white-space: nowrap;
 }

package/src/styles/_message-input.css

@@ -344,7 +344,7 @@
   justify-content: center;
   gap: var(--ermis-spacing-sm);
   padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
-  color: var(--ermis-text-secondary, #9ca3af);
+  color: var(--ermis-text-secondary);
   font-size: var(--ermis-font-size-sm);
   font-weight: 500;
   user-select: none;
@@ -360,14 +360,14 @@
    ---------------------------------------------------------- */
 .ermis-message-input__keyword-banner {
   padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
-  background-color: var(--ermis-bg-danger-light, #fee2e2);
+  background-color: var(--ermis-bg-hover);
   border-radius: var(--ermis-radius-md) var(--ermis-radius-md) 0 0;
   font-size: var(--ermis-font-size-sm, 13px);
-  color: var(--ermis-text-danger, #ef4444);
+  color: var(--ermis-color-danger);
   display: flex;
   align-items: center;
   gap: var(--ermis-spacing-sm);
-  border-bottom: 1px solid var(--ermis-border-danger, #fca5a5);
+  border-bottom: 1px solid var(--ermis-color-danger);
 }
 
 .ermis-message-input__permission-banner,