style(frontend): resolve logo height, gate project defaults, and update back buttons responsively#602
Conversation
…nd update back buttons responsively
|
Thank you for contributing to Dembrane ECHO! Before we consider your Pull Request, we ask that you sign our Contributor License Agreement (CLA). This is only required for your first Pull Request. Please review the CLA, and sign it by adding your GitHub username to the contributors.yml file. Thanks! |
WalkthroughThis PR introduces organisation admin permission gating for legal-basis settings and standardizes header/breadcrumb layout heights across the sidebar. Non-admin users now see read-only alerts and cannot edit legal-basis configuration; the settings header adopts responsive flex-based layout styling aligned with breadcrumb and sidebar height normalization. ChangesOrganisation Admin Gating
UI Layout Height Standardization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@echo/frontend/src/components/settings/LegalBasisSettingsCard.tsx`:
- Around line 113-120: The Alert in LegalBasisSettingsCard is using an off-brand
color prop (color="blue"); update the Alert within the LegalBasisSettingsCard
component (the JSX block that renders Alert when !isOrgAdmin) to use the brand
token by changing color="blue" to color="primary" or removing the color prop
entirely so it falls back to the theme default; ensure only the Alert element
inside the !isOrgAdmin conditional is modified.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 7ba8e78f-1fb3-4ccb-96d4-634e902f40a4
📒 Files selected for processing (5)
echo/frontend/src/components/common/Logo.tsxecho/frontend/src/components/settings/LegalBasisSettingsCard.tsxecho/frontend/src/features/sidebar/breadcrumbs/AppBreadcrumbs.tsxecho/frontend/src/features/sidebar/shell/SidebarHeader.tsxecho/frontend/src/routes/settings/UserSettingsRoute.tsx
| {!isOrgAdmin && ( | ||
| <Alert variant="light" color="blue" title={t`Read-only`}> | ||
| <Text size="sm"> | ||
| <Trans> | ||
| These settings are read-only. Only organisation administrators can modify project defaults. | ||
| </Trans> | ||
| </Text> | ||
| </Alert> |
There was a problem hiding this comment.
Use the brand color token on this alert.
color="blue" is off-brand in this repo. Swap it to color="primary" or omit the prop.
As per coding guidelines "Never pass color="blue" on Mantine components; use color="primary" instead or omit (primary is the theme default)".
🤖 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 `@echo/frontend/src/components/settings/LegalBasisSettingsCard.tsx` around
lines 113 - 120, The Alert in LegalBasisSettingsCard is using an off-brand color
prop (color="blue"); update the Alert within the LegalBasisSettingsCard
component (the JSX block that renders Alert when !isOrgAdmin) to use the brand
token by changing color="blue" to color="primary" or removing the color prop
entirely so it falls back to the theme default; ensure only the Alert element
inside the !isOrgAdmin conditional is modified.
…nd set badge text charcoal
1 participant
Page Feedback Adjustments
32pxand set header (SidebarHeader) andAppBreadcrumbsheight to57px. Applied mathematical even padding (12.5px) on the top, bottom, and left of the logo, and centered breadcrumbs vertically.LegalBasisSettingsCardto query cached workspaces data and restrict editing to organisation administrators (owner/admin). Added a read-onlyAlertbanner and disabled controls for non-admin users.UserSettingsRouteto wrap the back button in ahidden md:flex w-[57px]margin container. Hover opacity effects (opacity-40 hover:opacity-100) and a reserved32pxsize are applied to theActionIcon.MyAccessCard.tsxas requested.MyAccessCard.tsx.UserSettingsRoute.tsx.#2D2D2Ctext for consistent contrast.Confidence: High. Fully aligned with the page feedback and responsive design guidelines.