From a66c6ebb274346ff3a0a067b5d956441e55b2930 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 21 Apr 2025 17:01:32 -0500
Subject: [PATCH] feat: classic styled components

---
 .../src/components/Armor/components/ArmorPlateDisplay.tsx  | 2 ++
 .../src/components/Armor/components/ShotDisplayCard.tsx    | 2 +-
 packages/website/src/components/Compare/Controls.tsx       | 1 +
 packages/website/src/components/Embeds/Boolean.tsx         | 2 +-
 .../website/src/components/Embeds/ColorControllerRaw.tsx   | 2 +-
 packages/website/src/components/Embeds/Enum.tsx            | 3 ++-
 packages/website/src/components/Embeds/GenerateURL.tsx     | 1 +
 packages/website/src/components/Embeds/Import.tsx          | 1 +
 packages/website/src/components/Embeds/Radius.tsx          | 2 +-
 packages/website/src/components/Embeds/RichText.tsx        | 4 ++--
 packages/website/src/components/Embeds/Size.tsx            | 2 +-
 packages/website/src/components/Embeds/SizeWithout0.tsx    | 2 +-
 packages/website/src/components/Embeds/Slider.tsx          | 2 +-
 packages/website/src/components/Embeds/TextController.tsx  | 1 +
 packages/website/src/components/Gallery/Search.tsx         | 1 +
 packages/website/src/components/LocaleSwitcher.tsx         | 2 +-
 packages/website/src/components/Party3.astro               | 3 +--
 .../src/components/Performance/PlayerCountControl.tsx      | 2 +-
 .../src/components/TankSearch/components/SearchBar.tsx     | 1 +
 .../Characteristics/components/CompareOptions.tsx          | 1 +
 .../components/HullTraverseVisualizer/index.tsx            | 4 ++--
 .../components/Characteristics/index.tsx                   | 2 ++
 .../components/Options/components/CustomShellButton.tsx    | 7 ++++++-
 .../components/Options/components/QuickInputs/index.tsx    | 2 ++
 .../components/Options/components/Thicknesses.tsx          | 2 +-
 .../Tankopedia/HeroSection/components/Options/index.tsx    | 3 ++-
 .../src/components/TierList/Row/components/Header.tsx      | 1 +
 packages/website/src/pages/[...locale]/settings/_index.tsx | 1 +
 .../website/src/pages/[...locale]/tools/session/_index.tsx | 1 +
 29 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx b/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
