Styling and Theming

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• App.tsx
• components/AiDemo.tsx
• components/Chatbot.tsx
• components/Section.tsx
• components/Card.tsx
• components/Header.tsx
• components/Icons.tsx

The application's user interface is styled using the Tailwind CSS framework. The styling strategy is based on a combination of a global theme configuration and utility-first classes applied directly within React components. This approach allows for rapid development while maintaining a consistent visual identity aligned with the project's branding.

The core of the theming is defined directly in index.html, where custom fonts and a specific color palette are configured. This global setup is then consumed by all components throughout the application, from high-level page layouts in App.tsx to specific, reusable UI elements like Card.tsx and Section.tsx.

Core Styling Architecture

The project's styling foundation is established in index.html. It relies on including Tailwind CSS via a CDN and configuring it in-place with a <script> tag.

This diagram illustrates the flow of styling information from the base configuration to the final rendered components.

Tailwind CSS Integration

Tailwind CSS is loaded directly from a CDN in the <head> of the index.html file. This method simplifies the build process by avoiding the need for a dedicated CSS compilation step.

<script src="https://cdn.tailwindcss.com"></script>

Sources: index.html:6-6

Theme and Font Configuration

The theme is configured within a <script> block in index.html. This configuration extends Tailwind's default theme with custom fonts and colors specific to the "AI for Thai EMS" project.

Fonts

The primary font used is 'Sarabun', which is imported from Google Fonts. It is set as the default sans-serif font for the entire application.

<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700&display=swap" rel="stylesheet">

Sources: index.html:9-9

The configuration object applies this font:

// From index.html
tailwind.config = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Sarabun', 'sans-serif'],
      },
      // ... colors
    },
  },
}

Sources: index.html:12-18

Color Palette

A custom color palette is defined to establish a consistent brand identity. These colors are used extensively across all components for text, backgrounds, and borders.

Class Name	Hex Code	Description
niem-blue	#0D47A1	A deep blue, likely for NIEM branding.
niem-yellow	#FFC107	A bright yellow, likely for NIEM branding.
brand-primary	#005A9C	The primary brand blue color.
brand-secondary	#FFC72C	The secondary brand yellow color.

Sources: index.html:19-24

Layout and Structural Components

The overall application layout is defined in App.tsx, which orchestrates various structural and content components.

Main Layout

The root div in App.tsx establishes the base styling for the entire application, including a light gray background and the default font styles. The main content is centered and constrained using the container mx-auto classes.

// App.tsx
<div className="min-h-screen bg-gray-50 text-gray-800 font-sans">
  <Header />
  <main className="container mx-auto px-4 py-8 md:py-12">
    {/* ... sections ... */}
  </main>
  <footer className="bg-brand-primary text-white text-center p-4 mt-12">
    <p>National Institute for Emergency Medicine (NIEM)</p>
  </footer>
  <Chatbot />
</div>

Sources: App.tsx:12-14, App.tsx:103-105

Reusable Components

The application promotes consistency through several reusable, styled components.

Component	File Path	Description
Header	components/Header.tsx	A sticky header with a shadow, displaying the NIEM logo and project title. Uses brand-primary for text.
Section	components/Section.tsx	A content section component with a bold, brand-primary title and a brand-secondary bottom border.
Card	components/Card.tsx	A container for content with a shadow, hover effect, and a brand-secondary top border.
Timeline	components/Timeline.tsx	A vertical timeline component using brand-primary and brand-secondary for visual elements.

Sources: components/Header.tsx:5-5, components/Section.tsx:10-12, components/Card.tsx:9-9, components/Timeline.tsx:11-11

The Section component, for example, standardizes the appearance of section titles:

// components/Section.tsx
<h2 className="text-3xl font-bold text-brand-primary mb-6 pb-2 border-b-2 border-brand-secondary">
  {title}
</h2>

Sources: components/Section.tsx:10-12

Dynamic and Conditional Styling

Styling is dynamically applied in several components based on application state. This is most evident in the AiDemo and Chatbot components.

AI Demo Severity Indicator

In the AiDemo component, the background color of the severity status display changes based on the value of analysis.severity. This provides an immediate visual cue to the user.

This diagram shows the logic for applying conditional classes.

The implementation uses a ternary operator within the className prop:

// components/AiDemo.tsx
<div className={`p-4 rounded-lg text-center text-white font-bold text-2xl transition-colors ${
     analysis.severity === 'Critical' ? 'bg-red-500' :
     analysis.severity === 'Urgent' ? 'bg-yellow-500' : 'bg-gray-300'
  }`}>
    {/* ... content ... */}
</div>

Sources: components/AiDemo.tsx:161-166

Chatbot Interface

The Chatbot component uses distinct styles to differentiate between messages from the user and the AI model.

• User Messages: Have a bg-blue-500 background and are right-aligned (justify-end).
• Model Messages: Have a bg-gray-200 background and are left-aligned (justify-start).

// components/Chatbot.tsx
<div key={msg.id} className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
    <div className={`p-3 rounded-2xl max-w-sm ${msg.sender === 'user' ? 'bg-blue-500 text-white rounded-br-none' : 'bg-gray-200 text-gray-800 rounded-bl-none'}`}>
        {/* ... message content ... */}
    </div>
</div>

Sources: components/Chatbot.tsx:210-212

The floating action button for the chatbot also uses brand-primary for its background and has a hover:scale-110 transition effect.
Sources: components/Chatbot.tsx:198-201

Iconography

The project uses a set of custom SVG icons, which are defined as individual React components in components/Icons.tsx. This allows icons to be easily imported and used with standard Tailwind CSS utility classes for sizing and color.

Example usage in App.tsx:

// App.tsx
<div className="flex-shrink-0 w-12 h-12 bg-blue-100 text-brand-primary rounded-full flex items-center justify-center">
  <UserGroupIcon className="w-6 h-6" />
</div>

Sources: App.tsx:81-83, components/Icons.tsx:6-9

The Icons.tsx file contains numerous icons, including:

• UserGroupIcon
• BeakerIcon
• ShieldCheckIcon
• BoltIcon
• SparklesIcon
• ChatBubbleLeftRightIcon

Sources: components/Icons.tsx