From 939acad30c0c039dfab098e7f2609d8a609f6c2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 6 Feb 2024 13:28:05 -0600
Subject: [PATCH] feat: compact search

---
 src/app/tools/tankopedia/components/TankSearch/index.tsx | 7 ++++---
 src/app/tools/tankopedia/page.css.ts                     | 6 ++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 4d5535050..277a61520 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -43,7 +43,7 @@ const tankTypeOrder: TankType[] = ['light', 'medium', 'heavy', 'tankDestroyer'];
 const treeTypeOrder: TreeType[] = ['researchable', 'premium', 'collector'];
 
 export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
-  const tanksPerPage = compact ? 16 : 24;
+  const tanksPerPage = compact ? 64 : 96;
   const nations = use(NATIONS);
   const filters = useTankopediaPersistent((state) => state.filters);
   const sort = useTankopediaPersistent((state) => state.sort);
@@ -213,7 +213,7 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
         <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
       )}
 
-      <Flex wrap="wrap" gap="3" justify={compact ? 'between' : 'center'}>
+      <Flex wrap="wrap" gap="2" justify={compact ? 'between' : 'center'}>
         {!compact &&
           searchResultsPageSlice.map((tank) => (
             <Card
@@ -223,13 +223,14 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
               style={{
                 flex: 1,
                 cursor: 'pointer',
+                height: 64,
               }}
             >
               <Inset
                 key={tank.id}
                 style={{
                   minWidth: 256,
-                  minHeight: 128,
+                  minHeight: 64,
                   position: 'relative',
                   display: 'flex',
                 }}
diff --git a/src/app/tools/tankopedia/page.css.ts b/src/app/tools/tankopedia/page.css.ts
index abbc8ec07..7a9792e92 100644
--- a/src/app/tools/tankopedia/page.css.ts
+++ b/src/app/tools/tankopedia/page.css.ts
@@ -7,6 +7,7 @@ export const flag = style({
   transitionDuration: theme.durations.regular,
   left: '0',
   top: '0',
+  scale: 1.5,
 
   // [`.${listing}:hover &, .${listing}:active &`]: {
   //   transform: 'translateX(-25%)',
@@ -15,10 +16,10 @@ export const flag = style({
 });
 
 export const listingShadow = style({
-  boxShadow: `inset 128px -128px 128px -128px ${theme.colors.appBackground1}`,
+  boxShadow: `inset 64px -80px 64px -64px ${theme.colors.appBackground1}`,
 
   [`.${listing}:hover &, .${listing}:active &`]: {
-    boxShadow: `inset 0 0 0 -128px ${theme.colors.appBackground1}`,
+    boxShadow: `inset 0 0 0 -64px ${theme.colors.appBackground1}`,
   },
 });
 
@@ -35,6 +36,7 @@ export const listingImage = style({
   transition: `transform ${theme.durations.regular}`,
   position: 'absolute',
   left: '50%',
+  top: '-25%',
 
   // [`.${listing}:hover &, .${listing}:active &`]: {
   //   transform: 'translate(-25%, 10%)',