UI Components

The APEX Portal integrates with several UI component libraries to provide a consistent and feature-rich user interface. These components are used throughout the application to deliver a modern and responsive user experience.

External Component Libraries

Blazor Bootstrap

The APEX Portal uses Blazor Bootstrap as its primary UI framework. This provides:

1. Core Bootstrap Components: Buttons, cards, navbars, etc.
2. Blazor-Specific Components: Sidebar, ThemeSwitcher, etc.
3. Theming Support: Light/dark mode theming capabilities

Integration is set up in Program.cs:

builder.Services.AddBlazorBootstrap();

And referenced in _Imports.razor:

@using BlazorBootstrap

UI.Razor Components

The UI.Razor library provides custom components specifically designed for the APEX platform:

1. HorizontalTimeline: Advanced timeline component used in the Billing module
2. Data Models: Supporting models like TimelineEvent and ITimelineEventDataProvider

UI Features

Theming

The APEX Portal includes a theme system with:

1. Theme Switching: Users can toggle between light and dark themes
2. System Preference Detection: Automatically uses the system's color scheme preference
3. Persistence: Theme choice is saved in localStorage

Responsive Design

The UI is designed to work across various screen sizes:

1. Mobile-First Approach: Components are designed to work well on mobile devices
2. Responsive Breakpoints: Layout adapts to different screen sizes
3. Touch-Friendly: Interactive elements are sized appropriately for touch interaction

Branding

The APEX Portal incorporates consistent branding elements:

1. Logo: APEX logo in SVG format for scalability
2. Color Scheme: Consistent color palette based on Bootstrap theming
3. Typography: Consistent font usage across the application