feat: update colors for v4 (#10660)

Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components/Code.vue

@@ -1,60 +1,61 @@
-<script>
+<script setup>
+import { computed } from 'vue';
 import 'highlight.js/styles/default.css';
 import 'highlight.js/lib/common';
-
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
 
-export default {
-  props: {
-    script: {
-      type: String,
-      default: '',
-    },
-    lang: {
-      type: String,
-      default: 'javascript',
-    },
-    enableCodePen: {
-      type: Boolean,
-      default: false,
-    },
-    codepenTitle: {
-      type: String,
-      default: 'Chatwoot Codepen',
-    },
+const props = defineProps({
+  script: {
+    type: String,
+    default: '',
   },
-  computed: {
-    codepenScriptValue() {
-      const lang = this.lang === 'javascript' ? 'js' : this.lang;
-      return JSON.stringify({
-        title: this.codepenTitle,
-        private: true,
-        [lang]: this.scrubbedScript,
-      });
-    },
-    scrubbedScript() {
-      // remove trailing and leading extra lines and not spaces
-      const scrubbed = this.script.replace(/^\s*[\r\n]/gm, '');
-      const lines = scrubbed.split('\n');
+  lang: {
+    type: String,
+    default: 'javascript',
+  },
+  enableCodePen: {
+    type: Boolean,
+    default: false,
+  },
+  codepenTitle: {
+    type: String,
+    default: 'Chatwoot Codepen',
+  },
+});
 
-      // remove extra indentations
-      const minIndent = lines.reduce((min, line) => {
-        if (line.trim().length === 0) return min;
-        const indent = line.match(/^\s*/)[0].length;
-        return Math.min(min, indent);
-      }, Infinity);
+const { t } = useI18n();
 
-      return lines.map(line => line.slice(minIndent)).join('\n');
-    },
-  },
-  methods: {
-    async onCopy(e) {
-      e.preventDefault();
-      await copyTextToClipboard(this.scrubbedScript);
-      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
-    },
-  },
+const scrubbedScript = computed(() => {
+  // remove trailing and leading extra lines and not spaces
+  const scrubbed = props.script.replace(/^\s*[\r\n]/gm, '');
+  const lines = scrubbed.split('\n');
+
+  // remove extra indentations
+  const minIndent = lines.reduce((min, line) => {
+    if (line.trim().length === 0) return min;
+    const indent = line.match(/^\s*/)[0].length;
+    return Math.min(min, indent);
+  }, Infinity);
+
+  return lines.map(line => line.slice(minIndent)).join('\n');
+});
+
+const codepenScriptValue = computed(() => {
+  const lang = props.lang === 'javascript' ? 'js' : props.lang;
+  return JSON.stringify({
+    title: props.codepenTitle,
+    private: true,
+    [lang]: scrubbedScript.value,
+  });
+});
+
+const onCopy = async e => {
+  e.preventDefault();
+  await copyTextToClipboard(scrubbedScript.value);
+  useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
 };
 </script>
 
@@ -69,13 +70,21 @@ export default {
         target="_blank"
       >
         <input type="hidden" name="data" :value="codepenScriptValue" />
-        <button type="submit" class="button secondary tiny">
-          {{ $t('COMPONENTS.CODE.CODEPEN') }}
-        </button>
+        <NextButton
+          slate
+          xs
+          type="submit"
+          faded
+          :label="t('COMPONENTS.CODE.CODEPEN')"
+        />
       </form>
-      <button type="button" class="button secondary tiny" @click="onCopy">
-        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-      </button>
+      <NextButton
+        slate
+        xs
+        faded
+        :label="t('COMPONENTS.CODE.BUTTON_TEXT')"
+        @click="onCopy"
+      />
     </div>
     <highlightjs v-if="script" :language="lang" :code="scrubbedScript" />
   </div>