From 129d7c9688348be4c4aca73c9f2b722648ac76e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 8 Apr 2024 19:26:49 -0500
Subject: [PATCH] feat: skills title

---
 src/app/tools/compare/page.tsx | 66 +++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index ea4271c24..92fbf5b7d 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -472,37 +472,45 @@ export default function Page() {
                       <Popover.Trigger>
                         <Button variant="ghost" radius="large">
                           <Flex
+                            gap="1"
+                            align="center"
+                            justify="center"
                             direction="column"
-                            style={{
-                              gap: 2,
-                            }}
                           >
-                            {Object.entries(
-                              awaitedSkillDefinitions.classes,
-                            ).map(([tankClass, skills]) => (
-                              <Flex
-                                key={tankClass}
-                                style={{
-                                  gap: 2,
-                                }}
-                              >
-                                {skills.map((skill) => (
-                                  <div
-                                    key={skill}
-                                    style={{
-                                      width: 6,
-                                      height: 6,
-                                      borderRadius: 2,
-                                      backgroundColor:
-                                        crewSkills[skill] === 0
-                                          ? theme.colors.textLowContrast
-                                          : theme.colors
-                                              .textLowContrast_crimson,
-                                    }}
-                                  />
-                                ))}
-                              </Flex>
-                            ))}
+                            Skills
+                            <Flex
+                              direction="column"
+                              style={{
+                                gap: 2,
+                              }}
+                            >
+                              {Object.entries(
+                                awaitedSkillDefinitions.classes,
+                              ).map(([tankClass, skills]) => (
+                                <Flex
+                                  key={tankClass}
+                                  style={{
+                                    gap: 2,
+                                  }}
+                                >
+                                  {skills.map((skill) => (
+                                    <div
+                                      key={skill}
+                                      style={{
+                                        width: 6,
+                                        height: 6,
+                                        borderRadius: 2,
+                                        backgroundColor:
+                                          crewSkills[skill] === 0
+                                            ? theme.colors.textLowContrast
+                                            : theme.colors
+                                                .textLowContrast_crimson,
+                                      }}
+                                    />
+                                  ))}
+                                </Flex>
+                              ))}
+                            </Flex>
                           </Flex>
                         </Button>
                       </Popover.Trigger>