StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Get settings page in working order

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 15:58:14 -07:00
parent 1e163aa792
commit d27bda1c74
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 80 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

41
resources/scripts/components/elements/Button.tsx
View file

@ -10,20 +10,10 @@ interface Props {
isSecondary?: boolean;
}
const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`};
${props => props.isSecondary && css<Props>`
${tw`border border-neutral-600 bg-transparent text-neutral-200`};
&:hover:not(:disabled) {
${tw`border-neutral-500 text-neutral-100`};
${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
}
`};
${props => (!props.color || props.color === 'primary') && css<Props>`
${props => ((!props.isSecondary && !props.color) || props.color === 'primary') && css<Props>`
${props => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
&:hover:not(:disabled) {
@ -32,7 +22,7 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
`};
${props => props.color === 'grey' && css`
${tw`border border-neutral-600 bg-neutral-500 text-neutral-50`};
${tw`border-neutral-600 bg-neutral-500 text-neutral-50`};
&:hover:not(:disabled) {
${tw`bg-neutral-600 border-neutral-700`};
@ -40,7 +30,7 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
`};
${props => props.color === 'green' && css<Props>`
${tw`border border-green-600 bg-green-500 text-green-50`};
${tw`border-green-600 bg-green-500 text-green-50`};
&:hover:not(:disabled) {
${tw`bg-green-600 border-green-700`};
@ -54,7 +44,7 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
`};
${props => props.color === 'red' && css<Props>`
${tw`border border-red-600 bg-red-500 text-red-50`};
${tw`border-red-600 bg-red-500 text-red-50`};
&:hover:not(:disabled) {
${tw`bg-red-600 border-red-700`};
@ -72,13 +62,23 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
${props => props.size === 'large' && tw`p-4 text-sm`};
${props => props.size === 'xlarge' && tw`p-4 w-full`};
${props => props.isSecondary && css<Props>`
${tw`border-neutral-600 bg-transparent text-neutral-200`};
&:hover:not(:disabled) {
${tw`border-neutral-500 text-neutral-100`};
${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
}
`};
&:disabled { opacity: 0.55; cursor: default }
`;
type ComponentProps = Omit<JSX.IntrinsicElements['button'], 'ref' | keyof Props> & Props;
const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
<StyledButton {...props}>
<ButtonStyle {...props}>
{isLoading &&
<div css={tw`flex absolute justify-center items-center w-full h-full left-0 top-0`}>
<Spinner size={'small'}/>
@ -87,7 +87,12 @@ const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) =>
<span css={isLoading ? tw`text-transparent` : undefined}>
{children}
</span>
</StyledButton>
</ButtonStyle>
);
type LinkProps = Omit<JSX.IntrinsicElements['a'], 'ref' | keyof Props> & Props;
const LinkButton: React.FC<LinkProps> = props => <ButtonStyle as={'a'} {...props}/>;
export { LinkButton, ButtonStyle };
export default Button;