Update schedule page
This commit is contained in:
parent
f3586056f4
commit
a288374027
12 changed files with 180 additions and 168 deletions
|
@ -18,7 +18,7 @@ const ConfirmationModal = ({ title, appear, children, visible, buttonText, onCon
|
|||
showSpinnerOverlay={showSpinnerOverlay}
|
||||
onDismissed={() => onDismissed()}
|
||||
>
|
||||
<h3 css={tw`mb-6`}>{title}</h3>
|
||||
<h2 css={tw`text-2xl mb-6`}>{title}</h2>
|
||||
<p css={tw`text-sm`}>{children}</p>
|
||||
<div css={tw`flex items-center justify-end mt-8`}>
|
||||
<Button isSecondary onClick={() => onDismissed()}>
|
||||
|
|
36
resources/scripts/components/elements/Select.tsx
Normal file
36
resources/scripts/components/elements/Select.tsx
Normal file
|
@ -0,0 +1,36 @@
|
|||
import styled, { css } from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
interface Props {
|
||||
hideDropdownArrow?: boolean;
|
||||
}
|
||||
|
||||
const Select = styled.select<Props>`
|
||||
${tw`shadow-none block p-3 pr-8 rounded border w-full text-sm transition-colors duration-150 ease-linear`};
|
||||
|
||||
&, &:hover:not(:disabled), &:focus {
|
||||
${tw`outline-none`};
|
||||
}
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: calc(100% - 0.75rem);
|
||||
background-position-y: center;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
${props => !props.hideDropdownArrow && css`
|
||||
${tw`bg-neutral-600 border-neutral-500 text-neutral-200`};
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
|
||||
|
||||
&:hover:not(:disabled), &:focus {
|
||||
${tw`border-neutral-400`};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
export default Select;
|
|
@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
|
|||
import styled from 'styled-components/macro';
|
||||
import v4 from 'uuid/v4';
|
||||
import tw from 'twin.macro';
|
||||
import Label from '@/components/elements/Label';
|
||||
import Input from '@/components/elements/Input';
|
||||
|
||||
const ToggleContainer = styled.div`
|
||||
${tw`relative select-none w-12 leading-normal`};
|
||||
|
@ -50,7 +52,7 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
|
|||
<div css={tw`flex items-center`}>
|
||||
<ToggleContainer css={tw`flex-none`}>
|
||||
{children
|
||||
|| <input
|
||||
|| <Input
|
||||
id={uuid}
|
||||
name={name}
|
||||
type={'checkbox'}
|
||||
|
@ -58,21 +60,20 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
|
|||
defaultChecked={defaultChecked}
|
||||
/>
|
||||
}
|
||||
<label htmlFor={uuid}/>
|
||||
<Label htmlFor={uuid}/>
|
||||
</ToggleContainer>
|
||||
{(label || description) &&
|
||||
<div css={tw`ml-4 w-full`}>
|
||||
{label &&
|
||||
<label
|
||||
<Label
|
||||
css={[ tw`cursor-pointer`, !!description && tw`mb-0` ]}
|
||||
className={'input-dark-label'}
|
||||
htmlFor={uuid}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</Label>
|
||||
}
|
||||
{description &&
|
||||
<p className={'input-help'}>
|
||||
<p css={tw`text-neutral-400 text-sm mt-2`}>
|
||||
{description}
|
||||
</p>
|
||||
}
|
||||
|
|
Reference in a new issue