remove flex

packages/website/src/components/AvatarCard.tsx

@@ -5,7 +5,6 @@ import { useRef } from "react";
 import { useIntersection } from "../hooks/useIntersection";
 import { useLocale } from "../hooks/useLocale";
 import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps";
-import { Flex } from "./Flex";
 import { Skeleton } from "./Skeleton";
 import { Text } from "./Text";
 
@@ -16,7 +15,9 @@ type GalleryCardProps = MaybeSkeletonComponentProps<{
 export function AvatarCard(props: GalleryCardProps) {
   const src = alias(
     "api",
-    `/gallery/avatars/${!props.skeleton && `${props.avatar.id}${props.avatar.extension}`}`,
+    `/gallery/avatars/${
+      !props.skeleton && `${props.avatar.id}${props.avatar.extension}`
+    }`
   );
   const card = useRef<HTMLDivElement>(null!);
   const { unwrap } = useLocale();
@@ -26,12 +27,15 @@ export function AvatarCard(props: GalleryCardProps) {
   });
 
   const content = (
-    <Flex
+    <div
-      column
-      align="center"
-      gap="1"
       ref={card}
-      style={{ cursor: "pointer" }}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "var(--space-1)",
+        cursor: "pointer",
+      }}
     >
       {props.skeleton && (
         <>
@@ -58,7 +62,7 @@ export function AvatarCard(props: GalleryCardProps) {
           </Text>
         </>
       )}
-    </Flex>
+    </div>
   );
 
   if (props.skeleton) return content;
@@ -71,7 +75,15 @@ export function AvatarCard(props: GalleryCardProps) {
         onOpenAutoFocus={(event) => event.preventDefault()}
         width="fit-content"
       >
-        <Flex position="absolute" top="3" right="3" gap="3">
+        <div
+          style={{
+            display: "flex",
+            position: "absolute",
+            top: "var(--space-3)",
+            right: "var(--space-3)",
+            gap: "var(--space-3)",
+          }}
+        >
           <Link download href={src}>
             <IconButton variant="ghost">
               <DownloadIcon />
@@ -83,17 +95,30 @@ export function AvatarCard(props: GalleryCardProps) {
               <Cross1Icon />
             </IconButton>
           </Dialog.Close>
-        </Flex>
+        </div>
 
-        <Flex px="4" justify="center" mt="3">
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            paddingInline: "var(--space-4)",
+            marginTop: "var(--space-3)",
+          }}
+        >
           <img src={src} alt={unwrap(props.avatar.name!)} />
-        </Flex>
+        </div>
 
-        <Flex justify="center" mt="4">
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            marginTop: "var(--space-4)",
+          }}
+        >
           <Dialog.Title align="center" style={{ maxWidth: "10rem" }}>
             {unwrap(props.avatar.name!)}
           </Dialog.Title>
-        </Flex>
+        </div>
       </Dialog.Content>
     </Dialog.Root>
   );

packages/website/src/components/AvatarsList/index.tsx

@@ -8,7 +8,6 @@ import { useLocale } from "../../hooks/useLocale";
 import { Gallery } from "../../stores/gallery";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { AvatarCard } from "../AvatarCard";
-import { Flex } from "../Flex";
 import { InlineSkeleton } from "../InlineSkeleton";
 import { Text } from "../Text";
 
@@ -36,7 +35,7 @@ export function AvatarsList({ skeleton }: MaybeSkeletonComponentProps) {
         .go(search, gallery.avatars, {
           keys: [
             ...locales.supported.map(
-              (supported) => `name.locales.${supported.locale}`,
+              (supported) => `name.locales.${supported.locale}`
             ),
             "id",
           ],
@@ -57,7 +56,14 @@ export function AvatarsList({ skeleton }: MaybeSkeletonComponentProps) {
         )}
       </Text>
 
-      <Flex wrap="wrap" gap="4" justify="center">
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "var(--space-4)",
+          justifyContent: "center",
+        }}
+      >
         {!skeleton &&
           filtered
             .slice(0, loadedCards)
@@ -73,9 +79,9 @@ export function AvatarsList({ skeleton }: MaybeSkeletonComponentProps) {
               skeleton
               onIntersection={() => setLoadedCards((state) => state + 2)}
             />
-          ),
+          )
         )}
