From d6993c802f8f39afff33ce201894a94251faa7cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 3 May 2024 20:49:05 -0500
Subject: [PATCH] feat: fullscreen hero

---
 .../[id]/components/Model/HeroSection.tsx      | 18 +++++++++---------
 .../components/Model/components/Options.tsx    |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index 9fd3d2e10..2c8318394 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
@@ -14,13 +14,13 @@ export function HeroSection() {
   return (
     <Flex
       justify="center"
-      // pl={wideFormat ? '9' : undefined}
-      p={wideFormat ? '0' : '6'}
-      pb={wideFormat ? '0' : '6'}
+      py={wideFormat ? '0' : '6'}
       style={{
-        background: `linear-gradient(-90deg, ${theme.colors.appBackground1}, ${theme.colors.appBackground2})`,
+        background: `linear-gradient(${wideFormat ? -90 : 180}deg, ${theme.colors.appBackground1}, ${theme.colors.appBackground2})`,
         position: 'relative',
+        height: wideFormat ? undefined : 'calc(100vh - 64px)',
       }}
+      gap="4"
     >
       <Flex
         direction={wideFormat ? 'row' : 'column'}
@@ -33,16 +33,16 @@ export function HeroSection() {
           align="center"
           justify="center"
           style={{
-            flex: 1,
+            flex: wideFormat ? 1 : undefined,
           }}
         >
           <Flex
             gap={wideFormat ? '4' : '2'}
             direction="column"
-            ml="8"
+            ml={wideFormat ? '8' : undefined}
             align={wideFormat ? undefined : 'center'}
           >
-            <Heading size="9">{tank.name}</Heading>
+            <Heading size={wideFormat ? '9' : '8'}>{tank.name}</Heading>
             <Text color="gray">
               Tier {TIER_ROMAN_NUMERALS[tank.tier]}{' '}
               {
@@ -57,8 +57,8 @@ export function HeroSection() {
 
         <div
           style={{
-            height: 512,
-            flex: wideFormat ? 2 : undefined,
+            height: wideFormat ? 512 : undefined,
+            flex: 2,
             position: 'relative',
           }}
         >
diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
index bb837b48f..0cd403a0e 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
@@ -337,7 +337,7 @@ export function Options() {
           </Flex>
         )}
 
-        <Flex gap="4" align="center">
+        <Flex gap="3" align="center">
           <Flex
             style={{
               cursor: 'default',
@@ -350,7 +350,7 @@ export function Options() {
                 draft.mode = draft.mode === 'armor' ? 'model' : 'armor';
               });
             }}
-            mr="2"
+            mr="1"
           >
             <Switch size="1" checked={mode === 'armor'} />
             Armor