Web:Client:Accounts: update colors and add new paid badge for accounts

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

@@ -1,27 +1,43 @@
 import React from "react";
 import styled from "styled-components";
 
+import Badge from "@docspace/components/badge";
 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 StyledPaidBadge = styled(Badge)`
+  margin-right: 8px;
+`;
+
 const StyledSendClockIcon = styled(SendClockIcon)`
   ${commonIconsStyles}
   path {
-    fill: ${(props) => props.theme.peopleTableRow.fill};
+    fill: #a3a9ae;
   }
 `;
 const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
   ${commonIconsStyles}
   path {
-    fill: ${(props) => props.theme.peopleTableRow.fill};
+    fill: #f21c0e;
   }
 `;
 
-const Badges = ({ statusType }) => {
+const Badges = ({ statusType, isPaid = true }) => {
   return (
     <>
+      {isPaid && (
+        <StyledPaidBadge
+          label={"Paid"}
+          color={"#FFFFFF"}
+          backgroundColor={"#EDC409"}
+          fontSize={"9px"}
+          fontWeight={800}
+          lineHeight={"13px"}
+          noHover
+        />
+      )}
       {statusType === "pending" && <StyledSendClockIcon size="small" />}
       {statusType === "disabled" && <StyledCatalogSpamIcon size="small" />}
     </>