fix last step error color

This commit is contained in:
Elyor Djalilov 2023-12-23 22:48:40 +05:00
parent 52092c3aa2
commit ff93858291
7 changed files with 53 additions and 31 deletions

View File

@ -7,7 +7,6 @@ import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
import Text from "@docspace/components/text";
import Checkbox from "@docspace/components/checkbox";
import HelpButton from "@docspace/components/help-button";
import Box from "@docspace/components/box";
const Wrapper = styled.div`
margin: 0 0 16px;
@ -19,13 +18,19 @@ const Wrapper = styled.div`
}
`;
const StyledText = styled(Text)`
const InfoText = styled(Text)`
margin-top: -8px;
margin-bottom: 16px;
font-size: 12px;
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
`;
const ErrorText = styled(Text)`
font-size: 12px;
color: ${(props) => props.theme.client.settings.migration.errorTextColor};
margin-bottom: 16px;
`;
const ImportCompleteStep = ({
t,
checkedUsers,
@ -68,19 +73,19 @@ const ImportCompleteStep = ({
return (
<>
<StyledText>
<InfoText>
{t("Settings:ImportedUsers", {
selectedUsers: importResult.succeedUsers,
importedUsers: checkedUsers.result.length,
})}
</StyledText>
</InfoText>
{importResult.failedUsers > 0 && (
<Box marginProp='8px 0 0'>
<Text fontSize="12px" color="#F21C0E">
{t("Settings:ErrorsWereFound", { errors: importResult.failedUsers })}
</Text>
</Box>
<ErrorText>
{t("Settings:ErrorsWereFound", {
errors: importResult.failedUsers,
})}
</ErrorText>
)}
<Wrapper>
@ -93,7 +98,9 @@ const ImportCompleteStep = ({
place="right"
offsetRight={0}
style={{ marginLeft: "4px" }}
tooltipContent={<Text fontSize="12px">{t("Settings:WelcomeLetterTooltip")}</Text>}
tooltipContent={
<Text fontSize="12px">{t("Settings:WelcomeLetterTooltip")}</Text>
}
/>
</Wrapper>
@ -111,8 +118,13 @@ const ImportCompleteStep = ({
};
export default inject(({ importAccountsStore }) => {
const { checkedUsers, importResult, getMigrationLog, clearCheckedAccounts, sendWelcomeLetter } =
importAccountsStore;
const {
checkedUsers,
importResult,
getMigrationLog,
clearCheckedAccounts,
sendWelcomeLetter,
} = importAccountsStore;
return {
checkedUsers,

View File

@ -1,6 +1,7 @@
import { useState } from "react";
import { inject, observer } from "mobx-react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
import Text from "@docspace/components/text";
@ -9,6 +10,12 @@ import HelpButton from "@docspace/components/help-button";
import { Wrapper } from "../StyledStepper";
const ErrorText = styled(Text)`
font-size: 12px;
color: ${(props) => props.theme.client.settings.migration.errorTextColor};
margin-bottom: 16px;
`;
const SeventhStep = ({
t,
checkedUsers,
@ -57,10 +64,11 @@ const SeventhStep = ({
importedUsers: checkedUsers.result.length,
})}
</Text>
{importResult.failedUsers > 0 && (
<Text fontSize="12px" color="#F21C0E" className="mt-8">
<ErrorText>
{t("Settings:ErrorsWereFound", { errors: importResult.failedUsers })}
</Text>
</ErrorText>
)}
<div className="sendLetterBlockWrapper">

View File

@ -5,7 +5,6 @@ import styled from "styled-components";
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
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";
@ -19,13 +18,19 @@ const Wrapper = styled.div`
}
`;
const StyledText = styled(Text)`
const InfoText = styled(Text)`
margin-top: -8px;
margin-bottom: 16px;
font-size: 12px;
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
`;
const ErrorText = styled(Text)`
font-size: 12px;
color: ${(props) => props.theme.client.settings.migration.errorTextColor};
margin-bottom: 16px;
`;
const ImportCompleteStep = ({
t,
checkedUsers,
@ -68,21 +73,19 @@ const ImportCompleteStep = ({
return (
<>
<StyledText>
<InfoText>
{t("Settings:ImportedUsers", {
selectedUsers: importResult.succeedUsers,
importedUsers: checkedUsers.result.length,
})}
</StyledText>
</InfoText>
{importResult.failedUsers > 0 && (
<Box marginProp="8px 0 0">
<Text fontSize="12px" color="#F21C0E">
{t("Settings:ErrorsWereFound", {
errors: importResult.failedUsers,
})}
</Text>
</Box>
<ErrorText>
{t("Settings:ErrorsWereFound", {
errors: importResult.failedUsers,
})}
</ErrorText>
)}
<Wrapper>

View File

@ -11,7 +11,7 @@ const StyledRowContent = styled(RowContent)`
.row-main-container-wrapper {
width: 100%;
margin: 0px;
margin-right: 0px;
}
.rowMainContainer {

View File

@ -10,8 +10,7 @@ const Wrapper = styled.div`
font-size: 12px;
font-weight: 600;
margin-bottom: 16px;
color: ${(props) =>
props.theme.client.settings.migration.exceededTextColor};
color: ${(props) => props.theme.client.settings.migration.errorTextColor};
}
`;
@ -52,7 +51,7 @@ const UsersInfoWrapper = styled.div`
margin-left: 4px;
color: ${(props) =>
props.selectedUsers > props.totalLicenceLimit
? props.theme.client.settings.migration.exceededTextColor
? props.theme.client.settings.migration.errorTextColor
: props.theme.client.settings.migration.infoBlockTextColor};
}
}

View File

@ -3031,7 +3031,7 @@ const Base = {
fileInputIconColor: "#A3A9AE",
infoBlockBackground: "#f8f9f9",
infoBlockTextColor: "#555F65",
exceededTextColor: "#F21C0E",
errorTextColor: "#F21C0E",
existingTextColor: "#2db482",
tableHeaderText: "#A3A9AE",
tableRowHoverColor: "#F3F4F4",

View File

@ -3032,7 +3032,7 @@ const Dark = {
fileInputIconColor: "#5c5c5c",
infoBlockBackground: "#282828",
infoBlockTextColor: "#858585",
exceededTextColor: "#E06451",
errorTextColor: "#E06451",
existingTextColor: "#3BA420",
tableHeaderText: "#858585",
tableRowHoverColor: "#3D3D3D",