From 194e5fceca81087658c1944ca51360974285ba70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 1 Apr 2024 09:31:02 -0500
Subject: [PATCH] feat: crew training info

---
 .../components/Consumables.tsx                | 14 ++++-----
 .../components/Skills/index.tsx               |  4 +--
 .../[id]/components/Characteristics/index.tsx | 31 +++++++++++++++++--
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx
index 29e813558..d5b3c45c8 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx
@@ -37,6 +37,8 @@ export function Consumables() {
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
         <Flex gap="2" align="center">
+          <Heading size="4">Consumables</Heading>
+
           <Popover.Root>
             <Popover.Trigger>
               <IconButton variant="ghost">
@@ -45,16 +47,12 @@ export function Consumables() {
             </Popover.Trigger>
 
             <Popover.Content>
-              <Flex direction="column" gap="2">
-                <Text>
-                  <Text color="amber">Yellow consumables</Text> do not affect
-                  the statistics.
-                </Text>
-              </Flex>
+              <Text>
+                <Text color="amber">Yellow consumables</Text> do not affect the
+                statistics.
+              </Text>
             </Popover.Content>
           </Popover.Root>
-
-          <Heading size="4">Consumables</Heading>
         </Flex>
 
         <Button
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx
index 2dcdad2ce..603a83b75 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx
@@ -41,6 +41,8 @@ export function Skills() {
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
         <Flex gap="2" align="center">
+          <Heading size="4">Crew skills</Heading>
+
           <Popover.Root>
             <Popover.Trigger>
               <IconButton variant="ghost">
@@ -61,8 +63,6 @@ export function Skills() {
               </Flex>
             </Popover.Content>
           </Popover.Root>
-
-          <Heading size="4">Crew skills</Heading>
         </Flex>
 
         <Button
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
index ecd91fc76..aec6f2741 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
@@ -1,5 +1,13 @@
-import { AccessibilityIcon } from '@radix-ui/react-icons';
-import { Flex, Heading, Slider, Text, TextField } from '@radix-ui/themes';
+import { AccessibilityIcon, InfoCircledIcon } from '@radix-ui/react-icons';
+import {
+  Flex,
+  Heading,
+  IconButton,
+  Popover,
+  Slider,
+  Text,
+  TextField,
+} from '@radix-ui/themes';
 import { debounce } from 'lodash';
 import { use, useEffect, useRef, useState } from 'react';
 import { lerp } from 'three/src/math/MathUtils';
@@ -657,7 +665,24 @@ export function Characteristics() {
       </Flex>
 
       <Flex direction="column" gap="2">
-        <Heading size="5">Crew training</Heading>
+        <Flex gap="2" align="center">
+          <Heading size="5">Crew training</Heading>
+
+          <Popover.Root>
+            <Popover.Trigger>
+              <IconButton variant="ghost">
+                <InfoCircledIcon />
+              </IconButton>
+            </Popover.Trigger>
+
+            <Popover.Content>
+              <Flex gap="1" align="center">
+                <AccessibilityIcon />
+                <Text>represents the other roles a crew member can take.</Text>
+              </Flex>
+            </Popover.Content>
+          </Popover.Root>
+        </Flex>
 
         {tank.crew.map((member) => {
           const count = member.count ?? 1;