Skip to content

Style:UI Reskin-Structures Page (Light & Dark Theme Support)

SandhyaRani Bandaram requested to merge reskin-structure-ui into UI

📌 Description

This MR implements the premium SaaS UI styling for the Structures page using the VISWAM design system.

The update introduces Light Theme and Dark Theme support using Tailwind’s dark: class strategy, ensuring consistency with the rest of the application.

🎯 Goal

Enhance the Structures page with a modern SaaS look while maintaining:

  • Existing content
  • Layout structure
  • Section order
  • HTML structure

This is strictly a visual UI update, not a redesign.

🎨 Changes Implemented

🌞 Light Theme

  • Background: bg-slate-50 / bg-white
  • Cards: bg-white/70 backdrop-blur-xl border border-slate-200 shadow-lg
  • Text:
    • Headings: text-slate-900
    • Body: text-slate-600
  • Buttons: bg-indigo-600 text-white rounded-xl
  • Navbar: bg-white/70 backdrop-blur border-b
  • Footer: bg-slate-100 border-t

🌙 Dark Theme

  • Background: dark:bg-[#0e0e0e]
  • Cards: dark:bg-white/5 dark:backdrop-blur-xl dark:border dark:border-white/10
  • Text:
    • Headings: dark:text-white
    • Body: dark:text-gray-400
  • Buttons: dark:bg-indigo-500 dark:text-white
  • Navbar: dark:bg-black/40 dark:backdrop-blur-xl dark:border-b dark:border-white/10
  • Footer: dark:bg-black dark:border-t dark:border-white/10

🧩 Components Styled

  • Navbar
  • Page header / hero section
  • Structure cards
  • Sections
  • Buttons
  • Icons
  • Footer
  • Page background

✨ UI Enhancements

  • Glassmorphism cards (blur + transparency)
  • Rounded corners (rounded-xl, rounded-2xl)
  • Smooth transitions (transition-all duration-300)
  • Hover effects on cards and buttons
  • Improved spacing (py-20 px-8 max-w-7xl mx-auto)

⚠️ Constraints Followed

  • ❌ No content changes
  • ❌ No layout changes
  • ❌ No new sections added
  • ❌ No HTML structure modified
  • ✅ Only Tailwind classes updated

✅ Acceptance Criteria

  • Structures page supports both Light & Dark themes
  • UI matches VISWAM premium SaaS design system
  • Styling is consistent with other pages
  • Responsive design maintained
  • No regression in layout or functionality

🧪 Testing

  • Verified UI rendering in both themes
  • Confirmed correct Tailwind classes applied
  • No visual/layout breakages observed

🔗 Related Work

  • UI system alignment with Sources & Collaborations pages
  • Follows shared VISWAM design components

📸 Screenshots (Optional)

Before:

image.png

After:

image.png

image.png

🚀 Notes

This MR is part of the ongoing effort to standardize UI across all pages using the VISWAM premium SaaS design system.

Edited by SandhyaRani Bandaram

Merge request reports