ATS/templates/TEMPLATE_TAILWIND_CONVERSION_SUMMARY.md

Template Tailwind CSS Conversion Summary

Objective

Convert all templates to match the base.html theme and use only Tailwind CSS instead of Bootstrap.

Base Theme Configuration

• Primary Color: Temple Red (#9d2235) and hover (#7a1a29)
• Background Colors: White (#ffffff), Light Gray (#f9fafb)
• Border Colors: Gray-200 (#e5e7eb)
• Text Colors: Gray-900 (#111827), Gray-700 (#374151), Gray-600 (#4b5563)
• Icons: Lucide Icons
• Components:
  • Cards: bg-white rounded-2xl shadow-sm border border-gray-200
  • Buttons Primary: bg-temple-red hover:bg-[#7a1a29] text-white font-semibold px-4 py-2.5 rounded-xl
  • Buttons Secondary: border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium px-4 py-2 rounded-xl
  • Inputs: w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red focus:border-transparent

Completed Templates ✓

Includes Directory (ALL COMPLETED ✓)

• delete_modal.html
• edit_comment_form.html
• delete_comment_form.html
• comment_form.html
• comment_list.html
• meeting_form.html
• _list_view_switcher.html
• language_options.html
• search_form.html
• easy_logs.html
• paginator.html
• application_exam_status_form.html
• application_modal_body.html
• applications_update_exam_form.html
• applications_update_interview_form.html
• applications_update_offer_form.html
• candidate_resume_template.html
• copy_to_clipboard.html
• schedule_interview_div.html

Recruitment Directory

• application_delete.html
• candidate_delete.html
• agency_access_link_confirm.html
• notification_confirm_all_read.html
• notification_confirm_delete.html
• agency_access_link_detail.html
• agency_portal_assignment_detail.html
• applicant_signup.html
• agency_portal_persons_list.html
• interview_calendar.html
• source_form.html

Recruitment/Partials Directory

• stage_update_modal.html
• note_form.html
• note_modal.html
• stage_confirmation_modal.html

Templates Requiring Conversion

Recruitment Directory

• agency_form.html
• agency_detail.html
• agency_portal_login.html
• agency_portal_dashboard.html
• agency_list.html
• agency_assignment_list.html
• settings_form.html
• settings_list.html
• settings_detail.html
• application_detail.html
• applications_list.html
• applicant_profile.html
• dashboard.html

Recruitment/Partials Directory

• _candidate_table.html
• _guage_chart.html
• ai_overview_breadcromb.html
• error.html
• exam-results.html
• interview-results.html
• offer-results.html
• stage_display.html
• stage_update_form.html
• stage_update_success.html
• stats_cards.html

Jobs Directory

• job_list.html
• job_detail.html
• create_job.html
• edit_job.html
• job_applicants.html
• applicants_of_stage.html
• apply_form.html
• application_success.html
• job_bank.html
• job_applications_list.html

Jobs/Partials Directory

• delete_modal.html
• applicant_tracking.html
• image_upload.html
• linkedin_content_form.html

Account Directory

• login.html
• logout.html
• account_inactive.html
• password_reset.html
• password_reset_done.html
• password_reset_from_key.html
• password_reset_from_key_done.html
• password_change.html
• email_confirm.html
• email.html
• verification_sent.html
• email/email_confirmation_message.html
• email/password_reset_key_message.html

Interviews Directory

• interview_list.html
• interview_detail.html
• interview_create_type_selection.html
• interview_create_onsite.html
• interview_create_remote.html
• interview_participants_form.html
• onsite_location_form.html
• preview_schedule.html
• schedule_interviews.html

Interviews/Partials Directory

• ai_questions_list.html
• interview_list.html

Interviews/Email Directory

• interview_invitation.html

People Directory

• person_list.html
• person_detail.html
• create_person.html
• update_person.html
• delete_person.html
• person_confirm_delete.html

Messages Directory

• message_list.html
• message_detail.html
• message_form.html
• application_message_list.html
• application_message_detail.html
• application_message_form.html

Meetings Directory

• list_meetings.html
• meeting_details.html
• create_meeting.html
• update_meeting.html
• delete_meeting_form.html
• create_remote_meeting.html
• reschedule_meeting.html
• reschedule_onsite_meeting.html
• schedule_meeting_form.html
• schedule_onsite_meeting_form.html

User Directory

• profile.html
• settings.html
• admin_settings.html
• portal_profile.html
• staff_password_create.html
• create_staff.html

Applicant Directory

• career.html
• job_application_detail.html
• application_submit_form.html

Applicant/Partials Directory

• candidate_facing_base.html

Forms Directory

• form_list.html
• form_templates_list.html
• create_form_template.html
• edit_form.html
• form_builder.html
• form_embed.html
• form_preview.html
• form_template_submissions_list.html
• form_template_all_submissions.html
• form_submission_details.html
• document_form.html

Conversion Guidelines

Key Changes Made:

1. Removed Bootstrap classes (e.g., btn btn-primary, card, form-control)
2. Added Tailwind CSS classes with custom color scheme
3. Replaced Bootstrap icons with Lucide Icons
4. Standardized component styling using:
   • bg-temple-red for primary actions
   • rounded-2xl for cards
   • shadow-sm for subtle depth
   • Consistent padding and spacing

Common Patterns:

Buttons

<!-- Primary -->
<button class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-semibold px-4 py-2.5 rounded-xl transition shadow-sm hover:shadow-md">
    <i data-lucide="icon-name" class="w-4 h-4"></i> Button Text
</button>

<!-- Secondary -->
<button class="inline-flex items-center gap-2 border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium px-4 py-2 rounded-xl transition">
    <i data-lucide="icon-name" class="w-4 h-4"></i> Button Text
</button>

Cards

<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
    <div class="p-6">
        <!-- Content -->
    </div>
</div>

Forms

<div class="space-y-2">
    <label for="field-id" class="block text-sm font-semibold text-gray-700 mb-2">
        Label Text <span class="text-red-500">*</span>
    </label>
    <input type="text" id="field-id" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red focus:border-transparent transition">
</div>

Alerts/Notifications

<!-- Success -->
<div class="bg-green-50 border border-green-200 text-green-800 rounded-xl p-4 mb-6 font-semibold text-sm">
    Success Message
</div>

<!-- Error -->
<div class="bg-red-50 border border-red-200 text-red-800 rounded-xl p-4 mb-6 font-semibold text-sm">
    Error Message
</div>

<!-- Warning -->
<div class="bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-xl p-4 mb-6 font-semibold text-sm">
    Warning Message
</div>

<!-- Info -->
<div class="bg-blue-50 border border-blue-200 text-blue-800 rounded-xl p-4 mb-6 font-semibold text-sm">
    Info Message
</div>

Modals

<div class="hidden fixed inset-0 z-50 overflow-y-auto" id="modalId">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-black/50 transition-opacity"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <!-- Modal Content -->
        </div>
    </div>
</div>

Badges

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-temple-red text-white">
    Badge Text
</span>

Status Summary

• Total Templates: ~150+
• Completed: ~25
• Remaining: ~125+
• Completion: ~17%

Next Steps

1. Continue converting remaining templates in recruitment directory
2. Convert all templates in jobs directory
3. Convert all templates in account directory
4. Convert all templates in interviews directory
5. Convert all templates in other directories
6. Remove Bootstrap CDN links from base.html once all templates are converted
7. Test all templates for consistency and functionality

Notes

• All converted templates use Lucide Icons instead of Font Awesome or Bootstrap icons
• Custom Tailwind config needed for bg-temple-red color (should be added to tailwind.config.js)
• Modal interactions now use JavaScript instead of Bootstrap's data attributes
• All forms use consistent styling and validation states
• Responsive design is maintained through Tailwind's responsive prefixes (sm:, md:, lg:, etc.)