Skip to content

v2.2.0 - UI Overhaul: Enhanced Settings Modal & Editor Themes

Choose a tag to compare

View all tags
@CyberSphinxxx CyberSphinxxx released this 01 Jan 06:46
· 68 commits to main since this release
v2.2.0
3c665a1

Description

Enhanced the user interface of the Settings modal to achieve a premium aesthetic and introduced a robust Theme selector for the editor. The update includes custom styling for form controls, improved interactive animations, and six selectable themes that persist across sessions.

Changes Made

  • Theme Selection:
    • Added a Theme dropdown to the top of the Editor section with immediate application and session persistence.
    • Supported Themes: VS Code Dark (default), VS Code Light, High Contrast, Dracula (purple accents), Monokai (vibrant colors), and GitHub Dark.
  • UI Enhancements:
    • Custom Scrollbar: Implemented a slim 6px scrollbar with a glowing purple gradient on hover.
    • Toggle Switches: Replaced checkboxes with animated iOS-style toggle switches featuring smooth spring curves and active state gradients.
    • Setting Cards: Restructured settings into cards with rounded corners (XL), colored icon badges, and hover lift effects.
    • Custom Dropdown Styling: Enhanced the selector with a custom chevron, purple focus ring, and hover states.

How It Works

  • SettingsModal.tsx: Implemented the theme dropdown and defined the EditorTheme type.
  • CodeEditor.tsx: Added custom theme definitions for Dracula, Monokai, and GitHub Dark, ensuring proper color schemes are applied.
  • MainContent.tsx: Wired the theme prop to the CodeEditor component to handle state changes.

Full Changelog: v2.1.0...v2.2.0

Assets 2
Loading