chore: Improve button component styles (#1996)

app/javascript/widget/components/PreChat/Form.vue

@@ -37,7 +37,7 @@
       :placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
       :error="$v.message.$error ? $t('PRE_CHAT_FORM.FIELDS.MESSAGE.ERROR') : ''"
     />
-    <woot-button
+    <custom-button
       class="font-medium"
       block
       :bg-color="widgetColor"
@@ -46,12 +46,12 @@
     >
       <spinner v-if="isCreating" class="p-0" />
       {{ $t('START_CONVERSATION') }}
-    </woot-button>
+    </custom-button>
   </form>
 </template>
 
 <script>
-import WootButton from 'shared/components/Button';
+import CustomButton from 'shared/components/Button';
 import FormInput from '../Form/Input';
 import FormTextArea from '../Form/TextArea';
 import Spinner from 'shared/components/Spinner';
@@ -62,7 +62,7 @@ export default {
   components: {
     FormInput,
     FormTextArea,
-    WootButton,
+    CustomButton,
     Spinner,
   },
   props: {

app/javascript/widget/components/TeamAvailability.vue

@@ -15,7 +15,7 @@
       </div>
       <available-agents v-if="isOnline" :agents="availableAgents" />
     </div>
-    <woot-button
+    <custom-button
       class="font-medium"
       block
       :bg-color="widgetColor"
@@ -23,7 +23,7 @@
       @click="startConversation"
     >
       {{ $t('START_CONVERSATION') }}
-    </woot-button>
+    </custom-button>
   </div>
 </template>
 
@@ -31,7 +31,7 @@
 import { mapGetters } from 'vuex';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
-import WootButton from 'shared/components/Button';
+import CustomButton from 'shared/components/Button';
 import configMixin from 'widget/mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
 
@@ -39,7 +39,7 @@ export default {
   name: 'TeamAvailability',
   components: {
     AvailableAgents,
-    WootButton,
+    CustomButton,
   },
   mixins: [configMixin, availabilityMixin],
   props: {