fixed dark theme style

This commit is contained in:
Elyor Djalilov 2023-08-25 17:34:21 +05:00
parent 009a92cc58
commit e584b3aade
9 changed files with 53 additions and 16 deletions

View File

@ -40,6 +40,7 @@ const HeaderContainer = styled.div`
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: ${(props) => props.theme.client.settings.headerTitleColor};
}
}
.action-wrapper {

View File

@ -5,13 +5,24 @@ import styled from "styled-components";
import Button from "@docspace/components/button";
import Text from "@docspace/components/text";
import Box from "@docspace/components/box";
import Checkbox from "@docspace/components/checkbox";
import HelpButton from "@docspace/components/help-button";
const Wrapper = styled.div`
margin: 0 0 16px;
display: flex;
align-items: center;
.checkbox-text {
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
}
`;
const StyledText = styled(Text)`
margin-top: -8px;
margin-bottom: 16px;
font-size: 12px;
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
`;
const ButtonsWrapper = styled.div`
@ -49,7 +60,7 @@ const ImportCompleteStep = ({ t }) => {
{t("Settings:ImportedUsers", { selectedUsers, importedUsers })}
</StyledText>
<Box displayProp="flex" alignItems="center" marginProp="0 0 16px">
<Wrapper>
<Checkbox
label={t("Settings:SendWelcomeLetter")}
isChecked={isChecked}
@ -63,7 +74,7 @@ const ImportCompleteStep = ({ t }) => {
<Text fontSize="12px">{t("Settings:WelcomeLetterTooltip")}</Text>
}
/>
</Box>
</Wrapper>
<ButtonsWrapper>
<Button

View File

@ -11,6 +11,12 @@ const StyledRowContent = styled(RowContent)`
width: 100%;
}
.username {
font-size: 14px;
font-weight: 600;
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
}
.user-email {
margin-right: 5px;
font-size: 12px;
@ -22,7 +28,8 @@ const StyledRowContent = styled(RowContent)`
.user-existing {
font-size: 12px;
font-weight: 600;
color: #2db482;
color: ${(props) =>
props.theme.client.settings.migration.existingTextColor};
}
`;
@ -31,9 +38,7 @@ const UsersRowContent = ({ sectionWidth, displayName, email, dublicate }) => {
const contentData = [
<>
<Text fontWeight={600} fontSize="14px">
{displayName}
</Text>
<Text className="username">{displayName}</Text>
<Box displayProp="flex">
<Text className="user-email">{email}</Text>
{isExistingUser && <Text className="user-existing">{dublicate}</Text>}

View File

@ -10,6 +10,12 @@ const StyledTableRow = styled(TableRow)`
text-overflow: ellipsis;
}
.username {
font-size: 13px;
font-weight: 600;
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
}
.user-email {
margin-right: 5px;
font-size: 13px;
@ -28,7 +34,8 @@ const StyledTableRow = styled(TableRow)`
.user-existing {
font-size: 13px;
font-weight: 600;
color: #2db482;
color: ${(props) =>
props.theme.client.settings.migration.existingTextColor};
}
`;
@ -51,7 +58,7 @@ const UsersTableRow = ({
<StyledTableRow checked={isChecked}>
<TableCell>
<Checkbox isChecked={checkbox.includes(id)} onChange={onChange} />
<Text fontWeight={600}>{displayName}</Text>
<Text className="username">{displayName}</Text>
</TableCell>
<TableCell>

View File

@ -11,6 +11,7 @@ const StyledRowContent = styled(RowContent)`
.row-main-container-wrapper {
width: 100%;
margin-right: 0;
}
.rowMainContainer {
@ -18,6 +19,12 @@ const StyledRowContent = styled(RowContent)`
width: 100%;
}
.username {
font-size: 14px;
font-weight: 600;
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
}
.user-email {
margin-right: 5px;
font-size: 12px;
@ -65,9 +72,7 @@ const UsersTypeRowContent = ({
const contentData = [
<Box displayProp="flex" justifyContent="space-between" alignItems="center">
<Box>
<Text fontWeight={600} fontSize="14px">
{displayName}
</Text>
<Text className="username">{displayName}</Text>
<Text className="user-email">{email}</Text>
</Box>

View File

@ -13,6 +13,12 @@ const StyledTableRow = styled(TableRow)`
text-overflow: ellipsis;
}
.username {
font-size: 13px;
font-weight: 600;
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
}
.user-email {
margin-right: 5px;
font-size: 13px;
@ -68,7 +74,7 @@ const UsersTypeTableRow = ({
<StyledTableRow checked={isChecked}>
<TableCell>
<Checkbox isChecked={checkbox.includes(id)} onChange={onChange} />
<Text fontWeight={600}>{displayName}</Text>
<Text className="username">{displayName}</Text>
</TableCell>
<TableCell>

View File

@ -34,7 +34,7 @@ const SectionWrapper = styled.div`
color: ${(props) =>
props.isChecked
? props.theme.client.settings.migration.subtitleColor
: props.theme.client.settings.migration.importDisableTextColor};
: props.theme.client.settings.migration.importItemDisableTextColor};
margin-top: 4px;
margin-bottom: 12px;
}

View File

@ -2869,6 +2869,7 @@ const Base = {
settings: {
iconFill: black,
headerTitleColor: "#333333",
trashIcon: "#A3A9AE",
article: {
titleColor: grayMain,
@ -3001,6 +3002,7 @@ const Base = {
infoBlockBackground: "#f8f9f9",
infoBlockTextColor: "#555F65",
exceededTextColor: "#F21C0E",
existingTextColor: "#2db482",
tableHeaderText: "#A3A9AE",
tableRowHoverColor: "#F3F4F4",
tableRowTextColor: "#A3A9AE",
@ -3011,7 +3013,6 @@ const Base = {
importItemTextColor: "#555f65",
importItemDisableTextColor: "#A3A9AE",
importItemDescription: "#333333",
importDisableTextColor: "#A3A9AE",
},
},

View File

@ -2875,6 +2875,7 @@ const Dark = {
settings: {
iconFill: white,
headerTitleColor: "#FFFFFF",
trashIcon: "#858585",
article: {
titleColor: "#c4c4c4",
@ -3004,6 +3005,7 @@ const Dark = {
infoBlockBackground: "#282828",
infoBlockTextColor: "#858585",
exceededTextColor: "#E06451",
existingTextColor: "#3BA420",
tableHeaderText: "#858585",
tableRowHoverColor: "#3D3D3D",
tableRowTextColor: "#858585",
@ -3014,7 +3016,6 @@ const Dark = {
importItemTextColor: "#ADADAD",
importItemDisableTextColor: "#5C5C5C",
importItemDescription: "#A3A9AE",
importDisableTextColor: "#5C5C5C",
},
},