Fix display issues due to removal of quirks mode

Author: DaneEveritt

resources/scripts/components/dashboard/ServerRow.tsx

@@ -91,7 +91,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
     return (
         <StatusIndicatorBox as={Link} to={`/server/${server.id}`} className={className} $status={stats?.status}>
             <div css={tw`flex items-center col-span-12 sm:col-span-5 lg:col-span-6`}>
-                <div className={'icon'} css={tw`mr-4`}>
+                <div className={'icon mr-4'}>
                     <FontAwesomeIcon icon={faServer} />
                 </div>
                 <div>

resources/scripts/components/elements/GreyRowBox.tsx

@@ -7,6 +7,6 @@ export default styled.div<{ $hoverable?: boolean }>`
     ${(props) => props.$hoverable !== false && tw`hover:border-neutral-500`};
 
     & .icon {
-        ${tw`rounded-full bg-neutral-500 p-3`};
+        ${tw`rounded-full w-16 flex items-center justify-center bg-neutral-500 p-3`};
     }
 `;

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

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

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

@@ -9,15 +9,11 @@ import { ServerContext } from '@/state/server';
 import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import isEqual from 'react-fast-compare';
-import styled from 'styled-components/macro';
 import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
 import { usePermissions } from '@/plugins/usePermissions';
 import { join } from 'path';
 import { bytesToString } from '@/lib/formatters';
-
-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`};
-`;
+import styles from './style.module.css';
 
 const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
     const [canReadContents] = usePermissions(['file.read-content']);
@@ -26,21 +22,20 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
     const match = useRouteMatch();
 
     return !canReadContents || (file.isFile && !file.isEditable()) ? (
-        <div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default overflow-hidden truncate`}>
-            {children}
-        </div>
+        <div className={styles.details}>{children}</div>
     ) : (
         <NavLink
+            className={styles.details}
             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`}
         >
             {children}
         </NavLink>
     );
 }, isEqual);
 
 const FileObjectRow = ({ file }: { file: FileObject }) => (
-    <Row
+    <div
+        className={styles.file_row}
         key={file.name}
         onContextMenu={(e) => {
             e.preventDefault();
@@ -49,7 +44,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
     >
         <SelectFileCheckbox name={file.name} />
         <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-none text-neutral-400 ml-6 mr-4 text-lg pl-3`}>
                 {file.isFile ? (
                     <FontAwesomeIcon
                         icon={file.isSymlink ? faFileImport : file.isArchiveType() ? faFileArchive : faFileAlt}
@@ -67,7 +62,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
             </div>
         </Clickable>
         <FileDropdownMenu file={file} />
-    </Row>
+    </div>
 );
 
 export default memo(FileObjectRow, (prevProps, nextProps) => {

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

@@ -20,7 +20,7 @@ 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`}>
+        <label css={tw`flex-none px-4 py-2 absolute self-center z-30 cursor-pointer`}>
             <FileActionCheckbox
                 name={'selectedFiles'}
                 value={name}

resources/scripts/components/server/files/style.module.css

@@ -13,3 +13,16 @@
         }
     }
 }
+
+.file_row {
+    @apply flex items-center cursor-pointer bg-neutral-700 rounded-sm mb-px text-sm no-underline;
+    @apply hover:text-neutral-100 hover:bg-neutral-600;
+
+    & > .details {
+        @apply flex flex-1 items-center text-neutral-300 no-underline px-4 py-2 overflow-hidden truncate;
+
+        &:not(a) {
+            @apply cursor-default;
+        }
+    }
+}