selectedItem was substituted with styled one

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/SelectedItem.js

@@ -0,0 +1,59 @@
+import React from "react";
+import styled from "styled-components";
+import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
+
+import Text from "@docspace/components/text";
+import IconButton from "@docspace/components/icon-button";
+import { Base } from "@docspace/components/themes";
+
+const StyledSelectedItem = styled.div`
+  width: fit-content;
+  height: 32px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: start;
+
+  box-sizing: border-box;
+
+  border-radius: 3px;
+
+  padding: 6px 8px;
+
+  margin-right: 4px;
+  margin-bottom: 4px;
+
+  background: ${(props) => props.theme.filterInput.selectedItems.background};
+
+  :hover {
+    background: ${(props) => props.theme.filterInput.selectedItems.hoverBackground};
+  }
+  .selected-item_label {
+    line-height: 20px;
+    margin-right: 10px;
+    max-width: 23ch;
+  }
+`;
+
+StyledSelectedItem.defaultProps = { theme: Base };
+
+const SelectedItem = ({ label, removeSelectedItem }) => {
+  if (!label) return <></>;
+
+  return (
+    <StyledSelectedItem onClick={removeSelectedItem}>
+      <Text className={"selected-item_label"} title={label} truncate={true} noSelect>
+        {label}
+      </Text>
+      <IconButton
+        className="selected-tag-removed"
+        iconName={CrossReactSvgUrl}
+        size={12}
+        onClick={removeSelectedItem}
+        isFill
+      />
+    </StyledSelectedItem>
+  );
+};
+
+export default React.memo(SelectedItem);

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js

@@ -1,25 +1,14 @@
 import React, { useEffect } from "react";
 import moment from "moment";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 
-import SelectedItem from "@docspace/components/selected-item";
+import SelectedItem from "./SelectedItem";
 import Link from "@docspace/components/link";
 
-import { isMobile } from "react-device-detect";
-
 const StatusBarWrapper = styled.div`
   margin-top: 9px;
 
-  .statusBarItem {
-    box-sizing: border-box;
-    margin-right: 4px;
-    ${isMobile &&
-    css`
-      margin-bottom: 4px;
-    `}
-  }
-
   .statusBarItem:last-of-type {
     margin-right: 0;
   }
@@ -52,33 +41,30 @@ const StatusBar = (props) => {
   const SelectedDateTime = () => {
     return (
       <SelectedItem
-        onClose={clearDate}
-        text={
+        label={
           moment(historyFilters.deliveryDate).format("DD MMM YYYY") +
           " " +
           moment(historyFilters.deliveryFrom).format("HH:mm") +
           " - " +
           moment(historyFilters.deliveryTo).format("HH:mm")
         }
-        className="statusBarItem"
+        removeSelectedItem={clearDate}
       />
     );
   };
 
   const SelectedDate = () => (
     <SelectedItem
-      onClose={clearDate}
-      text={moment(historyFilters.deliveryDate).format("DD MMM YYYY")}
-      className="statusBarItem"
+      label={moment(historyFilters.deliveryDate).format("DD MMM YYYY")}
+      removeSelectedItem={clearDate}
     />
   );
 
   const SelectedStatuses = historyFilters.status.map((statusCode) => (
     <SelectedItem
-      onClose={() => unselectStatus(statusCode)}
-      text={statusCode}
+      label={statusCode}
       key={statusCode}
-      className="statusBarItem"
+      removeSelectedItem={() => unselectStatus(statusCode)}
     />
   ));