From 649cdd893f870720a646c00b5b5b232b7beda2e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 8 Jan 2026 20:02:24 -0600
Subject: [PATCH] feat: styles

---
 packages/i18n/strings/en.json                 |  4 ++
 .../src/components/BaseStyles.astro           | 15 +++++-
 .../website-ue/src/components/HomeHero.astro  |  7 ++-
 .../src/components/TextField/index.css        | 50 +++++++++++++++----
 .../src/components/TextField/index.tsx        | 15 ++++--
 5 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 9feddb93b..ecf8488a2 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -24,5 +24,9 @@
     "avatars": { "name": "Avatars" },
     "backgrounds": { "name": "Backgrounds" },
     "api": { "name": "API" }
+  },
+
+  "home": {
+    "search": "Search tanks, players, tools..."
   }
 }
diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro
index 901659799..65a149748 100644
--- a/packages/website-ue/src/components/BaseStyles.astro
+++ b/packages/website-ue/src/components/BaseStyles.astro
@@ -25,11 +25,22 @@
     --weight-extra-bold: 800;
     --weight-black: 900;
 
-    --font-size-regular: 1rem;
+    --font-size-regular: var(--space-4);
+
+    --max-size: max(100vw, 100vh);
+
+    --outline-interactive: solid var(--space-1) var(--gray-5);
+    --outline-focus: var(--space-1) solid var(--accent-6);
+
+    --shadow-cavity:
+      inset var(--space-1) var(--space-1) var(--space-1) var(--gray-2),
+      inset calc(var(--space-1) * -1) calc(var(--space-1) * -1) var(--space-1)
+        var(--gray-4);
+    --shadow-focus: 0 0 var(--space-3) var(--accent-4);
 
     background-color: var(--gray-1);
     color: var(--gray-12);
-    font-family: "Roboto Flex", sans-serif;
+    font-family: "Roboto Flex";
 
     display: flex;
     flex-direction: column;
diff --git a/packages/website-ue/src/components/HomeHero.astro b/packages/website-ue/src/components/HomeHero.astro
index 29631bfce..fa0a468fe 100644
--- a/packages/website-ue/src/components/HomeHero.astro
+++ b/packages/website-ue/src/components/HomeHero.astro
@@ -1,5 +1,8 @@
 ---
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { TextField } from "./TextField";
+
+const strings = { home: { search: "test" } };
 ---
 
 <style>
@@ -40,5 +43,7 @@ import { TextField } from "./TextField";
     <div class="wrapper"></div>
   </div>
 
-  <TextField placeholder="asdasdasd" />
+  <TextField placeholder={strings.home.search}>
+    <MagnifyingGlassIcon />
+  </TextField>
 </div>
diff --git a/packages/website-ue/src/components/TextField/index.css b/packages/website-ue/src/components/TextField/index.css
index ce483a7ac..cff57a173 100644
--- a/packages/website-ue/src/components/TextField/index.css
+++ b/packages/website-ue/src/components/TextField/index.css
@@ -1,19 +1,51 @@
 .text-field {
-  min-width: 0;
-  max-width: var(--space-9);
+  display: flex;
+  align-items: center;
 
-  border-radius: 9999px;
-
-  background-color: var(--gray-3);
-  border: solid 1px var(--gray-6);
-  color: var(--gray-12);
-  padding: var(--space-3) var(--space-4);
+  gap: var(--space-3);
+  width: 100%;
+  max-width: 40rem;
   margin: 0 var(--space-4);
 
-  font-weight: var(--weight-medium);
+  border-radius: var(--max-size);
+
+  background-color: var(--gray-3);
+  outline: var(--outline-interactive);
+  box-shadow: var(--shadow-cavity);
+
   font-size: var(--font-size-regular);
+  color: var(--gray-11);
 
   &[data-has-icon="true"] {
     padding-left: var(--space-3);
   }
+
+  &:focus-within {
+    outline: var(--outline-focus);
+    box-shadow: var(--shadow-focus);
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  input {
+    background: none;
+    border: none;
+
+    font-size: inherit;
+    font-weight: medium;
+    padding: var(--space-3) 0;
+
+    color: var(--gray-12);
+
+    &::placeholder {
+      color: var(--gray-11);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
 }
diff --git a/packages/website-ue/src/components/TextField/index.tsx b/packages/website-ue/src/components/TextField/index.tsx
index 06304618a..83f56ce05 100644
--- a/packages/website-ue/src/components/TextField/index.tsx
+++ b/packages/website-ue/src/components/TextField/index.tsx
@@ -1,6 +1,15 @@
-import type { ComponentProps } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import "./index.css";
 
-export function TextField(props: ComponentProps<"input">) {
-  return <input className="text-field" {...props} />;
+export interface TextFieldProps extends ComponentProps<"input"> {
+  children?: ReactNode;
+}
+
+export function TextField({ children, ...props }: TextFieldProps) {
+  return (
+    <div className="text-field" data-has-icon={children !== undefined}>
+      {children}
+      <input {...props} />
+    </div>
+  );
 }