Feature: Update design for web widget (#408)

app/javascript/widget/components/ChatFooter.vue

@@ -12,8 +12,14 @@ export default {
     ChatInputWrap,
   },
   props: {
-    msg: String,
-    onSendMessage: Function,
+    msg: {
+      type: String,
+      default: '',
+    },
+    onSendMessage: {
+      type: Function,
+      default: () => {},
+    },
   },
 };
 </script>
@@ -24,11 +30,12 @@ export default {
 
 .footer {
   background: $color-white;
-  box-shadow: 0 -$space-micro 3px rgba(50, 50, 93, 0.04),
-    0 -1px 2px rgba(0, 0, 0, 0.03);
   box-sizing: border-box;
-  padding: $space-small;
+  padding: $space-small $space-slab;
   width: 100%;
+  border-radius: 7px;
+  box-shadow: 0 20px 25px -10px rgba(0, 0, 0, 0.1),
+    0 10px 10px -10px rgba(0, 0, 0, 0.04) !important;
 }
 
 .branding {