feat: redesign the new chat button
Browse files- FrontEnd/src/ChatBot.css +13 -5
FrontEnd/src/ChatBot.css
CHANGED
|
@@ -66,20 +66,28 @@
|
|
| 66 |
display: flex;
|
| 67 |
align-items: center;
|
| 68 |
gap: 6px;
|
| 69 |
-
background-color:
|
| 70 |
border: 1px solid #e5e7eb;
|
| 71 |
color: #374151;
|
| 72 |
font-size: 13px;
|
| 73 |
font-weight: 500;
|
| 74 |
-
padding:
|
| 75 |
-
border-radius:
|
| 76 |
cursor: pointer;
|
| 77 |
-
transition: all 0.2s
|
|
|
|
| 78 |
}
|
| 79 |
|
| 80 |
.new-chat-btn:hover {
|
| 81 |
-
background-color: #
|
| 82 |
border-color: #d1d5db;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 83 |
}
|
| 84 |
|
| 85 |
/* Chat Window */
|
|
|
|
| 66 |
display: flex;
|
| 67 |
align-items: center;
|
| 68 |
gap: 6px;
|
| 69 |
+
background-color: #ffffff;
|
| 70 |
border: 1px solid #e5e7eb;
|
| 71 |
color: #374151;
|
| 72 |
font-size: 13px;
|
| 73 |
font-weight: 500;
|
| 74 |
+
padding: 10px 20px;
|
| 75 |
+
border-radius: 24px; /* Pill-shaped */
|
| 76 |
cursor: pointer;
|
| 77 |
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
| 78 |
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
| 79 |
}
|
| 80 |
|
| 81 |
.new-chat-btn:hover {
|
| 82 |
+
background-color: #ffffff;
|
| 83 |
border-color: #d1d5db;
|
| 84 |
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
| 85 |
+
transform: translateY(-1px);
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
+
.new-chat-btn:active {
|
| 89 |
+
transform: translateY(0);
|
| 90 |
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
| 91 |
}
|
| 92 |
|
| 93 |
/* Chat Window */
|