-      </Flex>
+      </div>
     </>
   );
 }

packages/website/src/components/CompareTankCard/index.tsx

@@ -7,7 +7,6 @@ import { CompareEphemeral } from "../../stores/compareEphemeral";
 import { InsertionMarker } from "../Compare/IntersectionMarker";
 import { insertionMarkers } from "../Compare/IntersectionMarker/constants";
 import { TankControl } from "../Compare/TankControl";
-import { Flex } from "../Flex";
 import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
 import { Text } from "../Text";
 import styles from "./index.module.css";
@@ -58,7 +57,7 @@ export function CompareTankCard({ index, tank }: TankCardProps) {
         };
       });
       const closest = distances.reduce((a, b) =>
-        a.distance < b.distance ? a : b,
+        a.distance < b.distance ? a : b
       );
 
       dropIndex = closest.index;
@@ -106,16 +105,25 @@ export function CompareTankCard({ index, tank }: TankCardProps) {
 
   return (
     <StickyColumnHeaderCell width="0">
-      <Flex column align="center" justify="between" gap="2">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "var(--space-2)",
+        }}
+      >
         <TankControl index={index} key={tank.id} slug={tank.slug} />
 
-        <Flex
+        <div
           ref={draggable}
-          column
-          align="center"
-          justify="between"
-          gap="2"
           style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "var(--space-2)",
             userSelect: "none",
             touchAction: "none",
             cursor: "grab",
@@ -135,8 +143,8 @@ export function CompareTankCard({ index, tank }: TankCardProps) {
           <Text className={styles.name} nowrap overflow="ellipsis">
             {unwrap(tank.name!)}
           </Text>
-        </Flex>
+        </div>
-      </Flex>
+      </div>
       <InsertionMarker index={index + 1} />
     </StickyColumnHeaderCell>
   );

packages/website/src/components/Flex/index.module.css

@@ -1,64 +0,0 @@
-.flex {
-  display: flex;
-
-  &[data-column="true"] {
-    flex-direction: column;
-  }
-  &[data-wrap="true"] {
-    flex-wrap: wrap;
-  }
-
-  &[data-justify="start"] {
-    justify-content: flex-start;
-  }
-  &[data-justify="center"] {
-    justify-content: center;
-  }
-  &[data-justify="end"] {
-    justify-content: flex-end;
-  }
-  &[data-justify="between"] {
-    justify-content: space-between;
-  }
-
-  &[data-align="start"] {
-    align-items: flex-start;
-  }
-  &[data-align="center"] {
-    align-items: center;
-  }
-  &[data-align="end"] {
-    align-items: flex-end;
-  }
-
-  &[data-gap="0"] {
-    gap: var(--space-0);
-  }
-  &[data-gap="1"] {
-    gap: var(--space-1);
-  }
-  &[data-gap="2"] {
-    gap: var(--space-2);
-  }
-  &[data-gap="3"] {
-    gap: var(--space-3);
-  }
-  &[data-gap="4"] {
-    gap: var(--space-4);
-  }
-  &[data-gap="5"] {
-    gap: var(--space-5);
-  }
-  &[data-gap="6"] {
-    gap: var(--space-6);
-  }
-  &[data-gap="7"] {
-    gap: var(--space-7);
-  }
-  &[data-gap="8"] {
-    gap: var(--space-8);
-  }
-  &[data-gap="9"] {
-    gap: var(--space-9);
-  }
-}

packages/website/src/components/Flex/index.tsx

