Web:Client:Accounts: update position for badges on row view

packages/client/src/pages/Accounts/Home/Section/Body/Badges.js

@@ -7,6 +7,14 @@ import commonIconsStyles from "@docspace/components/utils/common-icons-style";
 import SendClockIcon from "PUBLIC_DIR/images/send.clock.react.svg";
 import CatalogSpamIcon from "PUBLIC_DIR/images/catalog.spam.react.svg";
 
+const StyledBadgesContainer = styled.div`
+  height: 100%;
+
+  display: flex;
+
+  align-items: center;
+`;
+
 const StyledPaidBadge = styled(Badge)`
   margin-right: 8px;
 `;
@@ -26,9 +34,10 @@ const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
 
 const Badges = ({ statusType, isPaid = true }) => {
   return (
-    <>
+    <StyledBadgesContainer className="badges additional-badges">
       {isPaid && (
         <StyledPaidBadge
+          className="paid-badge"
           label={"Paid"}
           color={"#FFFFFF"}
           backgroundColor={"#EDC409"}
@@ -40,7 +49,7 @@ const Badges = ({ statusType, isPaid = true }) => {
       )}
       {statusType === "pending" && <StyledSendClockIcon size="small" />}
       {statusType === "disabled" && <StyledCatalogSpamIcon size="small" />}
-    </>
+    </StyledBadgesContainer>
   );
 };
 

packages/client/src/pages/Accounts/Home/Section/Body/RowView/userContent.js

@@ -1,11 +1,37 @@
 import React from "react";
+import styled, { css } from "styled-components";
 import { withRouter } from "react-router";
+import { isTablet } from "react-device-detect";
 
 import RowContent from "@docspace/components/row-content";
 import Link from "@docspace/components/link";
 
 import Badges from "../Badges";
 
+const StyledRowContent = styled(RowContent)`
+  ${(props) =>
+    ((props.sectionWidth <= 1024 && props.sectionWidth > 500) || isTablet) &&
+    css`
+      .row-main-container-wrapper {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        max-width: inherit;
+      }
+
+      .badges {
+        flex-direction: row-reverse;
+        margin-top: 9px;
+        margin-right: 12px;
+
+        .paid-badge {
+          margin-left: 8px;
+          margin-right: 0px;
+        }
+      }
+    `}
+`;
+
 const UserContent = ({
   item,
   sectionWidth,
@@ -26,7 +52,7 @@ const UserContent = ({
       : theme.peopleTableRow.sideInfoColor;
 
   return (
-    <RowContent
+    <StyledRowContent
       sideColor={sideInfoColor}
       sectionWidth={sectionWidth}
       nameColor={nameColor}
@@ -45,7 +71,9 @@ const UserContent = ({
       >
         {displayName}
       </Link>
+
       <Badges statusType={statusType} />
+
       <Link
         containerMinWidth="140px"
         containerWidth="17%"
@@ -70,7 +98,7 @@ const UserContent = ({
       >
         {email}
       </Link>
-    </RowContent>
+    </StyledRowContent>
   );
 };