[WEB-5305] refactor: migrate emoji and logo components to propel and remove duplication (#4607)

2025-11-06 18:52:46 +05:30
parent 2416402e28
commit 5b767d12db
94 changed files with 119 additions and 217 deletions
@@ -1,103 +0,0 @@
-"use client";
-
-import { FC } from "react";
-// Due to some weird issue with the import order, the import of useFontFaceObserver
-// should be after the imported here rather than some below helper functions as it is in the original file
-// eslint-disable-next-line import/order
-import useFontFaceObserver from "use-font-face-observer";
-// plane imports
-import { getEmojiSize, LUCIDE_ICONS_LIST, stringToEmoji } from "@plane/propel/emoji-icon-picker";
-import { TLogoProps } from "@plane/types";
-
-type Props = {
-  logo: TLogoProps;
-  size?: number;
-  type?: "lucide" | "material";
-};
-
-export const Logo: FC<Props> = (props) => {
-  const { logo, size = 16, type = "material" } = props;
-
-  // destructuring the logo object
-  const { in_use, emoji, icon } = logo;
-
-  // derived values
-  const value = in_use === "emoji" ? emoji?.value : icon?.name;
-  const color = icon?.color;
-  const lucideIcon = LUCIDE_ICONS_LIST.find((item) => item.name === value);
-
-  const isMaterialSymbolsFontLoaded = useFontFaceObserver([
-    {
-      family: `Material Symbols Rounded`,
-      style: `normal`,
-      weight: `normal`,
-      stretch: `condensed`,
-    },
-  ]);
-  // if no value, return empty fragment
-  if (!value) return <></>;
-
-  if (!isMaterialSymbolsFontLoaded) {
-    return (
-      <span
-        style={{
-          height: size,
-          width: size,
-        }}
-        className="rounded animate-pulse bg-custom-background-80"
-      />
-    );
-  }
-
-  // emoji
-  if (in_use === "emoji") {
-    return (
-      <span
-        className="flex items-center justify-center"
-        style={{
-          fontSize: `${getEmojiSize(size)}rem`,
-          lineHeight: `${getEmojiSize(size)}rem`,
-          height: size,
-          width: size,
-        }}
-      >
-        {stringToEmoji(emoji?.value || "")}
-      </span>
-    );
-  }
-
-  // icon
-  if (in_use === "icon") {
-    return (
-      <>
-        {type === "lucide" ? (
-          <>
-            {lucideIcon && (
-              <lucideIcon.element
-                style={{
-                  color: color,
-                  height: size,
-                  width: size,
-                }}
-              />
-            )}
-          </>
-        ) : (
-          <span
-            className="material-symbols-rounded"
-            style={{
-              fontSize: size,
-              color: color,
-              scale: "115%",
-            }}
-          >
-            {value}
-          </span>
-        )}
-      </>
-    );
-  }
-
-  // if no value, return empty fragment
-  return <></>;
-};
@@ -1,8 +1,8 @@
 import { FC } from "react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ISvgIcons } from "@plane/propel/icons";
 import { TLogoProps } from "@plane/types";
 import { getFileURL } from "@plane/utils";
-import { Logo } from "@/components/common";
 import { truncateText } from "@/helpers/string.helper";
 type TSwitcherLabelProps = {
  logo_props?: TLogoProps;
@@ -2,12 +2,13 @@

 import { useState } from "react";
 import { observer } from "mobx-react";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
 // types
 // ui
-import { EmojiIconPicker, EmojiIconPickerTypes, Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 // helpers
 import { getPageName } from "@/helpers/page.helper";
 // hooks
@@ -89,7 +90,7 @@ export const PageBreadcrumbItem: React.FC<IPageBreadcrumbProps> = observer(
          <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
            {showLogo && (
              <div className="flex h-5 w-5 items-center justify-center overflow-hidden">
-                <EmojiIconPicker
+                <EmojiPicker
                  isOpen={isOpen}
                  handleToggle={(val: boolean) => setIsOpen(val)}
                  className="flex items-center justify-center"
@@ -1,10 +1,9 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { EmojiIconPicker, EmojiIconPickerTypes } from "@plane/ui";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { cn } from "@plane/utils";
 // components
-import { Logo } from "@/components/common";
 // store
 import { TPageInstance } from "@/store/pages/base-page";

@@ -27,7 +26,7 @@ export const PageEditorHeaderLogoPicker: React.FC<Props> = observer((props) => {
        "max-h-[56px] pointer-events-auto": isLogoSelected,
      })}
    >
-      <EmojiIconPicker
+      <EmojiPicker
        isOpen={isLogoPickerOpen}
        handleToggle={(val) => setIsLogoPickerOpen(val)}
        className="flex items-center justify-center"
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { SmilePlus } from "lucide-react";
 // plane imports
 import type { EditorTitleRefApi } from "@plane/editor";
-import { EmojiIconPicker, EmojiIconPickerTypes } from "@plane/ui";
+import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
 import { cn } from "@plane/utils";
 // plane web components
 // import { PageTemplatePicker } from "@/plane-web/components/pages";
@@ -41,7 +41,7 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
          )}
        >
          {!isLogoSelected && (
-            <EmojiIconPicker
+            <EmojiPicker
              isOpen={isLogoPickerOpen}
              handleToggle={(val) => setIsLogoPickerOpen(val)}
              className="flex items-center justify-center"
@@ -5,11 +5,11 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Loader } from "lucide-react";
 // plane imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ChevronRightIcon, PageIcon, RestrictedPageIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { TPageNavigationTabs } from "@plane/types";
 import { cn } from "@plane/utils";
-import { Logo } from "@/components/common";
 import { ListItem } from "@/components/core/list";
 // components
 import { BlockItemAction } from "@/components/pages/list";
@@ -5,13 +5,13 @@ import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import type { TLogoProps } from "@plane/types";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { cn } from "@plane/utils";
 // ce imports
 import type { TMovePageModalProps } from "@/ce/components/pages/modals";
 // components
-import { Logo } from "@/components/common/logo";
 import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
 // hooks
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
@@ -8,11 +8,11 @@ import { ETabIndices, EPageAccess } from "@plane/constants";
 // i18n
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
 import { TPage } from "@plane/types";
 // ui
-import { EmojiIconPicker, EmojiIconPickerTypes, Input } from "@plane/ui";
-import { Logo } from "@/components/common";
+import { Input } from "@plane/ui";
 // constants
 import { AccessField } from "@/components/common/access-field";
 // helpers
@@ -68,7 +68,7 @@ export const PageForm: React.FC<Props> = (props) => {
      <div className="space-y-5 p-5">
        <h3 className="text-xl font-medium text-custom-text-200">Create page</h3>
        <div className="flex items-start gap-2 h-9 w-full">
-          <EmojiIconPicker
+          <EmojiPicker
            isOpen={isOpen}
            handleToggle={(val: boolean) => setIsOpen(val)}
            className="flex items-center justify-center flex-shrink0"
@@ -1,10 +1,10 @@
 "use client";

+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
 // plane imports
 import { IFavorite, TLogoProps } from "@plane/types";
 // components
-import { Logo } from "@/components/common";
 // plane web constants
 import { FAVORITE_ITEM_ICONS, FAVORITE_ITEM_LINKS } from "@/plane-web/constants";

@@ -2,8 +2,8 @@ import set from "lodash/set";
 import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
 // plane imports
 import { EPageAccess } from "@plane/constants";
+import { TChangeHandlerProps } from "@plane/propel/emoji-icon-picker";
 import { TDocumentPayload, TLogoProps, TNameDescriptionLoader, TPage } from "@plane/types";
-import { TChangeHandlerProps } from "@plane/ui";
 import { convertHexEmojiToDecimal } from "@plane/utils";
 // plane web store
 import {
@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import type { TPageEmbedConfig } from "@plane/editor";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { EmptyPageIcon, PageIcon, RestrictedPageIcon } from "@plane/propel/icons";
 import type { TPage } from "@plane/types";
 import { AlertModalCore } from "@plane/ui";
 import { cn, getPageName } from "@plane/utils";
-import { Logo } from "@/components/common/logo";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web components
@@ -2,11 +2,10 @@

 import { FC, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
 // plane imports
-import { EmojiIconPicker, EmojiIconPickerTypes } from "@plane/ui";
 // components
-import { Logo } from "@/components/common";
 import { ListItem } from "@/components/core/list";
 // helpers
 import { getPageName } from "@/helpers/page.helper";
@@ -44,7 +43,7 @@ export const WikiPageListBlock: FC<TPageListBlock> = observer((props) => {
    <ListItem
      prependTitleElement={
        <>
-          <EmojiIconPicker
+          <EmojiPicker
            isOpen={isOpen}
            handleToggle={(val: boolean) => setIsOpen(val)}
            className="flex items-center justify-center"
@@ -7,10 +7,10 @@ import { WORKSPACE_PAGE_TRACKER_EVENTS } from "@plane/constants";
 // editor
 import type { EditorRefApi } from "@plane/editor";
 // ui
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { EmptyPageIcon } from "@plane/propel/icons";
-import { AlertModalCore } from "@plane/ui";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Logo } from "@/components/common";
+import { AlertModalCore } from "@plane/ui";
 // helpers
 import { getPageName } from "@plane/utils";
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
@@ -7,10 +7,10 @@ import { PAGE_DELETED } from "@plane/constants";
 // editor
 import { EditorRefApi } from "@plane/editor";
 // ui
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { EmptyPageIcon } from "@plane/propel/icons";
-import { AlertModalCore } from "@plane/ui";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Logo } from "@/components/common";
+import { AlertModalCore } from "@plane/ui";
 // helpers
 import { getPageName } from "@/helpers/page.helper";
 // plane web hooks
@@ -7,12 +7,12 @@ import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 import { ArchiveIcon, Loader } from "lucide-react";
 // plane imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ChevronRightIcon, EmptyPageIcon, PageIcon, RestrictedPageIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { EPageAccess, TPageDragPayload, TPageNavigationTabs } from "@plane/types";
 import { cn, getPageName } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web imports
@@ -1,6 +1,6 @@
 // plane imports
 import { RANDOM_EMOJI_CODES } from "@plane/constants";
-import { LUCIDE_ICONS_LIST } from "@plane/ui";
+import { LUCIDE_ICONS_LIST } from "@plane/propel/emoji-icon-picker";

 export const getRandomEmoji = () => RANDOM_EMOJI_CODES[Math.floor(Math.random() * RANDOM_EMOJI_CODES.length)];

@@ -3,8 +3,8 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // ui
-import { PhotoFilterIcon } from "@plane/propel/icons";
 import { Logo } from "@plane/propel/emoji-icon-picker";
+import { PhotoFilterIcon } from "@plane/propel/icons";
 // hooks
 import { useView } from "@/plane-web/hooks/store/use-published-view";
 // store
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
-import { PageIcon } from "@plane/propel/icons";
 import { Logo } from "@plane/propel/emoji-icon-picker";
+import { PageIcon } from "@plane/propel/icons";
 import type { IPage } from "@/plane-web/store/pages";

 type Props = {
@@ -3,8 +3,9 @@ import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ArchiveIcon, PageIcon } from "@plane/propel/icons";
-import { Loader, Logo } from "@plane/ui";
+import { Loader } from "@plane/ui";
 // plane web imports
 import { usePage, usePagesList } from "@/plane-web/hooks/store";

@@ -4,13 +4,13 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ChevronRightIcon, PageIcon, TeamsIcon } from "@plane/propel/icons";
 import type { ICustomSearchSelectOption } from "@plane/types";
 import { BreadcrumbNavigationSearchDropdown, Breadcrumbs, Header, Loader, CustomMenu } from "@plane/ui";
 import { getPageName } from "@plane/utils";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-import { Logo } from "@/components/common/logo";
 import { PageAccessIcon } from "@/components/common/page-access-icon";
 import { SwitcherLabel } from "@/components/common/switcher-label";
 import { PageBreadcrumbItem } from "@/components/pages/editor/breadcrumb-page-item";
@@ -4,13 +4,13 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
 import { ETeamspaceNavigationItem, EUserPermissionsLevel } from "@plane/constants";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon, TeamsIcon } from "@plane/propel/icons";
 import type { ICustomSearchSelectOption } from "@plane/types";
 import { EUserWorkspaceRoles } from "@plane/types";
 import { BreadcrumbNavigationSearchDropdown, Breadcrumbs, Header, Loader } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-import { Logo } from "@/components/common/logo";
 import { SwitcherLabel } from "@/components/common/switcher-label";
 // plane web hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -8,6 +8,7 @@ import { Lock } from "lucide-react";
 import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { TeamsIcon, ViewsIcon } from "@plane/propel/icons";
 // types
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, ICustomSearchSelectOption } from "@plane/types";
@@ -17,7 +18,6 @@ import { Breadcrumbs, Tooltip, Header, Loader, BreadcrumbNavigationSearchDropdow
 // components
 import { getPublishViewLink } from "@plane/utils";
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-import { Logo } from "@/components/common/logo";
 import { SwitcherIcon, SwitcherLabel } from "@/components/common/switcher-label";
 import { DisplayFiltersSelection, FiltersDropdown, LayoutSelection } from "@/components/issues/issue-layouts/filters";
 import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
@@ -1,13 +1,13 @@
 "use client";

 import { observer } from "mobx-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/ui";
 import { getPageName } from "@plane/utils";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-import { Logo } from "@/components/common/logo";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web hooks
@@ -6,6 +6,7 @@ import { observer } from "mobx-react";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { useParams } from "next/navigation";
 import { Loader } from "lucide-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 // plane imports
 import { ChevronRightIcon, PageIcon, RestrictedPageIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
@@ -1,9 +1,9 @@
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
 import { BriefcaseBusiness } from "lucide-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { cn } from "@plane/propel/utils";
 import type { TLogoProps } from "@plane/types";
-import { Logo } from "@/components/common/logo";
 import { useProject } from "@/hooks/store/use-project";

 export const DisplayProject = observer(
@@ -1,8 +1,8 @@
 import type { FC } from "react";
 // types
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import type { IProject } from "@plane/types";
 // ui
-import { Logo } from "@/components/common/logo";

 export type ActiveCyclesProjectTitleProps = {
  project: Partial<IProject> | undefined;
@@ -5,10 +5,10 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import type { TCycleGroups } from "@plane/propel/icons";
 import { CycleGroupIcon, ProjectIcon } from "@plane/propel/icons";
 import type { CycleInsightColumns } from "@plane/types";
-import { Logo } from "@plane/propel/emoji-icon-picker";
 import { renderFormattedDate } from "@plane/utils";
 // components
 import { exportCSV } from "@/components/analytics/export";
@@ -5,12 +5,12 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 import type { IntakeInsightColumns } from "@plane/types";
 // components
 import { exportCSV } from "@/components/analytics/export";
 import { InsightTable } from "@/components/analytics/insight-table";
-import { Logo } from "@/components/common/logo";
 // hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
 // services
@@ -5,9 +5,9 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ModuleStatusIcon, ProjectIcon } from "@plane/propel/icons";
 import type { ModuleInsightColumns } from "@plane/types";
-import { Logo } from "@plane/propel/emoji-icon-picker";
 import { renderFormattedDate } from "@plane/utils";
 // components
 import { exportCSV } from "@/components/analytics/export";
@@ -5,9 +5,9 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane package imports
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 import type { ProjectInsightColumns } from "@plane/types";
-import { Logo } from "@plane/propel/emoji-icon-picker";
 // components
 import { exportCSV } from "@/components/analytics/export";
 import { InsightTable } from "@/components/analytics/insight-table";
@@ -3,8 +3,8 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { InitiativeIcon } from "@plane/propel/icons";
 import { Logo } from "@plane/propel/emoji-icon-picker";
+import { InitiativeIcon } from "@plane/propel/icons";
 // components
 import { PowerKMenuBuilder } from "@/components/power-k/menus/builder";
 // plane web imports
@@ -3,8 +3,8 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
-import type { TTeamspace } from "@plane/types";
 import { Logo } from "@plane/propel/emoji-icon-picker";
+import type { TTeamspace } from "@plane/types";
 import { PowerKMenuBuilder } from "@/components/power-k/menus/builder";

 type Props = {
@@ -5,12 +5,12 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { TDashboard } from "@plane/types";
 import { EModalPosition, EModalWidth, Input, ModalCore } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 import { ProjectDropdown } from "@/components/dropdowns/project/dropdown";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -8,6 +8,7 @@ import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 import type { ExProject } from "@plane/sdk";
 // types
@@ -15,7 +16,6 @@ import type { IProject } from "@plane/types";
 // ui
 import { Loader } from "@plane/ui";
 // components
-import { Logo } from "@/components/common/logo";
 // plane web components
 import { StepperNavigation, Dropdown } from "@/plane-web/components/importers/ui";
 // plane web hooks
@@ -8,12 +8,12 @@ import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 import type { ExProject } from "@plane/sdk";
 import type { IProject } from "@plane/types";
 import { Loader } from "@plane/ui";
 // components
-import { Logo } from "@/components/common/logo";
 // plane web components
 import { StepperNavigation, Dropdown } from "@/plane-web/components/importers/ui";
 // plane web hooks
@@ -10,12 +10,12 @@ import type { TJobStatus } from "@plane/etl/core";
 import { E_JOB_STATUS } from "@plane/etl/core";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TImportJob, TLogoProps } from "@plane/types";
 import { ModalCore } from "@plane/ui";
 import { renderFormattedDate, renderFormattedTime } from "@plane/utils";
-import { Logo } from "@/components/common/logo";
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import ImporterHeader from "../../header";
 import { RerunModal, CancelModal } from "./modals";
@@ -7,12 +7,12 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 // types
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
 // ui
 import { Loader } from "@plane/ui";
 // components
-import { Logo } from "@/components/common/logo";
 // plane web components
 import { StepperNavigation, Dropdown } from "@/plane-web/components/importers/ui";
 // plane web types
@@ -8,12 +8,12 @@ import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 import type { ExProject } from "@plane/sdk";
 import type { IProject } from "@plane/types";
 import { Loader } from "@plane/ui";
 // components
-import { Logo } from "@/components/common/logo";
 // plane web components
 import { StepperNavigation, Dropdown } from "@/plane-web/components/importers/ui";
 // plane web hooks
@@ -8,12 +8,12 @@ import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 import type { ExProject } from "@plane/sdk";
 import type { IProject } from "@plane/types";
 import { Loader } from "@plane/ui";
 // components
-import { Logo } from "@/components/common/logo";
 // plane web components
 import { StepperNavigation, Dropdown } from "@/plane-web/components/importers/ui";
 // plane web hooks
@@ -8,12 +8,12 @@ import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 import type { ExProject } from "@plane/sdk";
 import type { IProject } from "@plane/types";
 import { Loader } from "@plane/ui";
 // components
-import { Logo } from "@/components/common/logo";
 // plane web components
 import { StepperNavigation, Dropdown } from "@/plane-web/components/importers/ui";
 // plane web hooks
@@ -7,6 +7,7 @@ import { Combobox } from "@headlessui/react";
 // plane ui
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { CloseIcon, InitiativeIcon } from "@plane/propel/icons";
 import { Checkbox, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // assets
@@ -14,7 +15,6 @@ import { cn } from "@plane/utils";
 import searchDark from "@/app/assets/empty-state/search/search-dark.webp?url";
 import searchLight from "@/app/assets/empty-state/search/search-light.webp?url";
 // components
-import { Logo } from "@/components/common/logo";
 import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
 // helpers
 // hooks
@@ -6,15 +6,14 @@ import { getRandomLabelColor } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import type { TChangeHandlerProps } from "@plane/propel/emoji-icon-picker";
-import { EmojiPicker } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { InitiativeIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
-import { Input, EmojiIconPickerTypes } from "@plane/ui";
+import { Input } from "@plane/ui";
 import { getDate, getDescriptionPlaceholderI18n, renderFormattedPayloadDate } from "@plane/utils";

 // components
-import { Logo } from "@/components/common/logo";
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
 import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
 import { RichTextEditor } from "@/components/editor/rich-text";
@@ -4,12 +4,12 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 // Plane
 import { EUserPermissionsLevel } from "@plane/constants";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { InitiativeIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EUserWorkspaceRoles } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -3,12 +3,12 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // Plane
 import { EUserPermissionsLevel } from "@plane/constants";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { InitiativeIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EUserWorkspaceRoles } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -1,8 +1,9 @@
 import { useRef } from "react";
 import { observer } from "mobx-react";
 // Plane
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
-import { CircularProgressIndicator, Logo } from "@plane/ui";
+import { CircularProgressIndicator } from "@plane/ui";
 import { getProgress } from "@plane/utils";
 // hooks
 import { ListItem } from "@/components/core/list";
@@ -4,12 +4,10 @@ import type { FC } from "react";
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { EmojiPicker } from "@plane/propel/emoji-icon-picker";
+import { EmojiIconPickerTypes, EmojiPicker, Logo } from "@plane/propel/emoji-icon-picker";
 import { InitiativeIcon } from "@plane/propel/icons";
 import { EFileAssetType } from "@plane/types";
-import { EmojiIconPickerTypes } from "@plane/ui";
 // plane web components
-import { Logo } from "@/components/common/logo";
 import { InfoSection } from "@/plane-web/components/common/layout/main/sections/info-root";
 import { UpdateStatusPills } from "@/plane-web/components/initiatives/common/update-status";
 import { useInitiatives } from "@/plane-web/hooks/store/use-initiatives";
@@ -6,13 +6,13 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { InitiativeIcon, ScopeIcon, OverviewIcon } from "@plane/propel/icons";
 import type { ICustomSearchSelectOption } from "@plane/types";
 import { EInitiativeNavigationItem, EUserWorkspaceRoles } from "@plane/types";
 import { BreadcrumbNavigationDropdown, BreadcrumbNavigationSearchDropdown, Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-import { Logo } from "@/components/common/logo";
 import { SwitcherLabel } from "@/components/common/switcher-label";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user/user-permissions";
@@ -4,8 +4,8 @@ import type { FC } from "react";
 import { observer } from "mobx-react";
 // components
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
-import { Logo } from "@/components/common/logo";
 // plane web components
 import { Dropdown } from "@/plane-web/components/importers/ui";
 // plane web hooks
@@ -9,11 +9,11 @@ import { GITLAB_INTEGRATION_TRACKER_EVENTS, GITLAB_INTEGRATION_TRACKER_ELEMENTS
 import { EConnectionType } from "@plane/etl/gitlab";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import type { TGitlabEntityConnection } from "@plane/types";
 import { ModalCore } from "@plane/ui";
 // assets
 import GitlabLogo from "@/app/assets/services/gitlab.svg?url";
-import { Logo } from "@/components/common/logo";
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { FormEdit } from "@/plane-web/components/integrations/gitlab";
 // plane web hooks
@@ -6,14 +6,15 @@ import Image from "next/image";
 // components
 import { EConnectionType } from "@plane/etl/gitlab";
 import { useTranslation } from "@plane/i18n";
-// assets
-import GitlabLogo from "@/app/assets/services/gitlab.svg?url";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { ProjectIcon } from "@plane/propel/icons";
 // plane web components
 import { Dropdown } from "@/plane-web/components/importers/ui";
 // plane web hooks
 import { useGitlabIntegration } from "@/plane-web/hooks/store";
 // plane web types
 import type { TProjectMap } from "@/plane-web/types/integrations";
+import GitlabLogo from "@/app/assets/services/gitlab.svg?url";

 type TEntityForm = {
  value: TProjectMap;
@@ -6,8 +6,8 @@ import Image from "next/image";
 // components
 import { EConnectionType } from "@plane/etl/gitlab";
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
-import { Logo } from "@/components/common/logo";
 // plane web components
 import { Dropdown } from "@/plane-web/components/importers/ui";
 // plane web hooks
@@ -1,10 +1,11 @@
 import type { FC } from "react";
 import { useMemo, useCallback } from "react";
 import useSWR from "swr";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { StateGroupIcon } from "@plane/propel/icons";
 import type { ExState } from "@plane/sdk";
 import type { IState } from "@plane/types";
-import { CustomSearchSelect, Logo, Loader } from "@plane/ui";
+import { CustomSearchSelect, Loader } from "@plane/ui";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useSentryIntegration } from "@/plane-web/hooks/store/integrations/use-sentry";
@@ -1,8 +1,8 @@
 import React, { memo } from "react";
 import { ArrowRight, Pencil, Trash2 } from "lucide-react";
 import type { TSentryStateMapping } from "@plane/etl/sentry";
-import { StateGroupIcon } from "@plane/propel/icons";
 import { Logo } from "@plane/propel/emoji-icon-picker";
+import { StateGroupIcon } from "@plane/propel/icons";
 // hooks
 import { useProject } from "@/hooks/store/use-project";

@@ -2,9 +2,9 @@ import Image from "next/image";
 import { Hash, Pencil, Trash2, ArrowRight } from "lucide-react";
 import type { TSlackProjectUpdatesConfig } from "@plane/etl/slack";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PlaneLogo } from "@plane/propel/icons";
 import type { TWorkspaceEntityConnection } from "@plane/types";
-import { Logo } from "@plane/propel/emoji-icon-picker";
 import SlackLogo from "@/app/assets/services/slack.png?url";
 import { useSlackIntegration } from "@/plane-web/hooks/store";

@@ -6,9 +6,9 @@ import { ArrowRight, Hash } from "lucide-react";
 // Plane components
 import type { SlackConversation } from "@plane/etl/slack";
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PlaneLogo, ProjectIcon } from "@plane/propel/icons";
 import SlackLogo from "@/app/assets/services/slack.png?url";
-import { Logo } from "@/components/common/logo";
 import { Dropdown } from "@/plane-web/components/importers/ui";

 // Hooks
@@ -4,9 +4,9 @@ import Image from "next/image";
 import { ArrowRight, ArrowRightLeft, Pencil, Trash2 } from "lucide-react";
 import { INTEGRATION_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PlaneLogo } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
-import { Logo } from "@plane/propel/emoji-icon-picker";

 type TIntegrationsMappingProps = {
  entityName: string | ReactNode;
@@ -1,9 +1,9 @@
 import { Pencil, Trash2 } from "lucide-react";
 import { INTEGRATION_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PlaneLogo } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
-import { Logo } from "@plane/propel/emoji-icon-picker";

 type TProjectEntityItem = {
  project: IProject;
@@ -1,8 +1,8 @@
 import type { FC } from "react";
 // plane imports
+import { LUCIDE_ICONS_LIST } from "@plane/propel/emoji-icon-picker";
 import { EpicIcon, LayersIcon } from "@plane/propel/icons";
 import type { TLogoProps } from "@plane/types";
-import { LUCIDE_ICONS_LIST } from "@plane/ui";
 import { cn, generateIconColors } from "@plane/utils";

 export type TIssueTypeLogoSize = "xs" | "sm" | "md" | "lg" | "xl";
@@ -2,8 +2,9 @@ import React, { useState } from "react";
 import { Check, Search } from "lucide-react";
 // plane imports
 import { DEFAULT_BACKGROUND_COLORS } from "@plane/constants";
+import { LUCIDE_ICONS_LIST } from "@plane/propel/emoji-icon-picker";
 import type { TLogoProps } from "@plane/types";
-import { ColorPicker, Input, LUCIDE_ICONS_LIST } from "@plane/ui";
+import { ColorPicker, Input } from "@plane/ui";
 import { generateIconColors } from "@plane/utils";

 export type TIconsListProps = {
@@ -2,8 +2,8 @@ import type { FC } from "react";
 import React from "react";
 import { TriangleAlert } from "lucide-react";
 // plane imports
+import { LUCIDE_ICONS_LIST } from "@plane/propel/emoji-icon-picker";
 import type { TLogoProps } from "@plane/types";
-import { LUCIDE_ICONS_LIST } from "@plane/ui";
 import { cn } from "@plane/utils";

 type Props = {
@@ -4,9 +4,9 @@ import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // ui
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { Loader } from "@plane/ui";
 // components
-import { Logo } from "@/components/common/logo";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters/header";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -4,11 +4,12 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { CircleX, Files, Link2 } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { TIssuePage, TIssueServiceType, TLogoProps } from "@plane/types";
 import type { TContextMenuItem } from "@plane/ui";
-import { CustomMenu, Logo } from "@plane/ui";
+import { CustomMenu } from "@plane/ui";
 import { calculateTimeAgo, cn, copyUrlToClipboard } from "@plane/utils";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -8,11 +8,12 @@ import { Earth, Lock, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // hooks
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { CloseIcon, PageIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { TIssuePage, TIssueServiceType } from "@plane/types";
 import { EPageAccess } from "@plane/types";
-import { ToggleSwitch, Button, Logo, ModalCore, EModalWidth, EModalPosition, Loader, Checkbox } from "@plane/ui";
+import { ToggleSwitch, Button, ModalCore, EModalWidth, EModalPosition, Loader, Checkbox } from "@plane/ui";
 // types
 // components
 import { getPageName, getTabIndex } from "@plane/utils";
@@ -2,9 +2,9 @@ import React from "react";
 import { observer } from "mobx-react";
 // ui
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { CustomSearchSelect } from "@plane/ui";
 // components
-import { Logo } from "@/components/common/logo";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectAdvanced } from "@/plane-web/hooks/store/projects/use-projects";
@@ -2,6 +2,7 @@
 import type { FC } from "react";
 import { useParams } from "next/navigation";
 import { ISSUE_GROUP_BY_OPTIONS } from "@plane/constants";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import type { ISvgIcons } from "@plane/propel/icons";
 import { CustomerRequestIcon, CustomersIcon, MilestoneIcon } from "@plane/propel/icons";
 import type {
@@ -18,7 +19,6 @@ import {
  SPREADSHEET_COLUMNS as CE_SPREAD_SHEET_COLUMNS,
  getScopeMemberIds as getCeScopeMemberIds,
 } from "@/ce/components/issues/issue-layouts/utils";
-import { Logo } from "@/components/common/logo";
 // store
 import { store } from "@/lib/store-context";
 import {
@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import type { TPageEmbedConfig } from "@plane/editor";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { EmptyPageIcon, PageIcon, RestrictedPageIcon } from "@plane/propel/icons";
 import type { TPage } from "@plane/types";
 import { AlertModalCore } from "@plane/ui";
 import { cn, getPageName } from "@plane/utils";
-import { Logo } from "@/components/common/logo";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web components
@@ -6,10 +6,11 @@ import { observer } from "mobx-react";
 import { WORKSPACE_PAGE_TRACKER_EVENTS } from "@plane/constants";
 // editor
 import type { EditorRefApi } from "@plane/editor";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { EmptyPageIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // ui
-import { AlertModalCore, Logo } from "@plane/ui";
+import { AlertModalCore } from "@plane/ui";
 // helpers
 import { getPageName } from "@plane/utils";
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 // components
-import { Logo } from "@/components/common/logo";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 // store
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
-import { Logo } from "@/components/common/logo";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 // plane web imports
 import { useTeamspaces } from "@/plane-web/hooks/store";
 // local imports
@@ -7,13 +7,13 @@ import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 import { ArchiveIcon, Loader } from "lucide-react";
 // plane imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ChevronRightIcon, EmptyPageIcon, PageIcon, RestrictedPageIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { TPageDragPayload, TPageNavigationTabs } from "@plane/types";
 import { EPageAccess } from "@plane/types";
 import { cn, getPageName } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web imports
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
-import { Logo } from "@/components/common/logo";
 import { useTemplateData } from "../useArtifactData";
 import { Properties } from "./properties";
 import { WithPreviewHOC } from "./with-preview-hoc";
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
-import { Logo } from "@/components/common/logo";
 import type { TArtifact } from "@/plane-web/types";
 import { useTemplateData } from "../useArtifactData";
 import { Properties } from "./properties";
@@ -5,10 +5,11 @@ import { useParams } from "next/navigation";
 import { AtSign } from "lucide-react";
 import { EUserPermissionsLevel } from "@plane/constants";
 // plane imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IProject, IWorkspace } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
-import { CustomSelect, Loader, Logo, ToggleSwitch } from "@plane/ui";
+import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { WorkspaceLogo } from "@/components/workspace/logo";
@@ -3,13 +3,12 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { EUserPermissionsLevel, PROJECT_OVERVIEW_TRACKER_ELEMENTS, PROJECT_TRACKER_EVENTS } from "@plane/constants";
-import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { IProject, IWorkspace } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // components
 import { getFileURL } from "@plane/utils";
-import { Logo } from "@/components/common/logo";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
 // hooks
 import { captureClick, captureError, captureSuccess } from "@/helpers/event-tracker.helper";
@@ -4,6 +4,7 @@ import { ArchiveRestoreIcon, LinkIcon, Lock, MoreHorizontal, Settings, Trash2 }
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ArchiveIcon } from "@plane/propel/icons";
 import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
@@ -11,7 +12,6 @@ import type { TContextMenuItem } from "@plane/ui";
 import { CustomMenu, FavoriteStar } from "@plane/ui";
 import { cn, copyUrlToClipboard, getFileURL } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 // helpers
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -4,9 +4,9 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 // plane imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IGanttBlock } from "@plane/types";
-import { Logo } from "@plane/propel/emoji-icon-picker";
 import { findTotalDaysInRange, renderFormattedDate } from "@plane/utils";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -4,10 +4,11 @@ import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
-import { Logo, Row } from "@plane/ui";
+import { Row } from "@plane/ui";
 // helpers
 import { cn, joinUrlPath } from "@plane/utils";
 // hooks
@@ -7,6 +7,7 @@ import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { Checkbox, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { cn } from "@plane/utils";
 // assets
@@ -15,7 +16,6 @@ import noResultsLight from "@/app/assets/empty-state/teams/no-results-light.webp
 import noTeamspacesDark from "@/app/assets/empty-state/teams/no-teamspace-dark.webp?url";
 import noTeamspacesLight from "@/app/assets/empty-state/teams/no-teamspaces-light.webp?url";
 // components
-import { Logo } from "@/components/common/logo";
 // plane web imports
 import { useTeamspaces } from "@/plane-web/hooks/store";

@@ -6,11 +6,12 @@ import { CircleMinus } from "lucide-react";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { TeamsIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { TTeamspace } from "@plane/types";
 import { EUserWorkspaceRoles } from "@plane/types";
-import { AlertModalCore, Avatar, AvatarGroup, CustomMenu, Logo, Table } from "@plane/ui";
+import { AlertModalCore, Avatar, AvatarGroup, CustomMenu, Table } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
@@ -7,6 +7,7 @@ import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { CloseIcon, TeamsIcon } from "@plane/propel/icons";
 import { Checkbox, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { cn, truncateText } from "@plane/utils";
@@ -14,7 +15,6 @@ import { cn, truncateText } from "@plane/utils";
 import searchProjectDark from "@/app/assets/empty-state/search/project-dark.webp?url";
 import searchProjectLight from "@/app/assets/empty-state/search/project-light.webp?url";
 // components
-import { Logo } from "@/components/common/logo";
 import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -7,14 +7,13 @@ import { useParams } from "next/navigation";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { EmojiPicker } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, Logo } from "@plane/propel/emoji-icon-picker";
 import type { TTeamspace } from "@plane/types";
 import { EFileAssetType, EUserWorkspaceRoles } from "@plane/types";
 import { Input } from "@plane/ui";

 import { cn, getDescriptionPlaceholderI18n, isEditorEmpty } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
 import { RichTextEditor } from "@/components/editor/rich-text";
 // store hooks
@@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
 import { Loader as Spinner } from "lucide-react";
 // plane imports
 import { ETeamspaceNavigationItem, EUserPermissionsLevel } from "@plane/constants";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import {
  CycleIcon,
  WorkItemsIcon,
@@ -22,7 +23,6 @@ import {
  Breadcrumbs,
  BreadcrumbNavigationDropdown,
  BreadcrumbNavigationSearchDropdown,
-  Logo,
  Header,
  Loader,
 } from "@plane/ui";
@@ -3,8 +3,8 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
 import { TEAMSPACE_TRACKER_ELEMENTS } from "@plane/constants";
-import { TeamsIcon } from "@plane/propel/icons";
 import { Logo } from "@plane/propel/emoji-icon-picker";
+import { TeamsIcon } from "@plane/propel/icons";
 // components
 import { ListItem } from "@/components/core/list/list-item";
 // hooks
@@ -1,8 +1,9 @@
 import { observer } from "mobx-react";
 import { Loader as Spinner } from "lucide-react";
 // plane imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { StartDatePropertyIcon } from "@plane/propel/icons";
-import { Loader, Logo } from "@plane/ui";
+import { Loader } from "@plane/ui";
 // plane web imports
 import { cn } from "@plane/utils";
 import { useTeamspaces } from "@/plane-web/hooks/store";
@@ -3,14 +3,13 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
 import { TEAMSPACE_TRACKER_ELEMENTS } from "@plane/constants";
-import { EmojiPicker } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, Logo } from "@plane/propel/emoji-icon-picker";
 import { LeadIcon, TeamsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { AvatarGroup, Avatar } from "@plane/ui";
 // plane utils
 import { getFileURL } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 // plane web imports
@@ -6,9 +6,10 @@ import { TEAMSPACE_ANALYTICS_TRACKER_ELEMENTS, TEAMSPACE_ANALYTICS_TRACKER_EVENT
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TreeMapChart } from "@plane/propel/charts/tree-map";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { TreeMapIcon } from "@plane/propel/icons";
 import type { TreeMapItem } from "@plane/types";
-import { Avatar, Loader, Logo } from "@plane/ui";
+import { Avatar, Loader } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
 // hooks
 import { captureClick, captureError, captureSuccess } from "@/helpers/event-tracker.helper";
@@ -4,10 +4,11 @@ import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
-import { Logo, Row } from "@plane/ui";
+import { Row } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
@@ -6,14 +6,13 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { Button } from "@plane/propel/button";
-import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { ViewsIcon } from "@plane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, TTeamspaceView, IIssueFilters } from "@plane/types";
 import { EViewAccess, EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 import { Input, TextArea } from "@plane/ui";
 import { getComputedDisplayFilters, getComputedDisplayProperties } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 import { LayoutDropDown } from "@/components/dropdowns/layout";
 import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
@@ -4,11 +4,11 @@ import type { FC } from "react";
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ViewsIcon } from "@plane/propel/icons";
 // plane imports
 import type { TTeamspaceView } from "@plane/types";
 // components
-import { Logo } from "@/components/common/logo";
 import { ListItem } from "@/components/core/list";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -3,12 +3,11 @@ import { observer } from "mobx-react";
 import { Controller, useFormContext } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
 import type { TPageTemplateForm } from "@plane/types";
 import { Input } from "@plane/ui";
 // components
-import { Logo } from "@/components/common/logo";
 // plane web imports
 import { validateWhitespaceI18n } from "@/plane-web/components/templates/settings/common";
 // local imports
@@ -3,12 +3,11 @@ import { observer } from "mobx-react";
 import { Controller, useFormContext } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import type { TProjectTemplateForm } from "@plane/types";
 import { Input, TextArea } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
 // components
-import { Logo } from "@/components/common/logo";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
 // plane web components
 import { validateWhitespaceI18n } from "@/plane-web/components/templates/settings/common";
@@ -10,6 +10,7 @@ import type {
 import { ESearchFilterKeys } from "@plane/constants";

 // ui
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import {
  CycleIcon,
  ModuleIcon,
@@ -20,7 +21,6 @@ import {
  TeamsIcon,
  ViewsIcon,
 } from "@plane/propel/icons";
-import { Logo } from "@plane/propel/emoji-icon-picker";
 // plane web components
 import { generateWorkItemLink } from "@plane/utils";
 import { IdentifierText, IssueIdentifier } from "@/plane-web/components/issues/issue-details/issue-identifier";
@@ -3,9 +3,9 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { Disclosure, Transition } from "@headlessui/react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ChevronRightIcon } from "@plane/propel/icons";
 // plane ui
-import { Logo } from "@plane/propel/emoji-icon-picker";
 import { cn, joinUrlPath } from "@plane/utils";
 // components
 import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
@@ -1,11 +1,11 @@
 import { useCallback, useMemo } from "react";
 import { AlignLeft } from "lucide-react";
 // plane imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
 import { LayersIcon, ProjectIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { EIssuePropertyType, IIssueProperty, IIssueType, IProject, TWorkItemFilterProperty } from "@plane/types";
 import { EWorkItemTypeEntity } from "@plane/types";
-import { Logo } from "@plane/propel/emoji-icon-picker";
 import {
  getTeamspaceProjectFilterConfig,
  getTextPropertyFilterConfig,