Fix: add light mode support to footer component #67
Conversation
|
@Abiodun001-world is attempting to deploy a commit to the idan lodzki's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Thanks for your contribution! Join our Slack: https://join.slack.com/t/opsimate/shared_invite/zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA Please make sure to include an image with your PR — it really helps us review and understand the changes better. Only in rare cases will we accept a PR without one. Also, take a moment to review your code to ensure it’s clear, readable, and easy to follow. PRs from contributors who haven’t joined our Slack community or starred the repository won’t be reviewed — we’d love to see you join and be part of the project! |
WalkthroughThe Footer component's styling and link behaviors were updated: background and border colors adjusted for light/dark modes, text and heading color tokens changed, hover states refined (including brand-colored hover), some links set to open in new tabs, and a duplicated Open Source block was removed. Changes
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Comment |
|
Hi, @idanlodzki. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (6)
components/Footer.tsx (6)
28-40: Open social links in a new tab and add rel=“noopener noreferrer” (consistent with Open Source section).Prevents context loss and tab‑nabbing; email can remain as is if preferred.
- <Link + <Link key={social.name} href={social.href} - className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white transition-colors duration-200" + className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white transition-colors duration-200" + target="_blank" + rel="noopener noreferrer" aria-label={social.name} >Also applies to: 58-66
38-40: Avoid personal Gmail in a product footer; use a role alias or contact page.Example:
- href: 'mailto:idan.lut@gmail.com', + href: 'mailto:hello@opsimate.com',Or link to a /contact page to reduce email scraping.
Please confirm the preferred public contact alias or contact page URL.
44-44: Respect reduced motion preferences.Add motion-reduce to disable color transitions for users who prefer less motion.
- <footer className="bg-[#FEFEFE] dark:bg-gray-900 text-gray-900 dark:text-white border-t border-gray-200 dark:border-gray-800 transition-colors duration-200"> + <footer className="bg-[#FEFEFE] dark:bg-gray-900 text-gray-900 dark:text-white border-t border-gray-200 dark:border-gray-800 transition-colors duration-200 motion-reduce:transition-none">
61-61: Add visible focus styles for keyboard users.Improves WCAG 2.4.7 compliance; current links have hover only.
Example patch (apply to all listed links):
-className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white transition-colors duration-200" +className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-white ring-offset-2 ring-offset-[#FEFEFE] dark:ring-offset-gray-900"Also applies to: 79-79, 96-96, 113-113, 133-133, 139-139
11-13: Anchors like “#features” break off the homepage; prefer absolute “/#features”.Works site‑wide and preserves expected behavior.
- { name: 'Features', href: '#features' }, - { name: 'Integrations', href: '#integrations' }, + { name: 'Features', href: '/#features' }, + { name: 'Integrations', href: '/#integrations' },Confirm that these IDs exist on the homepage.
7-7: Build‑time year vs. runtime year.If this footer is statically rendered (SSG), the year won’t roll over until next deploy. If that’s a concern, compute on the client or ensure ISR/regular deploys in January.
Do you use SSG/ISR for the page(s) embedding this footer?
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/Footer.tsx(8 hunks)
🔇 Additional comments (2)
components/Footer.tsx (2)
107-116: Good hardening on external links (target+rel).This matches best practices and avoids tab‑nabbing.
131-142: Routes verified—no action required.Both
/privacyand/termsroutes resolve correctly to existing page files (pages/privacy.tsxandpages/terms.tsx). No 404s will occur.
| { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' }, | ||
| ], |
There was a problem hiding this comment.
🧩 Analysis chain
“Documentation” points to an “#integrations” anchor — likely wrong target.
Suggest aligning label and URL:
- Option A (keep label, fix URL):
- { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' },
+ { name: 'Documentation', href: 'https://opsimate.vercel.app/docs' },- Option B (keep URL, fix label):
- { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' },
+ { name: 'Integrations', href: 'https://opsimate.vercel.app/#integrations' },🌐 Web query:
What is the correct public URL for OpsiMate documentation (docs landing page)? Does an “#integrations” anchor exist on that page?
💡 Result:
The documentation (docs) landing page is: https://opsimate.vercel.app/ . [1][2]
There is no "#integrations" fragment/anchor on that landing page (the Integrations content is a separate docs page at https://opsimate.vercel.app/docs/integrations/overview). [2][3]
Sources:
[1] OpsiMate main site (links to docs).
[2] OpsiMate docs landing (https://opsimate.vercel.app/).
[3] OpsiMate Integrations page (https://opsimate.vercel.app/docs/integrations/overview).
Fix broken documentation link — "#integrations" anchor does not exist.
The "#integrations" anchor does not exist on the docs landing page; integrations content is at https://opsimate.vercel.app/docs/integrations/overview. Correct the link to match the intent:
-
If linking to Documentation: Use https://opsimate.vercel.app/
- { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' }, + { name: 'Documentation', href: 'https://opsimate.vercel.app/' },
-
If linking to Integrations: Use https://opsimate.vercel.app/docs/integrations/overview
- { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' }, + { name: 'Integrations', href: 'https://opsimate.vercel.app/docs/integrations/overview' },
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' }, | |
| ], | |
| { name: 'Documentation', href: 'https://opsimate.vercel.app/' }, | |
| ], |
| { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' }, | |
| ], | |
| { name: 'Integrations', href: 'https://opsimate.vercel.app/docs/integrations/overview' }, | |
| ], |
🤖 Prompt for AI Agents
In components/Footer.tsx around lines 15 to 16, the Documentation link currently
points to a non-existent "#integrations" anchor; update the href to the correct
target — since the link label is "Documentation" change the href to
"https://opsimate.vercel.app/" (or if the intent was to link specifically to
Integrations instead, set it to
"https://opsimate.vercel.app/docs/integrations/overview"); ensure the new URL
replaces the broken "#integrations" anchor.
| href: 'https://join.slack.com/t/opsimate/shared_invite/zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA', | ||
| icon: Slack | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
Slack invite links expire; use a non‑expiring invite or a vanity redirect (e.g., /community → Slack).
Consider a permanent Slack share link or your own redirect you can rotate without code changes.
🌐 Web query:
How to create a non-expiring Slack workspace invite link and recommended best practices for sharing community invites publicly?
💡 Result:
Short answer — yes. On paid and free Slack workspaces you can create a shared invite link and set it to "Never expires" from Invite people → Copy invite link → Edit link settings → Never expires. By default links are active 30 days and can be reused up to the link-use limit (Slack docs: invite links default 30 days / up to 400 uses; you may see limits or admin/SO settings that remove the option). [1][2]
How to create a non‑expiring invite link (quick steps)
- In Slack desktop click your workspace name → Invite people to… → Copy invite link.
- Click Edit link settings (in that dialog) and choose “Never expires.” Save and copy the link.
- If you don’t see the option, SSO or workspace policies may block invite links — ask an Owner/Admin. [1][2]
Key Slack limits & notes (from Slack)
- Default invite links: active 30 days and usable up to 400 people. You can change expiration when creating the link.
- Some workspace/org policies or SSO can remove invite-link creation. If you hit invite limits Slack may restrict invites. [1]
Recommended best practices for publicly sharing community invites
- Use an intermediate landing page or signup form (adds friction, lets you collect email, show community rules, and block bots with CAPTCHA).
- Require acceptance of a Code of Conduct / Terms before handing out the link.
- Enable invitation approvals or set invitation notifications for admins so joins can be reviewed.
- Limit default channel membership for new users; put sensitive channels private.
- Monitor and rotate links: periodically deactivate old links and create new ones; keep an audit of shared links.
- Use rate/abuse controls: limit who can create links, disable self‑invite if spam is a problem, and use moderation tools/bots.
- Publicize guidelines for behavior and enforcement (and enforce them consistently). [1][2]
Sources
- Slack Help — Invite new members / Share an invitation link (steps, defaults, limits). [Slack Help Center]. [turn3search0]
- Community guides on setting “Never expires” and practical steps for community Slack invites. [turn1search5]
Replace the expiring Slack invite link with a non-expiring one or a vanity redirect.
The current shared invite link (zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA) will expire in 30 days or after 400 uses by default. Set the link to "Never expires" via Invite people → Copy invite link → Edit link settings, or implement a vanity redirect (e.g., /community → Slack) that you can rotate without code changes. The latter is preferable for maintainability.
🤖 Prompt for AI Agents
In components/Footer.tsx around lines 33 to 35, the Slack invite href currently
points to a temporary shared invite that will expire; replace it with either a
non-expiring Slack invite (set “Never expires” in Slack Invite settings and copy
that link) or, preferably, change the href to a vanity redirect path (e.g.,
"/community") and implement a server- or static redirect from that path to the
current Slack invite so you can rotate links without changing code; update the
href value accordingly and ensure the redirect or new invite is tested.
|
@Abiodun001-world check the comments |
|
Hi, @idanlodzki. |
|
@Abiodun001-world fix them please, and i dont think white is feat to the footer on the light mode, should be something in between |
Alright noted. |
2 participants
Issue Reference
Closes #47
What Was Changed
bg-gray-900tobg-[#FEFEFE]in light mode anddark:bg-gray-900in dark modetransition-colors duration-200) for seamless theme switchingWhy Was It Changed
The footer component was not responding to theme changes, causing it to remain dark even when users toggled to light mode. This created several problems:
This fix ensures the footer integrates seamlessly with both light and dark themes, maintaining consistent design language throughout the application and improving overall accessibility.
Screenshots
Before (Light Mode) - Footer stays dark
After (Light Mode) - Footer properly styled
After (Dark Mode) - Still works correctly
Technical Details:
dark:prefix for dark mode styling to match the existing pattern in the codebase (as seen inNavbar.tsxandThemeToggle.tsx)#FEFEFE) specified in the project's design systemtext-blue-600in light mode and white in dark modeBrowser Compatibility:
Tested on:
Note: The changes are purely visual/styling updates with no breaking changes to functionality or component API.
Summary by CodeRabbit