From 84d8f52aa872349e25f3f0372e1db1284e099c78 Mon Sep 17 00:00:00 2001
From: Will Sheldon <114631109+wssheldon@users.noreply.github.com>
Date: Wed, 29 Nov 2023 13:14:41 -0800
Subject: [PATCH] Addressing many of the comments from kevgliss

---
 .../src/case/CaseAttributesDrawer.vue         |  27 +----
 .../src/case/CaseResolutionSearchPopover.vue  |  32 +-----
 .../src/case/CaseSignalInstanceTab.vue        |   8 +-
 .../dispatch/src/case/CaseTimelineTabOld.vue  | 101 -----------------
 .../static/dispatch/src/case/EditSheet.vue    |   6 +-
 .../static/dispatch/src/case/Page.vue         |   6 +-
 .../static/dispatch/src/case/PageHeader.vue   |   1 +
 .../static/dispatch/src/case/TimelineTab.vue  |  26 +----
 .../priority/CasePrioritySearchPopover.vue    |   8 +-
 .../severity/CaseSeveritySearchPopover.vue    |   8 +-
 .../src/case/type/CaseTypeSearchPopover.vue   |   8 +-
 .../src/components/EscalateButton.vue         |  21 ----
 .../dispatch/src/components/FancyMenu.vue     |  17 +--
 .../dispatch/src/components/HoverCard.vue     |  69 ------------
 .../dispatch/src/components/SearchPopover.vue |  19 +---
 .../static/dispatch/src/components/Tiptap.vue | 104 ------------------
 .../participant/ParticipantAvatarGroup.vue    |  19 +---
 .../participant/ParticipantSearchPopover.vue  |  17 +--
 .../src/project/ProjectSearchPopover.vue      |   8 +-
 .../static/dispatch/src/styles/index.scss     |  49 ++++++++-
 20 files changed, 95 insertions(+), 459 deletions(-)
 delete mode 100644 src/dispatch/static/dispatch/src/case/CaseTimelineTabOld.vue
 delete mode 100644 src/dispatch/static/dispatch/src/components/EscalateButton.vue
 delete mode 100644 src/dispatch/static/dispatch/src/components/HoverCard.vue
 delete mode 100644 src/dispatch/static/dispatch/src/components/Tiptap.vue

diff --git a/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue b/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue
index a80184f4f65e..432166cdb047 100644
--- a/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue
@@ -188,7 +188,7 @@ watchEffect(() => {
       </div>
 
       <v-card flat color="grey-lighten-5" class="rounded-lg mt-6 ml-2 mr-2">
-        <tiptap
+        <RichEditor
           :resolution="true"
           v-model="modelValue.resolution"
           style="min-height: 400px; margin: 10px; font-size: 0.9125rem; font-weight: 400"
@@ -206,7 +206,8 @@ watchEffect(() => {
   </div>
 </template>
 
-<style scope>
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 .dispatch-font {
   color: rgb(107, 111, 118) !important;
   font-size: 0.8125rem !important;
@@ -218,26 +219,4 @@ watchEffect(() => {
   font-size: 1.2125rem !important;
   font-weight: 500;
 }
-
-.dispatch-button-out {
-  text-transform: none !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  margin: 0px !important;
-  font-weight: 500px !important;
-  line-height: normal !important;
-  transition-property: border, background-color, color, opacity !important;
-  transition-duration: 0.15s !important;
-  user-select: none !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px !important;
-  background-color: rgb(255, 255, 255) !important;
-  border: 1px solid rgb(223, 225, 228) !important;
-  border-radius: 4px !important;
-  color: rgb(60, 65, 73) !important;
-  min-width: 28px !important;
-  height: 28px !important;
-  padding: 0px 14px !important;
-  font-size: 0.75rem !important;
-}
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/CaseResolutionSearchPopover.vue b/src/dispatch/static/dispatch/src/case/CaseResolutionSearchPopover.vue
index 0026b3138678..5d4e49e527c4 100644
--- a/src/dispatch/static/dispatch/src/case/CaseResolutionSearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseResolutionSearchPopover.vue
@@ -29,42 +29,18 @@ const selectCaseResolution = async (caseResolutionName: string) => {
 <template>
   <SearchPopover
     :items="caseResolutions"
-    class="dispatch-button-out"
+    class="dispatch-button"
     :initialValue="caseResolution || 'Resolution Reason'"
     @item-selected="selectCaseResolution"
     label="Set resolution..."
     :hotkeys="[]"
   >
     <template v-slot:default="{ item }">
-      <v-list-item-title class="item-title-font">{{ item }}</v-list-item-title>
+      <v-list-item-title class="dispatch-text-title">{{ item }}</v-list-item-title>
     </template>
   </SearchPopover>
 </template>
 
-<style scoped>
-.item-title-font {
-  font-size: 13px !important;
-}
-
-.dispatch-button-out {
-  text-transform: none !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  margin: 0px !important;
-  font-weight: 500px !important;
-  line-height: normal !important;
-  transition-property: border, background-color, color, opacity !important;
-  transition-duration: 0.15s !important;
-  user-select: none !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px !important;
-  background-color: rgb(255, 255, 255) !important;
-  border: 1px solid rgb(223, 225, 228) !important;
-  border-radius: 4px !important;
-  color: rgb(60, 65, 73) !important;
-  min-width: 28px !important;
-  height: 28px !important;
-  padding: 0px 14px !important;
-  font-size: 0.75rem !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue b/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
index cd8f5e9fe79b..02f30efe1526 100644
--- a/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
@@ -10,7 +10,7 @@
                 <span style="font-size: 0.8rem" class="pl-8">
                   {{ item.signal.name }}
                 </span>
-                <span style="font-size: 0.75rem" class="pl-1">
+                <span class="pl-1 dispatch-text-paragraph">
                   · {{ formatRelativeDate(item.created_at) }}
                 </span>
                 <!-- Other data fields... -->
@@ -25,7 +25,7 @@
       <!-- Column for Raw Signal Viewer -->
       <v-col cols="9">
         <v-card elevation="0" class="signal-card pt-2">
-          <span style="font-size: 0.75rem">
+          <span class="dispatch-text-paragraph">
             <!-- {{ selectedItem.signal.name }} -->
           </span>
           <raw-signal-viewer :value="selectedItem" />
@@ -41,7 +41,6 @@ import { useRoute, useRouter } from "vue-router"
 import { formatRelativeDate } from "@/filters"
 
 import RawSignalViewer from "@/signal/NewRawSignalViewer.vue"
-import HoverCard from "@/components/HoverCard.vue"
 
 // Define props
 const props = withDefaults(
@@ -108,7 +107,8 @@ watch(
 )
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 .signal-card {
   border: 0.5px solid rgb(216, 216, 216) !important;
   border-radius: 8px !important;
diff --git a/src/dispatch/static/dispatch/src/case/CaseTimelineTabOld.vue b/src/dispatch/static/dispatch/src/case/CaseTimelineTabOld.vue
deleted file mode 100644
index b93af58b28c0..000000000000
--- a/src/dispatch/static/dispatch/src/case/CaseTimelineTabOld.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <v-container>
-    <v-row justify="end">
-      <v-switch v-model="showDetails" label="Show details" />
-      <v-btn
-        color="secondary"
-        class="ml-2 mr-2 mt-3"
-        @click="exportToCSV()"
-        :loading="exportLoading"
-      >
-        Export
-      </v-btn>
-    </v-row>
-    <template v-if="events && events.length">
-      <v-timeline density="compact" clipped>
-        <v-timeline-item hide-dot>
-          <v-col class="text-right text-caption">(times in UTC)</v-col>
-        </v-timeline-item>
-        <v-timeline-item
-          v-for="event in sortedEvents"
-          :key="event.id"
-          class="mb-4"
-          dot-color="blue"
-          size="small"
-        >
-          <v-row justify="space-between">
-            <v-col cols="7">
-              {{ event.description }}
-              <transition-group name="slide" v-if="showDetails">
-                <template v-for="(value, key) in event.details" :key="key">
-                  <v-card>
-                    <v-card-title class="text-subtitle-1">
-                      {{ snakeToCamel(key) }}
-                    </v-card-title>
-                    <v-card-text>{{ value }}</v-card-text>
-                  </v-card>
-                </template>
-              </transition-group>
-              <div class="text-caption">
-                {{ event.source }}
-              </div>
-            </v-col>
-            <v-col class="text-right" cols="5">
-              <v-tooltip location="bottom">
-                <template #activator="{ props }">
-                  <span v-bind="props" class="wavy-underline">{{
-                    formatToUTC(event.started_at)
-                  }}</span>
-                </template>
-                <span class="pre-formatted">{{ formatToTimeZones(event.started_at) }}</span>
-              </v-tooltip>
-            </v-col>
-          </v-row>
-        </v-timeline-item>
-      </v-timeline>
-    </template>
-    <div v-else>
-      <p class="text-center">No timeline data available.</p>
-    </div>
-  </v-container>
-</template>
-
-<script>
-import { mapFields } from "vuex-map-fields"
-import Util from "@/util"
-import { snakeToCamel, formatToUTC, formatToTimeZones } from "@/filters"
-
-export default {
-  name: "CaseTimelineTabOld",
-
-  data() {
-    return {
-      showDetails: false,
-      exportLoading: false,
-    }
-  },
-
-  setup() {
-    return { snakeToCamel, formatToUTC, formatToTimeZones }
-  },
-
-  computed: {
-    ...mapFields("case_management", ["selected.events", "selected.name"]),
-
-    sortedEvents: function () {
-      return this.events.slice().sort((a, b) => new Date(a.started_at) - new Date(b.started_at))
-    },
-  },
-
-  methods: {
-    exportToCSV() {
-      this.exportLoading = true
-      let items = this.sortedEvents
-      Util.exportCSV(items, this.name + "-timeline-export.csv")
-      this.exportLoading = false
-    },
-  },
-}
-</script>
-
-<style scoped src="@/styles/timeline.css" />
diff --git a/src/dispatch/static/dispatch/src/case/EditSheet.vue b/src/dispatch/static/dispatch/src/case/EditSheet.vue
index 367ae22f5bf3..231bc942fabe 100644
--- a/src/dispatch/static/dispatch/src/case/EditSheet.vue
+++ b/src/dispatch/static/dispatch/src/case/EditSheet.vue
@@ -56,7 +56,7 @@
           <case-participants-tab />
         </v-window-item>
         <v-window-item key="timeline">
-          <case-timeline-tab-old />
+          <case-timeline-tab-v1 />
         </v-window-item>
         <v-window-item key="workflow_instances">
           <workflow-instance-tab v-model="workflow_instances" />
@@ -84,7 +84,7 @@ import { formatRelativeDate } from "@/filters"
 import CaseDetailsTab from "@/case/DetailsTab.vue"
 import CaseParticipantsTab from "@/case/ParticipantsTab.vue"
 import CaseResourcesTab from "@/case/ResourcesTab.vue"
-import CaseTimelineTabOld from "@/case/CaseTimelineTabOld.vue"
+import CaseTimelineTabV1 from "@/case/CaseTimelineTabV1.vue"
 import WorkflowInstanceTab from "@/workflow/WorkflowInstanceTab.vue"
 import SignalInstanceTab from "@/signal/SignalInstanceTab.vue"
 import EntitiesTab from "@/entity/EntitiesTab.vue"
@@ -96,7 +96,7 @@ export default {
     CaseDetailsTab,
     CaseResourcesTab,
     CaseParticipantsTab,
-    CaseTimelineTabOld,
+    CaseTimelineTabV1,
     WorkflowInstanceTab,
     SignalInstanceTab,
     EntitiesTab,
diff --git a/src/dispatch/static/dispatch/src/case/Page.vue b/src/dispatch/static/dispatch/src/case/Page.vue
index b56ffccf2bc3..551c8d29e5e3 100644
--- a/src/dispatch/static/dispatch/src/case/Page.vue
+++ b/src/dispatch/static/dispatch/src/case/Page.vue
@@ -10,8 +10,8 @@
     <CaseAttributesDrawer v-model="caseDetails" :open="isDrawerOpen" />
     <VDivider />
     <div class="container mx-auto px-4">
-      <Tiptap :title="true" v-model="caseDetails.title" class="pl-8 pb-6 pt-6" />
-      <Tiptap :description="true" v-model="caseDetails.description" class="pl-8 pb-6" />
+      <RichEditor :title="true" v-model="caseDetails.title" class="pl-8 pb-6 pt-6" />
+      <RichEditor :description="true" v-model="caseDetails.description" class="pl-8 pb-6" />
       <CaseStatusSelectGroup v-model="caseDetails" class="pl-4 pb-8" />
       <CaseTabs :loading="loading" v-model="caseDetails" />
     </div>
@@ -27,7 +27,7 @@ import CaseApi from "@/case/api"
 import CaseAttributesDrawer from "@/case/CaseAttributesDrawer.vue"
 import PageHeader from "@/case//PageHeader.vue"
 import CaseTabs from "@/case/CaseTabs.vue"
-import Tiptap from "@/components/Tiptap.vue"
+import RichEditor from "@/components/RichEditor.vue"
 import CaseStatusSelectGroup from "@/case/CaseStatusSelectGroup.vue"
 
 const route = useRoute()
diff --git a/src/dispatch/static/dispatch/src/case/PageHeader.vue b/src/dispatch/static/dispatch/src/case/PageHeader.vue
index 6be298f289c7..e0d28a7b1dc3 100644
--- a/src/dispatch/static/dispatch/src/case/PageHeader.vue
+++ b/src/dispatch/static/dispatch/src/case/PageHeader.vue
@@ -29,6 +29,7 @@
 import { useRoute } from "vue-router"
 import { computed, ref } from "vue"
 import LockButton from "@/components/LockButton.vue"
+import EscalateButton from "@/case/EscalateButton.vue"
 import FancyTooltip from "@/components/FancyTooltip.vue"
 import ParticipantAvatarGroup from "@/participant/ParticipantAvatarGroup.vue"
 import CaseApi from "@/case/api"
diff --git a/src/dispatch/static/dispatch/src/case/TimelineTab.vue b/src/dispatch/static/dispatch/src/case/TimelineTab.vue
index b1af39d6941a..d50764992925 100644
--- a/src/dispatch/static/dispatch/src/case/TimelineTab.vue
+++ b/src/dispatch/static/dispatch/src/case/TimelineTab.vue
@@ -107,7 +107,7 @@ const menu = ref(false)
           <v-row>
             <v-col cols="12">
               <div>
-                <span style="font-size: 0.75rem">
+                <span class="dispatch-text-paragraph">
                   <b>
                     {{ sourceIconMap[event.source]?.sourceName || event.source }}
                   </b>
@@ -135,25 +135,7 @@ const menu = ref(false)
   </v-container>
 </template>
 
-<style scoped src="@/styles/timeline.css">
-.cn-button {
-  border-radius: 4px !important;
-  font-weight: 500 !important;
-  line-height: normal !important;
-  border: 1px solid rgb(223, 225, 228) !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px !important;
-  background-color: rgb(255, 255, 255) !important;
-  color: rgb(60, 65, 73) !important;
-  height: 28px !important;
-  padding: 0px 14px !important;
-}
-
-.dispatch-side-card {
-  backdrop-filter: blur(12px) saturate(190%) contrast(50%) brightness(130%) !important;
-  border: 0.5px solid rgb(216, 216, 216) !important;
-  border-radius: 8px !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px !important;
-  color: rgb(60, 65, 73) !important;
-  opacity: 2 !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
+@import "@/styles/timeline.css";
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue b/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue
index 65a7e51063a9..6e87ac23f9a1 100644
--- a/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue
@@ -52,13 +52,11 @@ const selectCasePriority = async (casePriorityName: string) => {
     :hotkeys="[]"
   >
     <template v-slot:default="{ item }">
-      <v-list-item-title class="item-title-font">{{ item }}</v-list-item-title>
+      <v-list-item-title class="dispatch-text-title">{{ item }}</v-list-item-title>
     </template>
   </SearchPopover>
 </template>
 
-<style scoped>
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue b/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue
index 545d6a224e40..3b5c5167698e 100644
--- a/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue
@@ -52,13 +52,11 @@ const selectCaseSeverity = async (caseSeverityName: string) => {
     :hotkeys="[]"
   >
     <template v-slot:default="{ item }">
-      <v-list-item-title class="item-title-font">{{ item }}</v-list-item-title>
+      <v-list-item-title class="dispatch-text-title">{{ item }}</v-list-item-title>
     </template>
   </SearchPopover>
 </template>
 
-<style scoped>
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue b/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue
index d3b0cba78a9b..ac6c2f4ab491 100644
--- a/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue
@@ -52,13 +52,11 @@ const selectCaseType = async (caseTypeName: string) => {
     :hotkeys="[]"
   >
     <template v-slot:default="{ item }">
-      <v-list-item-title class="item-title-font">{{ item }}</v-list-item-title>
+      <v-list-item-title class="dispatch-text-title">{{ item }}</v-list-item-title>
     </template>
   </SearchPopover>
 </template>
 
-<style scoped>
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/components/EscalateButton.vue b/src/dispatch/static/dispatch/src/components/EscalateButton.vue
deleted file mode 100644
index 6dd8a7f2bd7c..000000000000
--- a/src/dispatch/static/dispatch/src/components/EscalateButton.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- EscalateButton.vue -->
-<template>
-  <div>
-    <v-btn variant="plain" :ripple="false" @click="showDialog">
-      <v-icon>mdi-fire</v-icon>
-    </v-btn>
-    <CaseEscalateDialog />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useStore } from "vuex"
-import CaseEscalateDialog from "@/case/EscalateDialog.vue"
-
-const store = useStore()
-
-const showDialog = () => {
-  const caseDetails = store.state.case_management.selected
-  store.dispatch("case_management/showEscalateDialog", caseDetails)
-}
-</script>
diff --git a/src/dispatch/static/dispatch/src/components/FancyMenu.vue b/src/dispatch/static/dispatch/src/components/FancyMenu.vue
index 53c576f91013..79038406894d 100644
--- a/src/dispatch/static/dispatch/src/components/FancyMenu.vue
+++ b/src/dispatch/static/dispatch/src/components/FancyMenu.vue
@@ -24,7 +24,7 @@
             rounded="lg"
             active-class="ma-4"
           >
-            <v-list-item-title class="item-title-font">{{ option }}</v-list-item-title>
+            <v-list-item-title class="dispatch-text-title">{{ option }}</v-list-item-title>
           </v-list-item>
         </v-list>
       </v-card>
@@ -48,17 +48,6 @@ const selectOption = (option: string) => {
 }
 </script>
 
-<style scoped>
-.dispatch-side-card {
-  backdrop-filter: blur(12px) saturate(190%) contrast(50%) brightness(130%) !important;
-  border: 0.5px solid rgb(216, 216, 216) !important;
-  border-radius: 8px !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px !important;
-  color: rgb(60, 65, 73) !important;
-  opacity: 2 !important;
-}
-
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/components/HoverCard.vue b/src/dispatch/static/dispatch/src/components/HoverCard.vue
deleted file mode 100644
index 933ae9454f7f..000000000000
--- a/src/dispatch/static/dispatch/src/components/HoverCard.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <div class="hover-container">
-    <div class="hover-card rounded-lg">
-      <v-card>
-        <v-card-title class="text-subtitle-2 font-weight-regular">
-          {{ item.raw.id }}
-        </v-card-title>
-        <v-card-text v-if="item.signal.external_url">
-          <v-btn
-            class="text-subtitle-2 font-weight-regular"
-            prepend-icon="mdi-file-document"
-            variant="text"
-          >
-            Document
-          </v-btn>
-          <v-btn
-            class="text-subtitle-2 font-weight-regular"
-            prepend-icon="mdi-pencil"
-            variant="text"
-          >
-            Edit
-          </v-btn>
-        </v-card-text>
-      </v-card>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-})
-</script>
-
-<style scoped>
-.hover-container {
-  position: relative;
-}
-
-.v-card {
-  backdrop-filter: blur(12px) saturate(190%) contrast(50%) brightness(130%) !important;
-  border: 0.5px solid rgb(216, 216, 216) !important;
-  border-radius: 4px !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px !important;
-  color: rgb(60, 65, 73) !important;
-  opacity: 2 !important;
-  background-color: rgba(255, 255, 255, 0.5) !important;
-}
-
-.hover-card {
-  visibility: hidden;
-  position: absolute;
-  bottom: 100%;
-  width: 300px;
-  opacity: 0;
-  transition: opacity 0.1s linear, visibility 0.5s linear;
-  transform: translateY(4px);
-}
-
-.hover-container:hover .hover-card {
-  visibility: visible;
-  opacity: 1;
-  transition-delay: 0s !important;
-}
-</style>
diff --git a/src/dispatch/static/dispatch/src/components/SearchPopover.vue b/src/dispatch/static/dispatch/src/components/SearchPopover.vue
index 67cbf8e9c075..e30f67f2f0ad 100644
--- a/src/dispatch/static/dispatch/src/components/SearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/components/SearchPopover.vue
@@ -74,7 +74,7 @@ const toggleMenu = () => {
           v-bind="menu"
           :ripple="false"
         >
-          <span style="font-size: 0.8125rem; font-weight: 500; color: rgb(60, 65, 73)">
+          <span class="dispatch-text-subtitle">
             {{ selectedItem }}
           </span>
         </v-btn>
@@ -114,7 +114,7 @@ const toggleMenu = () => {
               class="ml-1 mr-1"
               active-class="ma-4"
             >
-              <span class="item-title-font">
+              <span class="dispatch-text-title">
                 <slot :item="item" />
               </span>
             </v-list-item>
@@ -125,19 +125,8 @@ const toggleMenu = () => {
   </div>
 </template>
 
-<style scoped>
-.dispatch-side-card {
-  backdrop-filter: blur(12px) saturate(190%) contrast(50%) brightness(130%) !important;
-  border: 0.5px solid rgb(216, 216, 216) !important;
-  border-radius: 8px !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px !important;
-  color: rgb(60, 65, 73) !important;
-  opacity: 2 !important;
-}
-
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 
 .menu-activator {
   border: 1px solid transparent;
diff --git a/src/dispatch/static/dispatch/src/components/Tiptap.vue b/src/dispatch/static/dispatch/src/components/Tiptap.vue
deleted file mode 100644
index e0ddda6a1a01..000000000000
--- a/src/dispatch/static/dispatch/src/components/Tiptap.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <div>
-    <editor-content :editor="editor" @keydown.enter.prevent />
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount, watch } from "vue"
-import { Editor, EditorContent } from "@tiptap/vue-3"
-import StarterKit from "@tiptap/starter-kit"
-import CaseApi from "@/case/api"
-import { useStore } from "vuex"
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: Boolean,
-    default: false,
-  },
-  description: {
-    type: Boolean,
-    default: false,
-  },
-  resolution: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const store = useStore()
-const editor = ref(null)
-const plainTextValue = ref("")
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    const isSame = editor.value?.getHTML() === value
-
-    if (isSame) {
-      return
-    }
-
-    if (props.title) {
-      editor.value?.chain().focus().setContent(`<h2>${value}</h2>`, false).run()
-    } else {
-      editor.value?.chain().focus().setContent(`${value}`, false).run()
-    }
-  }
-)
-
-onMounted(() => {
-  editor.value = new Editor({
-    extensions: [StarterKit.configure({ heading: { levels: [2] } })],
-    content: props.modelValue,
-    onUpdate: () => {
-      let content = editor.value?.getHTML()
-      // remove the HTML tags
-      plainTextValue.value = content.replace(/<\/?[^>]+(>|$)/g, "")
-      // Get the case details from the Vuex store
-      const caseDetails = store.state.case_management.selected
-      // Update the title value
-      if (props.title) {
-        caseDetails.title = plainTextValue.value
-      }
-
-      if (props.description) {
-        caseDetails.description = plainTextValue.value
-      }
-
-      if (props.resolution) {
-        caseDetails.resolution = plainTextValue.value
-      }
-      // Save the changes
-      CaseApi.update(caseDetails.id, caseDetails)
-    },
-    keyboardShortcuts: {
-      Enter: () => {}, // Override Enter key to do nothing
-    },
-  })
-})
-
-onBeforeUnmount(() => {
-  editor.value?.destroy()
-})
-
-// Expose plainTextValue for parent component to use
-defineExpose({ plainTextValue })
-</script>
-
-<style lang="scss">
-/* Basic editor styles */
-.tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-}
-
-input[type="checkbox"] {
-  margin-right: 4px;
-}
-</style>
diff --git a/src/dispatch/static/dispatch/src/participant/ParticipantAvatarGroup.vue b/src/dispatch/static/dispatch/src/participant/ParticipantAvatarGroup.vue
index a2c7cdf01ad3..2d01332ec786 100644
--- a/src/dispatch/static/dispatch/src/participant/ParticipantAvatarGroup.vue
+++ b/src/dispatch/static/dispatch/src/participant/ParticipantAvatarGroup.vue
@@ -141,7 +141,7 @@ const toggleMenu = () => {
               />
               <!-- <v-icon class="mr-n6 ml-n2" size="x-small" icon="mdi-account"></v-icon> -->
             </template>
-            <v-list-item-title class="item-title-font">
+            <v-list-item-title class="dispatch-text-title">
               {{ participant.individual.name }}
             </v-list-item-title>
           </v-list-item>
@@ -151,7 +151,9 @@ const toggleMenu = () => {
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
+
 .avatar-row {
   display: flex;
   align-items: center;
@@ -192,17 +194,4 @@ const toggleMenu = () => {
   background-color: rgb(254, 255, 254);
   box-shadow: rgba(0, 0, 0, 0.086) 0px 2px 0px 0px;
 }
-
-.dispatch-side-card {
-  backdrop-filter: blur(12px) saturate(190%) contrast(50%) brightness(130%) !important;
-  border: 0.5px solid rgb(216, 216, 216) !important;
-  border-radius: 8px !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px !important;
-  color: rgb(60, 65, 73) !important;
-  opacity: 2 !important;
-}
-
-.item-title-font {
-  font-size: 13px !important;
-}
 </style>
diff --git a/src/dispatch/static/dispatch/src/participant/ParticipantSearchPopover.vue b/src/dispatch/static/dispatch/src/participant/ParticipantSearchPopover.vue
index b9154ddd77ec..9e9d215d6c46 100644
--- a/src/dispatch/static/dispatch/src/participant/ParticipantSearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/participant/ParticipantSearchPopover.vue
@@ -232,7 +232,7 @@ const toggleMenu = () => {
               ></v-avatar>
               <!-- <v-icon class="mr-n6 ml-n2" size="x-small" icon="mdi-account"></v-icon> -->
             </template>
-            <v-list-item-title class="item-title-font">{{ participant }}</v-list-item-title>
+            <v-list-item-title class="dispatch-text-title">{{ participant }}</v-list-item-title>
             <template v-slot:append>
               <v-icon
                 v-if="participant === selectedParticipant"
@@ -250,19 +250,8 @@ const toggleMenu = () => {
   </div>
 </template>
 
-<style scoped>
-.dispatch-side-card {
-  backdrop-filter: blur(12px) saturate(190%) contrast(50%) brightness(130%) !important;
-  border: 0.5px solid rgb(216, 216, 216) !important;
-  border-radius: 8px !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px !important;
-  color: rgb(60, 65, 73) !important;
-  opacity: 2 !important;
-}
-
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 
 .menu-activator {
   border: 1px solid transparent;
diff --git a/src/dispatch/static/dispatch/src/project/ProjectSearchPopover.vue b/src/dispatch/static/dispatch/src/project/ProjectSearchPopover.vue
index b2f337648eaa..79f639e74ce6 100644
--- a/src/dispatch/static/dispatch/src/project/ProjectSearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/project/ProjectSearchPopover.vue
@@ -54,13 +54,11 @@ const selectProject = async (projectName: string) => {
     :hotkeys="[]"
   >
     <template v-slot:default="{ item }">
-      <v-list-item-title class="item-title-font">{{ item }}</v-list-item-title>
+      <v-list-item-title class="dispatch-text-title">{{ item }}</v-list-item-title>
     </template>
   </SearchPopover>
 </template>
 
-<style scoped>
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/styles/index.scss b/src/dispatch/static/dispatch/src/styles/index.scss
index 39de3e324c24..2cf83b2a8758 100644
--- a/src/dispatch/static/dispatch/src/styles/index.scss
+++ b/src/dispatch/static/dispatch/src/styles/index.scss
@@ -1,7 +1,52 @@
 .v-data-table {
-    font-size: 0.875rem;
+  font-size: 0.875rem;
 }
 
 .v-card--variant-outlined {
-    border-color: rgb(210, 210, 210);
+  border-color: rgb(210, 210, 210);
+}
+
+.dispatch-side-card {
+  backdrop-filter: blur(12px) saturate(190%) contrast(50%) brightness(130%) !important;
+  border: 0.5px solid rgb(216, 216, 216) !important;
+  border-radius: 8px !important;
+  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px !important;
+  color: rgb(60, 65, 73) !important;
+  opacity: 2 !important;
+}
+
+.dispatch-text-paragraph {
+  font-size: 0.75rem !important;
+}
+
+.dispatch-text-subtitle {
+  font-size: 0.8125rem !important;
+  font-weight: 500 !important;
+  color: rgb(60, 65, 73) !important;
+}
+
+.dispatch-text-title {
+  font-size: 13px !important;
+}
+
+.dispatch-button {
+  text-transform: none !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin: 0px !important;
+  font-weight: 500px !important;
+  line-height: normal !important;
+  transition-property: border, background-color, color, opacity !important;
+  transition-duration: 0.15s !important;
+  user-select: none !important;
+  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px !important;
+  background-color: rgb(255, 255, 255) !important;
+  border: 1px solid rgb(223, 225, 228) !important;
+  border-radius: 4px !important;
+  color: rgb(60, 65, 73) !important;
+  min-width: 28px !important;
+  height: 28px !important;
+  padding: 0px 14px !important;
+  font-size: 0.75rem !important;
 }