From b8b481b57bd83fe157856c428bac0bcf237660e6 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Sun, 25 Jul 2021 16:41:54 -0600
Subject: [PATCH] ui: fix borked styling

---
 .../components/admin/AdminCheckbox.tsx        | 16 ++++---
 .../scripts/components/elements/Field.tsx     | 11 ++---
 .../elements/FormikFieldWrapper.tsx           |  6 ++-
 .../scripts/components/elements/Input.tsx     |  8 +++-
 .../components/elements/InputError.tsx        |  5 +--
 .../server/files/FileDropdownMenu.tsx         |  2 +-
 .../components/server/files/FileObjectRow.tsx | 45 ++++++++++---------
 .../server/files/SelectFileCheckbox.tsx       | 30 ++++++-------
 8 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/resources/scripts/components/admin/AdminCheckbox.tsx b/resources/scripts/components/admin/AdminCheckbox.tsx
index 98643073..73241d4d 100644
--- a/resources/scripts/components/admin/AdminCheckbox.tsx
+++ b/resources/scripts/components/admin/AdminCheckbox.tsx
@@ -14,12 +14,14 @@ export const TableCheckbox = styled(Input)`
 
 export default ({ name, checked, onChange }: { name: string, checked: boolean, onChange(e: React.ChangeEvent<HTMLInputElement>): void }) => {
     return (
-        <TableCheckbox
-            type={'checkbox'}
-            name={'selectedItems'}
-            value={name}
-            checked={checked}
-            onChange={onChange}
-        />
+        <div css={tw`flex items-center`}>
+            <TableCheckbox
+                type={'checkbox'}
+                name={'selectedItems'}
+                value={name}
+                checked={checked}
+                onChange={onChange}
+            />
+        </div>
     );
 };
diff --git a/resources/scripts/components/elements/Field.tsx b/resources/scripts/components/elements/Field.tsx
index e7ea1667..b9e319e1 100644
--- a/resources/scripts/components/elements/Field.tsx
+++ b/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] ?
-                        <p className={'input-help error'}>
-                            {(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
-                        </p>
-                        :
-                        description ? <p className={'input-help'}>{description}</p> : null
-                    }
+                    <InputError errors={errors} touched={touched} name={field.name}>
+                        {description || null}
+                    </InputError>
                 </div>
             )
         }
diff --git a/resources/scripts/components/elements/FormikFieldWrapper.tsx b/resources/scripts/components/elements/FormikFieldWrapper.tsx
index 208f47a2..cf3c0b1b 100644
--- a/resources/scripts/components/elements/FormikFieldWrapper.tsx
+++ b/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}>
diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
index 7e7f8294..e9dc0012 100644
--- a/resources/scripts/components/elements/Input.tsx
+++ b/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;
diff --git a/resources/scripts/components/elements/InputError.tsx b/resources/scripts/components/elements/InputError.tsx
index 3b810454..b8365755 100644
--- a/resources/scripts/components/elements/InputError.tsx
+++ b/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}
         </>
 );
 
diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index a7dc99cb..b2e231b8 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/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' ?
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index 8e7e6688..7c376d67 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/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`}
     >
-        <SelectFileCheckbox name={file.name}/>
+        <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`}>
-                {file.name}
+            <div css={tw`block`}>
+                <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`}>
-                {bytesToHuman(file.size)}
+
+            <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
-                css={tw`w-1/5 text-right mr-4 hidden md:block`}
-                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 })
-                }
+
+            <div css={tw`hidden w-48 md:flex`}>
+                <span css={tw`ml-auto text-sm font-normal leading-none text-right text-neutral-300`} 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}/>
diff --git a/resources/scripts/components/server/files/SelectFileCheckbox.tsx b/resources/scripts/components/server/files/SelectFileCheckbox.tsx
index 470a8733..19db67f8 100644
--- a/resources/scripts/components/server/files/SelectFileCheckbox.tsx
+++ b/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,20 +21,18 @@ 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}
-                checked={isChecked}
-                type={'checkbox'}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    if (e.currentTarget.checked) {
-                        appendSelectedFile(name);
-                    } else {
-                        removeSelectedFile(name);
-                    }
-                }}
-            />
-        </label>
+        <FileActionCheckbox
+            name={'selectedFiles'}
+            value={name}
+            checked={isChecked}
+            type={'checkbox'}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedFile(name);
+                } else {
+                    removeSelectedFile(name);
+                }
+            }}
+        />
     );
 };