Web:Files:VirtualRooms: refactoring tile view

products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/TileView/sub-components/Tile.js

@@ -11,6 +11,8 @@ import RoomLogo from "@appserver/components/room-logo";
 import ContextMenu from "@appserver/components/context-menu";
 import { Base } from "@appserver/components/themes";
 
+import RoomsBadges from "../../../../components/Badges";
+
 const StyledTile = styled.div`
   border: 1px solid #eceef1;
 
@@ -84,14 +86,11 @@ const StyledHeader = styled.div`
 
   display: grid;
   align-items: center;
+
   grid-template-columns: ${(props) =>
-    props.withBadge
-      ? props.isPinned
-        ? "auto 1fr auto auto auto"
-        : "auto 1fr auto auto"
-      : props.isPinned
-      ? "auto 1fr  auto auto"
-      : "auto 1fr auto"};
+    props.withBadge || props.isPinned
+      ? "auto 1fr auto auto"
+      : "auto 1fr  auto"};
 
   .tile-header_heading {
     font-size: 16px;
@@ -100,18 +99,6 @@ const StyledHeader = styled.div`
     margin-right: 12px;
   }
 
-  .tile-header_badge {
-    p {
-      line-height: 16px;
-    }
-  }
-
-  .tile-header_pin-icon {
-    height: 16px;
-
-    margin: 0 0 0 12px;
-  }
-
   .tile-header_context-menu-button {
     margin: 0 6px;
   }
@@ -218,19 +205,12 @@ const Tile = React.forwardRef(
             {title}
           </Heading>
 
-          {!!badge && (
-            <Badge
-              className="tile-header_badge"
-              label={badge}
-              onClick={onBadgeClick}
-            />
-          )}
-
-          {pinned && (
-            <ReactSVG
-              className="tile-header_pin-icon"
-              onClick={onClickPinRoom}
-              src="images/unpin.react.svg"
+          {(!!badge || pinned) && (
+            <RoomsBadges
+              badge={badge}
+              pinned={pinned}
+              onClickPinRoom={onClickPinRoom}
+              onBadgeClick={onBadgeClick}
             />
           )}