refactoring

packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js

@@ -1,71 +1,20 @@
 import styled, { css } from "styled-components";
 import { Text } from "@docspace/shared/components/text";
-import { Box } from "@docspace/shared/components/box";
 import { RowContent } from "@docspace/shared/components/row-content";
-import { tablet, mobile } from "@docspace/shared/utils";
 
 const StyledRowContent = styled(RowContent)`
-  .rowMainContainer {
+  .online {
-    height: 100%;
+    font-weight: 600;
-    width: 100%;
+    color: ${(props) => props.theme.activeSessions.textOnlineColor};
+    margin-left: 4px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
   }
 
-  @media ${tablet} {
+  .offline {
-    .row-main-container-wrapper {
+    font-weight: 600;
-      width: 100%;
+    color: ${(props) => props.theme.activeSessions.tableCellColor};
-      display: flex;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
-      justify-content: space-between;
+    margin-left: 4px;
-      max-width: inherit;
-    }
-  }
-
-  @media ${mobile} {
-    .row-main-container-wrapper {
-      justify-content: flex-start;
-    }
-  }
-
-  .session-info-wrapper {
-    min-width: 250px;
-    .session-info {
-      font-weight: 600;
-      color: ${(props) => props.theme.activeSessions.tableCellColor};
-      font-size: 12px;
-    }
-
-    .online {
-      font-weight: 600;
-      color: ${(props) => props.theme.activeSessions.textOnlineColor};
-      margin-left: 4px;
-      font-size: 14px;
-    }
-
-    .offline {
-      font-weight: 600;
-      color: ${(props) => props.theme.activeSessions.tableCellColor};
-      font-size: 14px;
-      margin-left: 4px;
-    }
-
-    .username {
-      font-weight: 600;
-      color: ${(props) => props.theme.activeSessions.color};
-      font-size: 14px;
-    }
-
-    .additional-row-content {
-      display: flex;
-      align-items: center;
-    }
-
-    .browser,
-    .city {
-      margin-left: 4px;
-    }
-
-    .vr {
-      margin: 0px 4px;
-    }
   }
 `;
 
@@ -83,41 +32,30 @@ const SessionsRowContent = ({ sectionWidth, item }) => {
   } = item;
 
   const isOnline = status === "Online";
-
+  const className = isOnline ? "online" : "offline";
-  const contentData = [
-    <Box key={userId} displayProp="flex" alignItems="center">
-      <Box className="session-info-wrapper">
-        <Box className="main-row-content">
-          <div className="session-info username">
-            {displayName}
-            <span className={isOnline ? "online" : "offline"}>{status}</span>
-          </div>
-        </Box>
-
-        <div className="additional-row-content">
-          <Text className="session-info">
-            {platform},
-            <span className="browser">
-              {browser}
-              <span className="vr">{"|"}</span>
-            </span>
-          </Text>
-          <Text className="session-info" truncate>
-            {country},
-            <span className="city">
-              {city}
-              <span className="vr">{"|"}</span>
-            </span>
-            <span>{ip}</span>
-          </Text>
-        </div>
-      </Box>
-    </Box>,
-  ];
 
   return (
-    <StyledRowContent sectionWidth={sectionWidth}>
+    <StyledRowContent
-      {contentData}
+      key={userId}
+      sectionWidth={sectionWidth}
+      sideColor={theme.activeSessions.tableCellColor}
+    >
+      <Text fontSize="14px" fontWeight="600">
+        {displayName}
+        <span className={className}>{status}</span>
+      </Text>
+      <></>
+      <Text fontSize="12px" fontWeight="600">
+        {platform}
+        {browser}
+      </Text>
+      <Text fontSize="12px" fontWeight="600">
+        {country}
+        {city}
+      </Text>
+      <Text fontSize="12px" fontWeight="600" containerWidth="160px">
+        {ip}
+      </Text>
     </StyledRowContent>
   );
 };

packages/client/src/pages/PortalSettings/categories/security/sessions/mockData.js

@@ -7,9 +7,9 @@ const mockData = [
     role: "owner",
     status: "Online",
     platform: "Windows 10",
-    browser: "Chrome 120",
+    browser: " Chrome 120",
     country: "Russia",
-    city: "Kstovo",
+    city: " Kstovo",
     date: "2023-12-26T17:13:28+00:00",
     ip: "172.18.0.1",
     mobile: false,
@@ -51,9 +51,9 @@ const mockData = [
     userType: "Room admin",
     role: "admin",
     platform: "Mac OS 14.1.2",
-    browser: "Safari 17",
+    browser: " Safari 17",
     country: "Uzbekistan",
-    city: "Tashkent",
+    city: " Tashkent",
     date: "2023-12-26T17:13:28+00:00",
     ip: "172.19.0.1",
     mobile: false,
@@ -87,9 +87,9 @@ const mockData = [
     userType: "Room admin",
     role: "user",
     platform: "Windows 10",
-    browser: "Chrome 119",
+    browser: " Chrome 119",
     country: "Armenia",
-    city: "Yerevan",
+    city: " Yerevan",
     date: "2023-12-26T17:13:28+00:00",
     ip: "172.20.0.1",
     mobile: false,
@@ -122,9 +122,9 @@ const mockData = [
     userType: "Room admin",
     role: "user",
     platform: "Mac OS 14.1.2",
-    browser: "Safari 15",
+    browser: " Safari 15",
     country: "Russia",
-    city: "Kuznechikha",
+    city: " Kuznechikha",
     date: "2023-12-26T17:13:28+00:00",
     ip: "172.21.0.1",
     mobile: false,
@@ -165,7 +165,7 @@ const mockData = [
     userType: "Power user",
     role: "user",
     platform: "Mac OS X 10",
-    browser: "Chrome 119",
+    browser: " Chrome 119",
     country: "Germany",
     city: " Frankfurt",
     date: "2023-12-26T17:13:28+00:00",