Margin control to insomnia-component styled buttons (#3429)

This commit is contained in:
Eric Reynolds 2021-06-02 08:47:23 -07:00 committed by Opender Singh
parent 7861d7a505
commit f72fca6a7b
2 changed files with 11 additions and 2 deletions

View File

@ -1,7 +1,7 @@
import React, { FunctionComponent, useMemo } from 'react';
import styled from 'styled-components';
import { getGrpcPathSegments, getShortGrpcPath } from '../../../../common/grpc-paths';
import { Button, Tooltip } from 'insomnia-components';
import { Button, ButtonProps, Tooltip } from 'insomnia-components';
const FlexSpaceBetween = styled.span`
width: 100%;
@ -25,8 +25,15 @@ const useLabel = (fullPath?: string) =>
return 'Select Method';
}, [fullPath]);
const buttonProps: ButtonProps = {
className: 'tall wide',
variant: 'text',
size: 'medium',
radius: '0',
};
const GrpcMethodDropdownButton: FunctionComponent<Props> = ({ fullPath }) => (
<Button className="tall wide" variant="text" size="medium" radius="0">
<Button {...buttonProps}>
<Tooltip className="tall wide" message={fullPath} position="bottom" delay={500}>
<FlexSpaceBetween>
{useLabel(fullPath)}

View File

@ -34,10 +34,12 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ValueOf<typeof ButtonVariantEnum>;
size?: ValueOf<typeof ButtonSizeEnum>;
radius?: string;
margin?: string;
}
const StyledButton = styled.button<ButtonProps>`
color: ${({ bg }) => (bg ? `var(--color-${bg})` : 'var(--color-font)')};
margin: ${({ margin }) => (margin || 0)};
text-align: center;
font-size: var(--font-size-sm);
display: inline-flex !important;