From e02f4b84330c9232421beb87539a4b33ef93f734 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 26 Feb 2022 22:06:47 -0500
Subject: [PATCH] Raw styling needed for mass actions bar

---
 .../components/admin/users/UsersContainerV2.tsx  | 16 +++++++++++++++-
 .../components/elements/inputs/Checkbox.tsx      | 12 +++++++++---
 .../components/elements/inputs/inputs.module.css |  5 +++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/resources/scripts/components/admin/users/UsersContainerV2.tsx b/resources/scripts/components/admin/users/UsersContainerV2.tsx
index 21c85ae4d..96f57feca 100644
--- a/resources/scripts/components/admin/users/UsersContainerV2.tsx
+++ b/resources/scripts/components/admin/users/UsersContainerV2.tsx
@@ -51,13 +51,27 @@ const UsersContainerV2 = () => {
                     <Button.Danger>Delete</Button.Danger>
                 </Dialog.Buttons>
             </Dialog>
-            <div className={'flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
+            <div className={'relative flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
                 <div className={'mr-6'}>
                     <Checkbox />
                 </div>
                 <div className={'flex-1'}>
                     <InputField type={'text'} name={'filter'} placeholder={'Begin typing to filter...'} className={'w-56 focus:w-96'} />
                 </div>
+                <div className={'absolute rounded-t bg-neutral-700 w-full h-full top-0 left-0 flex items-center justify-end space-x-4 px-4'}>
+                    <div className={'flex-1'}>
+                        <Checkbox indeterminate />
+                    </div>
+                    <Button.Text square>
+                        <SupportIcon className={'w-4 h-4'} />
+                    </Button.Text>
+                    <Button.Text square>
+                        <LockOpenIcon className={'w-4 h-4'} />
+                    </Button.Text>
+                    <Button.Text square>
+                        <TrashIcon className={'w-4 h-4'} />
+                    </Button.Text>
+                </div>
             </div>
             <table className={'min-w-full rounded bg-neutral-700'}>
                 <thead className={'bg-neutral-900'}>
diff --git a/resources/scripts/components/elements/inputs/Checkbox.tsx b/resources/scripts/components/elements/inputs/Checkbox.tsx
index 7e5d1e3c7..2c09c0367 100644
--- a/resources/scripts/components/elements/inputs/Checkbox.tsx
+++ b/resources/scripts/components/elements/inputs/Checkbox.tsx
@@ -2,12 +2,18 @@ import React, { forwardRef } from 'react';
 import styles from './inputs.module.css';
 import classNames from 'classnames';
 
-type Props = Omit<React.ComponentProps<'input'>, 'type'>
+type Props = Omit<React.ComponentProps<'input'>, 'type'> & {
+    indeterminate?: boolean;
+}
 
-export default forwardRef<HTMLInputElement, Props>(({ className, ...props }, ref) => (
+export default forwardRef<HTMLInputElement, Props>(({ className, indeterminate, ...props }, ref) => (
     <input
         ref={ref}
         type={'checkbox'}
-        className={classNames('form-checkbox', styles.checkbox, className)} {...props}
+        className={classNames('form-checkbox', {
+            [styles.checkbox]: true,
+            [styles.indeterminate]: indeterminate,
+        }, className)}
+        {...props}
     />
 ));
diff --git a/resources/scripts/components/elements/inputs/inputs.module.css b/resources/scripts/components/elements/inputs/inputs.module.css
index c32a23fb8..80295c7a8 100644
--- a/resources/scripts/components/elements/inputs/inputs.module.css
+++ b/resources/scripts/components/elements/inputs/inputs.module.css
@@ -4,6 +4,11 @@
   &:focus, &:active {
     @apply ring-2 ring-primary-500 ring-offset-2 ring-offset-neutral-700;
   }
+
+  &.indeterminate:checked {
+    @apply text-primary-500/50 border border-primary-500;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
+  }
 }
 
 .text_input {