From bdb2aaa16ff53930eb9412f6fdf54b2305aeb049 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <104348397+ishpaul777@users.noreply.github.com>
Date: Tue, 4 Feb 2025 15:40:49 +0530
Subject: [PATCH] Revert "Add clickable custom emoji support for onboarding
 task"

---
 assets/images/customEmoji/global-create.svg   |  14 --
 src/CONST.ts                                  |  14 +-
 .../BaseHTMLEngineProvider.tsx                |   1 -
 .../CustomEmojiWithDefaultPressableAction.tsx |  21 --
 .../HTMLRenderers/CustomEmojiRenderer.tsx     |  42 ----
 .../HTMLEngineProvider/HTMLRenderers/index.ts |   2 -
 src/libs/ReportUtils.ts                       |   3 +-
 src/libs/actions/Report.ts                    |   1 -
 .../FloatingActionButtonAndPopover.tsx        | 227 ++++++++----------
 src/styles/index.ts                           |   8 -
 10 files changed, 104 insertions(+), 229 deletions(-)
 delete mode 100644 assets/images/customEmoji/global-create.svg
 delete mode 100644 src/components/HTMLEngineProvider/CustomEmojiWithDefaultPressableAction.tsx
 delete mode 100644 src/components/HTMLEngineProvider/HTMLRenderers/CustomEmojiRenderer.tsx

