Fazbeeer commited on
Commit
8eeb4b5
·
verified ·
1 Parent(s): a987bc9

Please make it more obvious that when they click that circle they opening the helper

Browse files
Files changed (1) hide show
  1. components/faq-chat.js +42 -23
components/faq-chat.js CHANGED
@@ -85,30 +85,49 @@ width: 350px;
85
  :host(.open) {
86
  left: 20px;
87
  }
88
- .chat-toggle-btn {
89
- position: fixed;
90
- bottom: 20px;
91
- left: 20px;
92
- width: 60px;
93
- height: 60px;
94
- background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
95
- border-radius: 50%;
96
- border: 1px solid #e3b341;
97
- color: #e3b341;
98
- display: flex;
99
- align-items: center;
100
- justify-content: center;
101
- cursor: pointer;
102
- z-index: 999;
103
- box-shadow: 0 2px 10px rgba(0,0,0,0.2);
104
- transition: all 0.3s ease;
105
- }
 
106
 
107
- .chat-toggle-btn:hover {
108
- transform: scale(1.1);
109
- background: #e3b341;
110
- color: #000;
111
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  .chat-container {
113
  display: flex;
114
  flex-direction: column;
 
85
  :host(.open) {
86
  left: 20px;
87
  }
88
+ .chat-toggle-btn {
89
+ position: fixed;
90
+ bottom: 20px;
91
+ left: 20px;
92
+ width: 60px;
93
+ height: 60px;
94
+ background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
95
+ border-radius: 50%;
96
+ border: 2px solid #e3b341;
97
+ color: #e3b341;
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ cursor: pointer;
102
+ z-index: 999;
103
+ box-shadow: 0 0 15px rgba(227, 179, 65, 0.5);
104
+ transition: all 0.3s ease;
105
+ animation: pulse 2s infinite;
106
+ }
107
 
108
+ @keyframes pulse {
109
+ 0% { transform: scale(1); }
110
+ 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(227, 179, 65, 0.7); }
111
+ 100% { transform: scale(1); }
112
+ }
113
+
114
+ .chat-toggle-btn::after {
115
+ content: "HELP";
116
+ position: absolute;
117
+ bottom: -25px;
118
+ left: 50%;
119
+ transform: translateX(-50%);
120
+ color: #e3b341;
121
+ font-size: 12px;
122
+ font-weight: bold;
123
+ white-space: nowrap;
124
+ }
125
+ .chat-toggle-btn:hover {
126
+ transform: scale(1.1) !important;
127
+ background: #e3b341;
128
+ color: #000;
129
+ animation: none;
130
+ }
131
  .chat-container {
132
  display: flex;
133
  flex-direction: column;