no results

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

@@ -6,6 +6,10 @@
   align-items: center;
   gap: var(--space-3);
 
+  &[data-underline="always"] {
+    text-decoration: underline;
+  }
+
   &[data-underline="hover"],
   &[data-underline="never"] {
     text-decoration: none;

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

@@ -2,6 +2,10 @@
   display: flex;
   justify-content: center;
 
+  &:last-child {
+    flex: 1;
+  }
+
   .content {
     flex: 1;
     max-width: var(--page-width);

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

@@ -1,13 +1,17 @@
-.label {
+.container {
-  margin: var(--space-4) 0;
+  flex: 1;
 
-  /* mt="2" gap="1" align="center" justify="center" direction="column" */
+  .label {
+    margin: var(--space-4) 0;
 
-  .count {
+    /* mt="2" gap="1" align="center" justify="center" direction="column" */
-    /* gap="2" */
+
+    .count {
+      /* gap="2" */
+    }
+  }
+
+  .test-warning {
+    /* justify="center" mt="4" */
   }
 }
-
-.test-warning {
-  /* justify="center" mt="4" */
-}

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

@@ -31,9 +31,9 @@ import { TankCardSkeleton } from "../TankCardSkeleton";
 import { TankCardWrapper } from "../TankCardWrapper";
 import { TankSearchBar } from "../TankSearchBar";
 import { TankSearchFilters } from "../TankSearchFilters";
+import { TankSearchNoResults } from "../TankSearchNoResults";
 import { Text } from "../Text";
 import { TankSearchCard } from "./components/Card";
-import { NoResults } from "./components/NoResults";
 import { MAX_RECENTLY_VIEWED } from "./constants";
 import styles from "./index.module.css";
 
@@ -428,7 +428,7 @@ export const TankSearch = memo<TankSearchProps>(
     }, [tankFilters, tankopediaSort]);
 
     return (
-      <Flex column gap="4">
+      <Flex className={styles.container} column gap="4">
         <TankSearchBar
           skeleton={skeleton}
           topResult={tanks?.[0]}
@@ -439,52 +439,54 @@ export const TankSearch = memo<TankSearchProps>(
 
         {!skeleton && !compact && <RecentlyViewedTanks />}
 
-        <Flex justify="center" className={styles.label}>
+        {tanks.length > 0 && (
-          <div className={styles.count}>
+          <Flex justify="center" className={styles.label}>
-            <Text lowContrast>
+            <div className={styles.count}>
-              {sorted.length === 1
+              <Text lowContrast>
-                ? strings.website.common.tank_search.count_singular
+                {sorted.length === 1
-                : literals(strings.website.common.tank_search.count_plural, {
+                  ? strings.website.common.tank_search.count_singular
-                    count: sorted.length.toLocaleString(locale),
+                  : literals(strings.website.common.tank_search.count_plural, {
-                  })}
+                      count: sorted.length.toLocaleString(locale),
-            </Text>
+                    })}
+              </Text>
 
-            {onSelectAll && (
+              {onSelectAll && (
-              <Link
+                <Link
-                underline="always"
+                  underline="always"
-                href="#"
+                  href="#"
-                onClick={(event) => {
+                  onClick={(event) => {
-                  event.preventDefault();
+                    event.preventDefault();
-                  onSelectAll(sorted);
+                    onSelectAll(sorted);
-                  TankopediaPersistent.mutate((draft) => {
+                    TankopediaPersistent.mutate((draft) => {
-                    draft.recentlyViewed = uniq([
+                      draft.recentlyViewed = uniq([
-                      ...sorted.map(({ id }) => id),
+                        ...sorted.map(({ id }) => id),
-                      ...draft.recentlyViewed,
+                        ...draft.recentlyViewed,
-                    ])
+                      ])
-                      .filter((id) => id in tankDefinitions.tanks)
+                        .filter((id) => id in tankDefinitions.tanks)
-                      .slice(0, MAX_RECENTLY_VIEWED);
+                        .slice(0, MAX_RECENTLY_VIEWED);
-                  });
+                    });
-                }}
+                  }}
-              >
+                >
-                {strings.website.common.tank_search.select_all}
+                  {strings.website.common.tank_search.select_all}
-              </Link>
+                </Link>
+              )}
+            </div>
+
+            {tankopediaSort.by !== "meta.none" && (
+              <Text color="gray">
+                {literals(strings.website.common.tank_search.sorting_by, {
+                  name: strings.website.common.tank_search.sort[
+                    tankopediaSort.by
+                  ],
+                })}
+                {SORT_UNITS[tankopediaSort.by] === undefined
+                  ? ""
+                  : ` (${SORT_UNITS[tankopediaSort.by]})`}
+                , {tankopediaSort.direction}
+              </Text>
             )}
-          </div>
+          </Flex>
-
+        )}
-          {tankopediaSort.by !== "meta.none" && (
-            <Text color="gray">
-              {literals(strings.website.common.tank_search.sorting_by, {
-                name: strings.website.common.tank_search.sort[
-                  tankopediaSort.by
-                ],
-              })}
-              {SORT_UNITS[tankopediaSort.by] === undefined
-                ? ""
-                : ` (${SORT_UNITS[tankopediaSort.by]})`}
-              , {tankopediaSort.direction}
-            </Text>
-          )}
-        </Flex>
 
         {tankFilters.showTesting && !tankFilters.showNonTesting && (
           <div className={styles["test-warning"]}>
@@ -525,7 +527,7 @@ export const TankSearch = memo<TankSearchProps>(
               </TankCardWrapper>
             )}
 
-            {tanks.length === 0 && <NoResults type="search" />}
+            {tanks.length === 0 && <TankSearchNoResults type="search" />}
           </>
         )}
       </Flex>

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

@@ -0,0 +1,3 @@
+.no-results {
+  flex: 1;
+}

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

@@ -1,22 +1,22 @@
-import { useLocale } from "../../../hooks/useLocale";
+import { useLocale } from "../../hooks/useLocale";
-import { TankFilters } from "../../../stores/tankFilters";
+import { TankFilters } from "../../stores/tankFilters";
-import { Flex } from "../../Flex";
+import { Flex } from "../Flex";
-import { Link } from "../../Link";
+import { Link } from "../Link";
-import { Text } from "../../Text";
+import { Text } from "../Text";
+import styles from "./index.module.css";
 
 interface NoResultsProps {
   type?: "filters" | "search";
 }
 
-export function NoResults({ type = "filters" }: NoResultsProps) {
+export function TankSearchNoResults({ type = "filters" }: NoResultsProps) {
   const { strings } = useLocale();
 
   return (
-    <Flex align="center" justify="center">
+    <Flex className={styles["no-results"]} align="center" justify="center">
       <Text lowContrast>
         {strings.website.common.tank_search.no_tanks_found.body}{" "}
         <Link
-          href="#"
           underline="always"
           color="red"
           onClick={() => {