fixed dark theme styles

2024-02-01 21:03:33 +05:00 · 2024-02-01 21:03:33 +05:00 · b599d3f078
commit b599d3f078
parent af6bdc9fed
9 changed files with 73 additions and 20 deletions
--- a/packages/client/src/components/panels/UserSessionsPanel/AllSessionsBlock.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/AllSessionsBlock.js
@ -13,7 +13,7 @@ const Wrapper = styled.div`
  }

  .desciption {
-    color: #657077;
+    color: ${(props) => props.theme.activeSessions.subtitleColor};
    margin-bottom: 20px;
  }
 `;
--- a/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js
@ -12,7 +12,7 @@ const StyledLastSessionBlock = styled.div`
  }

  .online {
-    color: #35ad17;
+    color: ${(props) => props.theme.activeSessions.textOnlineColor};
  }

  .session-info-wrapper {
--- a/packages/client/src/components/panels/UserSessionsPanel/UserInfoBlock.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/UserInfoBlock.js
@ -2,6 +2,7 @@ import { Avatar } from "@docspace/shared/components/avatar";
 import { Box } from "@docspace/shared/components/box";
 import { Text } from "@docspace/shared/components/text";
 import { ContextMenuButton } from "@docspace/shared/components/context-menu-button";
+import { Base } from "@docspace/shared/themes";
 import styled from "styled-components";

 import LogoutReactSvgUrl from "PUBLIC_DIR/images/logout.react.svg?url";
@ -18,9 +19,17 @@ const StyledUserInfoBlock = styled.div`
    font-weight: 700;
  }

+  .icon-button_svg {
+    svg {
+      path {
+        fill: ${(props) => props.theme.activeSessions.iconColor};
+      }
+    }
+  }
+
  span {
    font-size: 13px;
-    color: #a3a9ae;
+    color: ${(props) => props.theme.activeSessions.tableCellColor};
    font-weight: 600;
  }

@ -38,6 +47,7 @@ const UserInfoBlock = (props) => {
    setSessionModalData,
  } = props;

+  const { isBase } = Base;
  const { avatar, role, displayName, userType } = data;

  const onClickLogout = () => {
--- a/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js
@ -42,7 +42,7 @@ const StyledRowContent = styled(RowContent)`
    .platform,
    .browser {
      font-size: 14px;
-      color: #333;
+      color: ${(props) => props.theme.activeSessions.color};
      font-weight: 600;
      margin-right: 5px;
    }
@ -50,7 +50,7 @@ const StyledRowContent = styled(RowContent)`
    .date {
      font-size: 14px;
      font-weight: 600;
-      color: #a3a9ae;
+      color: ${(props) => props.theme.activeSessions.tableCellColor};
    }
  }

@ -62,7 +62,7 @@ const StyledRowContent = styled(RowContent)`
    .city {
      font-size: 12px;
      font-weight: 600;
-      color: #a3a9ae;
+      color: ${(props) => props.theme.activeSessions.tableCellColor};
    }

    .city {
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
@ -29,7 +29,7 @@ const StyledRowContent = styled(RowContent)`
    min-width: 250px;
    .session-info {
      font-weight: 600;
-      color: ${(props) => props.theme.activeSessions.textDescriptionColor};
+      color: ${(props) => props.theme.activeSessions.tableCellColor};
      font-size: 12px;
    }

@ -42,7 +42,7 @@ const StyledRowContent = styled(RowContent)`

    .offline {
      font-weight: 600;
-      color: ${(props) => props.theme.activeSessions.textDescriptionColor};
+      color: ${(props) => props.theme.activeSessions.tableCellColor};
      font-size: 14px;
      margin-left: 4px;
    }
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js
@ -115,12 +115,12 @@ const StyledTableRow = styled(TableRow)`

  .session-info {
    font-weight: 600;
-    color: #a3a9ae;
+    color: ${(props) => props.theme.activeSessions.tableCellColor};
  }

