Get basic modal view for editing/creating a new subuser working
This commit is contained in:
parent
8d52e2e1a7
commit
51c5cf4dbb
13 changed files with 293 additions and 186 deletions
|
@ -1,14 +1,16 @@
|
|||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
|
||||
type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
|
||||
title?: string;
|
||||
borderColor?: string;
|
||||
showFlashes?: string | boolean;
|
||||
showLoadingOverlay?: boolean;
|
||||
}>;
|
||||
|
||||
const ContentBox = ({ title, borderColor, showFlashes, children, ...props }: Props) => (
|
||||
const ContentBox = ({ title, borderColor, showFlashes, showLoadingOverlay, children, ...props }: Props) => (
|
||||
<div {...props}>
|
||||
{title && <h2 className={'text-neutral-300 mb-4 px-4'}>{title}</h2>}
|
||||
{showFlashes &&
|
||||
|
@ -20,6 +22,7 @@ const ContentBox = ({ title, borderColor, showFlashes, children, ...props }: Pro
|
|||
<div className={classNames('bg-neutral-700 p-4 rounded shadow-lg relative', borderColor, {
|
||||
'border-t-4': !!borderColor,
|
||||
})}>
|
||||
<SpinnerOverlay visible={showLoadingOverlay || false}/>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -4,7 +4,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
|||
|
||||
interface Props {
|
||||
icon?: IconProp;
|
||||
title: string;
|
||||
title: string | React.ReactNode;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
@ -12,9 +12,13 @@ interface Props {
|
|||
const TitledGreyBox = ({ icon, title, children, className }: Props) => (
|
||||
<div className={`rounded shadow-md bg-neutral-700 ${className}`}>
|
||||
<div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
|
||||
<p className={'text-sm uppercase'}>
|
||||
{icon && <FontAwesomeIcon icon={icon} className={'mr-2 text-neutral-300'}/>}{title}
|
||||
</p>
|
||||
{typeof title === 'string' ?
|
||||
<p className={'text-sm uppercase'}>
|
||||
{icon && <FontAwesomeIcon icon={icon} className={'mr-2 text-neutral-300'}/>}{title}
|
||||
</p>
|
||||
:
|
||||
title
|
||||
}
|
||||
</div>
|
||||
<div className={'p-3'}>
|
||||
{children}
|
||||
|
|
Reference in a new issue