@@ -1,39 +0,0 @@
-import type { ComponentProps } from "react";
-import type { Space } from "../../types/space";
-import { classNames } from "../../ui/classNames";
-import styles from "./index.module.css";
-
-interface Props extends ComponentProps<"div"> {
-  column?: boolean;
-  wrap?: boolean;
-
-  align?: "start" | "center" | "end";
-  justify?: "start" | "center" | "end" | "between";
-
-  gap?: Space;
-}
-
-export function Flex({
-  children,
-  column,
-  className,
-  gap,
-  justify,
-  align,
-  wrap,
-  ...props
-}: Props) {
-  return (
-    <div
-      {...props}
-      className={classNames(styles.flex, className)}
-      data-column={column}
-      data-wrap={wrap}
-      data-gap={gap}
-      data-justify={justify}
-      data-align={align}
-    >
-      {children}
-    </div>
-  );
-}

packages/website/src/components/RecentlyViewedTanks/index.tsx

@@ -5,7 +5,6 @@ import { useStrings } from "../../hooks/useStrings";
 import { TankFilters } from "../../stores/tankFilters";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankSort } from "../../stores/tankopediaSort";
-import { Flex } from "../Flex";
 import { TankCard } from "../TankCard";
 import { TankCardWrapper } from "../TankCardWrapper";
 import { Text } from "../Text";
@@ -17,17 +16,17 @@ export function RecentlyViewedTanks() {
   const filters = TankFilters.use();
   // non-reactive because it is a little weird that it updates instantly even before the page loads
   const recentlyViewed = TankopediaPersistent.state.recentlyViewed.filter(
-    (id) => id in tankDefinitions.tanks,
+    (id) => id in tankDefinitions.tanks
   );
   const hasFilters = useMemo(
     () =>
       Object.entries(filters).some(([key, value]) => {
         return !isEqual(
           value,
-          TankFilters.initial[key as keyof typeof TankFilters.initial],
+          TankFilters.initial[key as keyof typeof TankFilters.initial]
         );
       }),
-    [filters],
+    [filters]
   );
 
   const strings = useStrings();
@@ -38,7 +37,14 @@ export function RecentlyViewedTanks() {
   }
 
   return (
-    <Flex column gap="4" className={styles.recent}>
+    <div
+      className={styles.recent}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--space-4)",
+      }}
+    >
       <Text color="gray" lowContrast>
         {strings.website.common.tank_search.recent}
       </Text>
@@ -48,6 +54,6 @@ export function RecentlyViewedTanks() {
           <TankCard compact tank={tankDefinitions.tanks[id]} key={id} />
         ))}
       </TankCardWrapper>
-    </Flex>
+    </div>
   );
 }

packages/website/src/components/TankCard/index.tsx

@@ -8,7 +8,6 @@ import { useUnwrapper } from "../../hooks/useUnwrapper";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { ClassIcon } from "../ClassIcon";
-import { Flex } from "../Flex";
 import { LinkI18nWrapper } from "../LinkI18nWrapper";
 import { TankCardSkeleton } from "../TankCardSkeleton";
 import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
@@ -45,11 +44,14 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
   const lowContrast = props.tank.type !== TankType.TANK_TYPE_RESEARCHABLE;
 
   const content = (
-    <Flex
+    <div
       className={styles.wrapper}
       data-compact={props.compact}
-      column
+      style={{
-      gap="3"
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--space-3)",
+      }}
       onClick={() => {
         props.onTankSelect?.(props.tank);
         TankopediaPersistent.mutate((draft) => {
@@ -59,13 +61,14 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
         });
       }}
     >
-      <Flex
+      <div
-        justify="end"
         className={styles["image-wrapper"]}
         style={{
+          display: "flex",
+          justifyContent: "flex-end",
           backgroundImage: `url(${alias(
             "api",
-            `/flags/scratched/${props.tank.nation}.webp`,
+            `/flags/scratched/${props.tank.nation}.webp`
           )})`,
         }}
       >
@@ -73,7 +76,7 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
           alt={name}
           src={alias("api", `/tanks/${props.tank.id}/icons/big.webp`)}
         />