-  .session-online {
+  .online {
    font-weight: 600;
-    color: #35ad17;
+    color: ${(props) => props.theme.activeSessions.textOnlineColor};
  }
 `;

@ -258,10 +258,7 @@ const SessionsTableRow = (props) => {
        </TableCell>

        <TableCell>
-          <Text
-            className={isOnline ? "session-online" : "session-info"}
-            truncate
-          >
+          <Text className={isOnline ? "online" : "session-info"} truncate>
            {status}
          </Text>
        </TableCell>
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/mockData.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/mockData.js
@ -35,8 +35,8 @@ const mockData = [
      },
      {
        id: 3,
-        platform: "iOS 17 Apple iPhone",
-        browser: "Mobile Safari 17",
+        platform: "Windows 10",
+        browser: "Edge 120",
        country: "Russia",
        city: "Kstovo",
        date: "2023-12-26T17:13:28+00:00",
@ -63,8 +63,16 @@ const mockData = [
    sessions: [
      {
        id: 1,
-        platform: "Windows 10",
-        browser: "Chrome 120",
+        platform: "Mac OS 14.0.1",
+        browser: "Safari 17",
+        country: "Uzbekistan",
+        city: "Tashkent",
+        date: "2023-12-26T17:13:28+00:00",
+      },
+      {
+        id: 2,
+        platform: "iOS 17 Apple iPhone",
+        browser: "Mobile Safari 17",
        country: "Uzbekistan",
        city: "Tashkent",
        date: "2023-12-26T17:13:28+00:00",
@ -97,6 +105,14 @@ const mockData = [
        city: "Yerevan",
        date: "2023-07-26T17:13:28+00:00",
      },
+      {
+        id: 2,
+        platform: "Mac OS 14.2.1",
+        browser: "Safari 17",
+        country: "Armeni",
+        city: "Yerevan",
+        date: "2023-12-26T17:13:28+00:00",
+      },
    ],
  },
  {
@ -124,6 +140,22 @@ const mockData = [
        city: "Kuznechikha",
        date: "2023-08-26T17:13:28+00:00",
      },
+      {
+        id: 2,
+        platform: "iOS 16 Apple iPhone",
+        browser: "Mobile Safari 16",
+        country: "Russia",
+        city: "Kuznechikha",
+        date: "2023-12-26T17:13:28+00:00",
+      },
+      {
+        id: 3,
+        platform: "Windows 10",
+        browser: "Edge 121",
+        country: "Russia",
+        city: "Kuznechikha",
+        date: "2023-12-26T17:13:28+00:00",
+      },
    ],
  },
  {
@ -151,6 +183,14 @@ const mockData = [
        city: "Frankfurt",
        date: "2023-04-26T17:13:28+00:00",
      },
+      {
+        id: 2,
+        platform: "Windows 10",
+        browser: "Chrome 118",
+        country: "Germany",
+        city: "Frankfurt",
+        date: "2023-12-26T17:13:28+00:00",
+      },
    ],
  },
 ];
--- a/packages/shared/themes/base.ts
+++ b/packages/shared/themes/base.ts
@ -3110,7 +3110,7 @@ export const getBaseTheme = () => {
    },

    activeSessions: {
-      color: "#333",
+      color: "#333333",
      borderColor: "#eceef1",
      tickIconColor: "#35AD17",
      removeIconColor: "#A3A9AE",
@ -3118,6 +3118,9 @@ export const getBaseTheme = () => {
      textDescriptionColor: "#a3a9ae;",
      textOnlineColor: "#35ad17",
      boxShadowColor: "rgba(4, 15, 27, 0.07) 0px 5px 20px",
+      tableCellColor: "#a3a9ae",
+      iconColor: "#657077",
+      subtitleColor: "#657077",
    },

    formWrapper: {
--- a/packages/shared/themes/dark.ts
+++ b/packages/shared/themes/dark.ts
@ -3093,6 +3093,9 @@ const Dark: TTheme = {
    textDescriptionColor: "#858585",
    textOnlineColor: "#3BA420",
    boxShadowColor: "rgba(0, 0, 0, 0.12) 0px 40px 60px",
+    tableCellColor: "#858585",
+    iconColor: "#858585",
+    subtitleColor: "#858585",
  },

  formWrapper: {