Change icons on overview

CrowdDotDev · Oct 7, 2024 · 4093069 · 4093069
1 parent 547c1cd
commit 4093069
Show file tree

Hide file tree

Showing 38 changed files with 59 additions and 641 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/frontend/src/modules/dashboard/components/shared/dashboard-badge.vue b/frontend/src/modules/dashboard/components/shared/dashboard-badge.vue
@@ -3,20 +3,25 @@
     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>
 </template>
 
 <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
@@ -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);