Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

button height issue fixed in all sizes (#483)

Browse Source
This commit is contained in:
devrk96 2020-09-02 14:28:49 +05:30 committed by GitHub
parent a7e33a90e2
commit 8a0966d1f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/client/src/components/ads/Button.tsx
View File

@ -45,6 +45,7 @@ type BtnColorType = {
type BtnFontType = {
buttonFont: any;
padding: string;
height: number;
};
type ButtonProps = CommonComponentProps & {
@ -209,36 +210,40 @@ const btnColorStyles = (
const btnFontStyles = (props: ThemeProp & ButtonProps): BtnFontType => {
let buttonFont,
padding = "";
padding = "",
height = 0;
switch (props.size) {
case Size.small:
buttonFont = smallButton;
height = 20;
padding =
!props.text && props.icon
? `${props.theme.spaces[1]}px ${props.theme.spaces[1]}px`
: `${props.theme.spaces[1]}px ${props.theme.spaces[6]}px ${props.theme
.spaces[1] - 1}px`;
? `0px ${props.theme.spaces[1]}px`
: `0px ${props.theme.spaces[6]}px`;
break;
case Size.medium:
buttonFont = mediumButton;
height = 30;
padding =
!props.text && props.icon
? `${props.theme.spaces[2]}px ${props.theme.spaces[2]}px`
: `${props.theme.spaces[3] - 1}px ${props.theme.spaces[7]}px`;
? `0px ${props.theme.spaces[2]}px`
: `0px ${props.theme.spaces[7]}px`;
break;
case Size.large:
buttonFont = largeButton;
height = 38;
padding =
!props.text && props.icon
? `${props.theme.spaces[3]}px`
: `${props.theme.spaces[5] - 1}px ${props.theme.spaces[12] - 4}px`;
? `0px ${props.theme.spaces[3]}px`
: `0px ${props.theme.spaces[12] - 4}px`;
break;
}
return { buttonFont, padding };
return { buttonFont, padding, height };
};
const StyledButton = styled("button")<ThemeProp & ButtonProps>`
width: ${props => (props.fill ? "100%" : "auto")};
height: ${props => btnFontStyles(props).height}px;
border: none;
outline: none;
text-transform: uppercase;