Update schedule view UI
This commit is contained in:
parent
33a43de723
commit
f33d0b1d72
12 changed files with 230 additions and 134 deletions
|
@ -57,8 +57,8 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
|
|||
`};
|
||||
`};
|
||||
|
||||
${props => props.size === 'xsmall' && tw`p-2 text-xs`};
|
||||
${props => (!props.size || props.size === 'small') && tw`p-3`};
|
||||
${props => props.size === 'xsmall' && tw`px-2 py-1 text-xs`};
|
||||
${props => (!props.size || props.size === 'small') && tw`px-4 py-2`};
|
||||
${props => props.size === 'large' && tw`p-4 text-sm`};
|
||||
${props => props.size === 'xlarge' && tw`p-4 w-full`};
|
||||
|
||||
|
|
31
resources/scripts/components/elements/Icon.tsx
Normal file
31
resources/scripts/components/elements/Icon.tsx
Normal file
|
@ -0,0 +1,31 @@
|
|||
import React, { CSSProperties } from 'react';
|
||||
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
interface Props {
|
||||
icon: IconDefinition;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
const Icon = ({ icon, className, style }: Props) => {
|
||||
let [ width, height, , , paths ] = icon.icon;
|
||||
|
||||
paths = Array.isArray(paths) ? paths : [ paths ];
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns={'http://www.w3.org/2000/svg'}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
css={tw`fill-current inline-block`}
|
||||
className={className}
|
||||
style={style}
|
||||
>
|
||||
{paths.map((path, index) => (
|
||||
<path key={`svg_path_${index}`} d={path}/>
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Icon;
|
|
@ -1,9 +1,10 @@
|
|||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import tw from 'twin.macro';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import { breakpoint } from '@/theme';
|
||||
import Fade from '@/components/elements/Fade';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
export interface RequiredModalProps {
|
||||
visible: boolean;
|
||||
|
@ -124,4 +125,10 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
|
|||
);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
const PortaledModal: React.FC<ModalProps> = ({ children, ...props }) => {
|
||||
const element = useRef(document.getElementById('modal-portal'));
|
||||
|
||||
return createPortal(<Modal {...props}>{children}</Modal>, element.current!);
|
||||
};
|
||||
|
||||
export default PortaledModal;
|
||||
|
|
Reference in a new issue