feat: better titlebar

src/commands/breakdown.tsx

@@ -1,8 +1,8 @@
 import { chunk } from 'lodash';
 import * as Breakdown from '../components/Breakdown';
+import CommandWrapper from '../components/CommandWrapper';
 import NoData, { NoDataType } from '../components/NoData';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { AllStats, getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import getTankStats from '../core/blitz/getTankStats';
@@ -254,10 +254,10 @@ export async function renderBreakdown(
   if (filteredOrder.length > 0) {
     return pages
       .map((page, index) => (
-        <Wrapper>
+        <CommandWrapper>
           {index === 0 && (
             <TitleBar
-              name={accountInfo.nickname}
+              title={accountInfo.nickname}
               image={
                 clanData?.clan
                   ? `https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanData?.clan?.emblem_set_id}.png`
@@ -268,14 +268,14 @@ export async function renderBreakdown(
           )}
 
           <Breakdown.Root>{page}</Breakdown.Root>
-        </Wrapper>
+        </CommandWrapper>
       ))
       .reverse();
   } else {
     return [
-      <Wrapper>
+      <CommandWrapper>
         <TitleBar
-          name={accountInfo.nickname}
+          title={accountInfo.nickname}
           image={
             clanData?.clan
               ? `https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanData?.clan?.emblem_set_id}.png`
@@ -285,7 +285,7 @@ export async function renderBreakdown(
         />
 
         <NoData type={NoDataType.BattlesInPeriod} />
-      </Wrapper>,
+      </CommandWrapper>,
     ];
   }
 }

src/commands/evolution.tsx

@@ -2,10 +2,10 @@ import {
   SlashCommandBuilder,
   SlashCommandSubcommandGroupBuilder,
 } from 'discord.js';
+import CommandWrapper from '../components/CommandWrapper';
 import * as Graph from '../components/Graph';
 import NoData, { NoDataType } from '../components/NoData';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import resolveTankId from '../core/blitz/resolveTankId';
@@ -74,8 +74,8 @@ async function render(
   const minX = Math.min(...xs);
 
   return (
-    <Wrapper>
-      <TitleBar name={accountInfo.nickname} image={logo} description={name} />
+    <CommandWrapper>
+      <TitleBar title={accountInfo.nickname} image={logo} description={name} />
 
       {plot.length > 0 && (
         <Graph.Root
@@ -103,7 +103,7 @@ async function render(
       )}
 
       {plot.length === 0 && <NoData type={NoDataType.BattlesInPeriod} />}
-    </Wrapper>
+    </CommandWrapper>
   );
 }
 

src/commands/fullStats.tsx

@@ -1,9 +1,9 @@
 import { SlashCommandBuilder } from 'discord.js';
+import CommandWrapper from '../components/CommandWrapper';
 import GenericAllStats from '../components/GenericAllStats';
 import NoData, { NoDataType } from '../components/NoData';
 import TierWeights from '../components/TierWeights';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import { emblemIdToURL } from '../core/blitzkrieg/emblemIdToURL';
@@ -48,9 +48,9 @@ async function render(
   const tierWeights = await getTierWeights(diffedTankStats.diff, filteredOrder);
 
   return (
-    <Wrapper>
+    <CommandWrapper>
       <TitleBar
-        name={nickname}
+        title={nickname}
         image={clanImage}
         description={`${name} • ${filterDescriptions}`}
       />
@@ -60,7 +60,7 @@ async function render(
       {stats.battles > 0 && (
         <GenericAllStats stats={stats} supplementaryStats={supplementary} />
       )}
-    </Wrapper>
+    </CommandWrapper>
   );
 }
 

src/commands/inactive.tsx

@@ -1,8 +1,8 @@
 import { SlashCommandBuilder } from 'discord.js';
+import CommandWrapper from '../components/CommandWrapper';
 import GenericStats from '../components/GenericStats';
 import NoData, { NoDataType } from '../components/NoData';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanInfo } from '../core/blitz/getClanInfo';
 import addClanChoices from '../core/discord/addClanChoices';
@@ -52,16 +52,16 @@ export const inactiveCommand: CommandRegistry = {
     const hasInactiveMembers = inactive.length > 0;
 
     return (
-      <Wrapper>
+      <CommandWrapper>
         <TitleBar
-          name={clanInfo.name}
+          title={clanInfo.name}
           image={`https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanInfo.emblem_set_id}.png`}
           description={`Inactive for ${threshold}+ Days • ${new Date().toDateString()}`}
         />
 
         {!hasInactiveMembers && <NoData type={NoDataType.PlayersInPeriod} />}
         {hasInactiveMembers && <GenericStats stats={inactive} />}
-      </Wrapper>
+      </CommandWrapper>
     );
   },
 

src/commands/link.tsx

@@ -3,7 +3,7 @@ import { GuildMemberRoleManager, SlashCommandBuilder } from 'discord.js';
 import markdownEscape from 'markdown-escape';
 import discord from '../../discord.json' assert { type: 'json' };
 import { Glow } from '../components/AllStatsOverview/components/WN8Display/components/Glow';
-import Wrapper from '../components/Wrapper';
+import CommandWrapper from '../components/CommandWrapper';
 import { REGION_NAMES } from '../constants/regions';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
@@ -50,7 +50,7 @@ export const verifyCommand: CommandRegistry = {
     }
 
     return [
-      <Wrapper fat>
+      <CommandWrapper fat>
         <div
           style={{
             display: 'flex',
@@ -196,7 +196,7 @@ export const verifyCommand: CommandRegistry = {
 
           <Glow color={teal.teal9} rotation={-90} />
         </div>
-      </Wrapper>,
+      </CommandWrapper>,
 
       embedInfo(
         'Incorrect account?',

src/commands/ownedTanks.tsx

@@ -1,8 +1,8 @@
 import { SlashCommandBuilder } from 'discord.js';
+import CommandWrapper from '../components/CommandWrapper';
 import NoData, { NoDataType } from '../components/NoData';
 import * as Tanks from '../components/Tanks';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { encyclopediaInfo } from '../core/blitz/encyclopediaInfo';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
@@ -61,9 +61,9 @@ export const ownedTanksCommand: CommandRegistry = {
     nations.sort();
 
     return (
-      <Wrapper>
+      <CommandWrapper>
         <TitleBar
-          name={accountInfo.nickname}
+          title={accountInfo.nickname}
           image={
             clanAccountInfo?.clan
               ? emblemIdToURL(clanAccountInfo.clan.emblem_set_id)
@@ -120,7 +120,7 @@ export const ownedTanksCommand: CommandRegistry = {
               );
             }),
           ))}
-      </Wrapper>
+      </CommandWrapper>
     );
   },
 

src/commands/ratings.tsx

@@ -6,9 +6,9 @@ import {
 import { range } from 'lodash';
 import markdownEscape from 'markdown-escape';
 import { BlitzkriegRatingsLeaderboard } from '../../scripts/buildRatingsLeaderboard';
+import CommandWrapper from '../components/CommandWrapper';
 import * as Leaderboard from '../components/Leaderboard';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { LEAGUES } from '../constants/leagues';
 import { FIRST_ARCHIVED_RATINGS_SEASON } from '../constants/ratings';
 import { REGION_NAMES_SHORT, Region } from '../constants/regions';
@@ -423,9 +423,9 @@ export const ratingsCommand = new Promise<CommandRegistryPromisable>(
         });
 
         return (
-          <Wrapper>
+          <CommandWrapper>
             <TitleBar
-              name={titleName}
+              title={titleName}
               image={titleImage}
               description={titleDescription}
             />
@@ -445,7 +445,7 @@ export const ratingsCommand = new Promise<CommandRegistryPromisable>(
                 )}
               </Leaderboard.Root>
             )}
-          </Wrapper>
+          </CommandWrapper>
         );
       },
 

src/commands/stats.tsx

@@ -1,8 +1,8 @@
 import { SlashCommandBuilder } from 'discord.js';
 import AllStatsOverview from '../components/AllStatsOverview';
+import CommandWrapper from '../components/CommandWrapper';
 import NoData, { NoDataType } from '../components/NoData';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import { emblemIdToURL } from '../core/blitzkrieg/emblemIdToURL';
@@ -42,9 +42,9 @@ async function render(
   const filterDescriptions = await filtersToDescription(filters);
 
   return (
-    <Wrapper>
+    <CommandWrapper>
       <TitleBar
-        name={nickname}
+        title={nickname}
         image={clanImage}
         description={`${name} • ${filterDescriptions}`}
       />
@@ -53,7 +53,7 @@ async function render(
       {stats.battles > 0 && (
         <AllStatsOverview stats={stats} supplementaryStats={supplementary} />
       )}
-    </Wrapper>
+    </CommandWrapper>
   );
 }
 

src/components/CommandWrapper.tsx

@@ -1,26 +1,22 @@
 import { ReactNode } from 'react';
 import { theme } from '../stitches.config';
 
-export interface WrapperProps {
+interface CommandWrapperProps {
   children: ReactNode;
-  naked?: boolean;
   fat?: boolean;
 }
 
-export default function Wrapper({ children, naked, fat }: WrapperProps) {
+export default function CommandWrapper({ children, fat }: CommandWrapperProps) {
   return (
     <div
       style={{
         display: 'flex',
         flexDirection: 'column',
         padding: `16px ${fat ? 0 : 16}px`,
-        gap: 32,
+        gap: 16,
         width: 480,
         color: theme.colors.textHighContrast,
-
-        ...(!naked && {
-          background: 'url(https://i.imgur.com/PhS06NJ.png)',
-        }),
+        background: 'url(https://i.imgur.com/PhS06NJ.png)',
       }}
     >
       {children}

src/components/TitleBar.tsx

@@ -1,75 +1,52 @@
 import { theme } from '../stitches.config';
 
 export interface TitleBarProps {
-  name: string;
+  title: string;
   image?: string;
   description?: string;
 }
 
-export default function TitleBar({ name, image, description }: TitleBarProps) {
+export default function TitleBar({ title, image, description }: TitleBarProps) {
   return (
     <div
       style={{
+        gap: 4,
         display: 'flex',
-        alignItems: 'center',
+        flexDirection: 'column',
         justifyContent: 'center',
-        overflow: 'hidden',
+        alignItems: 'center',
       }}
     >
-      <div style={{ display: 'flex', gap: 8 }}>
+      <div
+        style={{
+          gap: 4,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
         {image && (
           <img
-            style={{ width: 64, height: 64, objectFit: 'contain' }}
+            style={{ width: 32, height: 32, objectFit: 'contain' }}
             src={image}
           />
         )}
 
-        <div
+        <span
           style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            gap: 4,
+            fontSize: 32,
+            fontWeight: 900,
+            background: `linear-gradient(180deg, ${theme.colors.textHighContrast} 0%, ${theme.colors.textLowContrast} 100%)`,
+            backgroundClip: 'text',
           }}
         >
-          <div
-            style={{
-              display: 'flex',
-              gap: 4,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <span
-              style={{
-                fontSize: 32,
-                color: theme.colors.textHighContrast,
-                fontWeight: 900,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-              }}
-            >
-              {name}
-            </span>
-          </div>
-
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: image ? 'flex-start' : 'center',
-            }}
-          >
-            <span
-              style={{
-                color: theme.colors.textLowContrast,
-                fontSize: 16,
-              }}
-            >
-              {description}
-            </span>
-          </div>
-        </div>
+          {title}
+        </span>
       </div>
+
+      <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
+        {description}
+      </span>
     </div>
   );
 }