More color adjustments
This commit is contained in:
Dane Everitt
parent
ff460805c0
commit
ae522f1585
7 changed files with 66 additions and 24 deletions
|
|
@ -4,11 +4,12 @@ import { User } from '@/api/admin/user';
|
|||
import { AdminTransformers } from '@/api/admin/transformers';
|
||||
import { Dropdown } from '@/components/elements/dropdown';
|
||||
import {
|
||||
BanIcon,
|
||||
DotsVerticalIcon,
|
||||
LockClosedIcon,
|
||||
PaperAirplaneIcon,
|
||||
LockOpenIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
SupportIcon,
|
||||
TrashIcon,
|
||||
} from '@heroicons/react/solid';
|
||||
import { Button } from '@/components/elements/button/index';
|
||||
|
|
@ -42,7 +43,11 @@ const UsersContainerV2 = () => {
|
|||
<Dialog.Icon type={'danger'}/>
|
||||
This account will be permanently deleted.
|
||||
<Dialog.Buttons>
|
||||
<Button.Text className={'!ring-offset-neutral-800'} onClick={() => setVisible(false)}>Cancel</Button.Text>
|
||||
<Button.Text
|
||||
className={'!ring-offset-neutral-800'}
|
||||
onClick={() => setVisible(false)}
|
||||
>Cancel
|
||||
</Button.Text>
|
||||
<Button.Danger className={'!ring-offset-neutral-800'}>Delete</Button.Danger>
|
||||
</Dialog.Buttons>
|
||||
</Dialog>
|
||||
|
|
@ -52,6 +57,7 @@ const UsersContainerV2 = () => {
|
|||
<th scope={'col'} className={'w-8'}/>
|
||||
<th scope={'col'} className={'text-left px-6 py-2 w-full'}>Email</th>
|
||||
<th scope={'col'}/>
|
||||
<th scope={'col'}/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -59,7 +65,7 @@ const UsersContainerV2 = () => {
|
|||
<tr key={user.uuid}>
|
||||
<td className={'whitespace-nowrap'}>
|
||||
<div className={'flex justify-end items-center w-8'}>
|
||||
<Checkbox />
|
||||
<Checkbox/>
|
||||
</div>
|
||||
</td>
|
||||
<td className={'pl-6 py-4 whitespace-nowrap'}>
|
||||
|
|
@ -81,16 +87,28 @@ const UsersContainerV2 = () => {
|
|||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className={'pl-2 py-4 whitespace-nowrap'}>
|
||||
{user.isUsingTwoFactor &&
|
||||
<span className={'bg-green-100 uppercase text-green-600 font-semibold text-xs px-2 py-0.5 rounded'}>
|
||||
2-FA Enabled
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
<td className={'px-6 py-4 whitespace-nowrap'}>
|
||||
<Dropdown>
|
||||
<Dropdown.Button className={'px-2'}>
|
||||
<DotsVerticalIcon/>
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Item icon={<PencilIcon/>}>Edit</Dropdown.Item>
|
||||
<Dropdown.Item icon={<PaperAirplaneIcon/>}>Reset Password</Dropdown.Item>
|
||||
<Dropdown.Item icon={<LockClosedIcon/>}>Suspend</Dropdown.Item>
|
||||
<Dropdown.Item icon={<SupportIcon/>}>Reset Password</Dropdown.Item>
|
||||
<Dropdown.Item icon={<LockOpenIcon/>} disabled={!user.isUsingTwoFactor}>
|
||||
Disable 2-FA
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item icon={<BanIcon/>}>Suspend</Dropdown.Item>
|
||||
<Dropdown.Gap/>
|
||||
<Dropdown.Item icon={<TrashIcon/>} onClick={() => setVisible(true)} danger>Delete Account</Dropdown.Item>
|
||||
<Dropdown.Item icon={<TrashIcon/>} onClick={() => setVisible(true)} danger>Delete
|
||||
Account
|
||||
</Dropdown.Item>
|
||||
</Dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
.text {
|
||||
@apply bg-transparent focus:ring-neutral-300 focus:ring-opacity-50 hover:bg-neutral-600 active:bg-neutral-500;
|
||||
@apply bg-transparent focus:ring-neutral-300 focus:ring-opacity-50 hover:bg-neutral-500 active:bg-neutral-500;
|
||||
}
|
||||
|
||||
.danger {
|
||||
|
|
|
|||
|
|
@ -78,12 +78,12 @@ const Dialog = ({ visible, title, onDismissed, children }: Props) => {
|
|||
leaveFrom={'opacity-100 scale-100'}
|
||||
leaveTo={'opacity-0 scale-95'}
|
||||
>
|
||||
<div className={'relative bg-neutral-700 rounded max-w-xl w-full mx-auto shadow-lg ring-4 ring-neutral-800 ring-opacity-50'}>
|
||||
<div className={styles.container}>
|
||||
<div className={'flex p-6'}>
|
||||
{icon && <div className={'mr-4'}>{icon}</div>}
|
||||
<div className={'flex-1'}>
|
||||
{title &&
|
||||
<HeadlessDialog.Title className={'font-header text-xl font-medium mb-2 text-white pr-4'}>
|
||||
<HeadlessDialog.Title className={styles.title}>
|
||||
{title}
|
||||
</HeadlessDialog.Title>
|
||||
}
|
||||
|
|
@ -92,11 +92,7 @@ const Dialog = ({ visible, title, onDismissed, children }: Props) => {
|
|||
</HeadlessDialog.Description>
|
||||
</div>
|
||||
</div>
|
||||
{buttons &&
|
||||
<div className={'px-6 py-3 bg-neutral-800 flex items-center justify-end space-x-3 rounded-b'}>
|
||||
{buttons}
|
||||
</div>
|
||||
}
|
||||
{buttons && <div className={styles.button_bar}>{buttons}</div>}
|
||||
{/* Keep this below the other buttons so that it isn't the default focus if they're present. */}
|
||||
<div className={'absolute right-0 top-0 m-4'}>
|
||||
<Button.Text square small onClick={() => onDismissed()} className={'hover:rotate-90'}>
|
||||
|
|
|
|||
|
|
@ -3,5 +3,18 @@
|
|||
}
|
||||
|
||||
.overlay {
|
||||
@apply fixed inset-0 bg-neutral-900 opacity-75;
|
||||
@apply fixed inset-0 bg-gray-900 opacity-50;
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply relative bg-gray-600 rounded max-w-xl w-full mx-auto shadow-lg;
|
||||
@apply ring-4 ring-gray-800 ring-opacity-80;
|
||||
|
||||
& .title {
|
||||
@apply font-header text-xl font-medium mb-2 text-white pr-4;
|
||||
}
|
||||
|
||||
& > .button_bar {
|
||||
@apply px-6 py-3 bg-gray-700 flex items-center justify-end space-x-3 rounded-b;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,18 +12,28 @@ interface Props {
|
|||
onClick?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
const DropdownItem = forwardRef<HTMLAnchorElement, Props>(({ disabled, danger, className, onClick, children, icon: IconComponent }, ref) => {
|
||||
const DropdownItem = forwardRef<HTMLAnchorElement, Props>(({
|
||||
disabled,
|
||||
danger,
|
||||
className,
|
||||
onClick,
|
||||
children,
|
||||
icon: IconComponent,
|
||||
}, ref) => {
|
||||
return (
|
||||
<Menu.Item disabled={disabled}>
|
||||
{(args) => (
|
||||
{({ disabled, active }) => (
|
||||
<a
|
||||
ref={ref}
|
||||
href={'#'}
|
||||
className={classNames(styles.menu_item, { [styles.danger]: danger }, className)}
|
||||
className={classNames(styles.menu_item, {
|
||||
[styles.danger]: danger,
|
||||
[styles.disabled]: disabled,
|
||||
}, className)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{IconComponent}
|
||||
{typeof children === 'function' ? children(args) : children}
|
||||
{typeof children === 'function' ? children({ disabled, active }) : children}
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
@apply w-4 h-4 mr-4 text-neutral-300;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &:focus-within {
|
||||
&:hover, &:focus {
|
||||
@apply bg-blue-500 text-blue-50;
|
||||
|
||||
& svg {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
&.danger {
|
||||
&:hover, &:focus, &:focus-within {
|
||||
&:hover, &:focus {
|
||||
@apply bg-red-500 text-red-50;
|
||||
|
||||
& svg {
|
||||
|
|
@ -51,4 +51,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@apply cursor-not-allowed hover:bg-neutral-800 opacity-30 focus:bg-transparent focus:hover:bg-neutral-800;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,10 @@ module.exports = {
|
|||
},
|
||||
colors: {
|
||||
black: '#131a20',
|
||||
// Deprecated, prefer the use of "blue" directly here.
|
||||
// Deprecated, prefer "blue"...
|
||||
primary: colors.blue,
|
||||
neutral: colors.neutral,
|
||||
// Deprecate, prefer "gray"...
|
||||
neutral: colors.gray,
|
||||
cyan: colors.cyan,
|
||||
},
|
||||
fontSize: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue