Improve design of file listing

Author: DaneEveritt

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

@@ -15,6 +15,9 @@ import { bytesToHuman } from '@/helpers';
 import { CSSTransition } from 'react-transition-group';
 import { Link } from 'react-router-dom';
 import Spinner from '@/components/elements/Spinner';
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
+import { faFile } from '@fortawesome/free-solid-svg-icons/faFile';
+import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
@@ -97,16 +100,20 @@ export default () => {
                                         files.map(file => (
                                             <a
                                                 key={file.name}
-                                                href={`#${currentDirectory}/${file.name}`}
+                                                href={file.isFile ? undefined : `#${currentDirectory}/${file.name}`}
                                                 className={`
-                                                        flex px-4 py-3 bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
-                                                        border border-transparent hover:text-neutral-100 hover:border-neutral-600
-                                                        cursor-pointer items-center no-underline
-                                                    `}
+                                                    flex px-4 py-3 bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
+                                                    hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600
+                                                `}
+                                                onClick={(e) => {
+                                                    if (file.isFile) {
+                                                        return e.preventDefault();
+                                                    }
+                                                }}
                                             >
-                                                <div className={'flex-none text-neutral-500 mr-4 text-lg'}>
+                                                <div className={'flex-none text-neutral-400 mr-4 text-lg'}>
                                                     {file.isFile ?
-                                                        <FontAwesomeIcon icon={faFileAlt}/>
+                                                        <FontAwesomeIcon icon={file.isSymlink ? faFileImport : faFileAlt}/>
                                                         :
                                                         <FontAwesomeIcon icon={faFolder}/>
                                                     }
@@ -120,7 +127,7 @@ export default () => {
                                                 </div>
                                                 }
                                                 <div
-                                                    className={'w-1/5 text-right'}
+                                                    className={'w-1/5 text-right mr-4'}
                                                     title={file.modifiedAt.toString()}
                                                 >
                                                     {Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
@@ -129,6 +136,9 @@ export default () => {
                                                         distanceInWordsToNow(file.modifiedAt, { includeSeconds: true })
                                                     }
                                                 </div>
+                                                <div>
+                                                    <FontAwesomeIcon icon={faEllipsisH}/>
+                                                </div>
                                             </a>
                                         ))
                                     }