feat: Update select button styles to match button styles (#1742)

app/javascript/shared/components/ChatOption.vue

@@ -1,14 +1,17 @@
 <template>
-  <li class="option" :class="{ 'is-selected': isSelected }">
+  <li
+    class="option"
+    :class="{ 'is-selected': isSelected }"
+    :style="{ borderColor: widgetColor }"
+  >
     <button class="option-button button" @click="onClick">
-      <span v-if="isSelected" class="icon ion-checkmark-circled" />
+      <span :style="{ color: widgetColor }">{{ action.title }}</span>
-      <span v-else class="icon ion-android-radio-button-off" />
-      <span>{{ action.title }}</span>
     </button>
   </li>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 export default {
   components: {},
   props: {
@@ -21,6 +24,11 @@ export default {
       default: false,
     },
   },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+  },
   methods: {
     onClick() {
       this.$emit('click', this.action);
@@ -30,19 +38,21 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables.scss';
+@import '~widget/assets/scss/variables.scss';
-@import '~dashboard/assets/scss/mixins.scss';
+
 .option {
+  border: 1px solid $color-woot;
+  border-radius: $space-jumbo;
+  float: left;
+  margin: $space-smaller;
+
   .option-button {
-    width: 100%;
-    padding: 0;
-    max-height: $space-larger;
-    border-radius: 0;
     background: transparent;
-    color: $color-woot;
+    border-radius: $space-large;
     border: 0;
-    text-align: left;
+    color: $color-woot;
     cursor: pointer;
+    text-align: left;
 
     span {
       display: inline-block;
@@ -54,15 +64,5 @@ export default {
       font-size: $font-size-medium;
     }
   }
-
-  + .option .option-button {
-    @include border-normal-top;
-  }
-
-  &.is-selected {
-    .option-button {
-      color: $success-color;
-    }
-  }
 }
 </style>

app/javascript/shared/components/ChatOptions.vue

@@ -67,19 +67,16 @@ export default {
 }
 </style>
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables.scss';
+@import '~widget/assets/scss/variables.scss';
-@import '~dashboard/assets/scss/mixins.scss';
 
 .options-message {
-  background: white;
-  width: 60%;
   max-width: 17rem;
   padding: $space-small $space-normal;
   border-radius: $space-small;
   overflow: hidden;
 
   .title {
-    font-size: $font-size-small;
+    font-size: $font-size-default;
     font-weight: $font-weight-normal;
     margin-top: $space-smaller;
     margin-bottom: $space-smaller;
@@ -93,7 +90,6 @@ export default {
     > li {
       list-style: none;
       padding: 0;
-      margin: 0;
     }
   }
 }