From 4093069d43a0308f11865fb7b3eecc9f656d433c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Mon, 7 Oct 2024 14:23:28 +0200
Subject: [PATCH] Change icons on overview

---
 frontend/.eslintrc.js                         |  2 +-
 .../contributor-details-identities.vue        |  1 -
 .../activity/dashboard-activity-item.vue      |  7 +-
 .../activity/dashboard-activity-list.vue      |  2 +-
 .../activity/dashboard-activity-sentiment.vue | 12 ++-
 .../activity/dashboard-activity-types.vue     |  5 +-
 .../dashboard-conversation-list.vue           |  2 +-
 .../components/dashboard-empty-state.vue      | 12 +--
 .../components/dashboard-integrations.vue     |  2 +-
 .../components/dashboard-members.vue          | 25 +++---
 .../components/dashboard-organizations.vue    |  4 +-
 .../dashboard-project-group-drawer.vue        |  8 +-
 .../components/dashboard-project-group.vue    |  3 +-
 .../dashboard-upgrade-plan-widget.vue         | 44 ----------
 .../components/shared/dashboard-badge.vue     | 13 ++-
 .../dashboard/pages/dashboard-page.vue        |  3 +-
 .../layout/components/menu/menu-links.vue     | 80 -------------------
 .../components/menu/menu-quickstart.vue       | 72 -----------------
 .../components/menu/menu-support-help.vue     | 34 --------
 .../layout/components/menu/menu-support.vue   | 77 ------------------
 .../modules/layout/components/menu/menu.vue   |  1 -
 .../menu/workspace/menu-workspace-card.vue    | 61 --------------
 .../modules/layout/config/links/activities.ts | 16 ----
 .../modules/layout/config/links/api-keys.ts   | 18 -----
 .../layout/config/links/automations.ts        | 16 ----
 .../modules/layout/config/links/changelog.ts  | 11 ---
 .../modules/layout/config/links/community.ts  | 11 ---
 .../modules/layout/config/links/contacts.ts   | 16 ----
 .../layout/config/links/documentation.ts      | 11 ---
 .../modules/layout/config/links/eagle-eye.ts  | 16 ----
 .../src/modules/layout/config/links/home.ts   | 11 ---
 .../layout/config/links/integrations.ts       | 11 ---
 .../layout/config/links/organizations.ts      | 11 ---
 .../layout/config/links/plans-billing.ts      | 18 -----
 .../layout/config/links/users-permissions.ts  | 18 -----
 frontend/src/modules/layout/config/menu.ts    | 42 ----------
 .../components/view/lf-search-input.vue       |  2 +-
 .../filters/components/FilterSearch.vue       |  2 +-
 38 files changed, 59 insertions(+), 641 deletions(-)
 delete mode 100644 frontend/src/modules/dashboard/components/dashboard-upgrade-plan-widget.vue
 delete mode 100644 frontend/src/modules/layout/components/menu/menu-links.vue
 delete mode 100644 frontend/src/modules/layout/components/menu/menu-quickstart.vue
 delete mode 100644 frontend/src/modules/layout/components/menu/menu-support-help.vue
 delete mode 100644 frontend/src/modules/layout/components/menu/menu-support.vue
 delete mode 100644 frontend/src/modules/layout/components/menu/workspace/menu-workspace-card.vue
 delete mode 100644 frontend/src/modules/layout/config/links/activities.ts
 delete mode 100644 frontend/src/modules/layout/config/links/api-keys.ts
 delete mode 100644 frontend/src/modules/layout/config/links/automations.ts
 delete mode 100644 frontend/src/modules/layout/config/links/changelog.ts
 delete mode 100644 frontend/src/modules/layout/config/links/community.ts
 delete mode 100644 frontend/src/modules/layout/config/links/contacts.ts
 delete mode 100644 frontend/src/modules/layout/config/links/documentation.ts
 delete mode 100644 frontend/src/modules/layout/config/links/eagle-eye.ts
 delete mode 100644 frontend/src/modules/layout/config/links/home.ts
 delete mode 100644 frontend/src/modules/layout/config/links/integrations.ts
 delete mode 100644 frontend/src/modules/layout/config/links/organizations.ts
 delete mode 100644 frontend/src/modules/layout/config/links/plans-billing.ts
 delete mode 100644 frontend/src/modules/layout/config/links/users-permissions.ts
 delete mode 100644 frontend/src/modules/layout/config/menu.ts

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index ef6cde7509..0fb169e92a 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -26,7 +26,7 @@ module.exports = {
     'comma-dangle': 'warn',
     indent: 'warn',
     'no-trailing-spaces': 'warn',
-    'vue/no-unused-components': 'warn',
+    'vue/no-unused-components': 'error',
     'vue/html-closing-bracket-spacing': 'warn',
     'vue/html-indent': 'warn',
     'vue/html-self-closing': 'warn',
diff --git a/frontend/src/modules/contributor/components/details/contributor-details-identities.vue b/frontend/src/modules/contributor/components/details/contributor-details-identities.vue
index 30bd65057e..cf2810859c 100644
--- a/frontend/src/modules/contributor/components/details/contributor-details-identities.vue
+++ b/frontend/src/modules/contributor/components/details/contributor-details-identities.vue
@@ -79,7 +79,6 @@
 
 <script setup lang="ts">
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import { Contributor, ContributorIdentity } from '@/modules/contributor/types/Contributor';
 import useContributorHelpers from '@/modules/contributor/helpers/contributor.helpers';
 import { computed, ref } from 'vue';
diff --git a/frontend/src/modules/dashboard/components/activity/dashboard-activity-item.vue b/frontend/src/modules/dashboard/components/activity/dashboard-activity-item.vue
index 529038b63c..ee629498d1 100644
--- a/frontend/src/modules/dashboard/components/activity/dashboard-activity-item.vue
+++ b/frontend/src/modules/dashboard/components/activity/dashboard-activity-item.vue
@@ -120,9 +120,8 @@
                   class="text-2xs text-gray-600 font-medium flex items-center"
                   target="_blank"
                   rel="noopener noreferrer"
-                ><i
-                   class="ri-lg ri-external-link-line mr-1"
-                 />
+                >
+                  <lf-icon name="arrow-up-right-from-square" class="mr-1" :size="14" />
                   <span class="block">Open on {{ platform?.name || 'platform' }}</span></a>
               </div>
             </template>
@@ -146,10 +145,12 @@ import { storeToRefs } from 'pinia';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import LfActivityDisplay from '@/shared/modules/activity/components/activity-display.vue';
 import { Platform } from '@/shared/modules/platform/types/Platform';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 export default {
   name: 'AppDashboardActivityItem',
   components: {
+    LfIcon,
     AppMemberDisplayName,
     AppActivityContent,
     AppLoading,
diff --git a/frontend/src/modules/dashboard/components/activity/dashboard-activity-list.vue b/frontend/src/modules/dashboard/components/activity/dashboard-activity-list.vue
index e642af7128..23284599d2 100644
--- a/frontend/src/modules/dashboard/components/activity/dashboard-activity-list.vue
+++ b/frontend/src/modules/dashboard/components/activity/dashboard-activity-list.vue
@@ -21,7 +21,7 @@
 
       <app-dashboard-empty-state
         v-if="recentActivities.length === 0"
-        icon-class="ri-list-check-2"
+        icon="monitor-waveform"
         class="pt-17 pb-17"
       >
         No activities during this period
diff --git a/frontend/src/modules/dashboard/components/activity/dashboard-activity-sentiment.vue b/frontend/src/modules/dashboard/components/activity/dashboard-activity-sentiment.vue
index 0feaf40028..5268be5491 100644
--- a/frontend/src/modules/dashboard/components/activity/dashboard-activity-sentiment.vue
+++ b/frontend/src/modules/dashboard/components/activity/dashboard-activity-sentiment.vue
@@ -56,10 +56,7 @@
           @mouseleave="hoveredSentiment = ''"
           @click="handleSentimentClick(type)"
         >
-          <i
-            class="text-lg mr-2 flex items-center h-5"
-            :class="valuesByType[type].emoji"
-          />
+          <lf-icon :name="valuesByType[type].emoji" :size="20" class="mr-2" />
           <p
             class="text-sm font-medium capitalize pr-2"
           >
@@ -82,6 +79,7 @@ import AppLoading from '@/shared/loading/loading-placeholder.vue';
 import { useRouter } from 'vue-router';
 import { filterQueryService } from '@/shared/modules/filters/services/filter-query.service';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const router = useRouter();
 
@@ -112,15 +110,15 @@ const hoveredSentiment = ref('');
 const valuesByType: Record<string, { class: string, emoji: string }> = {
   positive: {
     class: 'bg-green-500',
-    emoji: 'ri-emotion-happy-line text-green-500',
+    emoji: 'face-grin text-green-500',
   },
   negative: {
     class: 'bg-red-500',
-    emoji: 'ri-emotion-unhappy-line text-red-500',
+    emoji: 'face-frown-open text-red-500',
   },
   neutral: {
     class: 'bg-gray-300',
-    emoji: 'ri-emotion-normal-line text-gray-400',
+    emoji: 'face-meh text-gray-400',
   },
 };
 
diff --git a/frontend/src/modules/dashboard/components/activity/dashboard-activity-types.vue b/frontend/src/modules/dashboard/components/activity/dashboard-activity-types.vue
index 0e74fd590e..12af5e412c 100644
--- a/frontend/src/modules/dashboard/components/activity/dashboard-activity-types.vue
+++ b/frontend/src/modules/dashboard/components/activity/dashboard-activity-types.vue
@@ -48,9 +48,7 @@
       v-if="!activityData.length || activityData.length === 0"
       class="flex items-center justify-center pt-6 pb-5"
     >
-      <div
-        class="ri-list-check-2 text-3xl text-gray-300 mr-4 h-10 flex items-center"
-      />
+      <lf-icon name="list-ul" class="text-gray-300 mr-4" :size="40" />
       <p
         class="text-xs leading-5 text-center italic text-gray-400"
       >
@@ -69,6 +67,7 @@ import { storeToRefs } from 'pinia';
 import AppLoading from '@/shared/loading/loading-placeholder.vue';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const { chartData } = mapGetters('dashboard');
 
diff --git a/frontend/src/modules/dashboard/components/conversations/dashboard-conversation-list.vue b/frontend/src/modules/dashboard/components/conversations/dashboard-conversation-list.vue
index 1167680f31..806f65a072 100644
--- a/frontend/src/modules/dashboard/components/conversations/dashboard-conversation-list.vue
+++ b/frontend/src/modules/dashboard/components/conversations/dashboard-conversation-list.vue
@@ -25,7 +25,7 @@
 
       <app-dashboard-empty-state
         v-if="recentConversations.length === 0"
-        icon-class="ri-question-answer-line"
+        icon-class="messages"
         class="pt-20 pb-17"
       >
         No conversations during this period
diff --git a/frontend/src/modules/dashboard/components/dashboard-empty-state.vue b/frontend/src/modules/dashboard/components/dashboard-empty-state.vue
index 9e18732637..03ec185451 100644
--- a/frontend/src/modules/dashboard/components/dashboard-empty-state.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-empty-state.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="flex items-center justify-center">
-    <div
-      v-if="props.iconClass"
-      class="text-3xl text-gray-300 mr-4 h-10 flex items-center"
-      :class="props.iconClass"
+    <lf-icon
+      v-if="props.icon"
+      :name="props.icon"
+      class="text-gray-300 mr-4"
+      :size="40"
     />
     <p
       class="text-xs leading-5 text-center italic text-gray-400"
@@ -15,9 +16,10 @@
 
 <script setup>
 import { defineProps } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
-  iconClass: {
+  icon: {
     type: String,
     required: false,
     default: '',
diff --git a/frontend/src/modules/dashboard/components/dashboard-integrations.vue b/frontend/src/modules/dashboard/components/dashboard-integrations.vue
index 2733c4bfa1..73a10ea135 100644
--- a/frontend/src/modules/dashboard/components/dashboard-integrations.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-integrations.vue
@@ -10,7 +10,7 @@
             Connecting integrations...
           </h6>
         </div>
-        <div v-if="progressError" class="px-4 text-xs text-gray-500 my-2">
+        <div v-if="!progressError" class="px-4 text-xs text-gray-500 my-2">
           <i class="ri-alert-line text-yellow-600" /> Error loading progress
         </div>
         <section
diff --git a/frontend/src/modules/dashboard/components/dashboard-members.vue b/frontend/src/modules/dashboard/components/dashboard-members.vue
index 681b966ec4..ca8d07d8ae 100644
--- a/frontend/src/modules/dashboard/components/dashboard-members.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-members.vue
@@ -79,7 +79,7 @@
             </app-dashboard-member-item>
             <app-dashboard-empty-state
               v-if="recentMembers.length === 0"
-              icon-class="ri-group-2-line"
+              icon="user-group-simple"
               class="pt-6 pb-5"
             >
               No new people during this period
@@ -113,19 +113,23 @@
       <section class="px-5 w-1/2">
         <div class="flex">
           <div class="w-5/12">
-            <div class="inline-flex items-center gap-2 mb-1">
+            <div class="inline-flex items-center mb-1">
               <h6
                 class="text-sm leading-5 font-semibold"
               >
                 Active people
-                <el-tooltip
-                  placement="top"
-                  content="People for whom at least one activity was tracked in the selected time period."
-                  popper-class="max-w-[260px]"
-                >
-                  <i class="ri-information-line text-sm ml-1 font-normal" />
-                </el-tooltip>
               </h6>
+              <el-tooltip
+                placement="top"
+                content="People for whom at least one activity was tracked in the selected time period."
+                popper-class="max-w-[260px]"
+              >
+                <lf-icon
+                  name="circle-info"
+                  class="ml-1"
+                  :size="13"
+                />
+              </el-tooltip>
             </div>
 
             <!-- info -->
@@ -179,7 +183,7 @@
             </app-dashboard-member-item>
             <app-dashboard-empty-state
               v-if="activeMembers.length === 0"
-              icon-class="ri-group-2-line"
+              icon="user-group-simple"
               class="pt-6 pb-5"
             >
               No active people during this period
@@ -224,6 +228,7 @@ import { filterQueryService } from '@/shared/modules/filters/services/filter-que
 import allMembers from '@/modules/member/config/saved-views/views/all-members';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const {
   chartData, members, period, activeMembers, recentMembers,
diff --git a/frontend/src/modules/dashboard/components/dashboard-organizations.vue b/frontend/src/modules/dashboard/components/dashboard-organizations.vue
index 2381d151b4..f9d43c10ed 100644
--- a/frontend/src/modules/dashboard/components/dashboard-organizations.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-organizations.vue
@@ -66,7 +66,7 @@
             />
             <app-dashboard-empty-state
               v-if="recentOrganizations.length === 0"
-              icon-class="ri-community-line"
+              icon="building"
               class="pt-6 pb-5"
             >
               No new organizations during this period
@@ -157,7 +157,7 @@
             />
             <app-dashboard-empty-state
               v-if="activeOrganizations.length === 0"
-              icon-class="ri-community-line"
+              icon="building"
               class="pt-6 pb-5"
             >
               No active organizations during this period
diff --git a/frontend/src/modules/dashboard/components/dashboard-project-group-drawer.vue b/frontend/src/modules/dashboard/components/dashboard-project-group-drawer.vue
index 02b869af37..30dd121609 100644
--- a/frontend/src/modules/dashboard/components/dashboard-project-group-drawer.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-project-group-drawer.vue
@@ -119,7 +119,7 @@
         </el-collapse>
 
         <!-- Load more button -->
-        <div v-if="isLoadMoreVisible" class="flex grow justify-center mt-8">
+        <div v-if="!isLoadMoreVisible" class="flex grow justify-center mt-8">
           <div
             v-if="loading"
             v-loading="loading"
@@ -130,14 +130,15 @@
             class="btn btn-link btn-link--primary"
             @click="onLoadMore"
           >
-            <i class="ri-arrow-down-line" /><span class="text-xs">Load more</span>
+            <lf-icon name="arrow-down" :size="14" />
+            <span class="text-xs">Load more</span>
           </el-button>
         </div>
       </div>
       <app-empty-state
         v-else
         class="mt-4"
-        icon="ri-stack-line"
+        icon="fa-light fa-layer-group"
         description="No projects found"
       />
     </template>
@@ -155,6 +156,7 @@ import {
   EventType,
   FeatureEventKey,
 } from '@/shared/modules/monitoring/types/event';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const emit = defineEmits(['update:isVisible']);
 const props = defineProps({
diff --git a/frontend/src/modules/dashboard/components/dashboard-project-group.vue b/frontend/src/modules/dashboard/components/dashboard-project-group.vue
index 345e6623fc..0e6df9a9bd 100644
--- a/frontend/src/modules/dashboard/components/dashboard-project-group.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-project-group.vue
@@ -43,7 +43,7 @@
         <el-button
           class="btn btn-link btn-link--md btn-link--primary btn--full"
         >
-          <i class="ri-external-link-line" />
+          <lf-icon name="arrow-up-right-from-square" :size="14" />
           <span>Settings</span>
         </el-button>
       </router-link>
@@ -67,6 +67,7 @@ import usePermissions from '@/shared/modules/permissions/helpers/usePermissions'
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import { LfRole } from '@/shared/modules/permissions/types/Roles';
 import AppDashboardProjectGroupDrawer from './dashboard-project-group-drawer.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const lsSegmentsStore = useLfSegmentsStore();
 const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
diff --git a/frontend/src/modules/dashboard/components/dashboard-upgrade-plan-widget.vue b/frontend/src/modules/dashboard/components/dashboard-upgrade-plan-widget.vue
deleted file mode 100644
index b2334f322f..0000000000
--- a/frontend/src/modules/dashboard/components/dashboard-upgrade-plan-widget.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="panel px-5 pb-5 pt-6">
-    <div class="flex justify-center pb-4">
-      <div class="bg-primary-500 flex items-center rounded-2xl py-1 px-2">
-        <i class="ri-vip-crown-2-fill text-white text-base h-4 flex items-center" />
-        <span class="text-xs text-white font-medium leading-4 pl-2">Scale plan</span>
-      </div>
-    </div>
-    <h6 class="text-center text-sm font-semibold pb-4">
-      Unlock the full power of crowd.dev
-    </h6>
-    <div>
-      <article class="flex pb-2">
-        <i class="ri-checkbox-circle-fill text-base text-black h-4.5 flex items-center" />
-        <span class="pl-2 text-xs leading-2 text-gray-600">Funnel sales prospects to your CRM.</span>
-      </article>
-      <article class="flex pb-2">
-        <i class="ri-checkbox-circle-fill text-base text-black h-4.5 flex items-center" />
-        <span class="pl-2 text-xs leading-2 text-gray-600">Automatically enrich people and organizations.</span>
-      </article>
-      <article class="flex pb-2">
-        <i class="ri-checkbox-circle-fill text-base text-black h-4.5 flex items-center" />
-        <span class="pl-2 text-xs leading-2 text-gray-600">Connect LinkedIn for a stronger pipeline.</span>
-      </article>
-    </div>
-    <div class="text-xs text-center text-gray-500 italic pt-1 pb-4">
-      ...and more
-    </div>
-    <router-link :to="{ name: 'settings', query: { activeTab: 'plans' } }" class="block">
-      <button type="button" class="btn btn--primary btn--sm w-full">
-        Upgrade plan
-      </button>
-    </router-link>
-  </div>
-</template>
-
-<script setup lang="ts">
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfUpgradePlanWidget',
-};
-</script>
diff --git a/frontend/src/modules/dashboard/components/shared/dashboard-badge.vue b/frontend/src/modules/dashboard/components/shared/dashboard-badge.vue
index 09d1b0a206..ac26626634 100644
--- a/frontend/src/modules/dashboard/components/shared/dashboard-badge.vue
+++ b/frontend/src/modules/dashboard/components/shared/dashboard-badge.vue
@@ -3,13 +3,17 @@
     class="py-0.5 px-1.5 rounded text-xs leading-5 font-medium flex"
     :class="[typeClass]"
   >
-    <i
+    <lf-icon
       v-if="type === 'success'"
-      class="ri-arrow-up-line text-base text-green-700 mr-1 flex items-center"
+      name="arrow-up"
+      :size="16"
+      class="text-green-700"
     />
-    <i
+    <lf-icon
       v-else-if="type === 'danger'"
-      class="ri-arrow-down-line text-base text-red-700 mr-1 flex items-center"
+      name="arrow-down"
+      :size="16"
+      class="text-red-700"
     />
     <slot />
   </div>
@@ -17,6 +21,7 @@
 
 <script setup>
 import { defineProps, computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
   type: {
diff --git a/frontend/src/modules/dashboard/pages/dashboard-page.vue b/frontend/src/modules/dashboard/pages/dashboard-page.vue
index d07a8bcdb1..9aaafe10e9 100644
--- a/frontend/src/modules/dashboard/pages/dashboard-page.vue
+++ b/frontend/src/modules/dashboard/pages/dashboard-page.vue
@@ -17,7 +17,7 @@
               }"
             />
             <div class=" text-sm flex items-center gap-2">
-              <i class="text-gray-500 ri-time-line text-base" />
+              <lf-icon name="circle-info" :size="16" class="text-gray-500" />
               <span class="text-gray-500">Data on this page is refreshed every 15 min.</span>
             </div>
           </div>
@@ -60,6 +60,7 @@ import { storeToRefs } from 'pinia';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import LfDashboardIntegrations from '@/modules/dashboard/components/dashboard-integrations.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const authStore = useAuthStore();
 const { tenant } = storeToRefs(authStore);
diff --git a/frontend/src/modules/layout/components/menu/menu-links.vue b/frontend/src/modules/layout/components/menu/menu-links.vue
deleted file mode 100644
index 2a3c9f42f8..0000000000
--- a/frontend/src/modules/layout/components/menu/menu-links.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <nav class="px-1 flex flex-col">
-    <el-tooltip
-      v-for="(link, li) of props.links"
-      :key="`menu-link-${li}`"
-      :disabled="!props.collapsed"
-      :hide-after="50"
-      :content="link.label"
-      effect="dark"
-      placement="right"
-      raw-content
-    >
-      <template
-        v-if="link.display({
-          user: user,
-          tenant: tenant,
-        })"
-      >
-        <router-link
-          v-if="link.routeName"
-          :id="`menu-${link.id}`"
-          :to="{ name: link.routeName, ...link.routeOptions }"
-          class="rounded-md h-8 transition !text-gray-400 flex items-center whitespace-nowrap
-          flex-nowrap px-1.5 hover:bg-gray-50 mb-2 overflow-hidden"
-          :active-class="!disableActiveClass ? '!bg-gray-100 font-medium !text-gray-900' : ''"
-          :class="props.linkClass"
-        >
-          <i v-if="link.icon" :class="[link.icon, props.iconClass]" class="text-lg mr-3" />
-          <span class="!text-gray-900">
-            {{ link.label }}
-          </span>
-        </router-link>
-        <a
-          v-else-if="link.href || link.click"
-          :id="`menu-${link.id}`"
-          :href="link.href"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="rounded-md h-8 transition !text-gray-400 flex items-center justify-between
-          group whitespace-nowrap flex-nowrap px-1.5 hover:bg-gray-50 mb-2 cursor-pointer overflow-hidden"
-          :class="props.linkClass"
-          @click="link.click && link.click()"
-        >
-          <div class="flex items-center">
-            <i v-if="link.icon" :class="[link.icon, props.iconClass]" class="text-lg mr-3" />
-            <span class="!text-gray-900">
-              {{ link.label }}
-            </span>
-          </div>
-          <i v-if="link.href" class="ri-external-link-line text-base text-gray-300 opacity-0 transition group-hover:opacity-100" />
-        </a>
-      </template>
-    </el-tooltip>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { RouterLink } from 'vue-router';
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-import { useAuthStore } from '@/modules/auth/store/auth.store';
-import { storeToRefs } from 'pinia';
-
-const props = defineProps<{
-  collapsed: boolean,
-  links: MenuLink[],
-  linkClass?: string,
-  iconClass?: string,
-  disableActiveClass?: boolean,
-}>();
-
-const authStore = useAuthStore();
-const { user, tenant } = storeToRefs(authStore);
-
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfMenuLinks',
-};
-</script>
diff --git a/frontend/src/modules/layout/components/menu/menu-quickstart.vue b/frontend/src/modules/layout/components/menu/menu-quickstart.vue
deleted file mode 100644
index 312161358f..0000000000
--- a/frontend/src/modules/layout/components/menu/menu-quickstart.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div
-    v-if="isPrimaryWorkspace && notcompletedGuides.length > 0"
-    class="px-1"
-  >
-    <el-tooltip
-      key="menu-link-quickstart"
-      :disabled="!props.collapsed"
-      :hide-after="50"
-      content="Welcome aboard"
-      effect="dark"
-      placement="right"
-      raw-content
-    >
-      <router-link
-        id="menu-quickstart"
-        :to="{ name: 'welcomeaboard' }"
-        class="rounded-md h-8 transition !text-gray-400 flex items-center whitespace-nowrap
-          flex-nowrap px-1.5 hover:bg-gray-50 mb-2 overflow-hidden text-sm"
-        active-class="!bg-gray-100 font-medium !text-gray-900"
-      >
-        <div class="w-5 mr-3 block text-center">
-          👋
-        </div>
-        <div class="flex flex-grow justify-between">
-          <span class="!text-gray-900">
-            Welcome aboard
-          </span>
-          <div class="text-xs font-normal leading-6 px-1 rounded bg-gray-100 text-gray-400">
-            {{ guides.length - notcompletedGuides.length }}/{{ guides.length }}
-          </div>
-        </div>
-      </router-link>
-    </el-tooltip>
-    <div class="border-t border-gray-200 mb-3 mt-1" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted } from 'vue';
-import { mapGetters } from '@/shared/vuex/vuex.helpers';
-
-const props = defineProps<{
-  collapsed: boolean,
-}>();
-
-const { rows } = mapGetters('tenant');
-const authStore = useAuthStore();
-const { tenant } = storeToRefs(authStore);
-
-const isPrimaryWorkspace = computed(() => {
-  const tenants = rows.value;
-  if (tenants.length > 0) {
-    const oldestTenant = tenants.reduce((oldest: any, tenant: any) => {
-      const oldestDate = new Date(oldest.createdAt);
-      const currentTenantDate = new Date(tenant.createdAt);
-      return oldestDate > currentTenantDate ? tenant : oldest;
-    }, tenants[0]);
-    return oldestTenant.id === tenant.value.id;
-  }
-  return false;
-});
-
-onMounted(() => {
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfMenuQuickstart',
-};
-</script>
diff --git a/frontend/src/modules/layout/components/menu/menu-support-help.vue b/frontend/src/modules/layout/components/menu/menu-support-help.vue
deleted file mode 100644
index cdb9c078b2..0000000000
--- a/frontend/src/modules/layout/components/menu/menu-support-help.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="flex flex-col items-center pb-1">
-    <div class="h-12 w-12 rounded-full overflow-hidden mb-2">
-      <img alt="Jesse Singer" src="/images/quickstart/jesse.jpeg" class="object-cover" />
-    </div>
-    <p class="text-center text-sm font-medium mb-1 text-black">
-      Jesse Singer
-    </p>
-    <p class="text-center text-2xs leading-5 text-gray-500">
-      Customer Success
-    </p>
-  </div>
-  <div>
-    <a href="mailto:help@crowd.dev" target="_blank" rel="noopener noreferrer" class="block">
-      <button type="button" class="btn btn--sm btn--bordered flex items-center w-full mt-3">
-        <i class="ri-mail-line mr-2 text-base h-4 flex items-center" /> Get in touch
-      </button>
-    </a>
-    <a href="https://cal.com/team/crowddotdev/get-personalised-onboarding" target="_blank" rel="noopener noreferrer" class="block">
-      <button type="button" class="btn btn--sm btn--bordered flex items-center w-full mt-3">
-        <i class="ri-calendar-line mr-2 text-base h-4 flex items-center" /> Book a demo
-      </button>
-    </a>
-  </div>
-</template>
-
-<script setup lang="ts">
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfMenuSupportHelp',
-};
-</script>
diff --git a/frontend/src/modules/layout/components/menu/menu-support.vue b/frontend/src/modules/layout/components/menu/menu-support.vue
deleted file mode 100644
index 9c08e77ab4..0000000000
--- a/frontend/src/modules/layout/components/menu/menu-support.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <el-popover
-    placement="right-end"
-    :width="260"
-    trigger="click"
-    popper-class="!pt-2 !px-0 !pb-1 transform translate-x-1"
-    @show="isDropdownOpen = true"
-    @hide="isDropdownOpen = false"
-  >
-    <template #reference>
-      <div class="-mr-4 pr-4 px-1">
-        <el-tooltip
-          :disabled="!props.collapsed || isDropdownOpen"
-          :hide-after="50"
-          content="Help & support"
-          effect="dark"
-          placement="right"
-          raw-content
-        >
-          <div
-            class="rounded-md h-8 transition !text-gray-400 flex items-center
-          group whitespace-nowrap flex-nowrap px-1.5 hover:bg-gray-50 mb-2 cursor-pointer overflow-hidden"
-            :class="isDropdownOpen ? 'bg-gray-100' : ''"
-          >
-            <i class="ri-question-line text-lg mr-3" />
-            <span v-if="!props.collapsed" class="text-sm !text-gray-900">
-              Resources & support
-            </span>
-          </div>
-        </el-tooltip>
-      </div>
-    </template>
-
-    <div class="-mb- px-1">
-      <div class="pt-1 pb-3 px-4">
-        <p class="uppercase text-2xs font-semibold tracking-1 text-gray-400 leading-6 text-center">
-          Resources & Support
-        </p>
-      </div>
-      <div class="px-3 -mx-1 border-b border-gray-100 pb-4 mb-2">
-        <lf-menu-support-help />
-      </div>
-      <lf-menu-links
-        :collapsed="false"
-        :links="supportMenu"
-        link-class="!p-3 !h-10 !mb-1 !text-xs"
-        icon-class="!text-base"
-      />
-    </div>
-
-    <el-divider class="!my-2 border-gray-100 w-full" />
-
-    <div class="px-1">
-      <lf-system-status :check-status="isDropdownOpen" />
-    </div>
-  </el-popover>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import LfMenuLinks from '@/modules/layout/components/menu/menu-links.vue';
-import { supportMenu } from '@/modules/layout/config/menu';
-import LfSystemStatus from '@/modules/layout/components/system-status/system-status.vue';
-import LfMenuSupportHelp from '@/modules/layout/components/menu/menu-support-help.vue';
-
-const props = defineProps<{
-  collapsed: boolean
-}>();
-
-const isDropdownOpen = ref<boolean>(false);
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfMenuSupport',
-};
-</script>
diff --git a/frontend/src/modules/layout/components/menu/menu.vue b/frontend/src/modules/layout/components/menu/menu.vue
index e0a91f04b4..de26b837d1 100644
--- a/frontend/src/modules/layout/components/menu/menu.vue
+++ b/frontend/src/modules/layout/components/menu/menu.vue
@@ -94,7 +94,6 @@ import { useOrganizationStore } from '@/modules/organization/store/pinia';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import LfMenuLink from '@/modules/layout/components/menu/menu-link.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const store = useStore();
diff --git a/frontend/src/modules/layout/components/menu/workspace/menu-workspace-card.vue b/frontend/src/modules/layout/components/menu/workspace/menu-workspace-card.vue
deleted file mode 100644
index 23fc373b26..0000000000
--- a/frontend/src/modules/layout/components/menu/workspace/menu-workspace-card.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <section v-if="props.tenant" class="transition flex items-center cursor-pointer">
-    <div class="flex items-center justify-between overflow-hidden w-full">
-      <div class="flex items-center">
-        <div>
-          <app-squared-avatar
-            :name="props.tenant.name"
-          />
-        </div>
-        <div class="pl-3">
-          <h6 class="text-sm leading-4 !font-medium mb-1 text-black whitespace-nowrap">
-            {{ props.tenant.name }}
-          </h6>
-          <div class="flex items-center flex-nowrap">
-            <p class="text-2xs text-gray-500">
-              {{ getPlan(props.tenant.plan) }}
-            </p>
-            <router-link
-              :to="{ name: 'settings', query: { activeTab: 'plans' } }"
-              class="flex items-center"
-              @click.stop
-            >
-              <span
-                v-if="getTrialDate(props.tenant)"
-                class="badge badge--xs badge--light-yellow ml-1 hover:cursor-pointer"
-              >{{
-                getTrialDate(props.tenant)
-              }}</span>
-            </router-link>
-          </div>
-        </div>
-      </div>
-      <div>
-        <slot />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import config from '@/config';
-import { getTrialDate } from '@/utils/date';
-import { TenantModel } from '@/modules/tenant/types/TenantModel';
-
-const props = defineProps<{
-  tenant: TenantModel,
-}>();
-
-const getPlan = (plan: string) => {
-  if ((config as any).isCommunityVersion) {
-    return 'Community';
-  }
-  return plan;
-};
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfMenuWorkspaceCard',
-};
-</script>
diff --git a/frontend/src/modules/layout/config/links/activities.ts b/frontend/src/modules/layout/config/links/activities.ts
deleted file mode 100644
index 5fe1a23e4f..0000000000
--- a/frontend/src/modules/layout/config/links/activities.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
-
-const activities: MenuLink = {
-  id: 'activities',
-  label: 'Activities',
-  icon: 'ri-radar-line',
-  routeName: 'activity',
-  display: () => {
-    const { hasPermission } = usePermissions();
-    return hasPermission(LfPermission.activityRead);
-  },
-};
-
-export default activities;
diff --git a/frontend/src/modules/layout/config/links/api-keys.ts b/frontend/src/modules/layout/config/links/api-keys.ts
deleted file mode 100644
index f98218cd1d..0000000000
--- a/frontend/src/modules/layout/config/links/api-keys.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
-
-const apiKeys: MenuLink = {
-  id: 'api-keys',
-  label: 'API Keys',
-  routeName: 'settings',
-  routeOptions: {
-    query: { activeTab: 'api-keys' },
-  },
-  display: () => {
-    const { hasPermission } = usePermissions();
-    return hasPermission(LfPermission.settingsEdit);
-  },
-};
-
-export default apiKeys;
diff --git a/frontend/src/modules/layout/config/links/automations.ts b/frontend/src/modules/layout/config/links/automations.ts
deleted file mode 100644
index 5c48800f45..0000000000
--- a/frontend/src/modules/layout/config/links/automations.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
-
-const automations: MenuLink = {
-  id: 'automations',
-  label: 'Automations',
-  icon: 'ri-mind-map',
-  routeName: 'automations',
-  display: () => {
-    const { hasPermission } = usePermissions();
-    return hasPermission(LfPermission.automationRead);
-  },
-};
-
-export default automations;
diff --git a/frontend/src/modules/layout/config/links/changelog.ts b/frontend/src/modules/layout/config/links/changelog.ts
deleted file mode 100644
index 11964d7986..0000000000
--- a/frontend/src/modules/layout/config/links/changelog.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-
-const changelog: MenuLink = {
-  id: 'changelog',
-  label: 'Changelog',
-  icon: 'ri-megaphone-line',
-  href: 'https://changelog.crowd.dev',
-  display: () => true,
-};
-
-export default changelog;
diff --git a/frontend/src/modules/layout/config/links/community.ts b/frontend/src/modules/layout/config/links/community.ts
deleted file mode 100644
index b9de29f232..0000000000
--- a/frontend/src/modules/layout/config/links/community.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-
-const community: MenuLink = {
-  id: 'community',
-  label: 'Community',
-  icon: 'ri-discord-fill',
-  href: 'https://crowd.dev/discord',
-  display: () => true,
-};
-
-export default community;
diff --git a/frontend/src/modules/layout/config/links/contacts.ts b/frontend/src/modules/layout/config/links/contacts.ts
deleted file mode 100644
index 7724c71c8d..0000000000
--- a/frontend/src/modules/layout/config/links/contacts.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
-
-const contacts: MenuLink = {
-  id: 'contacts',
-  label: 'People',
-  icon: 'ri-group-2-line',
-  routeName: 'member',
-  display: () => {
-    const { hasPermission } = usePermissions();
-    return hasPermission(LfPermission.memberRead);
-  },
-};
-
-export default contacts;
diff --git a/frontend/src/modules/layout/config/links/documentation.ts b/frontend/src/modules/layout/config/links/documentation.ts
deleted file mode 100644
index 8a6f65cb21..0000000000
--- a/frontend/src/modules/layout/config/links/documentation.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-
-const documentation: MenuLink = {
-  id: 'documentation',
-  label: 'Documentation',
-  icon: 'ri-book-open-line',
-  href: 'https://docs.crowd.dev',
-  display: () => true,
-};
-
-export default documentation;
diff --git a/frontend/src/modules/layout/config/links/eagle-eye.ts b/frontend/src/modules/layout/config/links/eagle-eye.ts
deleted file mode 100644
index 06c482f26d..0000000000
--- a/frontend/src/modules/layout/config/links/eagle-eye.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
-
-const eagleEye: MenuLink = {
-  id: 'eagle-eye',
-  label: 'Eagle Eye',
-  icon: 'ri-search-eye-line',
-  routeName: 'eagleEye',
-  display: () => {
-    const { hasPermission } = usePermissions();
-    return hasPermission(LfPermission.eagleEyeRead);
-  },
-};
-
-export default eagleEye;
diff --git a/frontend/src/modules/layout/config/links/home.ts b/frontend/src/modules/layout/config/links/home.ts
deleted file mode 100644
index 3e08964ec2..0000000000
--- a/frontend/src/modules/layout/config/links/home.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-
-const home: MenuLink = {
-  id: 'home',
-  label: 'Home',
-  icon: 'ri-home-5-line',
-  routeName: 'dashboard',
-  display: () => true,
-};
-
-export default home;
diff --git a/frontend/src/modules/layout/config/links/integrations.ts b/frontend/src/modules/layout/config/links/integrations.ts
deleted file mode 100644
index e9836dd6dd..0000000000
--- a/frontend/src/modules/layout/config/links/integrations.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-
-const integrations: MenuLink = {
-  id: 'integrations',
-  label: 'Integrations',
-  icon: 'ri-apps-2-line',
-  routeName: 'integration',
-  display: () => true,
-};
-
-export default integrations;
diff --git a/frontend/src/modules/layout/config/links/organizations.ts b/frontend/src/modules/layout/config/links/organizations.ts
deleted file mode 100644
index ddbd91d584..0000000000
--- a/frontend/src/modules/layout/config/links/organizations.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-
-const organizations: MenuLink = {
-  id: 'organizations',
-  label: 'Organizations',
-  icon: 'ri-community-line',
-  routeName: 'organization',
-  display: () => true,
-};
-
-export default organizations;
diff --git a/frontend/src/modules/layout/config/links/plans-billing.ts b/frontend/src/modules/layout/config/links/plans-billing.ts
deleted file mode 100644
index e99ca5bb23..0000000000
--- a/frontend/src/modules/layout/config/links/plans-billing.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
-
-const plansBilling: MenuLink = {
-  id: 'plans-billing',
-  label: 'Plans & billing',
-  routeName: 'settings',
-  routeOptions: {
-    query: { activeTab: 'plans' },
-  },
-  display: () => {
-    const { hasPermission } = usePermissions();
-    return hasPermission(LfPermission.settingsEdit);
-  },
-};
-
-export default plansBilling;
diff --git a/frontend/src/modules/layout/config/links/users-permissions.ts b/frontend/src/modules/layout/config/links/users-permissions.ts
deleted file mode 100644
index dfecad71be..0000000000
--- a/frontend/src/modules/layout/config/links/users-permissions.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
-
-const usersPermissions: MenuLink = {
-  id: 'users-permissions',
-  label: 'Users & permissions',
-  routeName: 'settings',
-  routeOptions: {
-    query: { activeTab: 'users' },
-  },
-  display: () => {
-    const { hasPermission } = usePermissions();
-    return hasPermission(LfPermission.settingsEdit);
-  },
-};
-
-export default usersPermissions;
diff --git a/frontend/src/modules/layout/config/menu.ts b/frontend/src/modules/layout/config/menu.ts
deleted file mode 100644
index 2499b640a7..0000000000
--- a/frontend/src/modules/layout/config/menu.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { MenuLink } from '@/modules/layout/types/MenuLink';
-import home from './links/home';
-import contacts from './links/contacts';
-import organizations from './links/organizations';
-import activities from './links/activities';
-import eagleEye from './links/eagle-eye';
-import automations from './links/automations';
-import integrations from './links/integrations';
-import documentation from './links/documentation';
-import changelog from './links/changelog';
-import community from './links/community';
-import usersPermissions from './links/users-permissions';
-import apiKeys from './links/api-keys';
-import plansBilling from './links/plans-billing';
-
-export const mainMenu: MenuLink[] = [
-  home,
-  contacts,
-  organizations,
-  activities,
-  eagleEye,
-];
-
-// Bottom menu
-export const bottomMenu: MenuLink[] = [
-  automations,
-  integrations,
-];
-
-// Support menu
-export const supportMenu: MenuLink[] = [
-  documentation,
-  changelog,
-  community,
-];
-
-// Tenant menu
-export const tenantMenu: MenuLink[] = [
-  usersPermissions,
-  apiKeys,
-  plansBilling,
-];
diff --git a/frontend/src/modules/lf/segments/components/view/lf-search-input.vue b/frontend/src/modules/lf/segments/components/view/lf-search-input.vue
index ddfc5c8cff..67c7dfb60c 100644
--- a/frontend/src/modules/lf/segments/components/view/lf-search-input.vue
+++ b/frontend/src/modules/lf/segments/components/view/lf-search-input.vue
@@ -27,7 +27,7 @@ const searchInput = ref();
 
 const SearchIcon = h(
   'i', // type
-  { class: 'ri-search-line' }, // props
+  { class: 'fa-light fa-magnifying-glass' }, // props
   [],
 );
 
diff --git a/frontend/src/shared/modules/filters/components/FilterSearch.vue b/frontend/src/shared/modules/filters/components/FilterSearch.vue
index d4b35c145d..daec3e8b87 100644
--- a/frontend/src/shared/modules/filters/components/FilterSearch.vue
+++ b/frontend/src/shared/modules/filters/components/FilterSearch.vue
@@ -8,7 +8,7 @@
     @input="changeValue($event)"
   >
     <template #prefix>
-      <lf-icon name="magnifying-glass" class="text-gray-400" :size="16"/>
+      <lf-icon name="magnifying-glass" class="text-gray-400" :size="16" />
     </template>
     <template v-if="$slots.append" #append>
       <slot name="append" />