feat(odoo): add WhatsApp CSS styles

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-29 22:43:05 +00:00
parent 1074bf6739
commit 218c137564
1 changed files with 184 additions and 0 deletions
--- a/odoo_whatsapp_hub/static/src/css/whatsapp.css
+++ b/odoo_whatsapp_hub/static/src/css/whatsapp.css
@@ -0,0 +1,184 @@
+/* WhatsApp Hub Styles */
+
+/* WhatsApp Green */
+:root {
+    --whatsapp-green: #25D366;
+    --whatsapp-dark-green: #128C7E;
+    --whatsapp-light-green: #DCF8C6;
+    --whatsapp-bg: #E5DDD5;
+}
+
+/* Chat container */
+.o_whatsapp_chat_container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--whatsapp-bg);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+/* Chat header */
+.o_whatsapp_chat_header {
+    background: var(--whatsapp-dark-green);
+    color: white;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.o_whatsapp_chat_header .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: var(--whatsapp-dark-green);
+}
+
+.o_whatsapp_chat_header .contact-info {
+    flex: 1;
+}
+
+.o_whatsapp_chat_header .contact-name {
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.o_whatsapp_chat_header .contact-status {
+    font-size: 12px;
+    opacity: 0.8;
+}
+
+/* Messages container */
+.o_whatsapp_messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* Message bubble */
+.o_whatsapp_message {
+    max-width: 65%;
+    padding: 8px 12px;
+    border-radius: 8px;
+    position: relative;
+    word-wrap: break-word;
+}
+
+.o_whatsapp_message.inbound {
+    align-self: flex-start;
+    background: white;
+    border-top-left-radius: 0;
+}
+
+.o_whatsapp_message.outbound {
+    align-self: flex-end;
+    background: var(--whatsapp-light-green);
+    border-top-right-radius: 0;
+}
+
+.o_whatsapp_message .message-content {
+    margin-bottom: 4px;
+}
+
+.o_whatsapp_message .message-meta {
+    font-size: 11px;
+    color: #667781;
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+}
+
+.o_whatsapp_message .message-status {
+    color: #53bdeb;
+}
+
+/* Input area */
+.o_whatsapp_input_area {
+    background: #F0F2F5;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.o_whatsapp_input_area input {
+    flex: 1;
+    border: none;
+    border-radius: 20px;
+    padding: 10px 16px;
+    outline: none;
+}
+
+.o_whatsapp_input_area button {
+    background: var(--whatsapp-green);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o_whatsapp_input_area button:hover {
+    background: var(--whatsapp-dark-green);
+}
+
+/* Status badges */
+.o_whatsapp_status_connected {
+    color: var(--whatsapp-green);
+}
+
+.o_whatsapp_status_disconnected {
+    color: #dc3545;
+}
+
+/* Partner WhatsApp button */
+.btn-whatsapp {
+    background-color: var(--whatsapp-green);
+    border-color: var(--whatsapp-green);
+    color: white;
+}
+
+.btn-whatsapp:hover {
+    background-color: var(--whatsapp-dark-green);
+    border-color: var(--whatsapp-dark-green);
+    color: white;
+}
+
+/* Unread badge */
+.o_whatsapp_unread_badge {
+    background: #dc3545;
+    color: white;
+    border-radius: 10px;
+    padding: 2px 8px;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+/* QR Code display */
+.o_whatsapp_qr_code {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+}
+
+.o_whatsapp_qr_code img {
+    max-width: 300px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+}