Skip to content

Separate styling from app.py #16

Open
@aamarin

Description

@aamarin

Need to extract and organize CSS styles from app.py into a dedicated stylesheet to improve code maintainability and separation of concerns.

Current State:

  • CSS styles are currently embedded in app.py using st.markdown()
  • Styles include VWC brand colors, sidebar styling, code block formatting, and chat input styling
  • Styles are mixed with application logic

Required Changes:

  1. Create new directory structure:

  2. Extract existing styles:

  • Move all CSS from st.markdown() into main.css
  • Organize styles into logical sections (layout, components, utilities)
  • Create variables.css for brand colors and theming
  • Document styling conventions and usage
  1. Create style loading utility:
  • Implement function to read CSS files
  • Add error handling for file operations
  • Cache CSS content to avoid repeated file reads
  1. Update app.py:
  • Remove inline styles
  • Import and use new style loading utility
  • Update style application method

Technical Notes:

  • Ensure CSS specificity matches current implementation
  • Maintain existing Streamlit element targeting
  • Keep current functionality of dynamic styling
  • Consider adding CSS minification

Acceptance Criteria:

  • All styles successfully moved to dedicated CSS files
  • No visual regressions in the application
  • Styles properly applied through new loading mechanism
  • Documentation added for style organization
  • No duplicate style definitions
  • All Streamlit-specific selectors preserved

Testing:

  • Verify styles load correctly
  • Check all components retain current styling
  • Test style loading performance
  • Validate error handling

Related Files:

  • app.py
  • (new) ui/styles/main.css
  • (new) ui/styles/variables.css
  • (new) ui/utils/style_loader.py

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions