fixed dark theme styles
This commit is contained in:
parent
af6bdc9fed
commit
b599d3f078
@ -13,7 +13,7 @@ const Wrapper = styled.div`
|
||||
}
|
||||
|
||||
.desciption {
|
||||
color: #657077;
|
||||
color: ${(props) => props.theme.activeSessions.subtitleColor};
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
`;
|
||||
|
@ -12,7 +12,7 @@ const StyledLastSessionBlock = styled.div`
|
||||
}
|
||||
|
||||
.online {
|
||||
color: #35ad17;
|
||||
color: ${(props) => props.theme.activeSessions.textOnlineColor};
|
||||
}
|
||||
|
||||
.session-info-wrapper {
|
||||
|
@ -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 = () => {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
@ -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: {
|
||||
|
@ -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: {
|
||||
|
Loading…
Reference in New Issue
Block a user