search

withastro / docs

Astro documentation
https://docs.astro.build/
MIT License
1.23k stars 1.32k forks source link

Give us feedback form Appearance is not in line with Astro Doc Styling #8194

Open SatanshuMishra opened 1 week ago

SatanshuMishra commented 1 week ago

📝 Issue Description

The Give us feedback form seems to be inconsistent with the general styling of the Astro docs. More specifically, the Submit button seems to be missing bordering styling and the Privacy Policy link seems to be the default link tag with default text styling.

📋 On which page(s) it occurs

This is present on all pages since the form is accessed via the RightSideBar.

🤔 Expected Behavior

Change border styling of the submit button to have a transparent background, grey border, and grey text. The Privacy Policy link should have text decoration removed and be centered on the modal with simple white text (and possibly an icon to the left).

👀 Current Behavior

Instead of the above, the submit button has the default HTML border styling and text-decoration. The Privacy Policy button also has the default HTML text-decoration.

🖥️ Browser

Arc Version 1.41.0, Chrome Version 124.0.6367.119

📄 Additional Information

Screenshot of the module in question is attached below: image

delucis commented 1 week ago

Thanks for flagging @SatanshuMishra!

Here is our reference design:

image

And a link to the Figma design: https://www.figma.com/file/GrDkcguAR7tSWPFuLVDixq/Theme---Starlight-Docs?type=design&node-id=454-34754&mode=design&t=FMXLtlWkDCNniwh2-4

We added the Privacy Policy link later, so it’s not shown in the design. I think the style for that is OK though — it matches other links on the site.

The submit button probably needs a border: 0 though and if we’re really picky, the issue/idea/other buttons outline should overlap with their container border rather than being inside it.