Uniform landing page with theme-aware Hero #428
Conversation
…ry background views. I have changed the background of all views to primary.
…is monochromatic (like the logos)
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
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 You can disable this status message by setting the WalkthroughThis pull request introduces theme-based enhancements in several view components. The changes add a state variable for the current theme and use a Changes
Sequence Diagram(s)sequenceDiagram
participant C as Component (Customers/Hero)
participant T as getPreferredTheme
participant S as State
participant UI as Rendered UI
C->>T: Call getPreferredTheme()
T-->>C: Return theme preference ("light" or "dark")
C->>S: Set currentTheme based on returned value
S-->>C: State updated
C->>UI: Render component with theme-dependent styles
Possibly related PRs
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (3)
views/CustomerLogos.tsx (2)
37-42: Remove console.log statementThere's a debugging console.log statement that should be removed before deploying to production.
useEffect(() => { - console.log(getPreferredTheme()) setCurrentTheme(getPreferredTheme()); }, [])
46-52: Consider providing styling for dark themeWhile the light theme applies a gradient text effect, no alternative styling is provided for dark theme. This may result in inconsistent appearance.
<h4 className='px-4 text-[1rem] relative'> {'Trusted by '} - <span className={currentTheme === 'light' ? 'relative text-transparent bg-clip-text bg-gradient-to-r from-secondary to-[#6f117b]' : ''}> + <span className={currentTheme === 'light' + ? 'relative text-transparent bg-clip-text bg-gradient-to-r from-secondary to-[#6f117b]' + : 'relative text-secondary font-semibold'}> fast-moving </span> {' teams'} </h4>views/Hero.tsx (1)
41-43: Consider adding a theme listener for dynamic theme changes.The current implementation only sets the theme once when the component mounts. If the user changes their system theme preference while the component is mounted, the change won't be reflected.
React.useEffect(() => { setCurrentTheme(getPreferredTheme()); + + // Optional: Add a listener for theme changes + const handleThemeChange = () => { + setCurrentTheme(getPreferredTheme()); + }; + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handleThemeChange); + + return () => { + window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', handleThemeChange); + }; }, [])
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
public/simplifymoney-logo.pngis excluded by!**/*.pngpublic/tagmango_logo.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
views/CustomerLogos.tsx(3 hunks)views/Hero.tsx(5 hunks)views/JoinDiscord.tsx(2 hunks)views/Navbar.tsx(1 hunks)views/WhyUs.tsx(1 hunks)
🔇 Additional comments (17)
views/WhyUs.tsx (1)
35-35: Background color update looks goodThe change to add the
bg-primaryclass is consistent with the theme standardization in this PR. This helps create a uniform appearance across the landing page components.views/JoinDiscord.tsx (3)
38-38: Background color update looks goodChanging from
bg-blacktobg-primaryaligns with the uniform theming approach in this PR.
45-45: Ensure text visibility in both themesThe
text-whiteclass has been removed, making text color dependent on the theme. Verify that this text remains visible in both light and dark themes, as the heading needs to be clearly legible on thebg-primarybackground.
54-54: Ensure text visibility in both themesSimilar to the heading, please verify that the paragraph text remains visible in both light and dark themes after removing the
text-whiteclass.views/Navbar.tsx (1)
91-91: Consistent background color updateThe change from
bg-black text-foreground text-primary-lighttobg-primary text-foregroundaligns with the theme standardization in this PR. This helps create a uniform appearance across components.views/CustomerLogos.tsx (3)
15-18: New imports for theme managementThe addition of new logos and theme management imports is good. This allows for theme-aware rendering of components.
30-33: Added new customer logosThe addition of SimplifyMoney and TagMango logos enhances the customer showcase section.
62-63: Good approach for theme-aware logo renderingThe conditional application of grayscale and invert effects for dark theme is a good approach for ensuring logos remain visible regardless of theme. This implementation makes logos adapt to the theme without requiring separate assets.
views/Hero.tsx (9)
10-10: Import of theme utilities added correctly.This import adds the necessary functions for theme detection and the type definition, which will be used for the dynamic theming implementation.
15-15: Theme state implementation looks good.The state is properly initialized with a default 'light' theme, which ensures a consistent default rendering state.
50-50: Background color update follows the new theme system.Changing from
bg-blacktobg-primarymakes the component respond to the theme configuration properly.
52-52: Text color update aligns with the theme system.The change from
text-primary-lighttotext-primary-foregroundfollows modern theming conventions where the text color is tied to its background context.
73-73: Simplified text styling.Removing the
text-gray-300class lets the text inherit the parent's text color class, which is now theme-aware.
86-86: Button styling enhancement looks good.The addition of
font-semiboldand border color classes improves the visual consistency of the button with the action color theme.
94-94: Text styling simplification.The simplified class list retains the necessary responsive text sizing while allowing the text to inherit the parent's theme colors.
105-105: Background overlay follows the theme system.Changing from
bg-black/50tobg-primary/50ensures the overlay color is consistent with the main background while maintaining the same opacity.
109-109: Provider logos now use dynamic theme.The change from hardcoded theme values to the
currentThemestate ensures consistent theming across logos based on the user's preference.Also applies to: 112-112
|
Relevant users for this PR:
Ignoring following files due to large size: - public/simplifymoney-logo.png
Auto assigning to relevant reviewers. If you are a relevant reviewer, you can use the Vibinex browser extension to see parts of the PR relevant to you To change comment and auto-assign settings, go to your Vibinex settings page. |
|
Diff Graph: Call Stack Diff%%{init: { 'theme': 'neutral', 'themeVariables': { 'fontSize': '20px' }, 'flowchart': { 'nodeSpacing': 100, 'rankSpacing': 100 } } }%%
flowchart LR
subgraph yphq ["views/JoinDiscord.tsx"]
end
class yphq modified
subgraph tvwh ["views/Navbar.tsx"]
end
class tvwh modified
subgraph qqzx ["views/WhyUs.tsx"]
end
class qqzx modified
subgraph jwqd ["views/CustomerLogos.tsx"]
zhrw["Customers"]
class zhrw modified
click zhrw href "https://github.com/vibinex/vibinex-server/pull/428/files#diff-8a6e2e029248d3f81978a62a94971630a69043a3240d11ff2ebbabfc72dd551eR36" _blank
end
class jwqd modified
subgraph lxmy ["../utils/theme"]
ozub["getPreferredTheme"]
click ozub href "https://github.com/vibinex/vibinex-server/blob/eb6812b3b3c6c2668043ce3a3b33d7cc0ccbdadb/../utils/theme#L0" _blank
end
subgraph logg ["../utils/theme.ts"]
qlwy["setCurrentTheme"]
click qlwy href "https://github.com/vibinex/vibinex-server/blob/eb6812b3b3c6c2668043ce3a3b33d7cc0ccbdadb/../utils/theme.ts#L0" _blank
zoaz["getPreferredTheme"]
click zoaz href "https://github.com/vibinex/vibinex-server/blob/eb6812b3b3c6c2668043ce3a3b33d7cc0ccbdadb/../utils/theme.ts#L0" _blank
end
subgraph eibb ["views/Hero.tsx"]
ceym["Hero"]
class ceym modified
click ceym href "https://github.com/vibinex/vibinex-server/pull/428/files#diff-51a577178391083660685a1714a7a42fd0be5eeb9490842d2cc54291644ed77aR12" _blank
end
class eibb modified
subgraph delh ["public/tagmango_logo.svg"]
end
class delh green
subgraph mwzy ["public/simplifymoney-logo.png"]
end
class mwzy green
classDef modified stroke:black,fill:yellow
classDef added stroke:black,fill:#b7e892,color:black
classDef deleted stroke:black,fill:red
zhrw =="<a target='_blank' href='https://github.com/vibinex/vibinex-server/pull/428/files#diff-8a6e2e029248d3f81978a62a94971630a69043a3240d11ff2ebbabfc72dd551eR39'>Line 39</a>" =====>ozub
zhrw =="<a target='_blank' href='https://github.com/vibinex/vibinex-server/pull/428/files#diff-8a6e2e029248d3f81978a62a94971630a69043a3240d11ff2ebbabfc72dd551eR40'>Line 40</a>" =====>zoaz
zhrw =="<a target='_blank' href='https://github.com/vibinex/vibinex-server/pull/428/files#diff-8a6e2e029248d3f81978a62a94971630a69043a3240d11ff2ebbabfc72dd551eR40'>Line 40</a>" =====>qlwy
ceym =="<a target='_blank' href='https://github.com/vibinex/vibinex-server/pull/428/files#diff-51a577178391083660685a1714a7a42fd0be5eeb9490842d2cc54291644ed77aR41'>Line 41</a>" =====>zoaz
linkStyle 0,1,2,3 stroke:green,stroke-width:8
To modify DiffGraph settings, go to your Vibinex settings page. |
…suggestions by coderabbit
|
Relevant users for this PR:
Auto assigning to relevant reviewers. If you are a relevant reviewer, you can use the Vibinex browser extension to see parts of the PR relevant to you To change comment and auto-assign settings, go to your Vibinex settings page. |
|
|
Diff Graph: Call Stack Diff%%{init: { 'theme': 'neutral', 'themeVariables': { 'fontSize': '20px' }, 'flowchart': { 'nodeSpacing': 100, 'rankSpacing': 100 } } }%%
flowchart LR
subgraph xlef ["views/Hero.tsx"]
jygs["Hero"]
class jygs modified
click jygs href "https://github.com/vibinex/vibinex-server/pull/428/files#diff-51a577178391083660685a1714a7a42fd0be5eeb9490842d2cc54291644ed77aR12" _blank
end
class xlef modified
subgraph dgqv ["views/JoinDiscord.tsx"]
end
class dgqv modified
subgraph pvvi ["views/WhyUs.tsx"]
end
class pvvi modified
subgraph plhp ["../utils/theme.ts"]
zjkx["getPreferredTheme"]
click zjkx href "https://github.com/vibinex/vibinex-server/blob/a28d1f9fdee7b03f6b6747424b1ff25bf5c570de/../utils/theme.ts#L0" _blank
end
subgraph qbhz ["../utils/theme"]
lzag["getPreferredTheme"]
click lzag href "https://github.com/vibinex/vibinex-server/blob/a28d1f9fdee7b03f6b6747424b1ff25bf5c570de/../utils/theme#L0" _blank
end
subgraph xfpn ["views/CustomerLogos.tsx"]
rrez["Customers"]
class rrez modified
click rrez href "https://github.com/vibinex/vibinex-server/pull/428/files#diff-8a6e2e029248d3f81978a62a94971630a69043a3240d11ff2ebbabfc72dd551eR36" _blank
end
class xfpn modified
subgraph hpvi ["views/Navbar.tsx"]
end
class hpvi modified
classDef modified stroke:black,fill:yellow
classDef added stroke:black,fill:#b7e892,color:black
classDef deleted stroke:black,fill:red
jygs =="<a target='_blank' href='https://github.com/vibinex/vibinex-server/pull/428/files#diff-51a577178391083660685a1714a7a42fd0be5eeb9490842d2cc54291644ed77aR41'>Line 41</a>" =====>zjkx
rrez =="<a target='_blank' href='https://github.com/vibinex/vibinex-server/pull/428/files#diff-8a6e2e029248d3f81978a62a94971630a69043a3240d11ff2ebbabfc72dd551eR39'>Line 39</a>" =====>lzag
linkStyle 0,1 stroke:green,stroke-width:8
To modify DiffGraph settings, go to your Vibinex settings page. |
|
Relevant users for this PR:
Total Coverage for PR: 0.00% If you are a relevant reviewer, you can use the Vibinex browser extension to see parts of the PR relevant to you To change comment and auto-assign settings, go to your Vibinex repository settings page. |
|
Relevant users for this PR:
Auto assigning to relevant reviewers. If you are a relevant reviewer, you can use the Vibinex browser extension to see parts of the PR relevant to you To change comment and auto-assign settings, go to your Vibinex settings page. |
|
Diff Graph: Call Stack Diff%%{init: { 'theme': 'neutral', 'themeVariables': { 'fontSize': '20px' }, 'flowchart': { 'nodeSpacing': 100, 'rankSpacing': 100 } } }%%
flowchart LR
subgraph ubid ["views/WhyUs.tsx"]
end
class ubid modified
subgraph srmy ["../utils/theme.ts"]
tvry["getPreferredTheme"]
click tvry href "https://github.com/vibinex/vibinex-server/blob/e3ccac5db246c80a75af54233532985f87d54c6f/../utils/theme.ts#L0" _blank
end
subgraph lmsu ["views/JoinDiscord.tsx"]
end
class lmsu modified
subgraph lijp ["views/CustomerLogos.tsx"]
fdci["Customers"]
class fdci modified
click fdci href "https://github.com/vibinex/vibinex-server/pull/428/files#diff-8a6e2e029248d3f81978a62a94971630a69043a3240d11ff2ebbabfc72dd551eR36" _blank
end
class lijp modified
subgraph pwfr ["views/Hero.tsx"]
eurm["Hero"]
class eurm modified
click eurm href "https://github.com/vibinex/vibinex-server/pull/428/files#diff-51a577178391083660685a1714a7a42fd0be5eeb9490842d2cc54291644ed77aR12" _blank
end
class pwfr modified
subgraph ymms ["views/Navbar.tsx"]
end
class ymms modified
classDef modified stroke:black,fill:yellow
classDef added stroke:black,fill:#b7e892,color:black
classDef deleted stroke:black,fill:red
fdci =="<a target='_blank' href='https://github.com/vibinex/vibinex-server/pull/428/files#diff-8a6e2e029248d3f81978a62a94971630a69043a3240d11ff2ebbabfc72dd551eR39'>Line 39</a>" =====>tvry
eurm =="<a target='_blank' href='https://github.com/vibinex/vibinex-server/pull/428/files#diff-51a577178391083660685a1714a7a42fd0be5eeb9490842d2cc54291644ed77aR41'>Line 41</a>" =====>tvry
linkStyle 0,1 stroke:green,stroke-width:8
To modify DiffGraph settings, go to your Vibinex settings page. |
Summary by CodeRabbit
New Features
Style