meme submission modal ux

__tests__/components/waves/memes/submission/details/ArtworkDetails.test.tsx

@@ -19,8 +19,8 @@ describe('ArtworkDetails', () => {
         onDescriptionBlur={onDescriptionBlur}
       />
     );
-    const title = screen.getByLabelText('Artwork Title');
-    const desc = screen.getByLabelText('Description');
+    const title = screen.getByLabelText(/Artwork Title/);
+    const desc = screen.getByLabelText(/Description/);
     await user.clear(title);
     await user.type(title, 'new');
     await user.tab();
@@ -37,11 +37,34 @@ describe('ArtworkDetails', () => {
     const { rerender } = render(
       <ArtworkDetails title="one" description="two" onTitleChange={() => {}} onDescriptionChange={() => {}} />
     );
-    const title = screen.getByLabelText('Artwork Title') as HTMLInputElement;
+    const title = screen.getByLabelText(/Artwork Title/) as HTMLInputElement;
     expect(title.value).toBe('one');
     rerender(
       <ArtworkDetails title="three" description="two" onTitleChange={() => {}} onDescriptionChange={() => {}} />
     );
     expect(title.value).toBe('three');
   });
+
+  it('uses neutral required markers and subtle success rings for filled fields', () => {
+    render(
+      <ArtworkDetails
+        title="Filled title"
+        description="Filled description"
+        onTitleChange={() => {}}
+        onDescriptionChange={() => {}}
+      />
+    );
+
+    const requiredMarkers = screen.getAllByText('*');
+    requiredMarkers.forEach((marker) => {
+      expect(marker).toHaveClass('tw-text-iron-500');
+    });
+
+    expect(screen.getByLabelText(/Artwork Title/)).toHaveClass(
+      'tw-ring-emerald-500/30'
+    );
+    expect(screen.getByLabelText(/Description/)).toHaveClass(
+      'tw-ring-emerald-500/30'
+    );
+  });
 });

__tests__/components/waves/memes/traits/DropdownTrait.test.tsx

@@ -1,36 +1,91 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { DropdownTrait } from '@/components/waves/memes/traits/DropdownTrait';
+import { render, screen, fireEvent } from "@testing-library/react";
+import { DropdownTrait } from "@/components/waves/memes/traits/DropdownTrait";
 
