refactor(frontend): preview page on the shared components

frontend/src/js/entity-history/EntityCard.tsx

@@ -1,19 +1,13 @@
 import { tv } from "tailwind-variants";
 
 import type { EntityInfo, TimeStratifiedInfo } from "../api/types";
+import { Card } from "../ui-components/Card";
 
 import EntityInfos from "./EntityInfos";
 import { TabbableTimeStratifiedInfos } from "./TabbableTimeStratifiedInfos";
 
 const container = tv({
-  base: [
-    "grid grid-cols-2 items-center",
-    "gap-[10px]",
-    "px-6 py-5",
-    "bg-bg-50",
-    "rounded",
-    "border border-gray-100",
-  ],
+  base: ["grid grid-cols-2 items-center", "gap-[10px]"],
 });
 
 export const EntityCard = ({
@@ -28,13 +22,17 @@ export const EntityCard = ({
   timeStratifiedInfos: TimeStratifiedInfo[];
 }) => {
   return (
-    <div className={container({ className })}>
-      <div className="flex flex-col items-start gap-[10px]">
-        <EntityInfos blurred={blurred} infos={infos} />
-      </div>
-      {timeStratifiedInfos.length > 0 && (
-        <TabbableTimeStratifiedInfos infos={timeStratifiedInfos} />
-      )}
+    <div className={className}>
+      <Card>
+        <div className={container()}>
+          <div className="flex flex-col items-start gap-[10px]">
+            <EntityInfos blurred={blurred} infos={infos} />
+          </div>
+          {timeStratifiedInfos.length > 0 && (
+            <TabbableTimeStratifiedInfos infos={timeStratifiedInfos} />
+          )}
+        </div>
+      </Card>
     </div>
   );
 };

frontend/src/js/entity-history/Navigation.tsx

@@ -170,7 +170,7 @@ export const Navigation = memo(
         )}
         <div className={entityIdNav()}>
           {!empty && (
-            <div className="grid">
+            <div className="flex justify-center">
               <TooltipTrigger delay={tooltipDelay.long}>
                 <Button
                   aria-label={`${t("history.prevButtonLabel")} (shift + ⬆)`}
@@ -201,7 +201,7 @@ export const Navigation = memo(
           </LoadHistoryDropzone>
           {!empty && (
             <>
-              <div className="grid">
+              <div className="flex justify-center">
                 <TooltipTrigger delay={tooltipDelay.long}>
                   <Button
                     aria-label={`${t("history.nextButtonLabel")} (shift + ⬇)`}

frontend/src/js/entity-history/NavigationHeader.tsx

@@ -7,22 +7,14 @@ import { tv } from "tailwind-variants";
 import type { SelectOptionT } from "../api/types";
 import type { StateT } from "../app/reducers";
 import { Button } from "../ui-components/Button";
+import { Card } from "../ui-components/Card";
 import ProgressBar from "../ui-components/ProgressBar";
 import { Tooltip, TooltipTrigger } from "../ui-components/Tooltip";
 import { C1, C2, C3, H3 } from "../ui-components/Typography";
 
 import { SettingsModal } from "./SettingsModal";
 
-const root = tv({
-  base: [
-    "grid",
-    "gap-2",
-    "bg-white",
-    "shadow-[1px_1px_5px_0px_rgba(0,0,0,0.2)]",
-    "p-[14px]",
-    "rounded",
-  ],
-});
+const root = tv({ base: ["grid", "gap-2"] });
 
 const baseInfo = tv({
   base: ["flex justify-between", "gap-[15px]", "overflow-hidden"],
@@ -49,37 +41,45 @@ export const NavigationHeader = memo(
     );
 
     return (
-      <div className={root({ className })}>
-        <div className={baseInfo()}>
-          <div className="min-w-0">
-            <H3 truncate title={label}>
-              {label}
-            </H3>
-            <C3 tone="muted">{t("history.history")}</C3>
+      <div className={className}>
+        <Card>
+          <div className={root()}>
+            <div className={baseInfo()}>
+              <div className="min-w-0">
+                <H3 truncate title={label}>
+                  {label}
+                </H3>
+                <C3 tone="muted">{t("history.history")}</C3>
+              </div>
+              <TooltipTrigger>
+                <DialogTrigger>
+                  <Button
+                    aria-label={t("history.settings.headline")}
+                    intent="tertiary"
+                  >
+                    <SlidersHorizontalIcon />
+                  </Button>
+                  <SettingsModal
+                    setEntityStatusOptions={setEntityStatusOptions}
+                    entityStatusOptions={entityStatusOptions}
+                  />
+                </DialogTrigger>
+                <Tooltip>{t("history.settings.headline")}</Tooltip>
+              </TooltipTrigger>
+            </div>
+            <div className="grid grid-cols-[auto_1fr] items-baseline gap-x-2 text-right">
+              <C1 strong>{idsCount}</C1>
+              <C2 tone="muted">
+                {t("common.entitiesFound", { count: idsCount })}
+              </C2>
+              <C1 strong>{markedCount}</C1>
+              <C2 tone="muted">
+                {t("history.marked", { count: markedCount })}
+              </C2>
+            </div>
+            <ProgressBar donePercent={100 * (markedCount / idsCount)} />
           </div>
-          <TooltipTrigger>
-            <DialogTrigger>
-              <Button
-                aria-label={t("history.settings.headline")}
-                intent="tertiary"
-              >
-                <SlidersHorizontalIcon />
-              </Button>
-              <SettingsModal
-                setEntityStatusOptions={setEntityStatusOptions}
-                entityStatusOptions={entityStatusOptions}
-              />
-            </DialogTrigger>
-            <Tooltip>{t("history.settings.headline")}</Tooltip>
-          </TooltipTrigger>
-        </div>
-        <div className="grid grid-cols-[auto_1fr] items-baseline gap-x-2 text-right">
-          <C1 strong>{idsCount}</C1>
-          <C2 tone="muted">{t("common.entitiesFound", { count: idsCount })}</C2>
-          <C1 strong>{markedCount}</C1>
-          <C2 tone="muted">{t("history.marked", { count: markedCount })}</C2>
-        </div>
-        <ProgressBar donePercent={100 * (markedCount / idsCount)} />
+        </Card>
       </div>
     );
   },