ui: fix borked styling

resources/scripts/components/admin/AdminCheckbox.tsx

@@ -14,6 +14,7 @@ export const TableCheckbox = styled(Input)`
 
 export default ({ name, checked, onChange }: { name: string, checked: boolean, onChange(e: React.ChangeEvent<HTMLInputElement>): void }) => {
     return (
+        <div css={tw`flex items-center`}>
             <TableCheckbox
                 type={'checkbox'}
                 name={'selectedItems'}
@@ -21,5 +22,6 @@ export default ({ name, checked, onChange }: { name: string, checked: boolean, o
                 checked={checked}
                 onChange={onChange}
             />
+        </div>
     );
 };

resources/scripts/components/elements/Field.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import { Field as FormikField, FieldProps } from 'formik';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
+import InputError from '@/components/elements/InputError';
 
 interface OwnProps {
     name: string;
@@ -28,13 +29,9 @@ const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, la
                         isLight={light}
                         hasError={!!(touched[field.name] && errors[field.name])}
                     />
-                    {touched[field.name] && errors[field.name] ?
+                    <InputError errors={errors} touched={touched} name={field.name}>
-                        <p className={'input-help error'}>
+                        {description || null}
-                            {(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
+                    </InputError>
-                        </p>
-                        :
-                        description ? <p className={'input-help'}>{description}</p> : null
-                    }
                 </div>
             )
         }

resources/scripts/components/elements/FormikFieldWrapper.tsx

@@ -17,7 +17,11 @@ const FormikFieldWrapper = ({ id, name, label, className, description, validate,
     <Field name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
-                <div className={`${className} ${(touched[field.name] && errors[field.name]) ? 'has-error' : undefined}`}>
+                <div className={className ?
+                    `${className} ${(touched[field.name] && errors[field.name]) ? 'has-error' : undefined}`
+                    :
+                    `${(touched[field.name] && errors[field.name]) ? 'has-error' : undefined}`}
+                >
                     {label && <Label htmlFor={id}>{label}</Label>}
                     {children}
                     <InputError errors={errors} touched={touched} name={field.name}>

resources/scripts/components/elements/Input.tsx

@@ -77,7 +77,13 @@ const Input = styled.input<Props>`
         }
     }
 `;
-const Textarea = styled.textarea<Props>`${inputStyle}`;
+const Textarea = styled.textarea<Props>`
+    ${inputStyle};
+
+    & + .input-help {
+        ${tw`mt-0`};
+    }
+`;
 
 export { Textarea };
 export default Input;

resources/scripts/components/elements/InputError.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { FormikErrors, FormikTouched } from 'formik';
-import tw from 'twin.macro';
 import { capitalize } from '@/helpers';
 
 interface Props {
@@ -12,7 +11,7 @@ interface Props {
 
 const InputError = ({ errors, touched, name, children }: Props) => (
     touched[name] && errors[name] ?
-        <p css={tw`text-xs text-red-400 pt-2`}>
+        <p className={'input-help error'}>
             {typeof errors[name] === 'string' ?
                 capitalize(errors[name] as string)
                 :
@@ -21,7 +20,7 @@ const InputError = ({ errors, touched, name, children }: Props) => (
         </p>
         :
         <>
-            {children ? <p css={tw`text-xs text-neutral-400 pt-2`}>{children}</p> : null}
+            {children ? <p className={'input-help'}>{children}</p> : null}
         </>
 );
 

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -139,7 +139,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
             <DropdownMenu
                 ref={onClickRef}
                 renderToggle={onClick => (
-                    <div css={tw`p-3 hover:text-white`} onClick={onClick}>
+                    <div css={tw`flex items-center hover:text-white ml-4`} onClick={onClick}>
                         <FontAwesomeIcon icon={faEllipsisH}/>
                         {modal ?
                             modal === 'chmod' ?

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -14,7 +14,7 @@ import { usePermissions } from '@/plugins/usePermissions';
 import { join } from 'path';
 
 const Row = styled.div`
