Skip to content

New palette added along with landing page redesign#70

Merged
anupsingh244 merged 10 commits intomainfrom
develop
Sep 18, 2025
Merged

New palette added along with landing page redesign#70
anupsingh244 merged 10 commits intomainfrom
develop

Conversation

@anupsingh244
Copy link
Contributor

@anupsingh244 anupsingh244 commented Sep 18, 2025

Closes #69 and #64
Baseline for color palette, typography, other common theme style added,
Changed app name from Lytics to ContentStack Dev tools.
Header section redesign, added setting and help icon(currently non-functional)
Disabled state redesign(body)
Extension toggle redesign(part of header)
New text has been added for the redesigned page.(part of body)

Expected design
image

Manula testing steps for this PR

Manual Testing Steps

DisabledState Component Testing:

  1. Component Rendering:

    • Navigate to a page where extension is disabled
    • Verify DisabledState component renders correctly
    • Confirm all text content displays properly (toggle label, title, description, documentation text)
  2. Visual Design:

    • Verify white background cards are visible
    • Check toggle component styling (gray card with proper dimensions)
    • Confirm arrow pointer positioning and styling
    • Validate typography (font family, weights, line heights)
    • Test responsive behavior on different screen sizes
  3. Interactive Elements:

    • Click on documentation link - should open in new tab
    • Verify link hover states work correctly
    • Confirm disabled toggle shows proper styling (green background, white thumb)
  4. Theme Integration:

    • All colors should use theme tokens (no hardcoded values)
    • Spacing should be consistent with theme.spacing()
    • Typography should follow theme font family and weights

Copy link
Contributor

@prosdev prosdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some feedback the new components + added styling. We can discuss more if we want to address some of these concerns in a follow up PR.

DevX Feedback --> I see that this PR is from from develop --> main. We should adopt established patterns (work on issue branches, and then merge them to main with PR)

branch --> issue/64-header-update then PR (as opposed to working on develop)

- Add Material-UI theme system with typography, palette, and components
- Create ThemeProvider and useTheme hook for consistent theming
- Redesign TopNavigation with modern UI and theme integration
- Update extension title to "Contentstack Data Dev Tools"
- Improve toggle component styling and behavior
- Add help and settings icons to navigation
Copy link
Contributor

@prosdev prosdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look great, one more small nit and should be good to go from my end!

@prosdev prosdev self-requested a review September 18, 2025 10:23
@anupsingh244 anupsingh244 merged commit 4fbc2df into main Sep 18, 2025
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Extension disabled state redesign

3 participants