diff --git a/app/javascript/widget/assets/scss/_forms.scss b/app/javascript/widget/assets/scss/_forms.scss index 159b7788d..95c6d0f61 100755 --- a/app/javascript/widget/assets/scss/_forms.scss +++ b/app/javascript/widget/assets/scss/_forms.scss @@ -9,7 +9,6 @@ $input-height: $space-two * 2; appearance: none; background: $color-white; - border: $form-border-width solid $color-border; border-radius: $border-radius; box-sizing: border-box; color: $color-body; @@ -19,7 +18,7 @@ $input-height: $space-two * 2; line-height: 1.3; max-width: 100%; outline: none; - padding: $space-small $space-slab; + padding: $space-smaller; position: relative; transition: background .2s, border .2s, box-shadow .2s, color .2s; width: 100%; diff --git a/app/javascript/widget/assets/scss/sdk.js b/app/javascript/widget/assets/scss/sdk.js index 4e72bb4e7..4c31529b1 100644 --- a/app/javascript/widget/assets/scss/sdk.js +++ b/app/javascript/widget/assets/scss/sdk.js @@ -1,4 +1,5 @@ export const SDK_CSS = ` + .woot-widget-holder { z-index: 2147483000!important; position: fixed!important; @@ -17,7 +18,9 @@ export const SDK_CSS = ` -webkit-border-radius: 8px!important; border-radius: 8px!important; overflow: hidden!important; - opacity: 1!important; + opacity: 1; + transition-property: opacity, bottom; + transition-duration: 0.5s, 0.5s; } .woot-widget-holder iframe { width: 100% !important; height: 100% !important; border: 0; } @@ -62,6 +65,10 @@ export const SDK_CSS = ` } .woot--hide { - display: none !important; + visibility: hidden !important; + z-index: -1!important; + opacity: 0; + bottom: 60px; } + `; diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue index 380b2e0fd..20b8a5c21 100755 --- a/app/javascript/widget/components/AgentMessage.vue +++ b/app/javascript/widget/components/AgentMessage.vue @@ -39,7 +39,7 @@ export default { flex-direction: row; justify-content: flex-start; align-items: flex-end; - margin: 0 $space-smaller $space-micro auto; + margin: 0 0 $space-micro $space-small; & + .agent-message { margin-bottom: $space-micro; diff --git a/app/javascript/widget/components/Branding.vue b/app/javascript/widget/components/Branding.vue new file mode 100644 index 000000000..4814690f3 --- /dev/null +++ b/app/javascript/widget/components/Branding.vue @@ -0,0 +1,37 @@ + + + + diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue index 4313a0d24..6d9bb4227 100755 --- a/app/javascript/widget/components/ChatFooter.vue +++ b/app/javascript/widget/components/ChatFooter.vue @@ -1,10 +1,6 @@ diff --git a/app/javascript/widget/components/ChatInputArea.vue b/app/javascript/widget/components/ChatInputArea.vue index 25b312707..6110c8321 100755 --- a/app/javascript/widget/components/ChatInputArea.vue +++ b/app/javascript/widget/components/ChatInputArea.vue @@ -22,7 +22,7 @@ export default { .user-message-input { border: 0; - height: $space-big; + height: $space-large; resize: none; } diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue index b492a908c..3bd7fdfa0 100755 --- a/app/javascript/widget/components/ChatInputWrap.vue +++ b/app/javascript/widget/components/ChatInputWrap.vue @@ -64,7 +64,6 @@ export default { .chat-message--input { align-items: center; - border-bottom: 1px $color-border-light solid; display: flex; } diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue index 01813a754..5ffd0f139 100755 --- a/app/javascript/widget/components/ConversationWrap.vue +++ b/app/javascript/widget/components/ConversationWrap.vue @@ -5,15 +5,18 @@ :key="message.id" :message="message" /> +