+
+ {(isTaskActiveTab || isMentionTabSelected) && (
+
+
+
+
+ {TaskToggle()}
+
+ )}
+
+ {loader}
+
}
+ style={{ height: '2px' }}
+ />
+
+
+
+ {loader}
+ {selectedThread &&
+ !loading &&
+ (activeTab !== ActivityFeedTabs.TASKS ? (
+
+ ) : (
+
+ {entityType === EntityType.TABLE ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+
+ );
+};
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab-new.less b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab-new.less
new file mode 100644
index 000000000000..edfbbea2f26f
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab-new.less
@@ -0,0 +1,410 @@
+/*
+ * Copyright 2023 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import url('../../../styles/variables.less');
+
+.feed-explore-heading {
+ background-color: @grey-1;
+}
+
+.activity-feed-tab {
+ display: flex;
+ width: 100%;
+ width: 100%;
+ overflow-x: hidden;
+
+ .custom-menu.ant-menu-root.ant-menu-inline {
+ .ant-menu-item {
+ height: 40px;
+ }
+ }
+
+ .center-container {
+ flex: 1;
+ min-width: 0;
+ height: @user-profile-page-panel-height;
+ overflow-y: scroll;
+ border-radius: 12px;
+ background-color: @white;
+ padding: 14px 20px 20px 20px;
+ margin-right: 20px;
+ .full-width {
+ flex: 10;
+ }
+ }
+ .right-container {
+ flex: 1;
+ min-width: 0;
+ border: none;
+ height: @user-profile-page-panel-height;
+ overflow-y: scroll;
+ background-color: @white;
+ border-radius: 12px;
+ .full-width {
+ flex: 0;
+ }
+
+ .activity-feed-card-container {
+ margin: 0px;
+ }
+
+ .activity-feed-comments-container {
+ border-radius: 12px;
+ padding: 16px;
+ margin: 20px 0px;
+ border: 0.8px solid #dfdfdf;
+ background: rgba(239, 244, 250, 0.25);
+ }
+
+ .activity-feed-reply-button {
+ border-radius: 24px;
+ border: 1px solid #d4d4d8;
+ color: #52525b;
+ font-size: 12px;
+ }
+ .comments-input-field {
+ background-color: #f4f5f7;
+ border-radius: 20px;
+ border: 1px solid #d4d4d8;
+ height: 36px;
+ font-size: 12px;
+ line-height: 14.52px;
+ }
+ }
+
+ .left-container {
+ flex: 0 0 @left-side-panel-width;
+ border-right: @global-border !important;
+ }
+ .activity-feed-card-new {
+ border-radius: 8px;
+ margin: 10px 0px;
+ background: @grey-9;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ width: inherit;
+ border: none;
+
+ .ant-card-body {
+ width: inherit;
+ padding: 20px;
+
+ .ant-space-item {
+ width: inherit;
+ }
+ }
+
+ .is-active {
+ background: #e6f1fe;
+ }
+
+ .activity-feed-card-message {
+ padding: 12px;
+ background-color: @white;
+ width: inherit;
+ margin-top: 2px;
+ border-radius: 12px;
+ border: none;
+ .ant-card-body {
+ padding: 0px;
+ border: none;
+ border-radius: 12px;
+ }
+ }
+ .activity-feed-card-message-right-panel {
+ background: rgba(239, 244, 250, 0.25);
+ margin-top: 10px;
+ }
+ }
+ .activity-feed-reply-card {
+ border-radius: 8px;
+
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ width: inherit;
+
+ .ant-card-body {
+ width: inherit;
+ padding: 0px;
+ // margin: 10px 0px 20px 0px;
+ padding-top: 20px;
+ border-bottom: 1.5px solid #d4d4d8;
+ background: rgba(239, 244, 250, 0.25);
+
+ padding-bottom: 16px;
+ .ant-space-item {
+ width: inherit;
+ }
+ }
+ .activity-feed-reply-card-message {
+ padding-left: 50px;
+ border: none;
+ background: rgba(239, 244, 250, 0.25);
+ .ant-card-body {
+ margin: 0px;
+ margin-top: -8px;
+ margin-bottom: -6px;
+ border: none;
+ padding: 0px;
+ background: rgba(239, 244, 250, 0.25);
+ }
+ .activity-feed-comment-text {
+ word-wrap: break-word;
+ white-space: normal;
+ color: #535862;
+ }
+ }
+ }
+ .activity-feed-card-new-right-panel {
+ background-color: @white;
+ border: none;
+ }
+}
+
+.activity-feed-task {
+ background-color: @grey-1;
+}
+
+.count-loader.ant-skeleton-element .ant-skeleton-button-sm {
+ width: 72px;
+}
+.activity-feed-editor-container-new {
+ background-color: @grey-9;
+ border: none;
+ border-radius: 10px;
+ .ql-container {
+ background-color: @grey-9;
+ border: none;
+ }
+ .ql-toolbar {
+ background-color: @grey-9;
+ border: none;
+ border-bottom: 1px solid #d9d9d9;
+ }
+ .ql-toolbar button {
+ color: #292929;
+ }
+}
+
+.activity-feed-editor-send-btn {
+ color: @white;
+ .ant-btn.send-button {
+ position: absolute;
+ bottom: 8px;
+ right: 8px;
+ width: 34px;
+ height: 34px;
+ padding: 0;
+ border-radius: 50%;
+ }
+}
+.activity-feed-user-name {
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 20px;
+ letter-spacing: 0.03em;
+ color: #181d27;
+}
+.reply-card-user-name {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 24px;
+ color: #373e44;
+}
+.activity-feed-reply-card-footer {
+ margin-left: 45px;
+}
+.active-card {
+ background-color: #e6f1fe !important;
+}
+
+.task-tab-custom-dropdown {
+ border-radius: 6px;
+ .task-tab-filter-item {
+ color: #535862;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ &.selected {
+ color: #2e90fa;
+ }
+ }
+ .ant-dropdown-menu {
+ padding: 0px;
+ }
+ .task-filter-icon:hover path {
+ stroke: #2e90fa;
+ stroke-width: 2;
+ }
+ .task-count-container {
+ background: #e9eaeb;
+ border-radius: 16px;
+ width: 30px;
+ height: 22px;
+ display: flex;
+ padding: 2px 8px;
+ justify-content: center;
+ align-items: center;
+ &.active {
+ background-color: #2e90fa !important;
+ }
+
+ .task-count-text {
+ color: #414651;
+ text-align: center;
+ font-family: Inter;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 18px;
+ }
+
+ &.active .task-count-text {
+ color: @white;
+ }
+ }
+ .ant-dropdown-menu .ant-dropdown-menu-item {
+ box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
+ padding: 0px;
+ .active {
+ box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
+ background-color: #f5faff;
+
+ svg path {
+ fill: #2e90fa;
+ }
+ }
+ }
+}
+
+.task-toggle {
+ background: white;
+ border-radius: 8px;
+ padding: 4px;
+ border: 1px solid #dce3ec;
+
+ .ant-segmented-item {
+ color: #71717a;
+ transition: all 0.3s ease;
+
+ &-selected {
+ background: #e6f1fe;
+ color: @blue-9;
+ text-align: center;
+
+ .ant-segmented-item-label {
+ color: @blue-9;
+ }
+ svg path {
+ fill: @blue-9;
+ }
+ }
+ }
+ &:hover {
+ background: none !important;
+ }
+
+ &:focus {
+ background: none !important;
+ }
+
+ .ant-segmented:not(.ant-segmented-disabled):hover,
+ .ant-segmented:not(.ant-segmented-disabled):focus {
+ background: none !important;
+ }
+}
+.header-link {
+ word-wrap: break-word;
+ white-space: normal;
+}
+.header-container-card {
+ margin-top: -6px;
+}
+.header-container-right-panel {
+ margin-top: -4px;
+}
+.toggle-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ font-size: 14px;
+ height: 40px;
+ width: 100px;
+
+ .ant-segmented-item-label {
+ color: #71717a;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+ }
+}
+
+.activity-feed-card-container.ant-btn:hover,
+.activity-feed-card-container.ant-btn:focus {
+ background-color: inherit !important;
+ color: inherit !important;
+ border-radius: 12px !important;
+}
+.card-style-feed-header {
+ color: #535862;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+}
+.feed-card-header-v2-timestamp {
+ color: #717680;
+}
+.close-tab-icon {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+}
+.full-width {
+ flex: auto !important; // Applies when .full-width is added to .center-container
+ margin-right: 0px !important;
+}
+.reply-feed-editor {
+ .editor-container {
+ margin: 0px;
+ }
+}
+.footer-container {
+ height: 24px;
+}
+.profile-picture {
+ width: 32px;
+}
+.reply-card {
+ padding-top: @padding-lg;
+}
+.reply-card-border-bottom {
+ border-bottom: 0.5px solid #e4e4e4;
+}
+.reply-message {
+ color: #4a4a4a;
+ white-space: normal;
+ word-break: break-word;
+ display: block;
+ font-size: 12px;
+}
+.seperator {
+ vertical-align: middle;
+ font-size: 18px;
+ font-weight: 800;
+ margin: auto 0px;
+ color: #a1a1aa;
+ margin-bottom: 8px;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Emoji.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Emoji.tsx
index 13fff400eced..a1b0f2169ad0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Emoji.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Emoji.tsx
@@ -113,9 +113,12 @@ const Emoji: FC
= ({
zIndex={9999}
onOpenChange={setVisible}>