feat: condensed

src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx

@@ -1,5 +1,5 @@
+import { Flex } from '@radix-ui/themes';
 import { ReactNode } from 'react';
-import * as styles from '../../../../page.css';
 
 interface ConfigurationChildWrapperProps {
   children: ReactNode;
@@ -8,5 +8,9 @@ interface ConfigurationChildWrapperProps {
 export function ConfigurationChildWrapper({
   children,
 }: ConfigurationChildWrapperProps) {
-  return <div className={styles.configurationChild}>{children}</div>;
+  return (
+    <Flex gap="2" direction="column">
+      {children}
+    </Flex>
+  );
 }

src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx

@@ -61,8 +61,10 @@ export function Skills() {
       </Flex>
 
       <Text>
-        <InfoCircledIcon /> Skills in yellow only apply under special
-        circumstances.
+        <Text color="amber">
+          <InfoCircledIcon /> Yellow
+        </Text>{' '}
+        skills apply under special circumstances.
       </Text>
 
       <Flex direction="column" gap="2">

src/app/tools/tankopedia/[id]/page.tsx

@@ -65,7 +65,7 @@ export default function Page({ params }: { params: { id: string } }) {
   }, [initialId, assigned]);
 
   return (
-    <PageWrapper color="purple" size="double">
+    <PageWrapper color="purple" size={1600}>
       {assigned && (
         <>
           <Title />
@@ -78,7 +78,7 @@ export default function Page({ params }: { params: { id: string } }) {
             justify="center"
           >
             <Flex
-              gap="4"
+              gap="8"
               direction="column"
               style={{
                 flex: 1,
@@ -90,13 +90,15 @@ export default function Page({ params }: { params: { id: string } }) {
               <TankSandbox />
               <AntagonistBar />
 
-              <Flex direction="column" gap="5">
+              <Flex gap="5" wrap="wrap">
                 <Modules />
                 <Provisions />
-                <Equipment />
                 <Miscellaneous />
                 <Consumables />
-                <Skills />
+                <Flex gap="5" wrap="wrap">
+                  <Equipment />
+                  <Skills />
+                </Flex>
               </Flex>
             </Flex>
 

src/app/tools/tankopedia/page.css.ts

@@ -74,12 +74,6 @@ export const characteristics = style({
   },
 });
 
-export const configurationChild = style({
-  display: 'flex',
-  gap: 8,
-  flexDirection: 'column',
-});
-
 export const configuration = style({
   display: 'flex',
   flexDirection: 'column',

src/app/tools/tankopedia/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
   const router = useRouter();
 
   return (
-    <PageWrapper size="double" color="purple">
+    <PageWrapper size={1200} color="purple">
       <TankSearch
         onSelect={(tank) => {
           router.push(`./tankopedia/${tank.id}`);

src/components/PageWrapper.tsx

@@ -3,13 +3,13 @@ import { ComponentProps } from 'react';
 
 interface PageWrapperProps extends ComponentProps<typeof Flex> {
   color?: ComponentProps<typeof Theme>['accentColor'];
-  size?: 'regular' | 'wide' | 'double';
+  size?: number;
 }
 
 export default function PageWrapper({
   style,
   color,
-  size = 'regular',
+  size = 800,
   ...props
 }: PageWrapperProps) {
   return (
@@ -19,7 +19,7 @@ export default function PageWrapper({
         gap="4"
         style={{
           width: '100%',
-          maxWidth: size === 'regular' ? 800 : size === 'double' ? 1200 : 960,
+          maxWidth: size,
           margin: 'auto',
           padding: 16,
           boxSizing: 'border-box',