diff --git a/assets/images/customEmoji/global-create.svg b/assets/images/customEmoji/global-create.svg
deleted file mode 100644
index 60b46eb97aed..000000000000
--- a/assets/images/customEmoji/global-create.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#03D47C;}
-	.st1{fill:#FCFBF9;}
-</style>
-<path class="st0" d="M1,10c0-4.971,4.029-9,9-9l0,0c4.971,0,9,4.029,9,9l0,0c0,4.971-4.029,9-9,9l0,0C5.029,19,1,14.971,1,10L1,10z"
-	/>
-<path class="st1" d="M10.771,12.7c0,0.426-0.345,0.771-0.771,0.771c-0.426,0-0.771-0.345-0.771-0.771v-1.929H7.3
-	c-0.426,0-0.771-0.345-0.771-0.771c0-0.426,0.345-0.771,0.771-0.771h1.929V7.3c0-0.426,0.345-0.771,0.771-0.771
-	c0.426,0,0.771,0.345,0.771,0.771v1.929H12.7c0.426,0,0.771,0.345,0.771,0.771c0,0.426-0.345,0.771-0.771,0.771h-1.929V12.7z"/>
-</svg>
diff --git a/src/CONST.ts b/src/CONST.ts
index 1250092cb910..7f56bdd5e370 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -159,7 +159,7 @@ const onboardingEmployerOrSubmitMessage: OnboardingMessage = {
                 '\n' +
                 'Here’s how to submit an expense:\n' +
                 '\n' +
-                '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
+                '1. Click the green *+* button.\n' +
                 '2. Choose *Create expense*.\n' +
                 '3. Enter an amount or scan a receipt.\n' +
                 '4. Add your reimburser to the request.\n' +
@@ -182,7 +182,7 @@ const combinedTrackSubmitOnboardingEmployerOrSubmitMessage: OnboardingMessage =
                 '\n' +
                 'Here’s how to submit an expense:\n' +
                 '\n' +
-                '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button\n' +
+                '1. Click the green *+* button.\n' +
                 '2. Choose *Create expense*.\n' +
                 '3. Enter an amount or scan a receipt.\n' +
                 '4. Add your reimburser to the request.\n' +
@@ -206,7 +206,7 @@ const onboardingPersonalSpendMessage: OnboardingMessage = {
                 '\n' +
                 'Here’s how to track an expense:\n' +
                 '\n' +
-                '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
+                '1. Click the green *+* button.\n' +
                 '2. Choose *Create expense*.\n' +
                 '3. Enter an amount or scan a receipt.\n' +
                 '4. Click "Just track it (don\'t submit it)".\n' +
@@ -229,7 +229,7 @@ const combinedTrackSubmitOnboardingPersonalSpendMessage: OnboardingMessage = {
                 '\n' +
                 'Here’s how to track an expense:\n' +
                 '\n' +
-                '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
+                '1. Click the green *+* button.\n' +
                 '2. Choose *Create expense*.\n' +
                 '3. Enter an amount or scan a receipt.\n' +
                 '4. Click "Just track it (don\'t submit it)".\n' +
@@ -5192,7 +5192,7 @@ const CONST = {
                         '\n' +
                         'Here’s how to start a chat:\n' +
                         '\n' +
-                        '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
+                        '1. Click the green *+* button.\n' +
                         '2. Choose *Start chat*.\n' +
                         '3. Enter emails or phone numbers.\n' +
                         '\n' +
@@ -5209,7 +5209,7 @@ const CONST = {
                         '\n' +
                         'Here’s how to request money:\n' +
                         '\n' +
-                        '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button\n' +
+                        '1. Click the green *+* button.\n' +
                         '2. Choose *Start chat*.\n' +
                         '3. Enter any email, SMS, or name of who you want to split with.\n' +
                         '4. From within the chat, click the *+* button on the message bar, and click *Split expense*.\n' +
@@ -5244,7 +5244,7 @@ const CONST = {
                         '\n' +
                         'Here’s how to submit an expense:\n' +
                         '\n' +
-                        '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
+                        '1. Click the green *+* button.\n' +
                         '2. Choose *Create expense*.\n' +
                         '3. Enter an amount or scan a receipt.\n' +
                         '4. Add your reimburser to the request.\n' +
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
index 332255e53995..12b515194928 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -80,7 +80,6 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             'mention-user': HTMLElementModel.fromCustomModel({tagName: 'mention-user', contentModel: HTMLContentModel.textual}),
             'mention-report': HTMLElementModel.fromCustomModel({tagName: 'mention-report', contentModel: HTMLContentModel.textual}),
             'mention-here': HTMLElementModel.fromCustomModel({tagName: 'mention-here', contentModel: HTMLContentModel.textual}),
-            'custom-emoji': HTMLElementModel.fromCustomModel({tagName: 'custom-emoji', contentModel: HTMLContentModel.textual}),
             'next-step': HTMLElementModel.fromCustomModel({
                 tagName: 'next-step',
                 mixedUAStyles: {...styles.textLabelSupporting, ...styles.lh16},
diff --git a/src/components/HTMLEngineProvider/CustomEmojiWithDefaultPressableAction.tsx b/src/components/HTMLEngineProvider/CustomEmojiWithDefaultPressableAction.tsx
deleted file mode 100644
index 8cd33eab6c90..000000000000
--- a/src/components/HTMLEngineProvider/CustomEmojiWithDefaultPressableAction.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type {ReactNode} from 'react';
-import React from 'react';
-import FloatingActionButtonAndPopover from '@pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover';
-
-type CustomEmojiWithDefaultPressableActionProps = {
-    /* Key name identifying the emoji */
-    emojiKey: string;
-
-    /* Emoji content to render */
-    children: ReactNode;
-};
-
-function CustomEmojiWithDefaultPressableAction({emojiKey, children}: CustomEmojiWithDefaultPressableActionProps) {
-    if (emojiKey === 'actionMenuIcon') {
-        return <FloatingActionButtonAndPopover isEmoji>{children}</FloatingActionButtonAndPopover>;
-    }
-
-    return children;
-}
-
-export default CustomEmojiWithDefaultPressableAction;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CustomEmojiRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/CustomEmojiRenderer.tsx
deleted file mode 100644
index dab8c89013dd..000000000000
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CustomEmojiRenderer.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import type {FC} from 'react';
-import {View} from 'react-native';
-import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
-import type {SvgProps} from 'react-native-svg';
-import GlobalCreateIcon from '@assets/images/customEmoji/global-create.svg';
-import CustomEmojiWithDefaultPressableAction from '@components/HTMLEngineProvider/CustomEmojiWithDefaultPressableAction';
-import ImageSVG from '@components/ImageSVG';
-import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
-
-const emojiMap: Record<string, FC<SvgProps>> = {
-    actionMenuIcon: GlobalCreateIcon,
-};
-
-function CustomEmojiRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
-    const styles = useThemeStyles();
-    const emojiKey = tnode.attributes.emoji;
-
-    if (emojiMap[emojiKey]) {
-        const image = (
-            <View style={styles.customEmoji}>
-                <ImageSVG
-                    src={emojiMap[emojiKey]}
-                    width={variables.iconSizeNormal}
-                    height={variables.iconSizeNormal}
-                />
-            </View>
-        );
-
-        if ('pressablewithdefaultaction' in tnode.attributes) {
-            return <CustomEmojiWithDefaultPressableAction emojiKey={emojiKey}>{image}</CustomEmojiWithDefaultPressableAction>;
-        }
-
-        return image;
-    }
-
-    return null;
-}
-
-export default CustomEmojiRenderer;
-export {emojiMap};
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/index.ts b/src/components/HTMLEngineProvider/HTMLRenderers/index.ts
index bcf3d4dfaf94..91ed66f8b931 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/index.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/index.ts
@@ -1,7 +1,6 @@
 import type {CustomTagRendererRecord} from 'react-native-render-html';
 import AnchorRenderer from './AnchorRenderer';
 import CodeRenderer from './CodeRenderer';
-import CustomEmojiRenderer from './CustomEmojiRenderer';
 import DeletedActionRenderer from './DeletedActionRenderer';
 import EditedRenderer from './EditedRenderer';
 import EmojiRenderer from './EmojiRenderer';
@@ -30,7 +29,6 @@ const HTMLEngineProviderComponentList: CustomTagRendererRecord = {
     'mention-user': MentionUserRenderer,
     'mention-report': MentionReportRenderer,
     'mention-here': MentionHereRenderer,
-    'custom-emoji': CustomEmojiRenderer,
     emoji: EmojiRenderer,
     'next-step-email': NextStepEmailRenderer,
     'deleted-action': DeletedActionRenderer,
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index a84b437a65f7..df9e1e3304bf 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -6457,7 +6457,6 @@ function buildOptimisticTaskReport(
     description?: string,
     policyID: string = CONST.POLICY.OWNER_EMAIL_FAKE,
     notificationPreference: NotificationPreference = CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
-    shouldEscapeText = true,
 ): OptimisticTaskReport {
     const participants: Participants = {
         [ownerAccountID]: {
@@ -6472,7 +6471,7 @@ function buildOptimisticTaskReport(
     return {
         reportID: generateReportID(),
         reportName: title,
-        description: getParsedComment(description ?? '', {shouldEscapeText}),
+        description: getParsedComment(description ?? ''),
         ownerAccountID,
         participants,
         managerID: assigneeAccountID,
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index b77b8115cb59..e120ce1c21fa 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -3731,7 +3731,6 @@ function prepareOnboardingOnyxData(
                 taskDescription,
                 targetChatPolicyID,
                 CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
-                false,
             );
             const emailCreatingAction =
                 engagementChoice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM ? allPersonalDetails?.[actorAccountID]?.login ?? CONST.EMAIL.CONCIERGE : CONST.EMAIL.CONCIERGE;
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
index ca90fc45997e..b77e1bd89f67 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
@@ -1,6 +1,6 @@
 import {useIsFocused as useIsFocusedOriginal, useNavigationState} from '@react-navigation/native';
 import type {ImageContentFit} from 'expo-image';
-import type {ForwardedRef, ReactNode} from 'react';
+import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
@@ -11,7 +11,6 @@ import FloatingActionButton from '@components/FloatingActionButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 import PopoverMenu from '@components/PopoverMenu';
-import {PressableWithoutFeedback} from '@components/Pressable';
 import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
@@ -68,12 +67,6 @@ type FloatingActionButtonAndPopoverProps = {
 
     /* Callback function before the menu is hidden */
     onHideCreateMenu?: () => void;
-
-    /* Render the FAB as an emoji */
-    isEmoji?: boolean;
-
-    /* Emoji content to render when isEmoji */
-    children?: ReactNode;
 };
 
 type FloatingActionButtonAndPopoverRef = {
@@ -173,7 +166,7 @@ const getQuickActionTitle = (action: QuickActionName): TranslationPaths => {
  * Responsible for rendering the {@link PopoverMenu}, and the accompanying
  * FAB that can open or close the menu.
  */
-function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isEmoji, children}: FloatingActionButtonAndPopoverProps, ref: ForwardedRef<FloatingActionButtonAndPopoverRef>) {
+function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: FloatingActionButtonAndPopoverProps, ref: ForwardedRef<FloatingActionButtonAndPopoverRef>) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -469,130 +462,102 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isE
     const canModifyTask = canModifyTaskUtils(viewTourTaskReport, currentUserPersonalDetails.accountID);
     const canActionTask = canActionTaskUtils(viewTourTaskReport, currentUserPersonalDetails.accountID);
 
-    const popoverMenu = (
-        <PopoverMenu
-            onClose={hideCreateMenu}
-            isVisible={isCreateMenuActive && (!shouldUseNarrowLayout || isFocused)}
-            anchorPosition={styles.createMenuPositionSidebar(windowHeight)}
-            onItemSelected={hideCreateMenu}
-            fromSidebarMediumScreen={!shouldUseNarrowLayout}
-            menuItems={[
-                ...expenseMenuItems,
-                {
-                    icon: Expensicons.ChatBubble,
-                    text: translate('sidebarScreen.fabNewChat'),
-                    onSelected: () => interceptAnonymousUser(startNewChat),
-                },
-                ...(canSendInvoice
-                    ? [
-                          {
-                              icon: Expensicons.InvoiceGeneric,
-                              text: translate('workspace.invoices.sendInvoice'),
-                              shouldCallAfterModalHide: shouldRedirectToExpensifyClassic,
-                              onSelected: () =>
-                                  interceptAnonymousUser(() => {
-                                      if (shouldRedirectToExpensifyClassic) {
-                                          setModalVisible(true);
-                                          return;
-                                      }
-
-                                      startMoneyRequest(
-                                          CONST.IOU.TYPE.INVOICE,
-                                          // When starting to create an invoice from the global FAB, there is not an existing report yet. A random optimistic reportID is generated and used
-                                          // for all of the routes in the creation flow.
-                                          generateReportID(),
-                                      );
-                                  }),
-                          },
-                      ]
-                    : []),
-                ...(canUseSpotnanaTravel
-                    ? [
-                          {
-                              icon: Expensicons.Suitcase,
-                              text: translate('travel.bookTravel'),
-                              onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.TRAVEL_MY_TRIPS)),
-                          },
-                      ]
-                    : []),
-                ...(!hasSeenTour
-                    ? [
-                          {
-                              icon: Expensicons.Binoculars,
-                              iconStyles: styles.popoverIconCircle,
-                              iconFill: theme.icon,
-                              text: translate('tour.takeATwoMinuteTour'),
-                              description: translate('tour.exploreExpensify'),
-                              onSelected: () => {
-                                  openExternalLink(navatticURL);
-                                  setSelfTourViewed(isAnonymousUser());
-                                  if (viewTourTaskReport && canModifyTask && canActionTask) {
-                                      completeTask(viewTourTaskReport);
-                                  }
-                              },
-                          },
-                      ]
-                    : []),
-                ...(!isLoading && shouldShowNewWorkspaceButton
-                    ? [
-                          {
-                              displayInDefaultIconColor: true,
-                              contentFit: 'contain' as ImageContentFit,
-                              icon: Expensicons.NewWorkspace,
-                              iconWidth: variables.w46,
-                              iconHeight: variables.h40,
-                              text: translate('workspace.new.newWorkspace'),
-                              description: translate('workspace.new.getTheExpensifyCardAndMore'),
-                              onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute()))),
-                          },
-                      ]
-                    : []),
-                ...quickActionMenuItems,
-            ]}
-            withoutOverlay
-            anchorRef={fabRef}
-        />
-    );
-
-    const confirmModal = (
-        <ConfirmModal
-            prompt={translate('sidebarScreen.redirectToExpensifyClassicModal.description')}
-            isVisible={modalVisible}
-            onConfirm={() => {
-                setModalVisible(false);
-                openOldDotLink(CONST.OLDDOT_URLS.INBOX);
-            }}
-            onCancel={() => setModalVisible(false)}
-            title={translate('sidebarScreen.redirectToExpensifyClassicModal.title')}
-            confirmText={translate('exitSurvey.goToExpensifyClassic')}
-            cancelText={translate('common.cancel')}
-        />
-    );
-
-    if (isEmoji) {
-        return (
-            <>
-                <View style={styles.flexGrow1}>
-                    {popoverMenu}
-                    {confirmModal}
-                </View>
-                <PressableWithoutFeedback
-                    style={styles.customEmoji}
-                    onPress={toggleCreateMenu}
-                    accessible
-                    accessibilityRole={CONST.ROLE.BUTTON}
-                    accessibilityLabel={translate('sidebarScreen.fabNewChatExplained')}
-                >
-                    {children}
-                </PressableWithoutFeedback>
-            </>
-        );
-    }
-
     return (
         <View style={styles.flexGrow1}>
-            {popoverMenu}
-            {confirmModal}
+            <PopoverMenu
+                onClose={hideCreateMenu}
+                isVisible={isCreateMenuActive && (!shouldUseNarrowLayout || isFocused)}
+                anchorPosition={styles.createMenuPositionSidebar(windowHeight)}
+                onItemSelected={hideCreateMenu}
+                fromSidebarMediumScreen={!shouldUseNarrowLayout}
+                menuItems={[
+                    ...expenseMenuItems,
+                    {
+                        icon: Expensicons.ChatBubble,
+                        text: translate('sidebarScreen.fabNewChat'),
+                        onSelected: () => interceptAnonymousUser(startNewChat),
+                    },
+                    ...(canSendInvoice
+                        ? [
+                              {
+                                  icon: Expensicons.InvoiceGeneric,
+                                  text: translate('workspace.invoices.sendInvoice'),
+                                  shouldCallAfterModalHide: shouldRedirectToExpensifyClassic,
+                                  onSelected: () =>
+                                      interceptAnonymousUser(() => {
+                                          if (shouldRedirectToExpensifyClassic) {
+                                              setModalVisible(true);
+                                              return;
+                                          }
+
+                                          startMoneyRequest(
+                                              CONST.IOU.TYPE.INVOICE,
+                                              // When starting to create an invoice from the global FAB, there is not an existing report yet. A random optimistic reportID is generated and used
+                                              // for all of the routes in the creation flow.
+                                              generateReportID(),
+                                          );
+                                      }),
+                              },
+                          ]
+                        : []),
+                    ...(canUseSpotnanaTravel
+                        ? [
+                              {
+                                  icon: Expensicons.Suitcase,
+                                  text: translate('travel.bookTravel'),
+                                  onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.TRAVEL_MY_TRIPS)),
+                              },
+                          ]
+                        : []),
+                    ...(!hasSeenTour
+                        ? [
+                              {
+                                  icon: Expensicons.Binoculars,
+                                  iconStyles: styles.popoverIconCircle,
+                                  iconFill: theme.icon,
+                                  text: translate('tour.takeATwoMinuteTour'),
+                                  description: translate('tour.exploreExpensify'),
+                                  onSelected: () => {
+                                      openExternalLink(navatticURL);
+                                      setSelfTourViewed(isAnonymousUser());
+                                      if (viewTourTaskReport && canModifyTask && canActionTask) {
+                                          completeTask(viewTourTaskReport);
+                                      }
+                                  },
+                              },
+                          ]
+                        : []),
+                    ...(!isLoading && shouldShowNewWorkspaceButton
+                        ? [
+                              {
+                                  displayInDefaultIconColor: true,
+                                  contentFit: 'contain' as ImageContentFit,
+                                  icon: Expensicons.NewWorkspace,
+                                  iconWidth: variables.w46,
+                                  iconHeight: variables.h40,
+                                  text: translate('workspace.new.newWorkspace'),
+                                  description: translate('workspace.new.getTheExpensifyCardAndMore'),
+                                  onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute()))),
+                              },
+                          ]
+                        : []),
+                    ...quickActionMenuItems,
+                ]}
+                withoutOverlay
+                anchorRef={fabRef}
+            />
+            <ConfirmModal
+                prompt={translate('sidebarScreen.redirectToExpensifyClassicModal.description')}
+                isVisible={modalVisible}
+                onConfirm={() => {
+                    setModalVisible(false);
+                    openOldDotLink(CONST.OLDDOT_URLS.INBOX);
+                }}
+                onCancel={() => setModalVisible(false)}
+                title={translate('sidebarScreen.redirectToExpensifyClassicModal.title')}
+                confirmText={translate('exitSurvey.goToExpensifyClassic')}
+                cancelText={translate('common.cancel')}
+            />
             <FloatingActionButton
                 accessibilityLabel={translate('sidebarScreen.fabNewChatExplained')}
                 role={CONST.ROLE.BUTTON}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index a9e1caa5c197..85e0f45c5466 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -15,7 +15,6 @@ import type {ValueOf} from 'type-fest';
 import type DotLottieAnimation from '@components/LottieAnimations/types';
 import {ACTIVE_LABEL_SCALE} from '@components/TextInput/styleConst';
 import {getBrowser, isMobile, isMobileSafari, isSafari} from '@libs/Browser';
-import getPlatform from '@libs/getPlatform';
 import CONST from '@src/CONST';
 import {defaultTheme} from './theme';
 import colors from './theme/colors';
@@ -1674,13 +1673,6 @@ const styles = (theme: ThemeColors) =>
             justifyContent: 'center',
         },
 
-        customEmoji: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            verticalAlign: 'bottom',
-            ...(getPlatform() === CONST.PLATFORM.IOS || getPlatform() === CONST.PLATFORM.ANDROID ? {marginBottom: -variables.iconSizeNormal / 4} : {}),
-        },
-
         sidebarFooterUsername: {
             color: theme.heading,
             fontSize: variables.fontSizeLabel,
