New UI by dfkadyr · Pull Request #60 · stakewise/stakewise-docs

dfkadyr · 2026-03-05T14:35:49Z

No description provided.

vercel · 2026-03-05T14:35:54Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Mar 6, 2026 3:04pm

Copilot

Pull request overview

This PR implements a visual redesign ("New UI") for the StakeWise documentation site, reorganizing static assets into a cleaner folder structure and migrating CSS from a single flat custom.css to a modular SCSS architecture.

Changes:

Migrated from monolithic custom.css to modular SCSS files (base.scss, buttons.scss, navbar.scss, admonitions.scss, search.scss) with shared _variables.scss and _mixins.scss, powered by the new docusaurus-plugin-sass dependency
Reorganized static assets: branded/UI icons moved to static/icon/ (with socials/ and tokens/ subdirs), page images moved to static/img/stakewise/; obsolete assets (osETH.svg, aave-aave-logo.svg, icons8-*.svg, etc.) removed
Added home-page detection via a data-page attribute set in Root.tsx, used in SCSS to apply page-specific navbar and layout styles

Reviewed changes

Copilot reviewed 22 out of 95 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`src/css/custom.scss`	New entry point importing all modular SCSS files
`src/css/base.scss`	Core styles (typography, layout, alerts, backgrounds)
`src/css/buttons.scss`	Button component styles (`btn-primary`, `btn-crystal`)
`src/css/navbar.scss`	Navbar styles including home-page transparency
`src/css/admonitions.scss`	Admonition, details/summary, and tooltip styles
`src/css/search.scss`	DocSearch modal overrides
`src/css/_variables.scss`	SCSS variables for colors and breakpoints
`src/css/_mixins.scss`	Reusable SCSS mixins (theme, responsive, home-page)
`src/css/tailwind/layers/base.css`	Added `--snow`/`--snow-rgb` CSS custom properties
`src/css/tailwind/layers/utilities.css`	Removed utility classes now handled by SCSS
`src/theme/Root.tsx`	Adds `data-page` attribute for home-page detection
`src/theme/Admonition/Types.js`	Updated admonition icon paths to new `stakewise/` folder
`src/components/Links/Links.tsx`	Updated social icon paths to `icon/socials/`
`docusaurus.config.ts`	Updated favicon/logo paths, switched to SCSS, converted "Launch App" button to `<a>` tag
`package.json`	Added `docusaurus-plugin-sass`, `sass`, `docusaurus-plugin-sass`; pinned floating-ui versions
`yarn.lock`	Reflects new `sass`, `docusaurus-plugin-sass`, and related dependency additions
`static/img/stakewise/`	New location for branded imagery (tips, search, link, cursor, exclamation, etc.)
`static/icon/`	New location for UI icons (vault, flow, safe, favicon, aave)
`static/icon/socials/`	New social icons (discord, telegram, twitter) with new design
`static/icon/tokens/`	Token icons (ethereum.svg, ethereum.png, osETH.svg)
`docs/*/.mdx` / `operator/.mdx`	Updated image paths to new asset locations

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

package.json

src/css/base.scss

…chitecture

# Conflicts: # docs/docs/guides/defi/boost-feature.mdx # docs/docs/guides/intro.mdx # docs/docs/guides/staking/one-click-staking.mdx # docs/docs/guides/staking/unstaking.mdx # operator-v3/alternative-key-management/dvt/index.mdx # operator-v3/intro.mdx # operator/alternative-key-management/dvt/index.mdx # operator/intro.mdx

Copilot

Pull request overview

Copilot reviewed 37 out of 138 changed files in this pull request and generated 10 comments.

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

Copilot · 2026-03-06T14:59:25Z

src/css/admonitions.scss

