Design Updates

2024-11-20 15:56:14 -08:00
parent 93b7ce6eba
commit 16432a6ebc
72 changed files with 571 additions and 587 deletions
@@ -201,10 +201,10 @@ export default {

 <style lang="scss" scoped>
 .filter {
-  @apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
+  @apply p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;

  &.is-a-macro {
-    @apply mb-0 bg-white dark:bg-slate-700 p-0 border-0 rounded-none;
+    @apply mb-0 p-0 border-0 rounded-none;
  }
 }

@@ -244,6 +244,7 @@ export default {
    @apply mb-0;
  }
 }
+
 .filter__answer {
  &.answer--text-input {
    @apply mb-0;
@@ -270,9 +271,11 @@ export default {
 .multiselect {
  @apply mb-0;
 }
+
 .action-message {
  @apply mt-2 mx-0 mb-0;
 }
+
 // Prosemirror does not have a native way of hiding the menu bar, hence
 ::v-deep .ProseMirror-menubar {
  @apply hidden;
@@ -14,16 +14,11 @@ export default {
 </script>

 <template>
-  <div
-    class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
-  >
-    <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
+  <div class="pb-0 px-8 border-b border-n-weak">
+    <h2 class="text-2xl text-n-slate-12 mb-1 font-medium">
      {{ headerTitle }}
    </h2>
-    <p
-      v-if="headerContent"
-      class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
-    >
+    <p v-if="headerContent" class="w-full text-n-slate-11 text-sm mb-2">
      {{ headerContent }}
    </p>
    <slot />
@@ -95,7 +95,7 @@ export default {

 <template>
  <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
+    class="conversation-details-wrap"
    :class="{ 'with-border-right': !isOnExpandedLayout }"
  >
    <ConversationHeader
@@ -36,7 +36,7 @@ defineProps({
    </div>
    <div class="mt-auto">
      <p
-        class="text-base text-slate-800 dark:text-slate-100 font-interDisplay font-semibold tracking-[0.3px]"
+        class="text-base text-slate-800 dark:text-slate-100  font-semibold tracking-[0.3px]"
      >
        {{ title }}
      </p>
@@ -32,7 +32,7 @@ const greetingMessage = computed(() => {
  >
    <div class="col-span-full self-start">
      <p
-        class="text-xl font-semibold text-slate-900 dark:text-white font-interDisplay tracking-[0.3px]"
+        class="text-xl font-semibold text-slate-900 dark:text-white  tracking-[0.3px]"
      >
        {{ greetingMessage }}
      </p>