fixed dark theme style
This commit is contained in:
parent
009a92cc58
commit
e584b3aade
@ -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 {
|
||||
|
@ -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
|
||||
|
@ -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>}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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",
|
||||
},
|
||||
},
|
||||
|
||||
|
@ -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",
|
||||
},
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user