+  a {
+    color: var(--lavender);
+    text-decoration: none;
+
+    &:hover {
+      color: black;
+      text-decoration: underline;
+      text-decoration-color: black !important;
+    }
+  }
+}
+
+// Tooltip
+.tooltip-link {
+  color: var(--lavender);
+  text-decoration: underline;
+  text-decoration-color: var(--lavender);
+
+  &:hover {
+    color: black;
+    text-decoration: underline;
+    text-decoration-color: black !important;
+  }


The same hardcoded color: black issue applies to the hover state for links inside .custom-details and .tooltip-link in admonitions.scss. These should use a theme-aware CSS variable instead of black, which will be invisible in dark mode.

Copilot · 2026-03-06T14:59:26Z

src/components/Footer/Footer.tsx

+  { Icon: require('@site/static/icon/forum.svg').default, href: 'https://forum.stakewise.io/', title: 'Forum' },
+  { Icon: require('@site/static/icon/vote.svg').default, href: 'https://vote.stakewise.io/', title: 'Vote' },


The forum.svg and vote.svg icons in the Footer are sourced from static/icon/forum.svg and static/icon/vote.svg (Font Awesome SVGs with a single <path> fill color), while the other three socials (discord, telegram, twitter) are sourced from static/icon/socials/*.svg which are styled SVGs with fill="#1C1C25" and have their fill overridden via the .socialLink svg path { fill: var(--moon) } CSS rule in Footer.module.scss. The Font Awesome icons for forum and vote do not use a <path> with fill attribute in the same way — they use fill on <path> elements, so the CSS override should still work. However, there is a visual inconsistency: the forum and vote icons are larger, more complex SVGs with different visual styles than the custom social icons in static/icon/socials/. This may cause the footer social links to look inconsistent.

Suggested change

{ Icon: require('@site/static/icon/forum.svg').default, href: 'https://forum.stakewise.io/', title: 'Forum' },

{ Icon: require('@site/static/icon/vote.svg').default, href: 'https://vote.stakewise.io/', title: 'Vote' },

{ Icon: require('@site/static/icon/socials/forum.svg').default, href: 'https://forum.stakewise.io/', title: 'Forum' },

{ Icon: require('@site/static/icon/socials/vote.svg').default, href: 'https://vote.stakewise.io/', title: 'Vote' },

Copilot · 2026-03-06T14:59:26Z

src/css/_variables.scss

+$color-coal-rgb: var(--coal-rgb);
+$color-snow-rgb: var(--snow-rgb);


The SCSS variable $color-snow-rgb is set to var(--snow-rgb), a CSS custom property. Using a CSS custom property as a SCSS variable and then passing it to rgba() in SCSS is problematic. SCSS's rgba() function expects a concrete value at compile time and cannot process a CSS var() reference. This means calls like rgba($color-snow-rgb, .25) in _mixins.scss will not produce valid CSS — they will either throw a SCSS compile error or produce incorrect output.

The same issue applies to $color-coal-rgb: var(--coal-rgb).

To fix this, the rgba() calls in the mixins should be replaced with the CSS native rgba() syntax using the CSS variable directly, e.g., rgba(var(--snow-rgb), .25) or use the color-mix() function.

Copilot · 2026-03-06T14:59:26Z

src/css/base.scss

+.crystal-button-block {
+  @include light-theme {
+    box-shadow: 0 7px 12px 0 rgba($color-coal-rgb, .15);
+    background: rgba($color-snow-rgb, .4);
+    border: solid 1px rgba($color-snow-rgb, .2);
+
+    &:hover {
+      transform: scale(1.05);
+      text-decoration: none;
+      background: rgba($color-snow-rgb, .8);
+      border: solid 1px rgba($color-snow-rgb, 1);
+    }
+  }
+
+  @include dark-theme {
+    box-shadow: 0 7px 12px 0 rgba($color-coal-rgb, .35);
+    background: rgba(82, 77, 87, .5);
+    border: solid 1px rgba(82, 77, 87, .9);
+
+    &:hover {
+      transform: scale(1.05);
+      text-decoration: none;
+      background: rgba(82, 77, 87, .8);
+      border: solid 1px rgb(82, 77, 87);
+    }
+  }
+}
+
+.crystal-bg {
+  @include light-theme {
+    box-shadow: 0 7px 12px 0 rgba($color-coal-rgb, .15);
+    background: rgba($color-snow-rgb, .4);
+    border: solid 1px rgba($color-snow-rgb, .2);
+  }
+
+  @include dark-theme {
+    box-shadow: 0 7px 12px 0 rgba($color-coal-rgb, .35);
+    background: rgba(82, 77, 87, .5);
+    border: solid 1px rgba(82, 77, 87, .9);
+  }
+}


The base.scss file also uses rgba($color-coal-rgb, .15) and rgba($color-snow-rgb, .4) with SCSS variables that hold CSS var() references. SCSS cannot resolve CSS custom properties at compile time, so these rgba() expressions will produce invalid or broken CSS for the crystal-button-block and crystal-bg classes.

Copilot · 2026-03-06T14:59:27Z

src/css/navbar.scss

+// Hide external link SVG icons
+.footer__link-item svg,
+.navbar__link svg {
+  display: none;
+}


The navbar.scss rule .navbar__link svg { display: none; } hides all SVGs within navbar links. This could unintentionally hide the arrow SVG icon inside the "Launch App" <a class="btn-primary"> element, since that link is rendered as a .navbar__item containing a .btn-primary link with an SVG. Confirm that .navbar__link svg does not match the SVG inside the .btn-primary button-link.

Copilot · 2026-03-06T14:59:27Z

src/components/Footer/Footer.module.scss

+.inner {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding-top: 24px;
+}


The Footer.module.scss grid layout uses grid-template-columns: 1fr auto 1fr, placing the logo on the left, copyright in the center, and socials on the right. However, there is no responsive handling (e.g., for mobile screens). On narrow screens, the three-column grid may cause the copyright and social links to overlap or be very cramped. A media query to stack these elements vertically on mobile would improve the experience.

Copilot · 2026-03-06T14:59:27Z

src/css/admonitions.scss

+    &:hover {
+      color: black;
+      text-decoration: underline;
+      text-decoration-color: black !important;
+    }


The admonitions.scss has hardcoded color: black and text-decoration-color: black for admonition link hover states. In dark mode, a black hover color will be invisible against the dark background. These should use a CSS variable such as var(--moon) or a dark-theme-aware value to maintain readability across both themes.

Copilot · 2026-03-06T14:59:27Z

docusaurus.config.ts

+                <path d="M14.0824 5L21 11.9176L14.0824 18.8353" stroke="#1C1C25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M21 11.9177H3" stroke="#1C1C25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>


The SVG arrow icon inside the "Launch App" button in the navbar has its stroke color hardcoded to #1C1C25 (a dark color). This will make the arrow invisible or nearly invisible in dark mode, since the button's text and icon colors should adapt to the theme. The SVG strokes should either use currentColor to inherit the text color dynamically, or the button's CSS should override the SVG stroke color for dark mode.

Suggested change

<path d="M14.0824 5L21 11.9176L14.0824 18.8353" stroke="#1C1C25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>

<path d="M21 11.9177H3" stroke="#1C1C25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>

<path d="M14.0824 5L21 11.9176L14.0824 18.8353" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>

<path d="M21 11.9177H3" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>

Copilot · 2026-03-06T14:59:28Z

src/css/_mixins.scss

+  border: 1px solid rgba($color-snow-rgb, .20);
+  box-shadow: 0 7px 12px 0 rgba($color-coal-rgb, .15);
+  backdrop-filter: blur(20px);
+
+  @include light-theme {
+    background-color: rgba($color-snow-rgb, .25);
+  }
+
+  @include dark-theme {
+    background-color: rgba($color-coal-rgb, .25);


The crystal-panel mixin uses SCSS rgba() with SCSS variables that contain CSS var() references (e.g. rgba($color-snow-rgb, .20), rgba($color-coal-rgb, .25)). Since SCSS resolves rgba() at compile time and cannot interpolate CSS custom properties in this way, these calls will produce invalid CSS. The rgba() calls with these variables need to be replaced with the CSS custom property syntax, such as rgba(var(--snow-rgb), .20).

Suggested change

border: 1px solid rgba($color-snow-rgb, .20);

box-shadow: 0 7px 12px 0 rgba($color-coal-rgb, .15);

backdrop-filter: blur(20px);

@include light-theme {

background-color: rgba($color-snow-rgb, .25);

}

@include dark-theme {

background-color: rgba($color-coal-rgb, .25);

border: 1px solid rgba(var(--snow-rgb), .20);

box-shadow: 0 7px 12px 0 rgba(var(--coal-rgb), .15);

backdrop-filter: blur(20px);

@include light-theme {

background-color: rgba(var(--snow-rgb), .25);

}

@include dark-theme {

background-color: rgba(var(--coal-rgb), .25);

Copilot · 2026-03-06T14:59:28Z

src/css/navbar.scss

+@include navbar-mobile {
+  .navbar__toggle {
+    margin-left: 16px;
+  }
+  .navbar__brand {
+    margin-left: 16px;
+  }
+
+  .navbar-sidebar {
+    box-shadow: none;
+    overflow: hidden;
+    max-height: 100vh;
+
+    @include light-theme {
+      background-color: #f1f2fd;
+    }
+
+    @include dark-theme {
+      background-color: #00060f;
+    }
+
+    &__items ul.menu__list {
+      padding-left: 24px;
+    }
+  }


The navbar.scss file uses @include navbar-mobile which wraps with html[data-theme='light'] & inside @include light-theme and html[data-theme='dark'] & inside @include dark-theme. However, the @include navbar-mobile block at the bottom of the file contains nested @include light-theme and @include dark-theme mixins inside a media query mixin. Since the light-theme and dark-theme mixins use html[data-theme='...'] & (parent selector), they will not work correctly when nested inside a media query — the parent & refers to the media query rule, not an element in the DOM. This is a SCSS & inside @media edge case. Check that the resulting CSS selectors are valid (i.e., html[data-theme='light'] .navbar-sidebar is the intended output, not something like @media ... html[data-theme='light'] &).

reorganize static assets and clean up SCSS architecture

40cefc5

Copilot AI review requested due to automatic review settings March 5, 2026 14:35

dfkadyr requested review from Cast0001 and mike-diamond March 5, 2026 14:35

Copilot started reviewing on behalf of dfkadyr March 5, 2026 14:36 View session

vercel bot deployed to Preview March 5, 2026 14:36 View deployment

Copilot AI reviewed Mar 5, 2026

View reviewed changes

package.json Outdated Show resolved Hide resolved

src/css/base.scss Outdated Show resolved Hide resolved

redesign footer, breadcrumbs, pagination arrows and decompose SCSS ar…

878a569

…chitecture

vercel bot deployed to Preview March 6, 2026 14:23 View deployment

dfkadyr added 2 commits March 6, 2026 17:38

improve images

5ddf8b8

Copilot AI review requested due to automatic review settings March 6, 2026 14:53

Copilot started reviewing on behalf of dfkadyr March 6, 2026 14:54 View session

vercel bot deployed to Preview March 6, 2026 14:54 View deployment

Copilot AI reviewed Mar 6, 2026

View reviewed changes

improve footer semantic tags

cca7012

vercel bot deployed to Preview March 6, 2026 15:04 View deployment

		{ Icon: require('@site/static/icon/forum.svg').default, href: 'https://forum.stakewise.io/', title: 'Forum' },
		{ Icon: require('@site/static/icon/vote.svg').default, href: 'https://vote.stakewise.io/', title: 'Vote' },

		$color-coal-rgb: var(--coal-rgb);
		$color-snow-rgb: var(--snow-rgb);

		<path d="M14.0824 5L21 11.9176L14.0824 18.8353" stroke="#1C1C25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
		<path d="M21 11.9177H3" stroke="#1C1C25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>

Conversation

dfkadyr commented Mar 5, 2026

Uh oh!

vercel bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 5, 2026 •

edited

Loading