rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add loading states for activity creation

Browse source
This commit is contained in:
swve 2023-04-13 23:15:17 +02:00
parent bd5a8359ee
commit bf296fc451
3 changed files with 26 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

16
front/components/UI/Form/Form.tsx
View file

@ -3,7 +3,7 @@ import * as Form from '@radix-ui/react-form';
import { styled, keyframes } from '@stitches/react';
import { blackA, violet, mauve } from '@radix-ui/colors';
const FormLayout = (props: any, onSubmit : any ) => (
const FormLayout = (props: any, onSubmit: any) => (
<FormRoot onSubmit={props.onSubmit}>
{props.children}
</FormRoot>
@ -48,7 +48,7 @@ export const inputStyles = {
'&:hover': { boxShadow: `0 0 0 1px #edeeef` },
'&:focus': { boxShadow: `0 0 0 2px #edeeef` },
'&::selection': { backgroundColor: blackA.blackA9, color: 'white' },
};
export const Input = styled('input', {
@ -66,6 +66,16 @@ export const Textarea = styled('textarea', {
});
export const ButtonBlack = styled('button', {
variants: {
state: {
"loading": {
pointerEvents: 'none',
backgroundColor: "#808080",
},
"none": {
},
},
},
all: 'unset',
display: 'inline-flex',
alignItems: 'center',
@ -79,7 +89,7 @@ export const ButtonBlack = styled('button', {
background: "#000000",
color: "#FFFFFF",
'&:hover': { backgroundColor: "#181818" , cursor: "pointer"},
'&:hover': { backgroundColor: "#181818", cursor: "pointer" },
'&:focus': { boxShadow: `0 0 0 2px black` },
});