More color adjustments

resources/scripts/components/admin/users/UsersContainerV2.tsx

@@ -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,
+    LockOpenIcon,
-    PaperAirplaneIcon,
     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={<SupportIcon/>}>Reset Password</Dropdown.Item>
-                                    <Dropdown.Item icon={<LockClosedIcon/>}>Suspend</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>

resources/scripts/components/elements/button/button.module.css

@@ -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 {

resources/scripts/components/elements/dialog/Dialog.tsx

@@ -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 &&
+                            {buttons && <div className={styles.button_bar}>{buttons}</div>}
-                            <div className={'px-6 py-3 bg-neutral-800 flex items-center justify-end space-x-3 rounded-b'}>
-                                {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'}>

resources/scripts/components/elements/dialog/dialog.module.css

@@ -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;
+  }
 }

resources/scripts/components/elements/dropdown/DropdownItem.tsx

@@ -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>

resources/scripts/components/elements/dropdown/dropdown.module.css

@@ -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;
+  }
 }

tailwind.config.js

@@ -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: {