Updated icons

packages/frontend-2/components/global/icon/CircleCheck.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <g clip-path="url(#clip0_1658_15791)">
+      <path
+        d="M6.00065 7.99967L7.33398 9.33301L10.0007 6.66634M14.6673 7.99967C14.6673 11.6816 11.6825 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6825 1.33301 14.6673 4.31778 14.6673 7.99967Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1658_15791">
+        <rect width="16" height="16" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

packages/frontend-2/components/global/icon/XMark.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path
+      d="M12 4L4 12M4 4L12 12"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

packages/frontend-2/components/viewer/anchored-point/Thread.vue

@@ -21,9 +21,9 @@
             class="w-7 h-7 flex items-center justify-center"
           >
             <div
-              class="w-6 h-6 flex items-center justify-center bg-primary rounded-full"
+              class="w-6 h-6 flex items-center justify-center bg-foundation dark:bg-foundation-2 rounded-full"
             >
-              <CheckIcon class="w-3 h-3 text-foundation" />
+              <IconCircleCheck class="size-5 text-primary" />
             </div>
           </div>
         </button>
@@ -85,7 +85,7 @@
               />
               <FormButton
                 v-tippy="modelValue.archived ? 'Unresolve' : 'Resolve'"
-                :icon-left="CheckIcon"
+                :icon-left="IconCircleCheck"
                 hide-text
                 :disabled="!canArchiveOrUnarchive"
                 color="subtle"
@@ -93,7 +93,7 @@
                 @click="toggleCommentResolvedStatus()"
               />
               <FormButton
-                :icon-left="XMarkIcon"
+                :icon-left="IconXMark"
                 hide-text
                 color="subtle"
                 size="sm"
@@ -177,8 +177,6 @@ import {
   LinkIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  XMarkIcon,
-  CheckIcon,
   ArrowTopRightOnSquareIcon,
   ArrowLeftIcon,
   ArrowUpRightIcon
@@ -205,6 +203,7 @@ import { useMixpanel } from '~~/lib/core/composables/mp'
 import { useThreadUtilities } from '~~/lib/viewer/composables/ui'
 import { useEmbed } from '~/lib/viewer/composables/setup/embed'
 import { graphql } from '~/lib/common/generated/gql'
+import type { ConcreteComponent } from 'vue'
 
 graphql(`
   fragment ViewerCommentThreadData on Comment {
@@ -269,6 +268,8 @@ onClickOutside(threadContainer, (event) => {
 
 const handle = ref(null as Nullable<HTMLElement>)
 const justCreatedReply = ref(false)
+const IconXMark = resolveComponent('IconXMark') as ConcreteComponent
+const IconCircleCheck = resolveComponent('IconCircleCheck') as ConcreteComponent
 
 const comments = computed(() => [
   props.modelValue,
@@ -279,12 +280,6 @@ const showNewReplyComponent = computed(() => {
   return !props.modelValue.archived && canReply.value && !isEmbedEnabled.value
 })
 
-// Note: conflicted with dragging styles, so took it out temporarily
-// const { style } = useExpandedThreadResponsiveLocation({
-//   threadContainer,
-//   width: 320
-// })
-
 const isExpanded = computed(() => isOpenThread(props.modelValue.id))
 
 const isTypingMessage = computed(() => {