feat: fixed padding, added progress bar for routing, added sticky header for overview

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -26,7 +26,7 @@ export const EmptyState = ({
     )}
   >
     <FontAwesomeIcon icon={icon} size={iconSize} />
-    <div className="flex flex-row items-center py-4">
+    <div className="flex flex-col items-center py-4">
       <div className="text-sm text-bunker-300">{title}</div>
       <div>{children}</div>
     </div>

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -70,7 +70,9 @@ export const SecretInput = ({
         dangerouslySetInnerHTML={{
           __html: syntaxHighlight(value, isVisible || isSecretFocused)
         }}
-        className={`absolute top-0 left-0 z-0 h-full w-full text-ellipsis whitespace-pre-line break-all ${!value && value !== "" && "text-red-600 italic"}`}
+        className={`absolute top-0 left-0 z-0 h-full w-full text-ellipsis whitespace-pre-line break-all ${
+          !value && value !== "" && "italic text-red-600/70"
+        }`}
       />
       <ContentEditable
         className="relative z-10 h-full w-full text-ellipsis whitespace-pre-line  break-all text-transparent caret-white outline-none"

frontend/src/components/v2/Table/Table.tsx

@@ -51,6 +51,17 @@ export const THead = ({ children, className }: THeadProps): JSX.Element => (
   </thead>
 );
 
+export type TFootProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const TFoot = ({ children, className }: TFootProps): JSX.Element => (
+  <tfoot className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}>
+    {children}
+  </tfoot>
+);
+
 // table rows
 export type TrProps = {
   children: ReactNode;
@@ -68,7 +79,7 @@ export const Tr = ({
 }: TrProps): JSX.Element => (
   <tr
     className={twMerge(
-      "cursor-default border border-solid border-mineshaft-700",
+      "cursor-default border border-solid border-mineshaft-600",
       isHoverable && "hover:bg-mineshaft-600",
       isSelectable && "cursor-pointer",
       className
@@ -126,7 +137,12 @@ export type TBodyLoader = {
   innerKey: string;
 };
 
-export const TableSkeleton = ({ rows = 3, columns, innerKey, className }: TBodyLoader): JSX.Element => (
+export const TableSkeleton = ({
+  rows = 3,
+  columns,
+  innerKey,
+  className
+}: TBodyLoader): JSX.Element => (
   <>
     {Array.apply(0, Array(rows)).map((_x, i) => (
       <Tr key={`${innerKey}-skeleton-rows-${i + 1}`}>

frontend/src/components/v2/Table/index.tsx

@@ -3,8 +3,8 @@ export type {
   TableProps,
   TBodyProps,
   TdProps,
+  TFootProps,
   THeadProps,
   ThProps,
-  TrProps
-} from "./Table";
-export { Table, TableContainer, TableSkeleton,TBody, Td, Th, THead, Tr } from "./Table";
+  TrProps} from "./Table";
+export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot,Th, THead, Tr } from "./Table";