Web: Client: Settings: use SaveCancelButtons
This commit is contained in:
parent
9aa95c6462
commit
b2d162b630
@ -85,34 +85,6 @@ export const StyledMobileCategoryWrapper = styled.div`
|
||||
|
||||
StyledMobileCategoryWrapper.defaultProps = { theme: Base };
|
||||
|
||||
export const ButtonsWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
width: calc(100vw - 84px);
|
||||
|
||||
.button {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reminder {
|
||||
position: absolute;
|
||||
bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
width: calc(100vw - 32px);
|
||||
}
|
||||
`;
|
||||
|
||||
export const LearnMoreWrapper = styled.div`
|
||||
display: none;
|
||||
|
||||
|
@ -11,10 +11,10 @@ import Checkbox from "@appserver/components/checkbox";
|
||||
import { getLanguage } from "@appserver/common/utils";
|
||||
import { LearnMoreWrapper } from "../StyledSecurity";
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
import Buttons from "../sub-components/buttons";
|
||||
import { size } from "@appserver/components/utils/device";
|
||||
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
||||
|
||||
const MainContainer = styled.div`
|
||||
width: 100%;
|
||||
@ -30,6 +30,7 @@ const MainContainer = styled.div`
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -216,11 +217,16 @@ const PasswordStrength = (props) => {
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Buttons
|
||||
t={t}
|
||||
showReminder={showReminder}
|
||||
<SaveCancelButtons
|
||||
className="save-cancel-buttons"
|
||||
onSaveClick={onSaveClick}
|
||||
onCancelClick={onCancelClick}
|
||||
showReminder={showReminder}
|
||||
reminderTest={t("YouHaveUnsavedChanges")}
|
||||
saveButtonLabel={t("Common:SaveButton")}
|
||||
cancelButtonLabel={t("Common:CancelButton")}
|
||||
displaySettings={true}
|
||||
hasScroll={false}
|
||||
/>
|
||||
</MainContainer>
|
||||
);
|
||||
|
@ -8,13 +8,17 @@ import Text from "@appserver/components/text";
|
||||
import Link from "@appserver/components/link";
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
import { getLanguage } from "@appserver/common/utils";
|
||||
import Buttons from "../sub-components/buttons";
|
||||
import { LearnMoreWrapper } from "../StyledSecurity";
|
||||
import { size } from "@appserver/components/utils/device";
|
||||
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
|
||||
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
||||
|
||||
const MainContainer = styled.div`
|
||||
width: 100%;
|
||||
|
||||
.box {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
const TwoFactorAuth = (props) => {
|
||||
@ -145,11 +149,16 @@ const TwoFactorAuth = (props) => {
|
||||
onClick={onSelectTfaType}
|
||||
/>
|
||||
|
||||
<Buttons
|
||||
t={t}
|
||||
showReminder={showReminder}
|
||||
<SaveCancelButtons
|
||||
className="save-cancel-buttons"
|
||||
onSaveClick={onSaveClick}
|
||||
onCancelClick={onCancelClick}
|
||||
showReminder={showReminder}
|
||||
reminderTest={t("YouHaveUnsavedChanges")}
|
||||
saveButtonLabel={t("Common:SaveButton")}
|
||||
cancelButtonLabel={t("Common:CancelButton")}
|
||||
displaySettings={true}
|
||||
hasScroll={false}
|
||||
/>
|
||||
</MainContainer>
|
||||
);
|
||||
|
@ -10,24 +10,20 @@ import { LearnMoreWrapper } from "../StyledSecurity";
|
||||
import { getLanguage } from "@appserver/common/utils";
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
import UserFields from "../sub-components/user-fields";
|
||||
import Buttons from "../sub-components/buttons";
|
||||
import { size } from "@appserver/components/utils/device";
|
||||
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
||||
|
||||
const MainContainer = styled.div`
|
||||
width: 100%;
|
||||
|
||||
.user-fields {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
margin-bottom: 9px;
|
||||
.save-cancel-buttons {
|
||||
margin-top: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -211,12 +207,16 @@ const TrustedMail = (props) => {
|
||||
/>
|
||||
)}
|
||||
|
||||
<Buttons
|
||||
t={t}
|
||||
showReminder={showReminder}
|
||||
<SaveCancelButtons
|
||||
className="save-cancel-buttons"
|
||||
onSaveClick={onSaveClick}
|
||||
onCancelClick={onCancelClick}
|
||||
isLoading={isSaving}
|
||||
showReminder={showReminder}
|
||||
reminderTest={t("YouHaveUnsavedChanges")}
|
||||
saveButtonLabel={t("Common:SaveButton")}
|
||||
cancelButtonLabel={t("Common:CancelButton")}
|
||||
displaySettings={true}
|
||||
hasScroll={false}
|
||||
/>
|
||||
</MainContainer>
|
||||
);
|
||||
|
@ -1,41 +0,0 @@
|
||||
import React from "react";
|
||||
import Button from "@appserver/components/button";
|
||||
import Text from "@appserver/components/text";
|
||||
import { ButtonsWrapper } from "../StyledSecurity";
|
||||
|
||||
const Buttons = (props) => {
|
||||
const { t, showReminder, onSaveClick, onCancelClick, isLoading } = props;
|
||||
|
||||
return (
|
||||
<ButtonsWrapper>
|
||||
<Button
|
||||
label={t("Common:SaveButton")}
|
||||
size="small"
|
||||
primary={true}
|
||||
className="button"
|
||||
onClick={onSaveClick}
|
||||
isDisabled={!showReminder}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<Button
|
||||
label={t("Common:CancelButton")}
|
||||
size="small"
|
||||
className="button"
|
||||
onClick={onCancelClick}
|
||||
isDisabled={!showReminder || isLoading}
|
||||
/>
|
||||
{showReminder && (
|
||||
<Text
|
||||
color="#A3A9AE"
|
||||
fontSize="12px"
|
||||
fontWeight="600"
|
||||
className="reminder"
|
||||
>
|
||||
{t("YouHaveUnsavedChanges")}
|
||||
</Text>
|
||||
)}
|
||||
</ButtonsWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Buttons;
|
Loading…
Reference in New Issue
Block a user