feat: Display reply time in widget (#1349)

Fixes #1132

app/javascript/shared/assets/fonts/widget_fonts.scss

@@ -6,3 +6,12 @@
   src: url('~shared/assets/fonts/Inter-Regular.woff2?v=3.11') format('woff2'),
        url('~shared/assets/fonts/Inter-Regular.woff?v=3.11') format('woff');
 }
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Medium.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Medium.woff?v=3.11') format('woff');
+}

app/javascript/shared/components/Button.vue

@@ -0,0 +1,54 @@
+<template>
+  <button :class="buttonClassName" :style="buttonStyles" @click="onClick">
+    <slot></slot>
+  </button>
+</template>
+<script>
+export default {
+  props: {
+    block: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'blue',
+    },
+    bgColor: {
+      type: String,
+      default: '',
+    },
+    textColor: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    buttonClassName() {
+      let className = 'text-white py-3 px-4 rounded shadow-sm';
+      if (this.type === 'blue' && !Object.keys(this.buttonStyles).length) {
+        className = `${className} bg-woot-500 hover:bg-woot-700`;
+      }
+      if (this.block) {
+        className = `${className} w-full`;
+      }
+      return className;
+    },
+    buttonStyles() {
+      const styles = {};
+      if (this.bgColor) {
+        styles.backgroundColor = this.bgColor;
+      }
+      if (this.textColor) {
+        styles.color = this.textColor;
+      }
+      return styles;
+    },
+  },
+  methods: {
+    onClick(e) {
+      this.$emit('click', e);
+    },
+  },
+};
+</script>

app/javascript/shared/components/ResizableTextArea.vue

@@ -22,7 +22,7 @@ export default {
     },
     minHeight: {
       type: Number,
-      default: 3.2,
+      default: 2,
     },
   },
   watch: {

app/javascript/shared/helpers/ColorHelper.js

@@ -0,0 +1,8 @@
+export const getContrastingTextColor = bgColor => {
+  const color = bgColor.replace('#', '');
+  const r = parseInt(color.slice(0, 2), 16);
+  const g = parseInt(color.slice(2, 4), 16);
+  const b = parseInt(color.slice(4, 6), 16);
+  // http://stackoverflow.com/a/3943023/112731
+  return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';
+};