Merge pull request #581 from ONLYOFFICE/feature/button-redesign
Feature/button redesign
This commit is contained in:
commit
8f685a76d4
@ -24,7 +24,7 @@ const Footer = (props) => {
|
||||
<Button
|
||||
className="add_members_btn"
|
||||
primary={true}
|
||||
size="big"
|
||||
size="normal"
|
||||
label={`${selectButtonLabel} ${
|
||||
selectedLength && showCounter ? `(${selectedLength})` : ""
|
||||
}`}
|
||||
|
@ -339,7 +339,7 @@ const ErrorContainer = (props) => {
|
||||
<div id="button-container">
|
||||
<Button
|
||||
id="button"
|
||||
size="big"
|
||||
size="normal"
|
||||
scale
|
||||
primary
|
||||
label={buttonText}
|
||||
|
@ -236,7 +236,7 @@ const Template = (args) => (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ marginRight: 16 }}>
|
||||
<Button
|
||||
size="big"
|
||||
size="normal"
|
||||
isDisabled={false}
|
||||
onClick={() => {}}
|
||||
label="Button"
|
||||
@ -245,7 +245,7 @@ const Template = (args) => (
|
||||
</div>
|
||||
|
||||
<Button
|
||||
size="big"
|
||||
size="normal"
|
||||
isDisabled={false}
|
||||
onClick={() => {}}
|
||||
label="Button"
|
||||
|
@ -157,7 +157,7 @@ class AvatarEditor extends React.Component {
|
||||
label={saveButtonLabel}
|
||||
isLoading={saveButtonLoading}
|
||||
primary={true}
|
||||
size="big"
|
||||
size="normal"
|
||||
onClick={this.onSaveButtonClick}
|
||||
/>
|
||||
</ModalDialog.Footer>
|
||||
@ -191,14 +191,14 @@ class AvatarEditor extends React.Component {
|
||||
label={saveButtonLabel}
|
||||
isLoading={saveButtonLoading}
|
||||
primary={true}
|
||||
size="big"
|
||||
size="normal"
|
||||
onClick={this.onSaveButtonClick}
|
||||
/>
|
||||
<Button
|
||||
key="CancelBtn"
|
||||
label={cancelButtonLabel}
|
||||
primary={false}
|
||||
size="big"
|
||||
size="normal"
|
||||
onClick={this.onCancelButtonClick}
|
||||
/>
|
||||
</StyledButtonsWrapper>
|
||||
|
@ -27,7 +27,7 @@ const Template = (args) => {
|
||||
<Button
|
||||
label="Show Backdrop"
|
||||
primary
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={toggleVisible}
|
||||
/>
|
||||
<Backdrop
|
||||
|
@ -10,7 +10,7 @@ import Button from "@appserver/components/button";
|
||||
|
||||
```jsx
|
||||
<Button
|
||||
size="base"
|
||||
size="extraSmall"
|
||||
isDisabled={false}
|
||||
onClick={() => alert("Button clicked")}
|
||||
label="OK"
|
||||
@ -19,20 +19,20 @@ import Button from "@appserver/components/button";
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | :------------: | :------: | :------------------------------: | :-----: | ----------------------------------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `icon` | `node` | - | - | `null` | Icon node element |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isClicked` | `bool` | - | - | `false` | Tells when the button should present a clicked state |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
|
||||
| `isHovered` | `bool` | - | - | `false` | Tells when the button should present a hovered state |
|
||||
| `isLoading` | `bool` | - | - | `false` | Tells when the button should show loader icon |
|
||||
| `label` | `string` | - | - | - | Button text |
|
||||
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
|
||||
| `primary` | `bool` | - | - | `false` | Tells when the button should be primary |
|
||||
| `scale` | `bool` | - | - | `false` | Scale width of button to 100% |
|
||||
| `size` | `oneOf` | - | `base`, `middle`, `big`, `large` | `base` | Size of button |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `tabIndex` | `number` | - | - | `-1` | Button tab index |
|
||||
| `minWidth` | `string` | - | - | `null` | Sets the min width of the button |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | :------------: | :------: | :---------------------------------------: | :----------: | ---------------------------------------------------------------------------------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `icon` | `node` | - | - | `null` | Icon node element |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isClicked` | `bool` | - | - | `false` | Tells when the button should present a clicked state |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
|
||||
| `isHovered` | `bool` | - | - | `false` | Tells when the button should present a hovered state |
|
||||
| `isLoading` | `bool` | - | - | `false` | Tells when the button should show loader icon |
|
||||
| `label` | `string` | - | - | - | Button text |
|
||||
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
|
||||
| `primary` | `bool` | - | - | `false` | Tells when the button should be primary |
|
||||
| `scale` | `bool` | - | - | `false` | Scale width of button to 100% |
|
||||
| `size` | `oneOf` | - | `extraSmall`, `small`, `normal`, `medium` | `extraSmall` | Size of button. The normal size equals 36px and 40px in height on the Desktop and Touchcreen devices |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `tabIndex` | `number` | - | - | `-1` | Button tab index |
|
||||
| `minWidth` | `string` | - | - | `null` | Sets the min width of the button |
|
||||
|
@ -15,7 +15,7 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
const sizes = ["base", "medium", "big", "large"];
|
||||
const sizes = ["extraSmall", "small", "normal", "medium"];
|
||||
|
||||
const Wrapper = (props) => (
|
||||
<div
|
||||
@ -32,7 +32,9 @@ const Wrapper = (props) => (
|
||||
</div>
|
||||
);
|
||||
|
||||
const Template = (args) => <Button {...args} />;
|
||||
const Template = (args) => (
|
||||
<Button {...args} onClick={() => alert("Button clicked")} />
|
||||
);
|
||||
const PrimaryTemplate = (args) => {
|
||||
return (
|
||||
<Wrapper>
|
||||
@ -127,7 +129,6 @@ const ScaleTemplate = (args) => {
|
||||
{...args}
|
||||
primary
|
||||
size={size}
|
||||
isLoading={true}
|
||||
label={`Scale ${size[0].toUpperCase()}${size.slice(1)}`}
|
||||
/>
|
||||
))}
|
||||
@ -136,7 +137,6 @@ const ScaleTemplate = (args) => {
|
||||
key={`all-scale-sec-${size}`}
|
||||
{...args}
|
||||
size={size}
|
||||
isLoading={true}
|
||||
label={`Scale ${size[0].toUpperCase()}${size.slice(1)}`}
|
||||
/>
|
||||
))}
|
||||
@ -180,7 +180,7 @@ const ClickedTemplate = (args) => {
|
||||
primary
|
||||
size={size}
|
||||
isClicked={true}
|
||||
label={`Disabled ${size[0].toUpperCase()}${size.slice(1)}`}
|
||||
label={`Clicked ${size[0].toUpperCase()}${size.slice(1)}`}
|
||||
/>
|
||||
))}
|
||||
{sizes.map((size) => (
|
||||
@ -206,7 +206,7 @@ const HoveredTemplate = (args) => {
|
||||
primary
|
||||
size={size}
|
||||
isHovered={true}
|
||||
label={`Disabled ${size[0].toUpperCase()}${size.slice(1)}`}
|
||||
label={`Hovered ${size[0].toUpperCase()}${size.slice(1)}`}
|
||||
/>
|
||||
))}
|
||||
{sizes.map((size) => (
|
||||
@ -215,7 +215,7 @@ const HoveredTemplate = (args) => {
|
||||
{...args}
|
||||
size={size}
|
||||
isHovered={true}
|
||||
label={`Clicked ${size[0].toUpperCase()}${size.slice(1)}`}
|
||||
label={`Hovered ${size[0].toUpperCase()}${size.slice(1)}`}
|
||||
/>
|
||||
))}
|
||||
</Wrapper>
|
||||
@ -224,8 +224,8 @@ const HoveredTemplate = (args) => {
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
size: "base",
|
||||
label: "Base Button",
|
||||
size: "extraSmall",
|
||||
label: "Button",
|
||||
};
|
||||
export const PrimaryButtons = PrimaryTemplate.bind({});
|
||||
export const SecondaryButtons = SecondaryTemplate.bind({});
|
||||
|
@ -5,53 +5,26 @@ import StyledButton from "./styled-button";
|
||||
import Base from "../themes/base";
|
||||
|
||||
// eslint-disable-next-line no-unused-vars, react/prop-types
|
||||
|
||||
const Icon = ({ size, primary, icon, isHovered, theme }) => (
|
||||
<div className="btnIcon">
|
||||
{icon &&
|
||||
React.cloneElement(icon, {
|
||||
//isfill: true,
|
||||
size: size === "large" ? "large" : size === "big" ? "medium" : "small",
|
||||
color: icon.props.color
|
||||
? isHovered
|
||||
? icon.props.hoveredcolor
|
||||
: icon.props.color
|
||||
: "",
|
||||
theme: theme,
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
Icon.propTypes = {
|
||||
icon: PropTypes.node,
|
||||
size: PropTypes.string,
|
||||
primary: PropTypes.bool,
|
||||
};
|
||||
|
||||
Icon.defaultProps = {
|
||||
icon: null,
|
||||
};
|
||||
|
||||
const Button = React.forwardRef((props, ref) => {
|
||||
const { primary, size, isLoading, icon, label, isHovered, theme } = props;
|
||||
const iconProps = { primary, size, icon, isHovered, theme };
|
||||
|
||||
const { primary, size, isLoading, icon, label } = props;
|
||||
return (
|
||||
<StyledButton innerRef={ref} {...props}>
|
||||
{isLoading || icon ? (
|
||||
isLoading ? (
|
||||
<Loader
|
||||
type="oval"
|
||||
size={size === "large" ? "18px" : size === "big" ? "16px" : "14px"}
|
||||
className="loader"
|
||||
/>
|
||||
) : (
|
||||
<Icon {...iconProps} />
|
||||
)
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{label}
|
||||
<div className="button-content">
|
||||
{(isLoading || icon) &&
|
||||
(isLoading ? (
|
||||
<Loader
|
||||
type="oval"
|
||||
size={
|
||||
size === "medium" ? "20px" : size === "normal" ? "16px" : "12px"
|
||||
}
|
||||
color={primary ? "#FFFFFF" : "#333333"}
|
||||
className="loader"
|
||||
/>
|
||||
) : (
|
||||
<div className="icon">{icon}</div>
|
||||
))}
|
||||
{label}
|
||||
</div>
|
||||
</StyledButton>
|
||||
);
|
||||
});
|
||||
@ -61,8 +34,10 @@ Button.propTypes = {
|
||||
label: PropTypes.string,
|
||||
/** Tells when the button should be primary */
|
||||
primary: PropTypes.bool,
|
||||
/** Size of button */
|
||||
size: PropTypes.oneOf(["base", "medium", "big", "large"]),
|
||||
/** Size of button.
|
||||
|
||||
The normal size equals 36px and 40px in height on the Desktop and Touchcreen devices. */
|
||||
size: PropTypes.oneOf(["extraSmall", "small", "normal", "medium"]),
|
||||
/** Scale width of button to 100% */
|
||||
scale: PropTypes.bool,
|
||||
/** Icon node element */
|
||||
@ -94,15 +69,12 @@ Button.propTypes = {
|
||||
Button.defaultProps = {
|
||||
label: "",
|
||||
primary: false,
|
||||
size: "base",
|
||||
size: "extraSmall",
|
||||
theme: Base,
|
||||
scale: false,
|
||||
icon: null,
|
||||
|
||||
tabIndex: -1,
|
||||
|
||||
minwidth: null,
|
||||
|
||||
isHovered: false,
|
||||
disableHover: false,
|
||||
isClicked: false,
|
||||
@ -111,5 +83,4 @@ Button.defaultProps = {
|
||||
};
|
||||
|
||||
Button.displayName = "Button";
|
||||
|
||||
export default Button;
|
||||
|
@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
|
||||
import PropTypes from "prop-types";
|
||||
import NoUserSelect from "../utils/commonStyles";
|
||||
import Base from "../themes/base";
|
||||
import { isDesktop } from "../utils/device";
|
||||
|
||||
const activeCss = css`
|
||||
background-color: ${(props) =>
|
||||
@ -107,49 +108,23 @@ const disableCss = css`
|
||||
`;
|
||||
|
||||
const heightStyle = (props) => props.theme.button.height[props.size];
|
||||
const lineHeightStyle = (props) => props.theme.button.lineHeight[props.size];
|
||||
const fontSizeStyle = (props) => props.theme.button.fontSize[props.size];
|
||||
|
||||
const ButtonWrapper = ({
|
||||
primary,
|
||||
scale,
|
||||
size,
|
||||
isHovered,
|
||||
isClicked,
|
||||
isDisabled,
|
||||
disableHover,
|
||||
isLoading,
|
||||
label,
|
||||
innerRef,
|
||||
minWidth,
|
||||
...props
|
||||
}) => {
|
||||
const ButtonWrapper = ({ innerRef, ...props }) => {
|
||||
return <button ref={innerRef} type="button" {...props}></button>;
|
||||
};
|
||||
|
||||
ButtonWrapper.propTypes = {
|
||||
label: PropTypes.string,
|
||||
primary: PropTypes.bool,
|
||||
size: PropTypes.oneOf(["base", "medium", "big", "large"]),
|
||||
scale: PropTypes.bool,
|
||||
icon: PropTypes.node,
|
||||
|
||||
tabIndex: PropTypes.number,
|
||||
|
||||
isHovered: PropTypes.bool,
|
||||
isClicked: PropTypes.bool,
|
||||
isDisabled: PropTypes.bool,
|
||||
disableHover: PropTypes.bool,
|
||||
isLoading: PropTypes.bool,
|
||||
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
||||
disabled: props.isDisabled || props.isLoading ? "disabled" : "",
|
||||
tabIndex: props.tabIndex,
|
||||
size:
|
||||
props.size === "normal"
|
||||
? isDesktop()
|
||||
? "normalDesktop"
|
||||
: "normalTouchscreen"
|
||||
: props.size,
|
||||
}))`
|
||||
height: ${(props) => heightStyle(props)};
|
||||
line-height: ${(props) => lineHeightStyle(props)};
|
||||
font-size: ${(props) => fontSizeStyle(props)};
|
||||
|
||||
color: ${(props) =>
|
||||
@ -167,86 +142,11 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
||||
? props.theme.button.border.primary
|
||||
: props.theme.button.border.base};
|
||||
|
||||
${(props) => props.scale && `width: 100%;`}
|
||||
${(props) => props.scale && `width: 100%;`};
|
||||
min-width: ${(props) =>
|
||||
props.minwidth ? props.minwidth : props.theme.button.minWidth[props.size]};
|
||||
|
||||
.btnIcon {
|
||||
svg {
|
||||
path {
|
||||
fill: ${(props) =>
|
||||
props.primary
|
||||
? props.theme.button.color.primary
|
||||
: props.theme.button.color.base};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
padding: ${(props) =>
|
||||
(props.size === "large" &&
|
||||
(props.primary
|
||||
? props.icon
|
||||
? props.label
|
||||
? "11px 24px 13px 24px"
|
||||
: "11px 11px 13px 11px"
|
||||
: props.label
|
||||
? "12px 20px 12px 20px"
|
||||
: "0px"
|
||||
: props.icon
|
||||
? props.label
|
||||
? "10px 24px 13px 24px"
|
||||
: "10px 11px 13px 11px"
|
||||
: props.label
|
||||
? "11px 20px 12px 20px"
|
||||
: "0px")) ||
|
||||
(props.size === "big" &&
|
||||
(props.primary
|
||||
? props.icon
|
||||
? props.label
|
||||
? "8px 24px 9px 24px"
|
||||
: "8px 10px 9px 10px"
|
||||
: props.label
|
||||
? "8px 16px 8px 16px"
|
||||
: "0px"
|
||||
: props.icon
|
||||
? props.label
|
||||
? "7px 24px 9px 24px"
|
||||
: "7px 10px 9px 10px"
|
||||
: props.label
|
||||
? "7px 16px 8px 16px"
|
||||
: "0px")) ||
|
||||
(props.size === "medium" &&
|
||||
(props.primary
|
||||
? props.icon
|
||||
? props.label
|
||||
? "6px 24px 7px 24px"
|
||||
: "6px 10px 7px 10px"
|
||||
: props.label
|
||||
? "7px 16px 7px 16px"
|
||||
: "0px"
|
||||
: props.icon
|
||||
? props.label
|
||||
? "5px 24px 7px 24px"
|
||||
: "5px 10px 7px 10px"
|
||||
: props.label
|
||||
? "6px 16px 7px 16px"
|
||||
: "0px")) ||
|
||||
(props.size === "base" &&
|
||||
(props.primary
|
||||
? props.icon
|
||||
? props.label
|
||||
? "3px 20px 5px 20px"
|
||||
: "3px 5px 5px 5px"
|
||||
: props.label
|
||||
? "4px 12px 5px 12px"
|
||||
: "0px"
|
||||
: props.icon
|
||||
? props.label
|
||||
? "2px 20px 5px 20px"
|
||||
: "2px 5px 5px 5px"
|
||||
: props.label
|
||||
? "3px 12px 5px 12px"
|
||||
: "0px"))};
|
||||
|
||||
${(props) => (props.minwidth ? `min-width: ${props.minwidth};` : null)}
|
||||
padding: ${(props) => `${props.theme.button.padding[props.size]}`};
|
||||
|
||||
cursor: ${(props) =>
|
||||
props.isDisabled || props.isLoading ? "default !important" : "pointer"};
|
||||
@ -300,13 +200,24 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
||||
outline: ${(props) => props.theme.button.outline};
|
||||
}
|
||||
|
||||
.btnIcon,
|
||||
.loader {
|
||||
display: ${(props) => props.theme.button.display};
|
||||
vertical-align: ${(props) => props.theme.button.topVerticalAlign};
|
||||
.button-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
svg {
|
||||
stroke: ${(props) =>
|
||||
props.primary
|
||||
@ -314,23 +225,32 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
||||
: props.theme.button.loader.base};
|
||||
}
|
||||
vertical-align: ${(props) =>
|
||||
props.size === "large" || props.size === "base"
|
||||
props.size === "normalTouchscreen" || props.size === "extraSmall"
|
||||
? props.theme.button.middleVerticalAlign
|
||||
: props.size === "medium"
|
||||
: props.size === "small"
|
||||
? props.theme.button.bottomVerticalAlign
|
||||
: props.theme.button.topVerticalAlign};
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.label &&
|
||||
css`
|
||||
.btnIcon,
|
||||
.loader {
|
||||
padding-right: ${(props) => props.theme.button.paddingRight};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
ButtonWrapper.propTypes = {
|
||||
label: PropTypes.string,
|
||||
primary: PropTypes.bool,
|
||||
size: PropTypes.oneOf(["extraSmall", "small", "normal", "medium"]),
|
||||
scale: PropTypes.bool,
|
||||
icon: PropTypes.node,
|
||||
|
||||
tabIndex: PropTypes.number,
|
||||
|
||||
isHovered: PropTypes.bool,
|
||||
isClicked: PropTypes.bool,
|
||||
isDisabled: PropTypes.bool,
|
||||
disableHover: PropTypes.bool,
|
||||
isLoading: PropTypes.bool,
|
||||
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
StyledButton.defaultProps = { theme: Base };
|
||||
|
||||
export default StyledButton;
|
||||
|
@ -38,7 +38,7 @@ const CampaignsBanner = (props) => {
|
||||
<Button
|
||||
className="banner-btn"
|
||||
primary
|
||||
size="medium"
|
||||
size="small"
|
||||
isDisabled={false}
|
||||
disableHover={true}
|
||||
label={btnLabel}
|
||||
|
@ -158,7 +158,7 @@ const Template = ({
|
||||
<Button
|
||||
label={`${isVisible ? "Hide" : "Show"} menu`}
|
||||
primary
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={toggleVisible}
|
||||
/>
|
||||
|
||||
|
@ -222,7 +222,7 @@ const MainButtonMobile = (props) => {
|
||||
label={title}
|
||||
className="action-mobile-button"
|
||||
primary
|
||||
size="large"
|
||||
size="medium"
|
||||
onClick={onUploadClick}
|
||||
/>
|
||||
</StyledButtonWrapper>
|
||||
|
@ -32,7 +32,7 @@ const Template = ({ onClick, onClose, onOk, ...args }) => {
|
||||
<Button
|
||||
label="Show"
|
||||
primary={true}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={toggleVisible}
|
||||
/>
|
||||
<ModalDialog
|
||||
@ -55,7 +55,7 @@ const Template = ({ onClick, onClose, onOk, ...args }) => {
|
||||
key="SendBtn"
|
||||
label="Send"
|
||||
primary={true}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
onOk(e);
|
||||
setIsVisible(!isVisible);
|
||||
|
@ -41,7 +41,7 @@ const Paging = (props) => {
|
||||
<StyledPaging id={id} className={className} style={style}>
|
||||
<Button
|
||||
className="buttonCustomStyle not-selectable"
|
||||
size="medium"
|
||||
size="small"
|
||||
scale={true}
|
||||
label={previousLabel}
|
||||
onClick={previousAction}
|
||||
@ -63,7 +63,7 @@ const Paging = (props) => {
|
||||
)}
|
||||
<Button
|
||||
className="buttonCustomStyle not-selectable"
|
||||
size="medium"
|
||||
size="small"
|
||||
scale={true}
|
||||
label={nextLabel}
|
||||
onClick={nextAction}
|
||||
|
@ -62,7 +62,7 @@ class SaveCancelButtons extends React.Component {
|
||||
<div className="buttons-flex">
|
||||
<Button
|
||||
className="save-button"
|
||||
size="big"
|
||||
size="normal"
|
||||
isDisabled={isDisabled}
|
||||
primary
|
||||
onClick={onSaveClick}
|
||||
@ -70,7 +70,7 @@ class SaveCancelButtons extends React.Component {
|
||||
/>
|
||||
<Button
|
||||
className="cancel-button"
|
||||
size="big"
|
||||
size="normal"
|
||||
isDisabled={isDisabled}
|
||||
onClick={onCancelClick}
|
||||
label={cancelButtonLabel}
|
||||
|
@ -96,36 +96,43 @@ const Base = {
|
||||
paddingRight: "4px",
|
||||
|
||||
height: {
|
||||
base: "24px",
|
||||
medium: "32px",
|
||||
big: "36px",
|
||||
large: "44px",
|
||||
extraSmall: "24px",
|
||||
small: "32px",
|
||||
normalDesktop: "36px",
|
||||
normalTouchscreen: "40px",
|
||||
medium: "44px",
|
||||
},
|
||||
|
||||
lineHeight: {
|
||||
base: "15px",
|
||||
medium: "18px",
|
||||
big: "20px",
|
||||
large: "20px",
|
||||
extraSmall: "15px",
|
||||
small: "20px",
|
||||
normalDesktop: "16px",
|
||||
normalTouchscreen: "16px",
|
||||
medium: "22px",
|
||||
},
|
||||
|
||||
fontSize: {
|
||||
base: "12px",
|
||||
medium: "13px",
|
||||
big: "14px",
|
||||
large: "16px",
|
||||
extraSmall: "12px",
|
||||
small: "13px",
|
||||
normalDesktop: "14px",
|
||||
normalTouchscreen: "14px",
|
||||
medium: "16px",
|
||||
},
|
||||
|
||||
padding: {
|
||||
base: "0 14px",
|
||||
medium: "0 18px",
|
||||
big: "0 20px",
|
||||
extraSmall: "0 12px",
|
||||
small: "0 28px",
|
||||
normalDesktop: "0 28px",
|
||||
normalTouchscreen: "0 28px",
|
||||
medium: "0 32px",
|
||||
},
|
||||
|
||||
minWidth: {
|
||||
base: "65px",
|
||||
medium: "80px",
|
||||
big: "85px",
|
||||
extraSmall: "none",
|
||||
small: "100px",
|
||||
normalDesktop: "100px",
|
||||
normalTouchscreen: "100px",
|
||||
medium: "100px",
|
||||
},
|
||||
|
||||
color: {
|
||||
|
@ -96,36 +96,43 @@ const Dark = {
|
||||
paddingRight: "4px",
|
||||
|
||||
height: {
|
||||
base: "24px",
|
||||
medium: "32px",
|
||||
big: "36px",
|
||||
large: "44px",
|
||||
extraSmall: "24px",
|
||||
small: "32px",
|
||||
normalDesktop: "36px",
|
||||
normalTouchscreen: "40px",
|
||||
medium: "44px",
|
||||
},
|
||||
|
||||
lineHeight: {
|
||||
base: "15px",
|
||||
medium: "18px",
|
||||
big: "20px",
|
||||
large: "20px",
|
||||
extraSmall: "15px",
|
||||
small: "20px",
|
||||
normalDesktop: "16px",
|
||||
normalTouchscreen: "16px",
|
||||
medium: "22px",
|
||||
},
|
||||
|
||||
fontSize: {
|
||||
base: "12px",
|
||||
medium: "13px",
|
||||
big: "14px",
|
||||
large: "16px",
|
||||
extraSmall: "12px",
|
||||
small: "13px",
|
||||
normalDesktop: "14px",
|
||||
normalTouchscreen: "14px",
|
||||
medium: "16px",
|
||||
},
|
||||
|
||||
padding: {
|
||||
base: "0 14px",
|
||||
medium: "0 18px",
|
||||
big: "0 20px",
|
||||
extraSmall: "0 12px",
|
||||
small: "0 28px",
|
||||
normalDesktop: "0 28px",
|
||||
normalTouchscreen: "0 28px",
|
||||
medium: "0 32px",
|
||||
},
|
||||
|
||||
minWidth: {
|
||||
base: "65px",
|
||||
medium: "80px",
|
||||
big: "85px",
|
||||
extraSmall: "none",
|
||||
small: "100px",
|
||||
normalDesktop: "100px",
|
||||
normalTouchscreen: "100px",
|
||||
medium: "100px",
|
||||
},
|
||||
|
||||
color: {
|
||||
|
@ -12,7 +12,7 @@ const BaseTemplate = ({ type, data, title, timeout, withCross, ...args }) => {
|
||||
<Button
|
||||
label="Show toast"
|
||||
primary
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
switch (type) {
|
||||
case "error":
|
||||
@ -150,7 +150,7 @@ const AllTemplate = (args) => {
|
||||
<Button
|
||||
label="Show all toast"
|
||||
primary
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={() => renderAllToast()}
|
||||
/>
|
||||
</>
|
||||
|
@ -233,7 +233,7 @@ const EditingWrapperComponent = (props) => {
|
||||
<>
|
||||
<Button
|
||||
className="edit-button not-selectable"
|
||||
size="medium"
|
||||
size="small"
|
||||
isDisabled={isLoading}
|
||||
onClick={onClickUpdateItem}
|
||||
icon={okIcon}
|
||||
|
@ -194,7 +194,7 @@ const ConflictResolveDialog = (props) => {
|
||||
className="button-dialog-accept"
|
||||
key="OkButton"
|
||||
label={t("Common:OKButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
scale
|
||||
onClick={onAcceptType}
|
||||
@ -204,7 +204,7 @@ const ConflictResolveDialog = (props) => {
|
||||
className="button-dialog"
|
||||
key="CancelButton"
|
||||
label={t("Common:CancelButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
scale
|
||||
onClick={onCloseDialog}
|
||||
//isLoading={isLoading}
|
||||
|
@ -212,7 +212,7 @@ const PureConnectDialogContainer = (props) => {
|
||||
<FieldContainer labelVisible labelText={t("Account")} isVertical>
|
||||
<Button
|
||||
label={t("Reconnect")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={onReconnect}
|
||||
scale
|
||||
isDisabled={isLoading}
|
||||
@ -307,7 +307,7 @@ const PureConnectDialogContainer = (props) => {
|
||||
<Button
|
||||
tabIndex={5}
|
||||
label={t("Common:SaveButton")}
|
||||
size="big"
|
||||
size="normal"
|
||||
primary
|
||||
onClick={onSave}
|
||||
isDisabled={isLoading}
|
||||
|
@ -124,7 +124,7 @@ const ConvertDialogComponent = (props) => {
|
||||
className="convert_dialog_button-accept"
|
||||
key="ContinueButton"
|
||||
label={t("Common:ContinueButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={onConvert}
|
||||
/>
|
||||
@ -132,7 +132,7 @@ const ConvertDialogComponent = (props) => {
|
||||
className="convert_dialog_button"
|
||||
key="CloseButton"
|
||||
label={t("Common:CloseButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
|
@ -193,7 +193,7 @@ const ConvertPasswordDialogComponent = (props) => {
|
||||
className="convert-password-dialog_button"
|
||||
key="ContinueButton"
|
||||
label={t("Common:SaveButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={onConvert}
|
||||
isLoading={isLoading}
|
||||
@ -202,7 +202,7 @@ const ConvertPasswordDialogComponent = (props) => {
|
||||
className="convert-password-dialog_button"
|
||||
key="CloseButton"
|
||||
label={t("Common:CloseButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
|
@ -258,7 +258,7 @@ class DeleteDialogComponent extends React.Component {
|
||||
className="button-dialog-accept"
|
||||
key="OkButton"
|
||||
label={accessButtonLabel}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={unsubscribe ? this.onUnsubscribe : this.onDelete}
|
||||
isLoading={isLoading}
|
||||
@ -268,7 +268,7 @@ class DeleteDialogComponent extends React.Component {
|
||||
className="button-dialog"
|
||||
key="CancelButton"
|
||||
label={t("Common:CancelButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={this.onClose}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
@ -80,7 +80,7 @@ const DeleteThirdPartyDialog = (props) => {
|
||||
<Button
|
||||
isLoading={isLoading}
|
||||
label={t("Common:OKButton")}
|
||||
size="big"
|
||||
size="normal"
|
||||
primary
|
||||
onClick={onDeleteThirdParty}
|
||||
/>
|
||||
|
@ -479,7 +479,7 @@ class DownloadDialogComponent extends React.Component {
|
||||
className="button-dialog-accept"
|
||||
key="DownloadButton"
|
||||
label={t("Common:Download")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={this.onDownload}
|
||||
/>
|
||||
@ -487,7 +487,7 @@ class DownloadDialogComponent extends React.Component {
|
||||
className="button-dialog"
|
||||
key="CancelButton"
|
||||
label={t("Common:CancelButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={this.onClose}
|
||||
/>
|
||||
</ModalDialog.Footer>
|
||||
|
@ -42,7 +42,7 @@ const EmptyTrashDialogComponent = (props) => {
|
||||
<Button
|
||||
key="OkButton"
|
||||
label={t("DeleteForeverButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={onEmptyTrash}
|
||||
isLoading={isLoading}
|
||||
@ -51,7 +51,7 @@ const EmptyTrashDialogComponent = (props) => {
|
||||
className="button-dialog"
|
||||
key="CancelButton"
|
||||
label={t("Common:CancelButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={onClose}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
@ -111,7 +111,7 @@ const PureThirdPartyMoveContainer = ({
|
||||
<Button
|
||||
className="operation-button"
|
||||
label={t("Translations:Move")}
|
||||
size="big"
|
||||
size="normal"
|
||||
scale
|
||||
primary
|
||||
onClick={startOperation}
|
||||
@ -122,7 +122,7 @@ const PureThirdPartyMoveContainer = ({
|
||||
data-copy="copy"
|
||||
className="operation-button"
|
||||
label={t("Translations:Copy")}
|
||||
size="big"
|
||||
size="normal"
|
||||
scale
|
||||
onClick={startOperation}
|
||||
isLoading={isLoading}
|
||||
@ -131,7 +131,7 @@ const PureThirdPartyMoveContainer = ({
|
||||
<Button
|
||||
className="operation-button"
|
||||
label={t("Common:CancelButton")}
|
||||
size="big"
|
||||
size="normal"
|
||||
scale
|
||||
onClick={onClose}
|
||||
isLoading={isLoading}
|
||||
|
@ -122,7 +122,7 @@ class ChangeOwnerComponent extends React.Component {
|
||||
<StyledFooter>
|
||||
<Button
|
||||
label={t("Common:SaveButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
scale
|
||||
primary
|
||||
onClick={this.onOwnerChange}
|
||||
|
@ -231,14 +231,14 @@ class NewFilesPanel extends React.Component {
|
||||
<Button
|
||||
className="new_files_panel-button"
|
||||
label={t("MarkAsRead")}
|
||||
size="big"
|
||||
size="normal"
|
||||
primary
|
||||
onClick={this.onMarkAsRead}
|
||||
/>
|
||||
<Button
|
||||
className="sharing_panel-button"
|
||||
label={t("Common:CloseButton")}
|
||||
size="big"
|
||||
size="normal"
|
||||
onClick={this.onClose}
|
||||
/>
|
||||
</StyledFooter>
|
||||
|
@ -179,7 +179,7 @@ const OperationsPanelComponent = (props) => {
|
||||
? t("Translations:Copy")
|
||||
: t("Translations:Move")
|
||||
}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={onSubmit}
|
||||
isLoading={isLoading}
|
||||
|
@ -134,9 +134,9 @@ const SelectFileDialogAsideView = ({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StyledSelectFilePanel>
|
||||
</ModalDialog.Body>
|
||||
<ModalDialog.Footer theme={theme}>
|
||||
@ -149,14 +149,14 @@ const SelectFileDialogAsideView = ({
|
||||
theme={theme}
|
||||
className="select-file-dialog-buttons-save"
|
||||
primary
|
||||
size="big"
|
||||
size="normal"
|
||||
label={primaryButtonName}
|
||||
onClick={onClickSave}
|
||||
isDisabled={selectedFile.length === 0}
|
||||
/>
|
||||
<Button
|
||||
size="normal"
|
||||
theme={theme}
|
||||
size="big"
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
@ -259,7 +259,7 @@ class SelectFileDialogModalView extends React.Component {
|
||||
theme={theme}
|
||||
className="select-file-modal-dialog-buttons-save"
|
||||
primary
|
||||
size="medium"
|
||||
size="small"
|
||||
label={primaryButtonName}
|
||||
onClick={onClickSave}
|
||||
isDisabled={selectedFile.length === 0}
|
||||
@ -267,7 +267,7 @@ class SelectFileDialogModalView extends React.Component {
|
||||
<Button
|
||||
theme={theme}
|
||||
className="modal-dialog-button"
|
||||
size="medium"
|
||||
size="small"
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
@ -96,14 +96,13 @@ const SelectFolderDialogAsideView = ({
|
||||
theme={theme}
|
||||
className="select-folder-dialog-buttons-save"
|
||||
primary
|
||||
size="big"
|
||||
size="normal"
|
||||
label={primaryButtonName}
|
||||
onClick={onSave}
|
||||
isDisabled={isLoadingData || !isAvailable || !canCreate}
|
||||
/>
|
||||
<Button
|
||||
theme={theme}
|
||||
size="big"
|
||||
size="normal"
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={onClose}
|
||||
isDisabled={isLoadingData || isLoading}
|
||||
|
@ -73,14 +73,13 @@ const SelectFolderDialogModalView = ({
|
||||
theme={theme}
|
||||
className="select-folder-dialog-buttons-save"
|
||||
primary
|
||||
size="medium"
|
||||
size="small"
|
||||
label={primaryButtonName}
|
||||
onClick={onSave}
|
||||
isDisabled={isLoadingData || !isAvailable || !canCreate}
|
||||
/>
|
||||
<Button
|
||||
theme={theme}
|
||||
size="medium"
|
||||
size="small"
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={onClose}
|
||||
isDisabled={isLoadingData || isLoading}
|
||||
|
@ -591,7 +591,7 @@ class SharingPanelComponent extends React.Component {
|
||||
<Button
|
||||
className="sharing_panel-button"
|
||||
label={t("Common:SaveButton")}
|
||||
size="big"
|
||||
size="normal"
|
||||
primary
|
||||
onClick={this.onSaveClick}
|
||||
isDisabled={isLoading || !isUpdated}
|
||||
@ -725,7 +725,7 @@ class SharingPanelComponent extends React.Component {
|
||||
<Button
|
||||
className="sharing_panel-button"
|
||||
label={t("Common:SaveButton")}
|
||||
size={isMobile ? "big" : "medium"}
|
||||
size={isMobile ? "normal" : "small"}
|
||||
minwidth="100px"
|
||||
primary
|
||||
onClick={this.onSaveClick}
|
||||
|
@ -315,7 +315,7 @@ class FileRow extends Component {
|
||||
<Button
|
||||
id="conversion-button"
|
||||
className="conversion-password_button"
|
||||
size={"medium"}
|
||||
size={"small"}
|
||||
scale
|
||||
primary
|
||||
label={t("Ready")}
|
||||
|
@ -157,7 +157,7 @@ const PrivacyPageComponent = ({ t, history, tReady }) => {
|
||||
</Text>
|
||||
<Button
|
||||
onClick={onOpenEditorsPopup}
|
||||
size="large"
|
||||
size="medium"
|
||||
primary
|
||||
isDisabled={isDisabled}
|
||||
label={t("PrivacyButton")}
|
||||
|
@ -209,7 +209,7 @@ class ConnectClouds extends React.Component {
|
||||
{!!providers.length ? (
|
||||
<>
|
||||
<Button
|
||||
size="base"
|
||||
size="extraSmall"
|
||||
style={{ marginBottom: "8px" }}
|
||||
onClick={this.onShowThirdPartyDialog}
|
||||
label={t("ConnectedCloud")}
|
||||
|
@ -200,7 +200,7 @@ const VersionRow = (props) => {
|
||||
isDisabled={isSavingComment}
|
||||
className="version_save-button"
|
||||
label={t("Common:SaveButton")}
|
||||
size="big"
|
||||
size="normal"
|
||||
primary
|
||||
onClick={onSaveClick}
|
||||
/>
|
||||
@ -249,7 +249,7 @@ const VersionRow = (props) => {
|
||||
>
|
||||
<Button
|
||||
isDisabled={isSavingComment}
|
||||
size="base"
|
||||
size="extraSmall"
|
||||
scale={true}
|
||||
primary
|
||||
onClick={onSaveClick}
|
||||
@ -262,7 +262,7 @@ const VersionRow = (props) => {
|
||||
>
|
||||
<Button
|
||||
isDisabled={isSavingComment}
|
||||
size="base"
|
||||
size="extraSmall"
|
||||
scale={true}
|
||||
onClick={onCancelClick}
|
||||
label={t("Common:CancelButton")}
|
||||
|
@ -85,7 +85,7 @@ class BackupCodesDialogComponent extends React.Component {
|
||||
<Button
|
||||
key="PrintBtn"
|
||||
label={t("PrintButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
onClick={this.printPage}
|
||||
/>
|
||||
@ -93,7 +93,7 @@ class BackupCodesDialogComponent extends React.Component {
|
||||
key="RequestNewBtn"
|
||||
className="button-dialog"
|
||||
label={t("RequestNewButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={false}
|
||||
onClick={this.getNewBackupCodes}
|
||||
/>
|
||||
|
@ -164,7 +164,7 @@ class ChangeEmailDialogComponent extends React.Component {
|
||||
<Button
|
||||
key="SendBtn"
|
||||
label={t("Common:SendButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
onClick={this.onValidateEmail}
|
||||
isLoading={isRequestRunning}
|
||||
|
@ -64,7 +64,7 @@ class ChangePasswordDialogComponent extends React.Component {
|
||||
<Button
|
||||
key="SendBtn"
|
||||
label={t("Common:SendButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
onClick={this.onSendPasswordChangeInstructions}
|
||||
isLoading={isRequestRunning}
|
||||
|
@ -39,7 +39,7 @@ class ChangePhoneDialogComponent extends React.Component {
|
||||
<Button
|
||||
key="SendBtn"
|
||||
label={t("Common:SendButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
onClick={this.onChangePhone}
|
||||
isLoading={isRequestRunning}
|
||||
|
@ -148,7 +148,7 @@ class ChangeUserStatusDialogComponent extends React.Component {
|
||||
<ModalDialog.Footer>
|
||||
<Button
|
||||
label={t("ChangeUsersStatusButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={this.onChangeUserStatus}
|
||||
isLoading={isRequestRunning}
|
||||
@ -157,7 +157,7 @@ class ChangeUserStatusDialogComponent extends React.Component {
|
||||
<Button
|
||||
className="button-dialog"
|
||||
label={t("Common:CancelButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={onClose}
|
||||
isDisabled={isRequestRunning}
|
||||
/>
|
||||
|
@ -141,7 +141,7 @@ class ChangeUserTypeDialogComponent extends React.Component {
|
||||
<ModalDialog.Footer>
|
||||
<Button
|
||||
label={t("ChangeUserTypeButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={this.onChangeUserType}
|
||||
isLoading={isRequestRunning}
|
||||
@ -150,7 +150,7 @@ class ChangeUserTypeDialogComponent extends React.Component {
|
||||
<Button
|
||||
className="button-dialog"
|
||||
label={t("Common:CancelButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={onClose}
|
||||
isDisabled={isRequestRunning}
|
||||
/>
|
||||
|
@ -49,7 +49,7 @@ class DataLossWarningDialogComponent extends React.Component {
|
||||
<Button
|
||||
key="LeaveForm"
|
||||
label={t("DataLossWarningLeaveBtn")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
onClick={this.onSubmit}
|
||||
/>
|
||||
@ -57,7 +57,7 @@ class DataLossWarningDialogComponent extends React.Component {
|
||||
className="button-dialog"
|
||||
key="StayOnPage"
|
||||
label={t("Common:CancelButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={this.onClose}
|
||||
/>
|
||||
</ModalDialog.Footer>
|
||||
|
@ -95,7 +95,7 @@ class DeleteProfileEverDialogComponent extends React.Component {
|
||||
key="OKBtn"
|
||||
className="delete-profile_button-delete"
|
||||
label={t("Common:OKButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
onClick={this.onDeleteProfileEver}
|
||||
isLoading={isRequestRunning}
|
||||
@ -104,7 +104,7 @@ class DeleteProfileEverDialogComponent extends React.Component {
|
||||
className="button-dialog"
|
||||
key="ReassignBtn"
|
||||
label={t("Translations:ReassignData")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={this.onReassignDataClick}
|
||||
isDisabled={isRequestRunning}
|
||||
/> */}
|
||||
|
@ -69,7 +69,7 @@ class DeleteSelfProfileDialogComponent extends React.Component {
|
||||
<Button
|
||||
key="SendBtn"
|
||||
label={t("Common:SendButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
onClick={this.onDeleteSelfProfileInstructions}
|
||||
isLoading={isRequestRunning}
|
||||
@ -78,7 +78,7 @@ class DeleteSelfProfileDialogComponent extends React.Component {
|
||||
className="button-dialog"
|
||||
key="CloseBtn"
|
||||
label={t("Common:CloseButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={onClose}
|
||||
isDisabled={isRequestRunning}
|
||||
/>
|
||||
|
@ -141,7 +141,7 @@ class DeleteGroupUsersDialogComponent extends React.Component {
|
||||
<ModalDialog.Footer>
|
||||
<Button
|
||||
label={t("Common:OKButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={this.onDeleteGroupUsers}
|
||||
isLoading={isRequestRunning}
|
||||
@ -150,7 +150,7 @@ class DeleteGroupUsersDialogComponent extends React.Component {
|
||||
<Button
|
||||
className="button-dialog"
|
||||
label={t("Common:CancelButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={onClose}
|
||||
isDisabled={isRequestRunning}
|
||||
/>
|
||||
|
@ -184,7 +184,7 @@ class InviteDialogComponent extends React.Component {
|
||||
? t("Common:LoadingProcessing")
|
||||
: t("Common:CloseButton")
|
||||
}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
onClick={this.onClickToCloseButton}
|
||||
isLoading={this.state.isLoading}
|
||||
|
@ -42,7 +42,7 @@ class ResetApplicationDialogComponent extends React.Component {
|
||||
<Button
|
||||
key="SendBtn"
|
||||
label={t("Common:ResetApplication")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
onClick={this.resetApp}
|
||||
/>
|
||||
@ -50,7 +50,7 @@ class ResetApplicationDialogComponent extends React.Component {
|
||||
key="CloseBtn"
|
||||
className="button-dialog"
|
||||
label={t("Common:CloseButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={false}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
@ -135,7 +135,7 @@ class SendInviteDialogComponent extends React.Component {
|
||||
<ModalDialog.Footer>
|
||||
<Button
|
||||
label={t("Common:OKButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary
|
||||
onClick={this.onSendInvite}
|
||||
isLoading={isRequestRunning}
|
||||
@ -144,7 +144,7 @@ class SendInviteDialogComponent extends React.Component {
|
||||
<Button
|
||||
className="button-dialog"
|
||||
label={t("Common:CancelButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
onClick={onClose}
|
||||
isDisabled={isRequestRunning}
|
||||
/>
|
||||
|
@ -372,14 +372,14 @@ const SectionBodyContent = ({
|
||||
primary
|
||||
type="submit"
|
||||
isLoading={inLoading}
|
||||
size="big"
|
||||
size="normal"
|
||||
tabIndex={4}
|
||||
onClick={onSave}
|
||||
/>
|
||||
<Button
|
||||
label={t("Common:CancelButton")}
|
||||
className="cancel-button"
|
||||
size="big"
|
||||
size="normal"
|
||||
isDisabled={inLoading}
|
||||
onClick={onCancel}
|
||||
tabIndex={5}
|
||||
|
@ -393,7 +393,7 @@ class SectionBodyContent extends React.PureComponent {
|
||||
{profile.status !== 2 && (isAdmin || isSelf) && (
|
||||
<EditButtonWrapper>
|
||||
<Button
|
||||
size="big"
|
||||
size="normal"
|
||||
scale={true}
|
||||
label={t("EditUser")}
|
||||
title={t("EditUser")}
|
||||
@ -442,7 +442,7 @@ class SectionBodyContent extends React.PureComponent {
|
||||
<ToggleContent label={t("Subscriptions")} isOpen={true}>
|
||||
<Text as="span">
|
||||
<Button
|
||||
size="big"
|
||||
size="normal"
|
||||
label={t("EditSubscriptionsBtn")}
|
||||
primary={true}
|
||||
onClick={this.onEditSubscriptionsClick}
|
||||
|
@ -59,7 +59,7 @@ class TextChangeField extends React.Component {
|
||||
label={buttonText}
|
||||
onClick={buttonOnClick}
|
||||
isDisabled={buttonIsDisabled}
|
||||
size="medium"
|
||||
size="small"
|
||||
style={{ marginLeft: "8px" }}
|
||||
tabIndex={buttonTabIndex}
|
||||
data-dialog={dataDialog}
|
||||
|
@ -700,7 +700,7 @@ class CreateUserForm extends React.Component {
|
||||
onClick={this.handleSubmit}
|
||||
primary
|
||||
isDisabled={isLoading}
|
||||
size="big"
|
||||
size="normal"
|
||||
tabIndex={10}
|
||||
className="create-user_save-btn"
|
||||
/>
|
||||
@ -708,7 +708,7 @@ class CreateUserForm extends React.Component {
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={this.onCancelHandler}
|
||||
isDisabled={isLoading}
|
||||
size="big"
|
||||
size="normal"
|
||||
style={{ marginLeft: "8px" }}
|
||||
tabIndex={11}
|
||||
className="create-user_cancel-btn"
|
||||
|
@ -999,14 +999,14 @@ class UpdateUserForm extends React.Component {
|
||||
onClick={this.handleSubmit}
|
||||
primary
|
||||
isDisabled={isLoading}
|
||||
size="big"
|
||||
size="normal"
|
||||
tabIndex={11}
|
||||
/>
|
||||
<Button
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={this.onCancelHandler}
|
||||
isDisabled={isLoading}
|
||||
size="big"
|
||||
size="normal"
|
||||
style={{ marginLeft: "8px" }}
|
||||
tabIndex={12}
|
||||
/>
|
||||
|
@ -112,7 +112,7 @@ const RecoverAccessModalDialog = ({
|
||||
className="recover-button-dialog"
|
||||
key="SendBtn"
|
||||
label={loading ? t("Common:Sending") : t("Common:SendButton")}
|
||||
size="big"
|
||||
size="normal"
|
||||
primary={true}
|
||||
onClick={onSendRecoverRequest}
|
||||
isLoading={loading}
|
||||
|
@ -340,7 +340,7 @@ class Confirm extends React.PureComponent {
|
||||
<Button
|
||||
className="confirm-row"
|
||||
primary
|
||||
size="big"
|
||||
size="normal"
|
||||
label={t("LoginRegistryButton")}
|
||||
tabIndex={5}
|
||||
isLoading={this.state.isLoading}
|
||||
|
@ -93,7 +93,7 @@ class Form extends React.PureComponent {
|
||||
<Button
|
||||
className="owner-button owner-buttons"
|
||||
primary
|
||||
size="big"
|
||||
size="normal"
|
||||
label={t("Common:SaveButton")}
|
||||
tabIndex={2}
|
||||
isDisabled={false}
|
||||
@ -101,7 +101,7 @@ class Form extends React.PureComponent {
|
||||
/>
|
||||
<Button
|
||||
className="owner-buttons"
|
||||
size="big"
|
||||
size="normal"
|
||||
label={t("Common:CancelButton")}
|
||||
tabIndex={2}
|
||||
isDisabled={false}
|
||||
|
@ -176,7 +176,7 @@ class Form extends React.PureComponent {
|
||||
id="button"
|
||||
className="password-button"
|
||||
primary
|
||||
size="big"
|
||||
size="normal"
|
||||
tabIndex={2}
|
||||
label={
|
||||
isLoading ? t("Common:LoadingProcessing") : t("Common:OKButton")
|
||||
|
@ -104,7 +104,7 @@ const PhoneForm = (props) => {
|
||||
/>
|
||||
<Button
|
||||
primary
|
||||
size="big"
|
||||
size="normal"
|
||||
tabIndex={3}
|
||||
label={isLoading ? t("Common:LoadingProcessing") : buttonTranslation}
|
||||
isDisabled={isLoading}
|
||||
|
@ -507,7 +507,7 @@ class Confirm extends React.PureComponent {
|
||||
<Button
|
||||
className="confirm-row"
|
||||
primary
|
||||
size="big"
|
||||
size="normal"
|
||||
label={t("LoginRegistryButton")}
|
||||
tabIndex={5}
|
||||
isLoading={this.state.isLoading}
|
||||
|
@ -89,7 +89,7 @@ class ProfileRemove extends React.PureComponent {
|
||||
<Button
|
||||
className="confirm-row"
|
||||
primary
|
||||
size="big"
|
||||
size="normal"
|
||||
label={t("DeleteProfileBtn")}
|
||||
tabIndex={1}
|
||||
isLoading={this.state.isLoading}
|
||||
|
@ -170,7 +170,7 @@ const TfaActivationForm = withLoader((props) => {
|
||||
<Button
|
||||
scale
|
||||
primary
|
||||
size={width <= 1024 ? "large" : "medium"}
|
||||
size={width <= 1024 ? "medium" : "normal"}
|
||||
tabIndex={3}
|
||||
label={
|
||||
isLoading
|
||||
|
@ -118,7 +118,7 @@ const TfaAuthForm = withLoader((props) => {
|
||||
<Button
|
||||
scale
|
||||
primary
|
||||
size={width <= 1024 ? "large" : "medium"}
|
||||
size={width <= 1024 ? "medium" : "normal"}
|
||||
tabIndex={3}
|
||||
label={
|
||||
isLoading
|
||||
|
@ -71,7 +71,7 @@ class Body extends React.PureComponent {
|
||||
<Button
|
||||
label={t("ButtonBuyLicense")}
|
||||
value={`${buyUrl}`}
|
||||
size="large"
|
||||
size="medium"
|
||||
primary={true}
|
||||
onClick={this.onClickBuy}
|
||||
/>
|
||||
@ -86,7 +86,7 @@ class Body extends React.PureComponent {
|
||||
<Button
|
||||
type="submit"
|
||||
label={t("ButtonUploadLicense")}
|
||||
size="large"
|
||||
size="medium"
|
||||
primary={true}
|
||||
onClick={this.onClickSubmit}
|
||||
/>
|
||||
|
@ -335,7 +335,7 @@ class WhiteLabel extends React.Component {
|
||||
<Button
|
||||
id="btnUseAsLogo"
|
||||
className="margin-top"
|
||||
size="medium"
|
||||
size="small"
|
||||
label={t("UseAsLogoButton")}
|
||||
onClick={this.onUseTextAsLogo}
|
||||
tabIndex={2}
|
||||
@ -531,7 +531,7 @@ class WhiteLabel extends React.Component {
|
||||
id="btnSaveGreetingSetting"
|
||||
className="margin-top"
|
||||
primary={true}
|
||||
size="medium"
|
||||
size="small"
|
||||
label={t("Common:SaveButton")}
|
||||
isLoading={false}
|
||||
isDisabled={false}
|
||||
@ -542,7 +542,7 @@ class WhiteLabel extends React.Component {
|
||||
<Button
|
||||
id="btnRestoreToDefault"
|
||||
className="margin-top margin-left"
|
||||
size="medium"
|
||||
size="small"
|
||||
label={t("RestoreDefaultButton")}
|
||||
isLoading={false}
|
||||
isDisabled={false}
|
||||
|
@ -187,7 +187,7 @@ class ConsumerModalDialog extends React.Component {
|
||||
<Button
|
||||
className="modal-dialog-button"
|
||||
primary
|
||||
size="big"
|
||||
size="normal"
|
||||
label={isLoading ? t("Common:Sending") : t("Common:Enable")}
|
||||
tabIndex={1}
|
||||
isLoading={isLoading}
|
||||
|
@ -118,7 +118,7 @@ class TfaPage extends Component {
|
||||
{showButton && (
|
||||
<Button
|
||||
label={t("Common:SaveButton")}
|
||||
size="medium"
|
||||
size="small"
|
||||
primary={true}
|
||||
className="save-button"
|
||||
onClick={this.saveSettings}
|
||||
|
@ -20,7 +20,7 @@ const ButtonContainer = ({ t, sending, onContinueHandler }) => {
|
||||
return (
|
||||
<StyledContainer>
|
||||
<Button
|
||||
size="large"
|
||||
size="medium"
|
||||
scale={true}
|
||||
primary
|
||||
isDisabled={sending}
|
||||
|
@ -68,7 +68,7 @@ const ModalContainer = ({
|
||||
label={t("Common:SaveButton")}
|
||||
primary={true}
|
||||
scale={true}
|
||||
size="big"
|
||||
size="normal"
|
||||
onClick={onSaveEmailHandler}
|
||||
/>
|
||||
</BtnContainer>
|
||||
@ -94,7 +94,7 @@ const ModalContainer = ({
|
||||
label={t("Common:CloseButton")}
|
||||
primary={true}
|
||||
scale={true}
|
||||
size="big"
|
||||
size="normal"
|
||||
onClick={onCloseModal}
|
||||
/>
|
||||
</BtnContainer>
|
||||
|
@ -546,7 +546,7 @@ const Form = (props) => {
|
||||
id="submit"
|
||||
className="login-button"
|
||||
primary
|
||||
size="large"
|
||||
size="medium"
|
||||
scale={true}
|
||||
label={isLoading ? t("Common:LoadingProcessing") : t("LoginButton")}
|
||||
tabIndex={1}
|
||||
|
@ -103,7 +103,7 @@ const ForgotPasswordModalDialog = (props) => {
|
||||
label={
|
||||
isLoading ? t("Common:LoadingProcessing") : t("Common:SendButton")
|
||||
}
|
||||
size="big"
|
||||
size="normal"
|
||||
scale={false}
|
||||
primary={true}
|
||||
onClick={onSendPasswordInstructions}
|
||||
|
@ -89,7 +89,7 @@ const RegisterModalDialog = ({
|
||||
className="modal-dialog-button"
|
||||
key="SendBtn"
|
||||
label={loading ? t("Common:Sending") : t("RegisterSendButton")}
|
||||
size="big"
|
||||
size="normal"
|
||||
scale={false}
|
||||
primary={true}
|
||||
onClick={onSendRegisterRequest}
|
||||
|
Loading…
Reference in New Issue
Block a user