-      </Flex>
+      </div>
 
       <Text className={styles.name} color={color} lowContrast={lowContrast}>
         <ClassIcon class={props.tank.class} className={styles.icon} />
@@ -85,7 +88,7 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
           <div className={styles.discriminator}>{props.discriminator}</div>
         </Text>
       )}
-    </Flex>
+    </div>
   );
 
   if (provideLink) {

packages/website/src/components/TankCardSkeleton/index.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "../Flex";
 import { InlineSkeleton } from "../InlineSkeleton";
 import { Skeleton } from "../Skeleton";
 import styles from "./index.module.css";
@@ -9,9 +8,17 @@ type TankCardProps = {
 
 export const TankCardSkeleton = ({ compact }: TankCardProps) => {
   return (
-    <Flex className={styles.wrapper} data-compact={compact} column gap="3">
+    <div
+      className={styles.wrapper}
+      data-compact={compact}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--space-3)",
+      }}
+    >
       <Skeleton className={styles["image-wrapper"]} />
       <InlineSkeleton className={styles.name} />
-    </Flex>
+    </div>
   );
 };

packages/website/src/components/TankSearchBar/index.tsx

@@ -9,7 +9,6 @@ import {
 import { useStrings } from "../../hooks/useStrings";
 import { TankFilters } from "../../stores/tankFilters";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
-import { Flex } from "../Flex";
 import { TankSearchSort } from "../TankSearchSort";
 import { TextField } from "../TextField";
 
@@ -57,11 +56,11 @@ export function TankSearchBar({
         window.location.href = `/tanks/${topResult.slug}`;
       }
     },
-    [topResult],
+    [topResult]
   );
 
   return (
-    <Flex gap="3">
+    <div style={{ display: "flex", gap: "var(--space-3)" }}>
       <TextField
         disabled={skeleton}
         defaultValue={search ?? undefined}
@@ -75,6 +74,6 @@ export function TankSearchBar({
       </TextField>
 
       <TankSearchSort />
-    </Flex>
+    </div>
   );
 }

packages/website/src/components/TankSearchNoResults/index.tsx

@@ -1,6 +1,5 @@
 import { useLocale } from "../../hooks/useLocale";
 import { TankFilters } from "../../stores/tankFilters";
-import { Flex } from "../Flex";
 import { Link } from "../Link";
 import { Text } from "../Text";
 import styles from "./index.module.css";
@@ -13,7 +12,14 @@ export function TankSearchNoResults({ type = "filters" }: NoResultsProps) {
   const { strings } = useLocale();
 
   return (
-    <Flex className={styles["no-results"]} align="center" justify="center">
+    <div
+      className={styles["no-results"]}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
       <Text lowContrast>
         {strings.website.common.tank_search.no_tanks_found.body}{" "}
         <Link
@@ -28,6 +34,6 @@ export function TankSearchNoResults({ type = "filters" }: NoResultsProps) {
             : strings.website.common.tank_search.no_tanks_found.search_again}
         </Link>
       </Text>
-    </Flex>
+    </div>
   );
 }

packages/website/src/components/ToolBanner.astro

@@ -4,7 +4,6 @@ import { api } from "../api/dynamic";
 import type { Tool } from "../constants/tools";
 import { Logo } from "../icons/Logo";
 import { Back } from "./Back";
-import { Flex } from "./Flex";
 import { Heading } from "./Heading";
 import { IconButton } from "./IconButton";
 
@@ -112,7 +111,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
     <div class="centered">
       <Heading weight="bold" size="2">
-        <Flex align="center" gap="4">
+        <div style={{ display: "flex", alignItems: "center", gap: "var(--space-4)" }}>
           <Back client:load>
             <IconButton variant="soft" color="gray" highContrast>
               <ArrowLeftIcon className="return" />
@@ -120,7 +119,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
           </Back>
 
           {toolStrings.name}
-        </Flex>
+        </div>
       </Heading>
 
       <Logo className="logo" />