feat(fe2): updated empty state component & new discussions empty state (

#2198)

* Add new EmptyState Component

* Add small prop

* Remove animation

* Discussions Empty State

* Update to CTA

* Update to CTA

packages/frontend-2/components/project/EmptyState.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-col items-center max-w-[180px] mx-auto">
+    <div
+      class="relative text-foreground-2 h-32 w-full"
+      :class="small ? 'scale-75 -mb-2' : 'mb-1'"
+    >
+      <slot name="image"></slot>
+    </div>
+    <div class="flex flex-col gap-1 items-center text-center">
+      <span class="text-foreground font-bold">{{ title }}</span>
+      <span v-if="text" class="text-xs text-foreground-2">
+        {{ text }}
+      </span>
+    </div>
+    <slot name="cta"></slot>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps<{
+  small?: boolean
+  title: string
+  text?: string
+}>()
+</script>

packages/frontend-2/components/project/page/discussions/Results.vue

@@ -11,8 +11,8 @@
         @infinite="infiniteLoad"
       />
     </template>
-    <div v-else class="mt-20">
-      <ProjectPageLatestItemsCommentsIntroCard />
+    <div v-else class="mt-8">
+      <ProjectPageLatestItemsCommentsEmptyState />
     </div>
   </div>
 </template>

packages/frontend-2/components/project/page/latest-items/Comments.vue

@@ -19,7 +19,7 @@
         />
       </template>
       <template v-else>
-        <ProjectPageLatestItemsCommentsIntroCard />
+        <ProjectPageLatestItemsCommentsEmptyState />
       </template>
     </template>
   </ProjectPageLatestItems>

packages/frontend-2/components/project/page/latest-items/comments/EmptyState.vue

@@ -0,0 +1,60 @@
+<template>
+  <ProjectEmptyState
+    :small="small"
+    title="No discussions, yet."
+    :text="small ? undefined : 'Open a model and start the collaboration today!'"
+  >
+    <template #image>
+      <svg
+        width="170"
+        height="139"
+        viewBox="0 0 170 139"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M134.063 79.625C134.063 80.4879 134.762 81.1875 135.625 81.1875C136.488 81.1875 137.188 80.4879 137.188 79.625C137.188 78.7621 136.488 78.0625 135.625 78.0625C134.762 78.0625 134.063 78.7621 134.063 79.625ZM134.063 79.625H135.625M118.438 79.625C118.438 80.4879 119.137 81.1875 120 81.1875C120.863 81.1875 121.563 80.4879 121.563 79.625C121.563 78.7621 120.863 78.0625 120 78.0625C119.137 78.0625 118.438 78.7621 118.438 79.625ZM118.438 79.625H120M102.813 79.625C102.813 80.4879 103.512 81.1875 104.375 81.1875C105.238 81.1875 105.938 80.4879 105.938 79.625C105.938 78.7621 105.238 78.0625 104.375 78.0625C103.512 78.0625 102.813 78.7621 102.813 79.625ZM102.813 79.625H104.375M160.625 92.1639C160.625 98.8351 155.944 104.642 149.344 105.612C144.818 106.278 140.244 106.792 135.625 107.149V126.5L118.194 109.069C117.332 108.207 116.169 107.718 114.952 107.688C106.72 107.484 98.612 106.782 90.6563 105.613C84.056 104.642 79.375 98.8356 79.375 92.1644V67.0857C79.375 60.4144 84.056 54.6076 90.6563 53.6372C100.233 52.2292 110.031 51.5 119.999 51.5C129.968 51.5 139.766 52.2294 149.344 53.6376C155.944 54.6081 160.625 60.4148 160.625 67.086V92.1639Z"
+          stroke="#94A3B8"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M40.6094 45.9063C40.6094 46.8814 39.8189 47.6719 38.8438 47.6719C37.8686 47.6719 37.0781 46.8814 37.0781 45.9063C37.0781 44.9311 37.8686 44.1406 38.8438 44.1406C39.8189 44.1406 40.6094 44.9311 40.6094 45.9063ZM40.6094 45.9063H38.8438M75.9219 45.9063C75.9219 46.8814 75.1314 47.6719 74.1563 47.6719C73.1811 47.6719 72.3906 46.8814 72.3906 45.9063C72.3906 44.9311 73.1811 44.1406 74.1563 44.1406C75.1314 44.1406 75.9219 44.9311 75.9219 45.9063ZM75.9219 45.9063H74.1563M10.5938 60.0753C10.5938 67.6137 15.8832 74.1753 23.3414 75.2719C28.4551 76.0238 33.6246 76.6045 38.8438 77.0078V98.875L58.541 79.1778C59.5143 78.2044 60.8285 77.651 62.2046 77.617C71.5063 77.3866 80.6684 76.5942 89.6584 75.2725C97.1167 74.176 102.406 67.6143 102.406 60.0758V31.7368C102.406 24.1983 97.1167 17.6366 89.6584 16.5401C78.8365 14.949 67.7652 14.125 56.5013 14.125C45.2365 14.125 34.1642 14.9492 23.3414 16.5405C15.8832 17.6371 10.5938 24.1988 10.5938 31.7372V60.0753Z"
+          stroke="#94A3B8"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M60 50.5C60 52.433 58.433 54 56.5 54C54.567 54 53 52.433 53 50.5"
+          stroke="#94A3B8"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </svg>
+    </template>
+    <template #cta>
+      <div v-if="small" class="mt-3">
+        <FormButton
+          size="sm"
+          :icon-left="PlusIcon"
+          @click="() => $emit('new-discussion')"
+        >
+          New discussion
+        </FormButton>
+      </div>
+    </template>
+  </ProjectEmptyState>
+</template>
+<script setup lang="ts">
+import { PlusIcon } from '@heroicons/vue/24/solid'
+
+defineEmits<{
+  (e: 'new-discussion'): void
+}>()
+
+defineProps<{
+  small?: boolean
+}>()
+</script>

packages/frontend-2/components/viewer/comments/Comments.vue

@@ -58,8 +58,8 @@
         :key="thread.id"
         :thread="thread"
       />
-      <div v-if="commentThreads.length === 0">
-        <ProjectPageLatestItemsCommentsIntroCard
+      <div v-if="commentThreads.length === 0" class="pb-4">
+        <ProjectPageLatestItemsCommentsEmptyState
           small
           @new-discussion="onNewDiscussion"
         />