From c9cfb16469486269614e4486a3a79538c97567a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 4 May 2024 16:53:26 -0500
Subject: [PATCH] feat: controls

---
 .../[id]/components/Model/HeroSection.tsx     | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index 496025b10..b3507d4c7 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
@@ -1,4 +1,4 @@
-import { CaretRightIcon } from '@radix-ui/react-icons';
+import { ChevronLeftIcon, MixIcon } from '@radix-ui/react-icons';
 import { Button, Flex, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
@@ -48,10 +48,15 @@ export function HeroSection() {
             direction="column"
             ml={wideFormat ? '8' : undefined}
             align={wideFormat ? undefined : 'center'}
+            justify="center"
+            style={{
+              height: '100%',
+            }}
           >
             <Heading size={wideFormat ? '9' : '8'}>
               {protagonistTank.name}
             </Heading>
+
             <Text color="gray">
               Tier {TIER_ROMAN_NUMERALS[protagonistTank.tier]}{' '}
               {
@@ -62,11 +67,21 @@ export function HeroSection() {
               {strings.common.tank_class_short[protagonistTank.class]}
             </Text>
 
-            <Link href={`/tools/compare?tanks=${compareTanks.join('%2C')}`}>
-              <Button variant="ghost">
-                Compare <CaretRightIcon />
-              </Button>
-            </Link>
+            <Flex gap="4" mt="-1">
+              <Link href="/tools/tankopedia">
+                <Button variant="ghost" size="1" ml="-1">
+                  <ChevronLeftIcon />
+                  Back
+                </Button>
+              </Link>
+
+              <Link href={`/tools/compare?tanks=${compareTanks.join('%2C')}`}>
+                <Button variant="ghost" size="1">
+                  <MixIcon />
+                  Compare
+                </Button>
+              </Link>
+            </Flex>
           </Flex>
         </Flex>