-jest.mock('components/waves/memes/traits/TraitWrapper', () => ({
-  TraitWrapper: ({ children }: any) => <div data-testid="wrapper">{children}</div>
+jest.mock("components/waves/memes/traits/TraitWrapper", () => ({
+  TraitWrapper: ({ children, labelRightAdornment }: any) => (
+    <div data-testid="wrapper">
+      <div data-testid="label-adornment">{labelRightAdornment}</div>
+      {children}
+    </div>
+  ),
 }));
 
-describe('DropdownTrait', () => {
-  const traits = { rarity: 'Common' } as any;
-  const options = ['Common', 'Rare'];
+describe("DropdownTrait", () => {
+  const traits = { rarity: "Common" } as any;
+  const options = ["Common", "Rare"];
 
-  it('updates value on change and blur', () => {
+  it("updates value on change and blur", () => {
     const updateText = jest.fn();
     const onBlur = jest.fn();
     render(
-      <DropdownTrait label="Rarity" field="rarity" traits={traits} updateText={updateText} options={options} onBlur={onBlur} />
+      <DropdownTrait
+        label="Rarity"
+        field="rarity"
+        traits={traits}
+        updateText={updateText}
+        options={options}
+        onBlur={onBlur}
+      />
     );
-    const select = screen.getByRole('combobox');
-    fireEvent.change(select, { target: { value: 'Rare' } });
-    expect(updateText).toHaveBeenCalledWith('rarity', 'Rare');
+    const select = screen.getByRole("combobox");
+    fireEvent.change(select, { target: { value: "Rare" } });
+    expect(updateText).toHaveBeenCalledWith("rarity", "Rare");
     fireEvent.blur(select);
-    expect(onBlur).toHaveBeenCalledWith('rarity');
+    expect(onBlur).toHaveBeenCalledWith("rarity");
   });
 
-  it('syncs when traits change', () => {
+  it("syncs when traits change", () => {
     const { rerender } = render(
-      <DropdownTrait label="Rarity" field="rarity" traits={traits} updateText={jest.fn()} options={options} />
+      <DropdownTrait
+        label="Rarity"
+        field="rarity"
+        traits={traits}
+        updateText={jest.fn()}
+        options={options}
+      />
     );
-    const select = screen.getByRole('combobox') as HTMLSelectElement;
-    expect(select.value).toBe('Common');
+    const select = screen.getByRole("combobox") as HTMLSelectElement;
+    expect(select.value).toBe("Common");
+    expect(select).toHaveClass("tw-ring-emerald-500/30");
     rerender(
-      <DropdownTrait label="Rarity" field="rarity" traits={{ rarity: 'Rare' } as any} updateText={jest.fn()} options={options} />
+      <DropdownTrait
+        label="Rarity"
+        field="rarity"
+        traits={{ rarity: "Rare" } as any}
+        updateText={jest.fn()}
+        options={options}
+      />
     );
-    expect(select.value).toBe('Rare');
+    expect(select.value).toBe("Rare");
+    expect(select).toHaveClass("tw-ring-emerald-500/30");
+  });
+
+  it("uses muted text for the empty option and bright text for a selected option", () => {
+    const updateText = jest.fn();
+    render(
+      <DropdownTrait
+        label="Rarity"
+        field="rarity"
+        traits={{ rarity: "" } as any}
+        updateText={updateText}
+        options={options}
+      />
+    );
+
+    const select = screen.getByRole("combobox");
+    const iconContainer = screen.getByTestId("label-adornment")
+      .firstElementChild as HTMLElement;
+    expect((select as HTMLSelectElement).style.color).toBe(
+      "rgb(132, 132, 144)"
+    );
+    expect(iconContainer).toHaveClass("tw-hidden");
+
+    fireEvent.change(select, { target: { value: "Rare" } });
+
+    expect((select as HTMLSelectElement).style.color).toBe(
+      "rgb(239, 239, 241)"
+    );
+    expect(iconContainer).not.toHaveClass("tw-hidden");
+    expect(updateText).toHaveBeenCalledWith("rarity", "Rare");
   });
 });

__tests__/components/waves/memes/traits/TextTrait.test.tsx

@@ -42,8 +42,10 @@ test("syncs input when traits change", () => {
   );
   const input = screen.getByRole("textbox") as HTMLInputElement;
   expect(input.value).toBe("one");
+  expect(input).toHaveClass("tw-ring-emerald-500/30");
   rerender(
-    <TextTrait label="Label" field="title" traits={{ title: "two" } as any} updateText={updateText} />
+    <TextTrait label="Label" field="title" traits={{ title: "" } as any} updateText={updateText} />
   );
-  expect(input.value).toBe("two");
+  expect(input.value).toBe("");
+  expect(input).toHaveClass("tw-ring-iron-700");
 });

__tests__/components/waves/memes/traits/TraitWrapper.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { TraitWrapper } from "@/components/waves/memes/traits/TraitWrapper";
+
+describe("TraitWrapper", () => {
+  it("shows a neutral required marker for standard fields", () => {
+    render(
+      <TraitWrapper label="Label">
+        <input />
+      </TraitWrapper>
+    );
+
+    const requiredMarker = screen.getByText("*");
+    expect(requiredMarker).toHaveClass("tw-text-iron-500");
+  });
+
+  it("shows a neutral required marker for boolean fields", () => {
+    render(
+      <TraitWrapper label="Toggle" isBoolean>
+        <button type="button">Yes</button>
+      </TraitWrapper>
+    );
+
+    const requiredMarker = screen.getByText("*");
+    expect(requiredMarker).toHaveClass("tw-text-iron-500");
+  });
+
+  it("hides the required marker for read-only fields", () => {
+    render(
+      <TraitWrapper label="Read Only" readOnly>
+        <input />
+      </TraitWrapper>
+    );
+
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+  });
+});