From b599d3f07826e07e9e52527171b346a5468fbc81 Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Thu, 1 Feb 2024 21:03:33 +0500 Subject: [PATCH] fixed dark theme styles --- .../UserSessionsPanel/AllSessionsBlock.js | 2 +- .../UserSessionsPanel/LastSessionBlock.js | 2 +- .../panels/UserSessionsPanel/UserInfoBlock.js | 12 ++++- .../RowView/SessionsRowContent.js | 6 +-- .../RowView/SessionsRowContent.js | 4 +- .../TableView/SessionsTableRow.js | 11 ++--- .../categories/security/sessions/mockData.js | 48 +++++++++++++++++-- packages/shared/themes/base.ts | 5 +- packages/shared/themes/dark.ts | 3 ++ 9 files changed, 73 insertions(+), 20 deletions(-) diff --git a/packages/client/src/components/panels/UserSessionsPanel/AllSessionsBlock.js b/packages/client/src/components/panels/UserSessionsPanel/AllSessionsBlock.js index b9a0134ef4..f4abd3597d 100644 --- 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; } `; diff --git a/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js b/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js index 54c6c23981..b7843c92b9 100644 --- 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 { diff --git a/packages/client/src/components/panels/UserSessionsPanel/UserInfoBlock.js b/packages/client/src/components/panels/UserSessionsPanel/UserInfoBlock.js index 2f7c08ab50..709351dca8 100644 --- 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 = () => { diff --git a/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js b/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js index 11467de63c..714e567492 100644 --- 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 { diff --git 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 index 6c22e30bad..8f688c1693 100644 --- 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; } diff --git 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 index accf3f2d8e..4bd2d05c65 100644 --- 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) => { - + {status} diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/mockData.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/mockData.js index 857b8cd063..3e8c9742d1 100644 --- 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", + }, ], }, ]; diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index aa9d0c35f9..43a437eae9 100644 --- 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: { diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index 44db3a00da..ddd7aaaea1 100644 --- 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: {