feat: styles

packages/i18n/strings/en.json

@@ -24,5 +24,9 @@
     "avatars": { "name": "Avatars" },
     "backgrounds": { "name": "Backgrounds" },
     "api": { "name": "API" }
+  },
+
+  "home": {
+    "search": "Search tanks, players, tools..."
   }
 }

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;

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>

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;
+    }
+  }
 }

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>
+  );
 }