feat: footer with about page link - #59
Merged
AlyaEngineer merged 10 commits intoJul 6, 2026
Merged
Conversation
AlyaEngineer
added
feature-1-header
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdds a Footer component with localized About/GitHub links and copyright, wires it into the home page, applies new Google fonts at the root layout, restructures the MUI theme into palette/typography/components modules, and adds next-intl translations to Header/AuthNavigation labels along with corresponding locale entries. ChangesFooter, fonts, theme, and localization
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Home
participant Footer
participant getTranslations
participant AppLinkButton
Home->>Footer: render Footer()
Footer->>getTranslations: getTranslations('footer')
getTranslations-->>Footer: aboutLink, githubLink strings
Footer->>AppLinkButton: render About/GitHub links
Footer-->>Home: AppBar with links and copyright
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.github.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/theme/theme.ts (2)
7-11: 🧹 Nitpick | 🔵 TrivialScheme switching currently relies on OS
prefers-color-schemeonly.No
colorSchemeSelector/defaultColorSchemeis configured, so until a manual toggle is wired up,dark/lightwill only apply "with the default CSS media prefers-color-scheme method... users won't be able to toggle between modes because the styles are based on the browser media." If a manual toggle is planned later, you'll needcolorSchemeSelector: 'class'(or similar) plusInitColorSchemeScript.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/theme/theme.ts` around lines 7 - 11, The theme setup in theme.ts only defines colorSchemes, so it still follows the OS prefers-color-scheme and cannot support a manual toggle. Update the createTheme configuration to include a non-media-based scheme mechanism such as colorSchemeSelector: 'class' and a defaultColorScheme, and make sure the app bootstrapping includes InitColorSchemeScript so the active mode can be applied and toggled consistently.
7-20: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win
HeaderandFooteroverride the globalMuiAppBarstyles. The localsxon both AppBars replaces the themed gradient and border tint withbackground.paper/divider, so theMuiAppBarrule insrc/theme/components.tsnever applies here. If these bars should use the shared AppBar look, drop the local color/border overrides; otherwise remove the theme override.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/theme/theme.ts` around lines 7 - 20, The Header and Footer AppBars are overriding the shared MuiAppBar theme styling with local sx values, so the global gradient and border tint from the AppBar override in components/theme setup are never applied. Update the AppBar usage in the Header/Footer components to rely on the themed MuiAppBar styling by removing the local background/border overrides, or if the local look is intentional, remove the MuiAppBar override from the shared theme configuration. Use the MuiAppBar rule in the theme components setup and the Header/Footer AppBar instances as the places to adjust.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/theme/components.ts`:
- Around line 19-30: The hover shadow in MuiButton.styleOverrides.contained is
using an invalid length unit, so the browser drops the entire boxShadow
declaration. Update the contained hover style in components.ts to use the
correct px unit in the template string, keeping the existing
alpha(theme.palette.primary.main, 0.32) color logic intact so the hover effect
renders properly.
---
Nitpick comments:
In `@src/theme/theme.ts`:
- Around line 7-11: The theme setup in theme.ts only defines colorSchemes, so it
still follows the OS prefers-color-scheme and cannot support a manual toggle.
Update the createTheme configuration to include a non-media-based scheme
mechanism such as colorSchemeSelector: 'class' and a defaultColorScheme, and
make sure the app bootstrapping includes InitColorSchemeScript so the active
mode can be applied and toggled consistently.
- Around line 7-20: The Header and Footer AppBars are overriding the shared
MuiAppBar theme styling with local sx values, so the global gradient and border
tint from the AppBar override in components/theme setup are never applied.
Update the AppBar usage in the Header/Footer components to rely on the themed
MuiAppBar styling by removing the local background/border overrides, or if the
local look is intentional, remove the MuiAppBar override from the shared theme
configuration. Use the MuiAppBar rule in the theme components setup and the
Header/Footer AppBar instances as the places to adjust.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 891091c6-4a1d-4497-9cee-fcda0343296e
📒 Files selected for processing (17)
src/app/[locale]/layout.tsxsrc/app/[locale]/page.tsxsrc/app/globals.csssrc/components/auth-navigation/auth-navigation.tsxsrc/components/footer/footer.test.tsxsrc/components/footer/footer.tsxsrc/components/header/header.tsxsrc/components/index.tssrc/components/language-switcher/language-switcher.tsxsrc/fonts.tssrc/i18n/messages/en.jsonsrc/i18n/messages/ru.jsonsrc/theme/components.tssrc/theme/index.tssrc/theme/palette.tssrc/theme/theme.tssrc/theme/typography.ts
💤 Files with no reviewable changes (1)
- src/app/globals.css
lexarudak
reviewed
Jul 5, 2026
lexarudak
approved these changes
Jul 6, 2026
This was referenced Jul 7, 2026
AlyaEngineer
added a commit
that referenced
this pull request
Jul 7, 2026
* Story/1 sticky header general (#50) * feat: install next+ts+linter+prettier+ husky+redux * feat: configs + perfectionist + lint fix * feat: install scss * refactor: add some folders * feat: install i18n + basic configs * feat: add internatiolisation * feat: language switcher * feat: dependencies update * feat: add sticky header * feat: add mui Button-and-Link-like component * fix: lint * style: add style for header * refactor: remove css from language selector * refactor: add const for flex styles in the header boxes * refactor: history style as link * fix: add some fixes * feat: footer with about page link (#59) * feat: add Inter and JetBrains Mono fonts via next/font * feat: reorganize theme into palette, components, typography, theme modules * feat: add i18n translations for header navigation links * fix: prevent header layout shift on language switcher toggle click * feat: add footer with translated links and styling * test: add tests for footer * fix: correct invalid box-shadow offset * fix: fix header height * fix: fix language switcher * refactor: extract routes and external links into constants * refactor: remove leftover placeholder before merge * fix: add InitColorSchemeScript to prevent SSR flash * style: apply Prettier formatting --------- Co-authored-by: YuliaDemir <129578495+YuliaDemir@users.noreply.github.com>
Merged
42 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This pull request closes the requirement for a
navigation link to the About page in the app footer, and includes several additional changes:fixed a layout shift in the headerwhen clicking the language switcher toggle,added a light/dark color schemefor the app, and integratedfontsinto the app.Changes Made
Footercomponent (src/components/footer/footer.tsx) with links to About and the project's GitHubtranslationsfor footer links in en.json and ru.jsonfixed header shifton language switcher toggle click - added disableScrollLock: true to MenuProps on the Select in LanguageSwitcherreorganized theme structure- split theme.ts into palette.ts, components.ts, typography.ts, index.ts; added light/dark schemes via colorSchemesInter(appFont) andJetBrains Mono(swaggerEditorFont) fonts via next/font with Cyrillic supporttestfor Footer (footer.test.tsx)Related issue
Closes #54
Feature
Feature 1: App Header
Acceptance criteria
Feature 1: App Header
Feature 2: Sign In / Sign Up
Feature 3: Swagger Editor
Feature 4: Swagger Viewer
Feature 5: History and Analytics
Feature 6: About Page
Feature 7: General Requirements
Feature 8: YouTube Video
Type of change
Checklist
any/@ts-ignoreSummary by CodeRabbit
New Features
Bug Fixes