#157 Unify errors into a single component

src/components/ErrorGraphic.tsx

@@ -0,0 +1,31 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons"
+import clsx from "clsx";
+
+interface ErrorGraphicProps {
+  icon: IconDefinition;
+  message: string;
+  message2?: string;
+  className?: string;
+  iconClassName: string;
+  messageClassName: string
+}
+
+export default function ErrorGraphic({ className, icon, iconClassName, message, message2, messageClassName }: ErrorGraphicProps) {
+    return (
+      <div className={clsx('flex', 'h-full', 'w-full', 'grow', 'flex-col', 'items-center', 'justify-center', 'gap-4', 'bg-gray-800', className)}>
+        <FontAwesomeIcon
+          icon={icon}
+          className={clsx('text-title', iconClassName)}
+        />
+        <p className={clsx('text-center', 'text-h3', 'font-medium', messageClassName)}>
+          {message}
+        </p>
+        {message2 && (
+          <p className={clsx('text-center', 'text-h3', 'font-medium', messageClassName)}>
+            {message2}
+          </p>
+        )}
+      </div>
+    )
+}

src/components/FileViewer/FileList.tsx

@@ -82,8 +82,9 @@ export default function FileList({
           <div
             key={file.path}
             className={clsx(fileTreeEntryClassName, 'hover:bg-gray-700', {
-              'bg-gray-700': fileTicked(file),
-              'bg-gray-800': !fileTicked(file),
+              'bg-gray-900': file === openedFile,
+              'bg-gray-700': fileTicked(file) && file !== openedFile,
+              'bg-gray-800': !fileTicked(file) && file !== openedFile,
             })}
           >
             <Checkbox

src/components/FileViewer/FileViewer.tsx

@@ -45,6 +45,7 @@ import { Dialog, Menu, Transition } from '@headlessui/react';
 import { useUserAuthorized } from 'data/UserInfo';
 import { useQueryParam } from 'utils/hooks';
 import { toast } from 'react-toastify';
+import ErrorGraphic from 'components/ErrorGraphic';
 import ConfirmDialog from '../Atoms/ConfirmDialog';
 import FileList from './FileList';
 import CreateFileForm from './CreateFileForm';
@@ -558,43 +559,45 @@ export default function FileViewer() {
                       setFileContent={setFileContent}
                     />
                   ) : (
-                    <div className="flex h-full w-full flex-col items-center justify-center gap-4 bg-gray-800">
-                      <FontAwesomeIcon
-                        icon={faFilePen}
-                        className="text-title text-gray-500"
-                      />
-                      <p className="text-center text-h3 text-gray-400">
-                        File Editor
-                      </p>
-                      <p className="text-center text-h3 text-gray-400">
-                        {fileError
+                    <ErrorGraphic
+                      icon={faFilePen}
+                      message="File Editor"
+                      message2={
+                        fileError
                           ? fileError?.message ?? 'Unknown Error'
                           : isFileLoading
                           ? 'Loading...'
-                          : 'Select a file to view its contents'}
-                      </p>
-                    </div>
+                          : 'Select a file to view its contents'
+                      }
+                      className=""
+                      iconClassName="text-gray-500"
+                      messageClassName="text-gray-400"
+                    />
                   )}
                 </div>
               </div>
             )}
           </div>
         ) : (
-          <div className="flex h-full w-full grow flex-col items-center justify-center gap-4 text-clip rounded-lg border border-gray-faded/30 bg-gray-800">
-            <FontAwesomeIcon
-              icon={faFolder}
-              className="text-title text-gray-400"
-            />
-            <p className="text-center text-h3 font-medium text-white/50">
-              You don&#39;t have permission to read this folder
-            </p>
-          </div>
+          <ErrorGraphic
+            icon={faFolder}
+            message="You don't have permission to read this folder"
+            className="text-clip rounded-lg border border-gray-faded/30"
+            iconClassName="text-gray-400"
+            messageClassName="text-white/50"
+          />
         )}
         <div className="absolute bottom-0 left-0 flex translate-y-full flex-row gap-4 px-4 py-2 text-medium font-medium text-white/50">
-          {tickedFiles.length > 0 && (
+          {tickedFiles.length === 1 && (
+            <div>1 item selected</div>
+          )}
+          {tickedFiles.length > 1 && (
             <div>{tickedFiles.length} items selected</div>
           )}
-          {clipboard.length > 0 && (
+          {clipboard.length === 1 && (
+            <div>1 item in clipboard</div>
+          )}
+          {clipboard.length > 1 && (
             <div>{clipboard.length} items in clipboard</div>
           )}
         </div>

src/components/GameConsole.tsx

@@ -9,6 +9,7 @@ import { useContext, useEffect } from 'react';
 import { useRef, useState } from 'react';
 import { usePrevious } from 'utils/hooks';
 import { DISABLE_AUTOFILL } from 'utils/util';
+import ErrorGraphic from './ErrorGraphic';
 
 const autoScrollThreshold = 100;
 
@@ -117,25 +118,21 @@ export default function GameConsole() {
         />
       </Tooltip>
       {!canAccessConsole || consoleStatus === 'no-permission' ? (
-        <div className="flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-t-lg border-b border-gray-faded/30 bg-gray-800">
-          <FontAwesomeIcon
-            icon={faServer}
-            className="text-title text-gray-400"
-          />
-          <p className="text-center text-h3 font-medium text-white/50">
-            You don&#39;t have permission to access this console
-          </p>
-        </div>
+        <ErrorGraphic
+          icon={faServer}
+          message="You don't have permission to access this console"
+          className="rounded-t-lg border-b border-gray-faded/30"
+          iconClassName="text-gray-400"
+          messageClassName="text-white/50"
+        />
       ) : consoleLog.length === 0 ? (
-        <div className="flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-t-lg border-b border-gray-faded/30 bg-gray-800">
-          <FontAwesomeIcon
-            icon={faServer}
-            className="text-title text-gray-400"
-          />
-          <p className="text-center text-h3 font-medium text-white/50">
-            No console messages yet
-          </p>
-        </div>
+        <ErrorGraphic
+          icon={faServer}
+          message="No console messages yet"
+          className="rounded-t-lg border-b border-gray-faded/30"
+          iconClassName="text-gray-400"
+          messageClassName="text-white/50"
+        />
       ) : (
         <ol
           className="font-light flex h-0 grow flex-col overflow-y-auto whitespace-pre-wrap break-words rounded-t-lg border-b border-gray-faded/30 bg-gray-900 py-3 font-mono text-small tracking-tight text-gray-300"