index 062d3398b..cdba9f5ab 100644
--- a/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
+++ b/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
@@ -36,6 +36,7 @@ export function ArmorPlateDisplay() {
         style={{ pointerEvents: highlightArmor.editingPlate ? 'auto' : 'none' }}
       >
         <Card
+          variant="classic"
           mb="4"
           style={{
             whiteSpace: 'nowrap',
@@ -72,6 +73,7 @@ export function ArmorPlateDisplay() {
             {highlightArmor.editingPlate && (
               <Flex gap="2" align="center">
                 <TextField.Root
+                  variant="classic"
                   style={{ width: 96 }}
                   mt="2"
                   ref={input}
diff --git a/packages/website/src/components/Armor/components/ShotDisplayCard.tsx b/packages/website/src/components/Armor/components/ShotDisplayCard.tsx
index fb7d56ffc..e2e673a9f 100644
--- a/packages/website/src/components/Armor/components/ShotDisplayCard.tsx
+++ b/packages/website/src/components/Armor/components/ShotDisplayCard.tsx
@@ -115,7 +115,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
   const inTitleColor = shotStatusColors[shot.in.status];
 
   return (
-    <Card style={{ width: 300 }} {...props}>
+    <Card variant="classic" style={{ width: 300 }} {...props}>
       <Flex direction="column" gap="2">
         <Flex direction="column" gap="1">
           <Text color={inTitleColor} weight="bold">
diff --git a/packages/website/src/components/Compare/Controls.tsx b/packages/website/src/components/Compare/Controls.tsx
index 2a7c984a1..d0b1f4089 100644
--- a/packages/website/src/components/Compare/Controls.tsx
+++ b/packages/website/src/components/Compare/Controls.tsx
@@ -107,6 +107,7 @@ export function Controls({
       </Button>
 
       <SegmentedControl.Root
+        variant="classic"
         value={deltaMode}
         onValueChange={(value) => {
           mutateComparePersistent((draft) => {
diff --git a/packages/website/src/components/Embeds/Boolean.tsx b/packages/website/src/components/Embeds/Boolean.tsx
index d4a3180f6..071caa1c4 100644
--- a/packages/website/src/components/Embeds/Boolean.tsx
+++ b/packages/website/src/components/Embeds/Boolean.tsx
@@ -7,7 +7,7 @@ export function Boolean({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Switch
-      variant="soft"
+      variant="classic"
       checked={EmbedState.use((state) => state[configKey] as boolean)}
       onCheckedChange={() => {
         mutateEmbedState((draft) => {
diff --git a/packages/website/src/components/Embeds/ColorControllerRaw.tsx b/packages/website/src/components/Embeds/ColorControllerRaw.tsx
index c547720a6..b5c0fa8a5 100644
--- a/packages/website/src/components/Embeds/ColorControllerRaw.tsx
+++ b/packages/website/src/components/Embeds/ColorControllerRaw.tsx
@@ -25,7 +25,7 @@ export function ColorControllerRaw({
         }}
       />
       <Slider
-        variant="soft"
+        variant="classic"
         min={0}
         max={255}
         value={[alpha]}
diff --git a/packages/website/src/components/Embeds/Enum.tsx b/packages/website/src/components/Embeds/Enum.tsx
index fe6ad35ba..607e9dfc0 100644
--- a/packages/website/src/components/Embeds/Enum.tsx
+++ b/packages/website/src/components/Embeds/Enum.tsx
@@ -25,7 +25,8 @@ export function Enum({
         });
       }}
     >
-      <Select.Trigger />
+      <Select.Trigger variant="classic" />
+
       <Select.Content>
         {config.options.map((option) => (
           <Select.Item key={option.value} value={option.value}>
diff --git a/packages/website/src/components/Embeds/GenerateURL.tsx b/packages/website/src/components/Embeds/GenerateURL.tsx
index fcbca17c8..b1ba74d01 100644
--- a/packages/website/src/components/Embeds/GenerateURL.tsx
+++ b/packages/website/src/components/Embeds/GenerateURL.tsx
@@ -92,6 +92,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
           </Flex>
 
           <TextField.Root
+            variant="classic"
             mt="4"
             style={{ width: '20rem' }}
             placeholder={strings.website.common.player_search.hint}
diff --git a/packages/website/src/components/Embeds/Import.tsx b/packages/website/src/components/Embeds/Import.tsx
index da1e34fed..9c45952d2 100644
--- a/packages/website/src/components/Embeds/Import.tsx
+++ b/packages/website/src/components/Embeds/Import.tsx
@@ -52,6 +52,7 @@ export function Import() {
 
       <Flex gap="2" mb="6">
         <TextField.Root
+          variant="classic"
           ref={importInput}
           placeholder={strings.website.tools.embed.configuration.import.hint}
           style={{ flex: 1 }}
diff --git a/packages/website/src/components/Embeds/Radius.tsx b/packages/website/src/components/Embeds/Radius.tsx
index f770b43b0..fe20a1c8f 100644
--- a/packages/website/src/components/Embeds/Radius.tsx
+++ b/packages/website/src/components/Embeds/Radius.tsx
@@ -7,7 +7,7 @@ export function Radius({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Slider
-      variant="soft"
+      variant="classic"
       min={0}
       max={5}
       value={[
diff --git a/packages/website/src/components/Embeds/RichText.tsx b/packages/website/src/components/Embeds/RichText.tsx
index ec5c6e24f..9cb75e9f0 100644
--- a/packages/website/src/components/Embeds/RichText.tsx
+++ b/packages/website/src/components/Embeds/RichText.tsx
@@ -40,7 +40,7 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
           <FontSizeIcon width="1em" height="1em" />
         </Text>
         <Slider
-          variant="soft"
+          variant="classic"
           min={1}
           max={9}
           value={[Number(state.size)]}
@@ -61,7 +61,7 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
           <FontBoldIcon width="1em" height="1em" />
         </Text>
         <Slider
-          variant="soft"
+          variant="classic"
           min={0}
           max={radixTextWeights.length - 1}
           value={[radixTextWeights.indexOf(state.weight)]}
diff --git a/packages/website/src/components/Embeds/Size.tsx b/packages/website/src/components/Embeds/Size.tsx
index c885b0b86..170119264 100644
--- a/packages/website/src/components/Embeds/Size.tsx
+++ b/packages/website/src/components/Embeds/Size.tsx
@@ -7,7 +7,7 @@ export function Size({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Slider
-      variant="soft"
+      variant="classic"
       min={0}
       max={9}
       value={[
diff --git a/packages/website/src/components/Embeds/SizeWithout0.tsx b/packages/website/src/components/Embeds/SizeWithout0.tsx
index c44625a4e..07415eaab 100644
--- a/packages/website/src/components/Embeds/SizeWithout0.tsx
+++ b/packages/website/src/components/Embeds/SizeWithout0.tsx
@@ -7,7 +7,7 @@ export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Slider
-      variant="soft"
+      variant="classic"
       min={1}
       max={9}
       value={[
diff --git a/packages/website/src/components/Embeds/Slider.tsx b/packages/website/src/components/Embeds/Slider.tsx
index e2b59f02a..8f5951d27 100644
--- a/packages/website/src/components/Embeds/Slider.tsx
+++ b/packages/website/src/components/Embeds/Slider.tsx
@@ -16,7 +16,7 @@ export function Slider({
 
   return (
     <RadixSlider
-      variant="soft"
+      variant="classic"
       min={config.min}
       max={config.max}
       value={[
diff --git a/packages/website/src/components/Embeds/TextController.tsx b/packages/website/src/components/Embeds/TextController.tsx
index 5d819731f..894d71c88 100644
--- a/packages/website/src/components/Embeds/TextController.tsx
+++ b/packages/website/src/components/Embeds/TextController.tsx
@@ -7,6 +7,7 @@ export function TextController({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <TextField.Root
+      variant="classic"
       placeholder="Empty"
       value={EmbedState.use((state) => state[configKey] as string)}
       onChange={(event) => {
diff --git a/packages/website/src/components/Gallery/Search.tsx b/packages/website/src/components/Gallery/Search.tsx
index 661271963..790cdf125 100644
--- a/packages/website/src/components/Gallery/Search.tsx
+++ b/packages/website/src/components/Gallery/Search.tsx
@@ -12,6 +12,7 @@ export function GallerySearch({ skeleton }: MaybeSkeletonComponentProps) {
 
   return (
     <TextField.Root
+      variant="classic"
       disabled={skeleton}
       placeholder={strings.website.tools.gallery.search.hint}
       ref={input}
diff --git a/packages/website/src/components/LocaleSwitcher.tsx b/packages/website/src/components/LocaleSwitcher.tsx
index 3b9b37261..9e949e944 100644
--- a/packages/website/src/components/LocaleSwitcher.tsx
+++ b/packages/website/src/components/LocaleSwitcher.tsx
@@ -38,7 +38,7 @@ export function LocaleSwitcher({ locale }: LocaleAcceptorProps) {
         }${rawPath}`;
       }}
     >
-      <Select.Trigger />
+      <Select.Trigger variant="classic" />
 
       <Select.Content>
         {SUPPORTED_LOCALES.map((locale) => (
diff --git a/packages/website/src/components/Party3.astro b/packages/website/src/components/Party3.astro
index fbf1f5209..23878fb44 100644
--- a/packages/website/src/components/Party3.astro
+++ b/packages/website/src/components/Party3.astro
@@ -31,8 +31,7 @@ const PUBLIC_GOOGLE_TAG_MANAGER_ID = assertSecret(
   src="https://tracking.tomato.gg/api/script.js"
   site-id="14"
   defer
-  type="text/partytown"
-/>
+  type="text/partytown"></script>
 
 {/* nitro ads */}
 {
diff --git a/packages/website/src/components/Performance/PlayerCountControl.tsx b/packages/website/src/components/Performance/PlayerCountControl.tsx
index 6b7b45792..aeeb6d8f5 100644
--- a/packages/website/src/components/Performance/PlayerCountControl.tsx
+++ b/packages/website/src/components/Performance/PlayerCountControl.tsx
@@ -23,7 +23,7 @@ export function PlayerCountControl() {
           });
         }}
       >
-        <Select.Trigger />
+        <Select.Trigger variant="classic" />
         <Select.Content>
           <Select.Item value="total">
             {strings.common.player_count_period.total}
diff --git a/packages/website/src/components/TankSearch/components/SearchBar.tsx b/packages/website/src/components/TankSearch/components/SearchBar.tsx
index d392fcaa9..31474107a 100644
--- a/packages/website/src/components/TankSearch/components/SearchBar.tsx
+++ b/packages/website/src/components/TankSearch/components/SearchBar.tsx
@@ -67,6 +67,7 @@ export function SearchBar({ topResult, skeleton, onSelect }: SearchBarProps) {
     <Flex justify="center">
       <Flex gap="2" flexGrow="1">
         <TextField.Root
+          variant="classic"
           disabled={skeleton}
           defaultValue={tankFilters.search}
           style={{ flex: 1 }}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/CompareOptions.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/CompareOptions.tsx
index 2c82ec205..40a142671 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/CompareOptions.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/CompareOptions.tsx
@@ -29,6 +29,7 @@ export function CompareOptions(props: FlexProps) {
       </Text>
 
       <SegmentedControl.Root
+        variant="classic"
         size="1"
         value={`${relativeAgainst}`}
         onValueChange={(value) => {
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/HullTraverseVisualizer/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/HullTraverseVisualizer/index.tsx
index 815e477d9..8d31dda3e 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/HullTraverseVisualizer/index.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/HullTraverseVisualizer/index.tsx
@@ -105,7 +105,7 @@ export function HullTraverseVisualizer({ stats }: HullTraverseVisualizerProps) {
           onClick={() => setRotateHull((state) => !state)}
           style={{ cursor: 'pointer' }}
         >
-          <Checkbox checked={rotateHull} />
+          <Checkbox variant="classic" checked={rotateHull} />
           <Text size="2">
             {strings.website.tools.tankopedia.visualizers.rotator.hull}
           </Text>
@@ -117,7 +117,7 @@ export function HullTraverseVisualizer({ stats }: HullTraverseVisualizerProps) {
           onClick={() => setRotateTurret((state) => !state)}
           style={{ cursor: 'pointer' }}
         >
-          <Checkbox checked={rotateTurret} />
+          <Checkbox variant="classic" checked={rotateTurret} />
           <Text size="2">
             {strings.website.tools.tankopedia.visualizers.rotator.turret}
           </Text>
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx
index c43db8686..6bdb467ae 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx
@@ -305,6 +305,7 @@ export function Characteristics() {
                   }
                 </Text>
                 <Slider
+                  variant="classic"
                   key={penetrationDistance}
                   min={0}
                   max={500}
@@ -319,6 +320,7 @@ export function Characteristics() {
                   }}
                 />
                 <TextField.Root
+                  variant="classic"
                   style={{ width: 64 }}
                   ref={penetrationDistanceInput}
                   defaultValue={penetrationDistance}
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx
index a1a13beb6..21877c32e 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx
@@ -102,7 +102,7 @@ export function CustomShellButton() {
                     });
                   }}
                 >
-                  <Select.Trigger />
+                  <Select.Trigger variant="classic" />
 
                   <Select.Content>
                     <Select.Item value={`${ShellType.AP}`}>
@@ -129,6 +129,7 @@ export function CustomShellButton() {
                   }
                 </Text>
                 <TextField.Root
+                  variant="classic"
                   style={{ maxWidth: '6rem' }}
                   defaultValue={customShell.caliber}
                   type="number"
@@ -164,6 +165,7 @@ export function CustomShellButton() {
                   }
                 </Text>
                 <TextField.Root
+                  variant="classic"
                   style={{ maxWidth: '6rem' }}
                   defaultValue={customShell.penetration.near}
                   type="number"
@@ -216,6 +218,7 @@ export function CustomShellButton() {
                         ])}
                       </Text>
                       <Slider
+                        variant="classic"
                         min={0}
                         max={90}
                         step={Number.EPSILON}
@@ -246,6 +249,7 @@ export function CustomShellButton() {
                         ])}
                       </Text>
                       <Slider
+                        variant="classic"
                         min={0}
                         max={90}
                         step={Number.EPSILON}
@@ -265,6 +269,7 @@ export function CustomShellButton() {
                 <Flex align="center" justify="between" gap="4">
                   <Text>Explosion radius</Text>
                   <TextField.Root
+                    variant="classic"
                     style={{ maxWidth: '6rem' }}
                     defaultValue={customShell.explosion_radius ?? 0}
                     type="number"
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx
index 1aac73d42..19b22e660 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx
@@ -77,6 +77,7 @@ export function QuickInputs() {
       className="quick-inputs"
     >
       <TextField.Root
+        variant="classic"
         size="1"
         radius="full"
         style={{ flex: 1, textAlign: 'right' }}
@@ -117,6 +118,7 @@ export function QuickInputs() {
       </TextField.Root>
 
       <TextField.Root
+        variant="classic"
         size="1"
         radius="full"
         style={{ flex: 1, textAlign: 'right' }}
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx
index a6e000fd1..b330c495f 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx
@@ -177,7 +177,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             <Text size="1">
               {strings.website.tools.tankopedia.sandbox.static.edit.label}
             </Text>
-            <Checkbox size="2" checked={editStatic} />
+            <Checkbox variant="classic" size="2" checked={editStatic} />
           </Flex>
         </Flex>
 
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
index 47e408f3f..cc524d039 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
@@ -345,7 +345,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
               });
             }}
           >
-            <Checkbox checked={advancedHighlighting} />
+            <Checkbox variant="classic" checked={advancedHighlighting} />
             <Text color="gray" size="2">
               {strings.website.tools.tankopedia.sandbox.dynamic.advanced}
             </Text>
@@ -400,6 +400,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
 
         <Flex gap="3" align="center" mt="2">
           <SegmentedControl.Root
+            variant="classic"
             value={`${display}`}
             onValueChange={(value) => {
               mutateTankopediaEphemeral((draft) => {
diff --git a/packages/website/src/components/TierList/Row/components/Header.tsx b/packages/website/src/components/TierList/Row/components/Header.tsx
index bff09d835..d9b78b7ac 100644
--- a/packages/website/src/components/TierList/Row/components/Header.tsx
+++ b/packages/website/src/components/TierList/Row/components/Header.tsx
@@ -50,6 +50,7 @@ export function Header({ index }: HeaderProps) {
         <Popover.Content>
           <Flex direction="column" gap="2">
             <TextField.Root
+              variant="classic"
               placeholder="Tier name"
               ref={input}
               defaultValue={name}
diff --git a/packages/website/src/pages/[...locale]/settings/_index.tsx b/packages/website/src/pages/[...locale]/settings/_index.tsx
index 8768fb499..db74d3b03 100644
--- a/packages/website/src/pages/[...locale]/settings/_index.tsx
+++ b/packages/website/src/pages/[...locale]/settings/_index.tsx
@@ -30,6 +30,7 @@ function Content({ locale }: LocaleAcceptorProps) {
         <Flex align="center" gap="2" justify="between">
           <Text>{strings.website.settings.dev_mode}</Text>
           <Switch
+            variant="classic"
             checked={developerMode}
             onCheckedChange={(checked) =>
               appStore.setState({ developerMode: checked })
diff --git a/packages/website/src/pages/[...locale]/tools/session/_index.tsx b/packages/website/src/pages/[...locale]/tools/session/_index.tsx
index f231a4617..ddacf7898 100644
--- a/packages/website/src/pages/[...locale]/tools/session/_index.tsx
+++ b/packages/website/src/pages/[...locale]/tools/session/_index.tsx
@@ -203,6 +203,7 @@ function Content() {
           </Flex>
 
           <TextField.Root
+            variant="classic"
             size="3"
             style={{
               position: 'relative',