lots of frontend improvements

frontend/src/ee/components/ActivityTable.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Image from 'next/image';
 import { faAngleDown, faAngleRight, faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -48,7 +47,7 @@ const ActivityLogsRow = ({
   const { t } = useTranslation();
 
   const renderUser = () => {
-    if (row?.user) return `User: ${row.user}`;
+    if (row?.user) return `${row.user}`;
     if (row?.serviceAccount) return `Service Account: ${row.serviceAccount.name}`;
     if (row?.serviceTokenData.name) return `Service Token: ${row.serviceTokenData.name}`;
 
@@ -56,71 +55,77 @@ const ActivityLogsRow = ({
   };
   return (
     <>
-      <tr key={guidGenerator()} className="w-full bg-bunker-800 text-sm duration-100">
-        <td
-          onKeyDown={() => null}
+      <div key={guidGenerator()} className="w-full bg-mineshaft-800 text-sm text-mineshaft-200 duration-100 flex flex-row items-center">
+        <button
+          type="button"
           onClick={() => setPayloadOpened(!payloadOpened)}
-          className="flex cursor-pointer items-center border-t border-mineshaft-700 text-gray-300"
+          className="border-t border-mineshaft-700 pt-[0.58rem]"
         >
           <FontAwesomeIcon
             icon={payloadOpened ? faAngleDown : faAngleRight}
-            className={`mt-2.5 ml-6 text-bunker-100 hover:bg-mineshaft-700 ${
-              payloadOpened && 'bg-mineshaft-500'
+            className={`ml-6 mb-2 text-mineshaft-300 cursor-pointer ${
+              payloadOpened ? 'bg-mineshaft-500 hover:bg-mineshaft-500' : 'hover:bg-mineshaft-700'
             } h-4 w-4 rounded-md p-1 duration-100`}
           />
-        </td>
-        <td className="border-t border-mineshaft-700 py-3 text-gray-300">
+        </button>
+        <div className="border-t border-mineshaft-700 py-3 w-1/4 pl-6">
           {row.payload
             ?.map(
               (action) =>
                 `${String(action.secretVersions.length)} ${t(`activity.event.${action.name}`)}`
             )
             .join(' and ')}
-        </td>
-        <td className="border-t border-mineshaft-700 py-3 pl-6 text-gray-300">{renderUser()}</td>
-        <td className="border-t border-mineshaft-700 py-3 pl-6 text-gray-300">{row.channel}</td>
-        <td className="border-t border-mineshaft-700 py-3 pl-6 text-gray-300">
+        </div>
+        <div className="border-t border-mineshaft-700 py-3 pl-6 w-1/4">{renderUser()}</div>
+        <div className="border-t border-mineshaft-700 py-3 pl-6 w-1/4">{row.channel}</div>
+        <div className="border-t border-mineshaft-700 py-3 pl-6 w-1/4">
           {timeSince(new Date(row.createdAt))}
-        </td>
-      </tr>
+        </div>
+      </div>
       {payloadOpened && (
-        <tr className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200">
-          <td />
-          <td>{String(t('common.timestamp'))}</td>
-          <td>{row.createdAt}</td>
-        </tr>
+        <div className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200 bg-mineshaft-900/50 w-full flex flex-row items-center">
+          <div className='max-w-xl w-full flex flex-row items-center'>
+            <div className='w-24' />
+            <div className='w-1/2'>{String(t('common.timestamp'))}</div>
+            <div className='w-1/2'>{row.createdAt}</div>
+          </div>
+        </div>
       )}
       {payloadOpened &&
         row.payload?.map(
           (action) =>
             action.secretVersions.length > 0 && (
-              <tr
-                key={action._id}
-                className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200"
+              <div 
+                key={action.name}
+                className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200 bg-mineshaft-900/50 w-full flex flex-row items-center"
               >
-                <td />
-                <td className="">{t(`activity.event.${action.name}`)}</td>
-                <td
-                  onKeyDown={() => null}
-                  className="cursor-pointer text-primary-300 duration-200 hover:text-primary"
-                  onClick={() => toggleSidebar(action._id)}
-                >
-                  {action.secretVersions.length +
-                    (action.secretVersions.length !== 1 ? ' secrets' : ' secret')}
-                  <FontAwesomeIcon
-                    icon={faUpRightFromSquare}
-                    className="ml-2 mb-0.5 h-3 w-3 font-light"
-                  />
-                </td>
-              </tr>
+                <div className='max-w-xl w-full flex flex-row items-center'>
+                  <div className='w-24' />
+                  <div className='w-1/2'>{t(`activity.event.${action.name}`)}</div>
+                  <button 
+                    type="button"
+                    onClick={() => toggleSidebar(action._id)}
+                    className='w-1/2 text-primary-300 hover:text-primary-500 flex flex-row justify-left items-center duration-100'
+                  >
+                    {action.secretVersions.length +
+                        (action.secretVersions.length !== 1 ? ' secrets' : ' secret')}
+                      <FontAwesomeIcon
+                        icon={faUpRightFromSquare}
+                        className="ml-2 mb-0.5 h-3 w-3 font-light"
+                      />
+                  </button>
+                </div>
+              </div>
             )
         )}
       {payloadOpened && (
-        <tr className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200">
-          <td />
-          <td>{String(t('activity.ip-address'))}</td>
-          <td>{row.ipAddress}</td>
-        </tr>
+        <div className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200 bg-mineshaft-900/50 w-full flex flex-row items-center">
+          <div className='max-w-xl w-full flex flex-row items-center'>
+            <div className='w-24' />
+            <div className='w-1/2'>{String(t('activity.ip-address'))}</div>
+            <div className='w-1/2'>{row.ipAddress}</div>
+          </div>
+        </div>
       )}
     </>
   );
@@ -147,47 +152,48 @@ const ActivityTable = ({
 
   return (
     <div className="mt-8 w-full px-6">
-      <div className="table-container relative mb-6 w-full rounded-md border border-mineshaft-700 bg-bunker">
-        <div className="absolute h-[3rem] w-full rounded-t-md bg-white/5" />
-        <table className="my-1 w-full">
-          <thead className="text-bunker-300">
-            <tr className="text-sm">
-              <th aria-label="actions" className="pl-6 pt-2.5 pb-3 text-left" />
-              <th className="pt-2.5 pb-3 text-left font-semibold">
-                {String(t('common.event')).toUpperCase()}
-              </th>
-              <th className="pl-6 pt-2.5 pb-3 text-left font-semibold">
-                {String(t('common.user')).toUpperCase()}
-              </th>
-              <th className="pl-6 pt-2.5 pb-3 text-left font-semibold">
-                {String(t('common.source')).toUpperCase()}
-              </th>
-              <th className="pl-6 pt-2.5 pb-3 text-left font-semibold">
-                {String(t('common.time')).toUpperCase()}
-              </th>
-              <th aria-label="action" />
-            </tr>
-          </thead>
-          <tbody>
-            {data?.map((row, index) => (
-              <ActivityLogsRow
-                key={`activity.${index + 1}.${row._id}`}
-                row={row}
-                toggleSidebar={toggleSidebar}
-              />
-            ))}
-          </tbody>
-        </table>
+      <div className="table-container relative mb-6 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800">
+        {/* <div className="absolute h-[3rem] w-full rounded-t-md bg-white/5" /> */}
+        <div className="my-1 w-full">
+          <div className="text-bunker-300 border-b border-mineshaft-600">
+            <div className="text-sm flex flex-row w-full">
+              <button
+                type="button"
+                onClick={() => {}}
+                className="opacity-0"
+              >
+                <FontAwesomeIcon
+                  icon={faAngleRight}
+                  className="ml-6 mb-2 text-bunker-100 hover:bg-mineshaft-700 cursor-pointer h-4 w-4 rounded-md p-1 duration-100"
+                />
+              </button>
+              <div className="flex flex-row justify-between w-full">
+                <div className="pt-2.5 pb-3 text-left font-semibold w-1/4 pl-6">
+                  {String(t('common.event')).toUpperCase()}
+                </div>
+                <div className="pl-6 pt-2.5 pb-3 text-left font-semibold w-1/4 pl-6">
+                  {String(t('common.user')).toUpperCase()}
+                </div>
+                <div className="pl-6 pt-2.5 pb-3 text-left font-semibold w-1/4 pl-6">
+                  {String(t('common.source')).toUpperCase()}
+                </div>
+                <div className="pl-6 pt-2.5 pb-3 text-left font-semibold w-1/4 pl-6">
+                  {String(t('common.time')).toUpperCase()}
+                </div>
+              </div>
+            </div>
+          </div>
+          {data?.map((row, index) => (
+            <ActivityLogsRow
+              key={`activity.${index + 1}.${row._id}`}
+              row={row}
+              toggleSidebar={toggleSidebar}
+            />
+          ))}
+        </div>
       </div>
       {isLoading && (
-        <div className="mb-8 mt-4 flex w-full justify-center">
-          <Image
-            src="/images/loading/loading.gif"
-            height={60}
-            width={100}
-            alt="loading animation"
-          />
-        </div>
+        <div className="mb-8 mt-4 bg-mineshaft-800 rounded-md h-60 flex w-full justify-center animate-pulse" />
       )}
     </div>
   );