Merge pull request #118 from ResidenciaTICBrisa/botpress_design

Design Botpress
ResidenciaTICBrisa · Sep 11, 2024 · 10b7f01 · 10b7f01
2 parents 10f68a7 + 45dc1cc
commit 10b7f01
Show file tree

Hide file tree

Showing 32 changed files with 1,388 additions and 1,101 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1 @@
-.env
+.env .gitattributes
diff --git a/data/assets/modules/channel-web/Avatar_ChatBot_Brasil_Participativo.png b/data/assets/modules/channel-web/Avatar_ChatBot_Brasil_Participativo.png
diff --git a/data/assets/modules/channel-web/default.css b/data/assets/modules/channel-web/default.css
@@ -1,4 +1,5 @@
 /* Old version IE 10 and 11 only */
+/* editado 27/06*/
 :root {
   --main-bg-color: #ffffff;
   --main-bg-color-hover: rgba(255, 255, 255, 0.9);
@@ -49,7 +50,7 @@ body {
 }
 
 .bpw-widget-btn {
-  background-color: #000000;
+  background-color: #1351b4;  /* Original dark blue color */
 }
 
 .bpw-message-read-more {
@@ -64,12 +65,9 @@ body {
   text-align: left;
   text-decoration: underline;
 }
-
-.bpw-widget-btn:focus,
-.bpw-widget-btn:hover {
-  background-color: #333;
+.bpw-widget-btn:focus, .bpw-widget-btn:hover {
+  background-color: #1351b4;
 }
-
 .bpw-chat-container {
   background-color: #ffffff;
   color: #000000;
@@ -109,7 +107,7 @@ body {
   font-size: 1rem;
   padding: 0.4rem 0.8rem;
   min-width: 5rem;
-  min-height: 40px;
+  min-height: 0rem;
   text-align: center;
   border: 1px solid currentColor;
   border-radius: 0px;
@@ -285,7 +283,7 @@ body {
 }
 
 .bpw-date-container {
-  color: #666;
+  color: #000000;
   text-align: center;
   font-size: 12px;
   margin: 40px 0 20px;
@@ -635,7 +633,7 @@ body {
 }
 
 .bpw-composer-inner {
-  display: flex;
+  display: none;
   padding: 5px;
 }
 
@@ -659,8 +657,9 @@ body {
 }
 
 .bpw-send-buttons {
-  display: flex;
+  display: none;
   align-items: center;
+  padding: 6px;
 }
 
 .bpw-send-button {
@@ -1086,4 +1085,4 @@ body {
 
 .bpw-rtl .bpw-keyboard-quick_reply-dropdown {
   direction: rtl;
-}
+}
diff --git a/data/assets/modules/channel-web/inject.css b/data/assets/modules/channel-web/inject.css
@@ -3,7 +3,7 @@
   display: block;
   position: fixed;
   visibility: none;
-  z-index: 20;
+  z-index: 500001;
   max-height: 100vh;
   max-width: 100vw;
   transition: none;
@@ -16,12 +16,12 @@
 }
 
 .bp-widget-widget {
-  top: auto;
-  left: auto;
-  bottom: 24px;
-  right: 36px;
-  width: 76px !important;
-  height: 76px !important;
+    left: auto;
+    top: auto;
+    bottom: 10%;
+    right: 1.82%;
+    width: 76px !important;
+    height: 76px !important;
 }
 
 .bp-widget-hidden {
@@ -39,12 +39,23 @@
 }
 
 .bp-widget-side {
+  top: 0px;
+  left: auto;
+  bottom: 0px;
+  right: 80px;
+  width: 480px;
+  height: 100% !important;
+}
+
+@media screen and (max-width: 450px){
+  .bp-widget-side {
   top: 0px;
   left: auto;
   bottom: 0px;
   right: 0px;
   width: 480px;
   height: 100% !important;
+  }
 }
 
 .bp-widget-side.emulator {
@@ -56,4 +67,4 @@
   .bp-widget-side {
     width: 100%;
   }
-}
+}
diff --git a/data/assets/modules/channel-web/style.css b/data/assets/modules/channel-web/style.css
@@ -1,6 +1,6 @@
 /* This CSS rule sets the default font size of the entire document */
-/* gov_blue: #183eff */
-/* editado 7/05 10:31 */
+/* gov_blue: #1351b4 */
+/* editado 27/06 */
 html {
   font-size: 16px;
 }
@@ -21,13 +21,16 @@ p,
 /* Changes the color of the new message indicator */
 .bpw-new-messages-indicator {
   background-color: #f5f5f5;
-  color: #183eff;
+  color: #1351b4;
 }
 
 /* Styling for the chat header container */
 .bpw-header-container {
-  margin: 10px;
-  background: #183eff;
+  margin-top: 0px;
+  margin-bottom: 10px;
+  margin-left: 0px;
+  margin-right: 0px;
+  background: #1351b4;
   border-radius: 10px;
   position: relative;
   overflow: hidden;
@@ -48,30 +51,28 @@ p,
 /* Styling for the chat bubble content */
 .bpw-chat-bubble-content {
   background-color: #f5f5f5;
-  border-radius: 3px;
-  border: 1px transparent;
+  border-radius: 0px;
 }
 
 /* Styling for the date container, header name, and header subtitle */
-.bpw-date-container,
 .bpw-header-name,
 .bpw-header-subtitle {
   color: #ffffff;
 }
 
 /* Styling for the layout of the chat bubble. Width, height, border, position and radius of the chat bubble */
 .bpw-layout {
-  width: 360px !important;
-  height: 82%;
+  width: 92%;
+  height: 75%;
   border-radius: 10px;
   right: 10px;
   bottom: 5px;
   border: 1px;
 }
-/* Responsive design rules for devices with width less than or equal to 767px */
-@media screen and (max-device-width: 767px) {
+/* Responsive design rules for devices with width less than or equal to 450px */
+@media screen and (max-width: 450px){
   .bpw-layout {
-    width: 100% !important;
+    width: 100%;
     height: 100%;
     right: 0;
     bottom: 0;
@@ -109,9 +110,10 @@ p,
 /* Styling for the buttons in the chat interface */
 .bpw-button,
 .bpw-button-alt {
-  background-color: #dcdcdc;
+  background-color: #EDF5FF;
   color: #000000;
-  border-radius: 10px;
+  border-radius: 20px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   border: none;
 }
 
@@ -131,21 +133,25 @@ a {
 
 /* Styling for the chat container, including color, scrollbar width and color, and border */
 .bpw-chat-container {
-  background-color: #ffffff;
+  background-color: #f5f5f5;
   scrollbar-width: thin;
-  scrollbar-color: #f5f5f5 #ffffff;
+  scrollbar-color: #f5f5f5 #f5f5f5;
   border: none;
 }
 
 /* Styling for the chat bubble content when it's from the bot */
 .bpw-from-bot .bpw-chat-bubble .bpw-chat-bubble-content {
-  background-color: #f5f5f5;
+  background-color: #ffffff;
   color: #000000;
+  border: 0.05px solid #bbbbbb;
+  border-radius: 30px;
 }
 
 /* Styling for the chat bubble content when it's from the user */
 .bpw-from-user .bpw-chat-bubble .bpw-chat-bubble-content {
-  background-color: #c8c8c8;
+  background-color: #EDF5FF;
+  border-radius: 20px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   color: #000000;
 }
 
@@ -168,7 +174,7 @@ a {
 .bpw-bot-avatar img,
 .bpw-bot-avatar svg {
   background: #000000;
-  border: 3px solid #ffffff;
+  border: 0.1px solid #bbbbbb;
 }
 
 /* Styling for the general scrollbar in the web page */
@@ -203,8 +209,8 @@ a {
 .bpw-powered {
   text-align: center;
   padding: 10px;
-  color: #000000;
-  background: #ffffff;
+  color: #ffffff;
+  background: #1351B4;
   font-size: 14px;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
@@ -222,7 +228,7 @@ a {
 }
 
 .bpw-send-button{
-  background: #183eff;
+  background: #1351b4;
   color: #ffffff;
 }
 
@@ -233,15 +239,15 @@ a {
 /* Change Bot Widget Icon */
 @keyframes fadeColor {
   0% {
-    background: #183eff; /* Start color */
+    background: #1351b4; /* Start color */
   }
   100% {
     background: #3C3C3C; /* End color */
   }
 }
 .bpw-widget-btn{
   border-radius: 50%;
-  background:#183eff;
+  background:#1351b4;
 }
 
 /* .bpw-widget-btn:hover{
@@ -250,12 +256,12 @@ a {
 } */
 
 .bpw-floating-button::before {
-background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='white' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z' /%3E%3C/svg%3E");
-background-repeat: no-repeat;
+  background:url("Avatar_ChatBot_Brasil_Participativo.png");
+  background-repeat: no-repeat;
   background-position: center;
-background-size: contain;
-height:undefinedpx !important;
-width:undefinedpx !important;
+  background-size: contain;
+  height:undefinedpx !important;
+  width:undefinedpx !important;
 }
 
 .bpw-floating-button {
@@ -265,4 +271,3 @@ width:undefinedpx !important;
 .bpw-floating-button:hover {
   box-shadow: none !important;
 }
-
diff --git a/data/bots/chatbot_botao/bot.config.json b/data/bots/chatbot_botao/bot.config.json
@@ -8,8 +8,8 @@
     "emailAddress": "",
     "termsConditions": "",
     "privacyPolicy": "",
-    "avatarUrl": "/api/v1/bots/chatbot_botao/media/7285ozohvbsbvz681aiz-WhatsApp%20Image%202024-02-26%20at%2017.06.24.jpeg",
-    "coverPictureUrl": "/api/v1/bots/chatbot_botao/media/yvgfy8pdjpfnb59eio5n-botinho.jpeg"
+    "avatarUrl": "/api/v1/bots/BOT_ID_PLACEHOLDER/media/7285ozohvbsbvz681aiz-WhatsApp%20Image%202024-02-26%20at%2017.06.24.jpeg",
+    "coverPictureUrl": "/api/v1/bots/BOT_ID_PLACEHOLDER/media/yvgfy8pdjpfnb59eio5n-botinho.jpeg"
   },
   "$schema": "../../bot.config.schema.json",
   "description": "",
@@ -45,12 +45,12 @@
   "languages": [
     "pt"
   ],
-  "id": "chatbot_botao",
-  "name": "Brasil Participativo - Chatbot",
+  "id": "chatbot_botao_def",
+  "name": "Brasil Participativo - Chatbot (chatbot_botao_def)",
   "pipeline_status": {
     "current_stage": {
       "id": "prod",
-      "promoted_on": "2024-05-06T12:20:54.872Z",
+      "promoted_on": "2024-06-05T13:49:04.355Z",
       "promoted_by": "system"
     }
   },