Chore/UI rework

[Sithumli]

This pull request makes several improvements to the Astro-based documentation template, focusing on icon handling, UI consistency, and style isolation. The main changes include moving the iconify-icon import to a global script, updating button and table styles for consistency and better prose integration, and refining component markup for maintainability.

Icon handling and imports:

• Removed individual <script> import 'iconify-icon'; </script> statements from multiple components and instead added a single global Iconify script import in BaseLayout.astro for more efficient and maintainable icon usage. [1] [2] [3] [4] [5] [6] [7] [8] [9]

Button and icon styling improvements:

• Updated Button.astro to increase icon size and spacing, add style isolation, and improve button appearance and accessibility (e.g., no border, pointer cursor, no text decoration). Also added specific styles for iconify-icon inside buttons. [1] [2]
• Ensured prose styles do not override .btn and a.btn elements, both in light and dark modes, to preserve button appearance in rich text content. [1] [2]

Table and prose style isolation:

• Updated the custom Table.astro component and global CSS to ensure prose styles do not affect custom tables, improving visual consistency and preventing style leakage. [1] [2] [3] [4]

Component and UI refinements:

• Improved Tabs.astro inactive tab hover color for better accessibility and added missing background class for inactive tabs. [1] [2]
• Adjusted FeatureCard.astro to add spacing below icons for better layout.
• Tweaked Step.astro for more accurate step line height and selector for last step, improving visual alignment. [1] [2]

Other notable changes:

• Removed the code block with Button components from the installation guide in favor of simple markdown links for clarity and easier maintenance.
• Updated code highlighting configuration by removing the unused wrap: true option. [1] [2]

These changes collectively improve maintainability, accessibility, and the overall user experience of the documentation template.

[Copilot]

Pull request overview

This pull request refactors the Astro-based documentation template to improve maintainability, UI consistency, and performance. The changes centralize icon handling, enhance style isolation for buttons and tables, and refine component UI elements for better accessibility and visual appeal.

Changes:

• Centralized iconify-icon script import in BaseLayout.astro, removing individual imports from 9 components
• Enhanced button and table styling with prose style exclusions to prevent style leakage
• Updated component UI elements (Tabs hover colors, FeatureCard spacing, Step selector improvements)

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
template/src/layouts/BaseLayout.astro	Added global iconify-icon script import with defer attribute
template/src/styles/global.css	Added :not(.btn) exclusions for prose anchor styles and :not(.text-sm) exclusions for prose table styles in both light and dark modes
template/src/components/Button.astro	Increased icon size/spacing, changed to global styles, added button-specific iconify-icon styles
template/src/components/Table.astro	Updated border colors and table header background for better visual consistency
template/src/components/Tabs.astro	Changed inactive tab hover color to primary-700 and added bg-transparent to inactive classes
template/src/components/Step.astro	Changed selector from :last-child to :last-of-type and adjusted step line height calculation
template/src/components/FeatureCard.astro	Added bottom margin to icon for improved spacing
template/src/components/ReadTime.astro	Removed individual iconify-icon import
template/src/components/Header.astro	Removed individual iconify-icon import
template/src/components/Footer.astro	Removed individual iconify-icon import
template/src/components/FlipCard.astro	Removed individual iconify-icon import
template/src/components/DocNav.astro	Removed individual iconify-icon import
template/src/components/BottomNav.astro	Removed individual iconify-icon import
template/src/components/BlogCard.astro	Removed individual iconify-icon import
template/src/content/docs/installation/index.mdx	Replaced Button components with markdown links in Next Steps section
template/astro.config.mjs	Removed unused wrap: true option from shikiConfig
astro.config.mjs	Removed unused wrap: true option from shikiConfig

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The button padding is defined in two places: here (lines 84-85) and in Button.astro (line 43). While this ensures consistency, it creates a maintenance burden. Consider removing the padding declaration from one of these locations to maintain a single source of truth. Since the Button component defines its base styles, it would be more maintainable to only set padding there and remove these lines.

Suggested change

padding: 0.5rem 1.25rem;