[WEB-4585]chore: branding updates#7540
Conversation
WalkthroughThis update revises color palettes across multiple CSS files, shifting primary color variables to new cyan/teal gradients and updating dark-contrast theme definitions. Redundant or duplicate color definitions are removed. Additionally, favicon manifest files are updated to reference icon assets within a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WebApp
participant CSS_Theme
participant FaviconManifest
User->>WebApp: Loads application
WebApp->>CSS_Theme: Applies :root and theme variables
WebApp->>FaviconManifest: Loads site.webmanifest
FaviconManifest-->>WebApp: Provides icon paths (/favicon/...)
CSS_Theme-->>WebApp: Supplies updated color palette
WebApp->>User: Renders UI with new colors and favicon
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items
Comment Automatically Generated by Plane |
vamsikrishnamathala
force-pushed
the
chore-branding_updates
branch
from
0dfcf4f to
2ce0b47
Compare
vamsikrishnamathala
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
apps/web/styles/globals.css (1)
424-430: Broken CSS declaration – missing semicolon causes parsing failure
--color-text-350and--color-text-400are crammed onto one line without a semicolon, so everything after--color-text-350is ignored by the browser.--color-text-300: 212, 212, 212; /* tertiary text */ --color-text-350: 190, 190, 190 --color-text-400: 115, 115, 115; /* placeholder text */ +--color-text-350: 190, 190, 190; +--color-text-400: 115, 115, 115; /* placeholder text */
🧹 Nitpick comments (4)
apps/admin/public/favicon/site.webmanifest (1)
2-3: Populatenameandshort_namefor better PWA install UX.These fields are still empty. Browsers fall back to the page title, which may be sub-optimal or inconsistent with branding guidelines introduced in this PR. Consider filling them, e.g.:
- "name": "", - "short_name": "", + "name": "Plane Admin", + "short_name": "Admin",apps/space/public/favicon/site.webmanifest (1)
2-3: Fill in descriptivename/short_namevalues.Leaving these blank negatively affects the install prompt title and may confuse users when adding the app to home-screen. Suggested update:
- "name": "", - "short_name": "", + "name": "Plane Space", + "short_name": "Space",apps/space/styles/globals.css (1)
188-205: Confirm dark-theme inverse palette readabilityThe reverse gradient in dark contexts looks great, but very-low values (10-30) are now close to #081f2b—almost indistinguishable from background-100 at 25,25,25. Double-check that focus rings, charts, etc. that use these steps are still visible.
If any fail contrast, consider bumping the luminance or adding an outline utility.
apps/web/core/components/common/logo-spinner.tsx (1)
14-15: Removed right-margin may break adjacent layouts
mr-2was dropped, and the image is now full-width (w-auto) with explicit height. If the spinner is still used inline with text/components that relied on that margin, spacing will shrink.Verify affected screens; re-add
mr-2or wrap in a utility class if needed.Additionally, consider a more descriptive
altvalue (e.g., “Plane loading animation”) for accessibility.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (21)
apps/admin/public/favicon/android-chrome-192x192.pngis excluded by!**/*.pngapps/admin/public/favicon/android-chrome-512x512.pngis excluded by!**/*.pngapps/admin/public/favicon/apple-touch-icon.pngis excluded by!**/*.pngapps/admin/public/favicon/favicon-16x16.pngis excluded by!**/*.pngapps/admin/public/favicon/favicon-32x32.pngis excluded by!**/*.pngapps/admin/public/favicon/favicon.icois excluded by!**/*.icoapps/space/public/favicon/android-chrome-192x192.pngis excluded by!**/*.pngapps/space/public/favicon/android-chrome-512x512.pngis excluded by!**/*.pngapps/space/public/favicon/apple-touch-icon.pngis excluded by!**/*.pngapps/space/public/favicon/favicon-16x16.pngis excluded by!**/*.pngapps/space/public/favicon/favicon-32x32.pngis excluded by!**/*.pngapps/space/public/favicon/favicon.icois excluded by!**/*.icoapps/web/public/favicon/android-chrome-192x192.pngis excluded by!**/*.pngapps/web/public/favicon/android-chrome-512x512.pngis excluded by!**/*.pngapps/web/public/favicon/apple-touch-icon.pngis excluded by!**/*.pngapps/web/public/favicon/favicon-16x16.pngis excluded by!**/*.pngapps/web/public/favicon/favicon-32x32.pngis excluded by!**/*.pngapps/web/public/favicon/favicon.icois excluded by!**/*.icoapps/web/public/images/logo-spinner-dark.gifis excluded by!**/*.gifapps/web/public/images/logo-spinner-light.gifis excluded by!**/*.gifapps/web/public/og-image.pngis excluded by!**/*.png
📒 Files selected for processing (7)
apps/admin/public/favicon/site.webmanifest(1 hunks)apps/admin/styles/globals.css(2 hunks)apps/space/public/favicon/site.webmanifest(1 hunks)apps/space/styles/globals.css(2 hunks)apps/web/core/components/common/logo-spinner.tsx(1 hunks)apps/web/styles/globals.css(2 hunks)packages/ui/styles/globals.css(2 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: lifeiscontent
PR: makeplane/plane#7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
📚 Learning: in packages/ui/.storybook/main.ts, the webpackfinal function intentionally overrides the css loader ...
Learnt from: lifeiscontent
PR: makeplane/plane#7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
Applied to files:
apps/web/core/components/common/logo-spinner.tsxpackages/ui/styles/globals.css
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (9)
apps/admin/public/favicon/site.webmanifest (1)
5-6: Ensure new absolute favicon paths resolve correctlySwitching the manifest entries to
/favicon/android-chrome-192x192.png(etc.) means browsers will requesthttps://<domain>/favicon/.... If the admin UI is mounted under a sub-path (e.g./admin/), these may 404 unless your build/deploy process publishes the assets to/<root>/favicon/. Please double-check your pipeline.To verify locally after building the admin app, run:
#!/usr/bin/env bash # Verify favicon files are published to /favicon/ at the domain root # Update BUILD_DIR if your admin output is in a different folder BUILD_DIR=$(pwd)/apps/admin/dist if [[ ! -d "$BUILD_DIR" ]]; then echo "❌ Build directory not found: $BUILD_DIR" exit 1 fi # Look for android-chrome PNGs under /favicon/ fd 'android-chrome-*.png' -e png "$BUILD_DIR" | grep '/favicon/' || { echo "❌ favicon assets not found under /favicon/" exit 1 } echo "✅ favicon assets present under /favicon/"apps/space/public/favicon/site.webmanifest (1)
5-6: Confirm/favicon/…path is reachable for the Space app as well.Same absolute-path concern as in the admin manifest: ensure the Space build outputs the PNGs to
<root>/favicon/and that the hosting config serves them. Otherwise, PWA install icons will be missing.apps/space/styles/globals.css (1)
15-32: Verify light-theme contrast for new primary paletteThe entire primary range has shifted towards a darker cyan/teal hue. Please run an automated WCAG AA check on common foreground/background pairs (e.g., primary-100 text on background-100, primary-90 icons on background-90) to be sure contrast remains ≥ 4.5:1 in light mode.
apps/web/styles/globals.css (2)
44-61: Light palette A11y sanity checkSame comment as for
apps/space: please validate new primary shades against the light backgrounds with automated tooling.
295-313: Dark palette A11y sanity checkRun the same contrast audit for dark mode.
apps/admin/styles/globals.css (2)
27-44: Primary palette update LGTMConsistent with other apps and removes blue-tint duplication.
200-218: Dark palette update LGTMValues mirror other packages; no issues spotted.
packages/ui/styles/globals.css (2)
25-42: UI package palette change approvedMatches brand palette applied elsewhere; good job keeping variables in sync.
224-242: Dark palette change approvedNo inconsistencies detected with app styles.
* chore: empty state asset and theme improvement (#7542) * chore: empty state asset and theme improvement * chore: upgrade modal improvement and code refactor * feat: onboarding revamp and theme changes (#7541) * refactor: consolidate password strength indicator into shared UI package * chore: remove old password strength meter implementations * chore: update package dependencies for password strength refactor * chore: code refactor * chore: brand logo added * chore: terms and conditions refactor * chore: auth form refactor * chore: oauth enhancements and refactor * chore: plane new logos added * chore: auth input form field added to ui package * chore: password input component added * chore: web auth refactor * chore: update brand colors and remove onboarding-specific styles * chore: clean up unused assets * chore: profile menu text overflow * chore: theme related changes * chore: logo spinner updated * chore: onboarding constant and types updated * chore: theme changes and code refactor * feat: onboarding flow revamp * fix: build error and code refactoring * chore: code refactor * fix: build error * chore: consent option added to onboarding and code refactor * fix: build fix * chore: code refactor * chore: auth screen revamp and code refactor * chore: onboarding enhancements * chore: code refactor * chore: onboarding logic improvement * chore: code refactor * fix: onboarding pre release improvements * chore: color token updated * chore: color token updated * chore: auth screen line height and size improvements * chore: input height updated * chore: n-progress theme updated * chore: theme and logo enhancements * chore: space auth and code refactor * chore: update new brand empty states (#7543) * [WEB-4585]chore: branding updates (#7540) * chore: updated logo, og image, and loaders * chore: updated branding colors * chore: tour modal logo * chore: updated logo spinner size * chore: updated email templates logos and colors * chore: code refactor * fix: removed conditional hook render * fix: space app loader --------- Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: vamsikrishnamathala <matalav55@gmail.com>
2 participants
Description
This update introduces new brand logo and colors across the application.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit
Style
Chores