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

Correctly center the spinner in buttons

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 14:34:43 -07:00
parent 8c20158e58
commit 1c97dd4e24
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
4 changed files with 40 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import React from 'react';
import styled, { css } from 'styled-components/macro';
import tw from 'twin.macro';
import Spinner from '@/components/elements/Spinner';
interface Props {
isLoading?: boolean;
@ -10,9 +11,9 @@ interface Props {
}
const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
${tw`rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
${props => props.isSecondary && css<Props>`
${props => props.isSecondary && css<Props>`
${tw`border border-neutral-600 bg-transparent text-neutral-200`};
&:hover:not(:disabled) {
@ -79,8 +80,8 @@ type ComponentProps = Omit<JSX.IntrinsicElements['button'], 'ref' | keyof Props>
const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
<StyledButton {...props}>
{isLoading &&
<div css={tw`w-full flex absolute justify-center`} style={{ marginLeft: '-0.75rem' }}>
<div className={'spinner-circle spinner-white spinner-sm'}/>
<div css={tw`flex absolute justify-center items-center w-full h-full left-0 top-0`}>
<Spinner size={'small'}/>
</div>
}
<span css={isLoading ? tw`text-transparent` : undefined}>