-    ${tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`};
+    ${tw`flex items-center w-full h-10 px-3 rounded-sm cursor-pointer bg-neutral-700 hover:bg-neutral-600 mb-px`};
 `;
 
 const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
@@ -25,13 +25,14 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
 
     return (
         (!canReadContents || (file.isFile && !file.isEditable())) ?
-            <div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default overflow-hidden truncate`}>
+            <div css={tw`flex items-center w-full h-full`}>
                 {children}
             </div>
             :
             <NavLink
                 to={`${match.url}${file.isFile ? '/edit' : ''}#${encodePathSegments(join(directory, file.name))}`}
-                css={tw`flex flex-1 text-neutral-300 no-underline p-3 overflow-hidden truncate`}
+                css={tw`flex items-center w-full h-full`}
+                draggable={false}
             >
                 {children}
             </NavLink>
@@ -45,33 +46,37 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
             e.preventDefault();
             window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.key}`, { detail: e.clientX }));
         }}
+        css={tw`h-10`}
     >
+        <div css={tw`flex mr-4`}>
             <SelectFileCheckbox name={file.name}/>
+        </div>
         <Clickable file={file}>
-            <div css={tw`flex-none self-center text-neutral-400 ml-6 mr-4 text-lg pl-3`}>
+            <div css={tw`flex flex-row items-center justify-center w-5 text-neutral-400 mr-2`}>
                 {file.isFile ?
                     <FontAwesomeIcon icon={file.isSymlink ? faFileImport : file.isArchiveType() ? faFileArchive : faFileAlt}/>
                     :
                     <FontAwesomeIcon icon={faFolder}/>
                 }
             </div>
-            <div css={tw`flex-1 truncate`}>
+            <div css={tw`block`}>
-                {file.name}
+                <span css={tw`text-sm font-normal leading-none text-neutral-300`}>{file.name}</span>
             </div>
-            {file.isFile &&
+
-            <div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>
+            <div css={tw`hidden w-24 ml-auto sm:flex`}>
+                <span css={tw`ml-auto text-sm font-normal leading-none text-right text-neutral-300`}>
                     {bytesToHuman(file.size)}
+                </span>
             </div>
-            }
+
-            <div
+            <div css={tw`hidden w-48 md:flex`}>
-                css={tw`w-1/5 text-right mr-4 hidden md:block`}
+                <span css={tw`ml-auto text-sm font-normal leading-none text-right text-neutral-300`} title={file.modifiedAt.toString()}>
-                title={file.modifiedAt.toString()}
-            >
                     {Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
                         format(file.modifiedAt, 'MMM do, yyyy h:mma')
                         :
                         formatDistanceToNow(file.modifiedAt, { addSuffix: true })
                     }
+                </span>
             </div>
         </Clickable>
         <FileDropdownMenu file={file}/>

resources/scripts/components/server/files/SelectFileCheckbox.tsx

@@ -4,6 +4,8 @@ import Input from '@/components/elements/Input';
 import { ServerContext } from '@/state/server';
 
 export const FileActionCheckbox = styled(Input)`
+    ${tw`w-4 h-4 transition-all duration-75 border rounded-sm cursor-pointer border-neutral-500 hover:border-neutral-300 text-primary-400`};
+
     && {
         ${tw`border-neutral-500 bg-transparent`};
 
@@ -19,7 +21,6 @@ export default ({ name }: { name: string }) => {
     const removeSelectedFile = ServerContext.useStoreActions(actions => actions.files.removeSelectedFile);
 
     return (
-        <label css={tw`flex-none p-4 absolute self-center z-30 cursor-pointer`}>
         <FileActionCheckbox
             name={'selectedFiles'}
             value={name}
@@ -33,6 +34,5 @@ export default ({ name }: { name: string }) => {
                 }
             }}
         />
-        </label>
     );
 };