refactor(frontend): entity history on tailwind-variants

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

@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+import { tv } from "tailwind-variants";
+
+const conceptBubble = tv({
+  base: [
+    "px-[3px]",
+    "rounded",
+    "border border-gray-500",
+    "bg-white",
+    "text-sm",
+    "text-gray-800",
+  ],
+});
+
+export const ConceptBubble = ({
+  className,
+  ...props
+}: ComponentProps<"span">) => (
+  <span className={conceptBubble({ className })} {...props} />
+);

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

@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import {
   faEuroSign,
   faFingerprint,
@@ -11,12 +10,6 @@ import { useTranslation } from "react-i18next";
 import IconButton from "../button/IconButton";
 import WithTooltip from "../tooltip/WithTooltip";
 
-const Root = styled("div")`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
 export type ContentType =
   | "groupId"
   | "secondaryId"
@@ -61,7 +54,7 @@ const ContentControl = ({ value, onChange }: Props) => {
   );
 
   return (
-    <Root>
+    <div className="flex flex-col items-center">
       {options.map((option) => {
         const active = value[option.key];
         return (
@@ -77,7 +70,7 @@ const ContentControl = ({ value, onChange }: Props) => {
           </WithTooltip>
         );
       })}
-    </Root>
+    </div>
   );
 };
 

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

@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 import {
   faBullseye,
@@ -8,15 +7,12 @@ import {
 import { type Dispatch, memo, type SetStateAction, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
+import { tv } from "tailwind-variants";
+
 import IconButton from "../button/IconButton";
 import WithTooltip from "../tooltip/WithTooltip";
 
-const Root = styled("div")`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
+const root = tv({ base: "flex flex-col items-center" });
 export type DetailLevel = "summary" | "detail" | "full";
 
 interface Props {
@@ -57,7 +53,7 @@ export const DetailControl = memo(
   ({ className, detailLevel, setDetailLevel }: Props) => {
     const navOptions = useButtonConfig();
     return (
-      <Root className={className}>
+      <div className={root({ className })}>
         {navOptions.map(({ value, icon, tooltip }) => {
           const selected = value === detailLevel;
 
@@ -72,7 +68,7 @@ export const DetailControl = memo(
             </WithTooltip>
           );
         })}
-      </Root>
+      </div>
     );
   },
 );

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

@@ -1,27 +1,20 @@
-import styled from "@emotion/styled";
+import { tv } from "tailwind-variants";
 
 import type { EntityInfo, TimeStratifiedInfo } from "../api/types";
 
 import EntityInfos from "./EntityInfos";
 import { TabbableTimeStratifiedInfos } from "./TabbableTimeStratifiedInfos";
 
-const Container = styled("div")`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  padding: 20px 24px;
-  background-color: ${({ theme }) => theme.col.bg};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  border: 1px solid ${({ theme }) => theme.col.grayLight};
-  align-items: center;
-`;
-
-const Centered = styled("div")`
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  gap: 10px;
-`;
+const container = tv({
+  base: [
+    "grid grid-cols-2 items-center",
+    "gap-[10px]",
+    "px-6 py-5",
+    "bg-bg-50",
+    "rounded",
+    "border border-gray-100",
+  ],
+});
 
 export const EntityCard = ({
   blurred,
@@ -35,13 +28,13 @@ export const EntityCard = ({
   timeStratifiedInfos: TimeStratifiedInfo[];
 }) => {
   return (
-    <Container className={className}>
-      <Centered>
+    <div className={container({ className })}>
+      <div className="flex flex-col items-start gap-[10px]">
         <EntityInfos blurred={blurred} infos={infos} />
-      </Centered>
+      </div>
       {timeStratifiedInfos.length > 0 && (
         <TabbableTimeStratifiedInfos infos={timeStratifiedInfos} />
       )}
-    </Container>
+    </div>
   );
 };

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

@@ -1,6 +1,6 @@
-import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
+import { tv } from "tailwind-variants";
 
 import type { SelectOptionT } from "../api/types";
 import type { StateT } from "../app/reducers";
@@ -9,44 +9,29 @@ import { Heading3 } from "../headings/Headings";
 
 import type { EntityId } from "./reducer";
 
-const Root = styled("div")`
-  display: flex;
-  align-items: center;
-  gap: 30px;
-  padding-left: 10px;
-  justify-content: space-between;
-  width: 100%;
-`;
-const Flex = styled("div")`
-  display: flex;
-  align-items: center;
-  gap: 30px;
-`;
-const Buttons = styled("div")`
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-  grid-auto-flow: column;
-  gap: 5px;
-`;
+const root = tv({
+  base: [
+    "flex items-center justify-between",
+    "gap-[30px]",
+    "w-full",
+    "pl-[10px]",
+  ],
+});
 
-const SxHeading3 = styled(Heading3)<{ blurred?: boolean }>`
-  flex-shrink: 0;
-  margin: 0;
-  ${({ blurred }) => blurred && "filter: blur(6px);"}
-`;
-const Subtitle = styled("div")`
-  font-size: ${({ theme }) => theme.font.xs};
-  color: ${({ theme }) => theme.col.gray};
-  margin-top: 5px;
-`;
-const EntityBadge = styled("div")`
-  display: flex;
-  gap: 5px;
-`;
-const Avatar = styled(SxHeading3)`
-  color: ${({ theme }) => theme.col.gray};
-  font-weight: 300;
-`;
+const buttons = tv({
+  base: ["grid grid-rows-[1fr_1fr] grid-flow-col", "gap-[5px]"],
+});
+
+const entityId = tv({
+  base: ["shrink-0", "m-0"],
+  variants: {
+    blurred: { true: "blur-[6px]" },
+  },
+});
+
+const avatar = tv({
+  base: ["shrink-0", "m-0", "text-gray-500", "font-light"],
+});
 
 export const EntityHeader = ({
   blurred,
@@ -83,19 +68,21 @@ export const EntityHeader = ({
   };
 
   return (
-    <Root className={className}>
-      <Flex>
+    <div className={root({ className })}>
+      <div className="flex items-center gap-[30px]">
         <div>
-          <EntityBadge>
-            <Avatar>#{currentEntityIndex + 1}</Avatar>
-            <SxHeading3 blurred={blurred}>{currentEntityId.id}</SxHeading3>
-          </EntityBadge>
-          <Subtitle>
+          <div className="flex gap-[5px]">
+            <Heading3 className={avatar()}>#{currentEntityIndex + 1}</Heading3>
+            <Heading3 className={entityId({ blurred })}>
+              {currentEntityId.id}
+            </Heading3>
+          </div>
+          <div className="mt-[5px] text-xs text-gray-500">
             {totalEvents} {t("history.events", { count: totalEvents })}
-          </Subtitle>
+          </div>
         </div>
-      </Flex>
-      <Buttons>
+      </div>
+      <div className={buttons()}>
         {entityStatusOptions.map((option, i) => (
           <span key={option.label + i}>
             <BadgeToggleButton
@@ -107,7 +94,7 @@ export const EntityHeader = ({
             </BadgeToggleButton>
           </span>
         ))}
-      </Buttons>
-    </Root>
+      </div>
+    </div>
   );
 };