@product7/feedback-sdk 1.3.8 → 1.4.0

package/src/styles/messenger-core.js

@@ -2,115 +2,99 @@ export const messengerCoreStyles = `
 
 .messenger-launcher {
   position: fixed;
-  z-index: 999999;
+  z-index: var(--z-modal);
 }
 
 .messenger-launcher-bottom-right {
-  bottom: 20px;
-  right: 20px;
+  bottom: var(--spacing-5);
+  right: var(--spacing-5);
 }
 
 .messenger-launcher-bottom-left {
-  bottom: 20px;
-  left: 20px;
+  bottom: var(--spacing-5);
+  left: var(--spacing-5);
 }
 
 .messenger-launcher-btn {
   width: 60px;
   height: 60px;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   border: none;
-  background: #1c1c1e;
-  color: white;
+  background: var(--color-primary);
+  color: var(--color-white);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-lg);
+  transition: all var(--transition-slow);
   position: relative;
 }
 
 .messenger-launcher-btn:hover {
-  transform: scale(1.05);
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-xl);
 }
 
 .messenger-launcher-btn:active {
   transform: scale(0.95);
 }
 
-.messenger-launcher-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-.messenger-launcher-open .messenger-launcher-icon-chat {
-  opacity: 0;
-  transform: rotate(-90deg);
-}
-
-.messenger-launcher-open .messenger-launcher-icon-close {
-  opacity: 1;
-  transform: rotate(0deg);
-}
-
 .messenger-launcher-badge {
   position: absolute;
   top: -4px;
   right: -4px;
   min-width: 20px;
   height: 20px;
-  background: #ef4444;
-  color: white;
-  font-size: 11px;
-  font-weight: 600;
-  border-radius: 10px;
+  background: var(--color-error);
+  color: var(--color-white);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 6px;
-  border: 2px solid white;
+  border: 2px solid var(--color-white);
 }
 
-
 .messenger-panel {
   position: fixed;
-  z-index: 999998;
-  width: 400px;
-  height: 680px;
+  z-index: var(--z-popover);
+  width: 440px;
+  height: 720px;
   max-height: calc(100vh - 100px);
   display: none;
   opacity: 0;
   transform: translateY(20px) scale(0.95);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-slow);
 }
 
 .messenger-panel.open {
+  display: block;
   opacity: 1;
   transform: translateY(0) scale(1);
 }
 
 .messenger-panel-bottom-right {
   bottom: 90px;
-  right: 20px;
+  right: var(--spacing-5);
 }
 
 .messenger-panel-bottom-left {
   bottom: 90px;
-  left: 20px;
+  left: var(--spacing-5);
 }
 
 .messenger-panel-content {
-  background: #1c1c1e;
+  background: var(--color-white);
   height: 100%;
-  border-radius: 16px;
+  border-radius: var(--radius-2xl);
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  border: 1px solid var(--color-border);
 }
 
 .messenger-panel-views {
@@ -127,242 +111,27 @@ export const messengerCoreStyles = `
   overflow: hidden;
 }
 
-
-.messenger-close-btn,
-.messenger-back-btn {
-  background: none;
-  border: none;
-  padding: 8px;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.6);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.messenger-close-btn:hover,
-.messenger-back-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-}
-
-/* Avatar Stack */
 .messenger-avatar-stack {
   display: flex;
   align-items: center;
 }
 
-.messenger-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  border: 2px solid #1c1c1e;
-  background: #5856d6;
-  color: white;
-  font-size: 13px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.messenger-avatar-stack .sdk-avatar {
   margin-left: -8px;
-  object-fit: cover;
 }
 
-.messenger-avatar:first-child {
+.messenger-avatar-stack .sdk-avatar:first-child {
   margin-left: 0;
 }
 
-.messenger-avatar-small {
-  width: 28px;
-  height: 28px;
-  font-size: 11px;
-}
-
-.messenger-avatar-medium {
-  width: 40px;
-  height: 40px;
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.messenger-avatar-tiny {
-  width: 20px;
-  height: 20px;
-  font-size: 9px;
-  border-width: 1.5px;
+.messenger-avatar-stack-tiny .sdk-avatar {
   margin-left: -6px;
 }
 
-.messenger-avatar-tiny:first-child {
+.messenger-avatar-stack-tiny .sdk-avatar:first-child {
   margin-left: 0;
 }
 
-.messenger-panel-nav {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  background: #1c1c1e;
-}
-
-.messenger-nav {
-  display: flex;
-  padding: 4px 8px;
-  gap: 4px;
-}
-
-.messenger-nav-tab {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 4px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.messenger-nav-tab:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.messenger-nav-icon {
-  color: rgba(255, 255, 255, 0.5);
-  transition: color 0.2s ease;
-}
-
-.messenger-nav-home-icon {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.messenger-nav-home-icon > i:first-child {
-  position: relative;
-}
-
-.messenger-nav-home-icon > i:last-child {
-  position: absolute;
-  top: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  transition: color 0.2s ease, filter 0.2s ease;
-}
-
-.messenger-nav-tab:hover .messenger-nav-home-icon > i:last-child {
-  color: #ffd700;
-  filter: drop-shadow(0 0 4px #ffd700);
-}
-
-.messenger-nav-label {
-  font-size: 11px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.5);
-  transition: color 0.2s ease;
-}
-
-.messenger-nav-tab.active .messenger-nav-icon {
-  color: white;
-}
-
-.messenger-nav-tab.active .messenger-nav-label {
-  color: white;
-  font-weight: 400;
-}
-
-.messenger-nav-badge {
-  position: absolute;
-  top: 4px;
-  right: calc(50% - 16px);
-  min-width: 16px;
-  height: 16px;
-  background: #ef4444;
-  color: white;
-  font-size: 10px;
-  font-weight: 600;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 4px;
-}
-
-.messenger-home-availability,
-.messenger-chat-availability {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 8px;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.messenger-availability-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.messenger-availability-online {
-  background: #22c55e;
-  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
-}
-
-.messenger-availability-away {
-  background: #9ca3af;
-}
-
-.messenger-availability-text {
-  opacity: 0.9;
-}
-
-.messenger-typing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  margin: 4px 0;
-}
-
-.messenger-typing-dots {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: #374151;
-  padding: 8px 12px;
-  border-radius: 16px;
-}
-
-.messenger-typing-dots span {
-  width: 6px;
-  height: 6px;
-  background: #9ca3af;
-  border-radius: 50%;
-  animation: messenger-typing-bounce 1.4s infinite ease-in-out;
-}
-
-.messenger-typing-dots span:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.messenger-typing-dots span:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-.messenger-typing-dots span:nth-child(3) {
-  animation-delay: 0s;
-}
-
-.messenger-typing-text {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
 @media (max-width: 480px) {
   .messenger-panel {
     width: 100%;
@@ -379,12 +148,12 @@ export const messengerCoreStyles = `
   }
 
   .messenger-launcher {
-    bottom: 16px;
-    right: 16px;
+    bottom: var(--spacing-4);
+    right: var(--spacing-4);
   }
 
   .messenger-launcher-bottom-left {
-    left: 16px;
+    left: var(--spacing-4);
   }
 }
-`;
+`;