Web:Studio:Add BreakpointWarning component.

This commit is contained in:
Vlada Gazizova 2022-07-26 18:08:00 +03:00
parent 4f429cf030
commit 721e442374
5 changed files with 79 additions and 0 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -31,6 +31,8 @@
"BackupList": "Backup List",
"BackupListWarningText": "If you delete any items from the list, their corresponding files will also be deleted. This action cannot be undone. To delete all the files use the link:",
"BrowserNoCanvasSupport": "Your browser does not support the HTML5 canvas tag.",
"BreakpointWarningText": "This section is only available in desktop version",
"BreakpointWarningTextPrompt": "Please use the desktop site to access",
"ByApp": "By authenticator app",
"BySms": "By sms",
"ChangeLogoButton": "Change Logo",

View File

@ -0,0 +1,22 @@
import React from "react";
import { withTranslation } from "react-i18next";
import StyledBreakpointWarning from "./StyledBreakpointWarning";
const BreakpointWarning = ({ t, content }) => {
return (
<StyledBreakpointWarning>
<img src="/static/images/breakpoint-warning.svg" />
<div className="description">
<div className="text-breakpoint">{t("BreakpointWarningText")}</div>
<div className="text-prompt">
{t("BreakpointWarningTextPrompt")} {content}
</div>
</div>
</StyledBreakpointWarning>
);
};
export default withTranslation(["Settings"])(BreakpointWarning);

View File

@ -0,0 +1,27 @@
import styled from "styled-components";
const StyledBreakpointWarning = styled.div`
padding: 44px 44px 0 44px;
.description {
display: flex;
flex-direction: column;
padding-top: 36px;
white-space: break-spaces;
}
.text-breakpoint {
font-weight: 700;
font-size: 16px;
line-height: 22px;
padding-bottom: 8px;
}
.text-prompt {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
`;
export default StyledBreakpointWarning;

View File

@ -0,0 +1 @@
export default from "./BreakpointWarning";