Skip to content

Conversation

@IamLRBA
Copy link
Contributor

@IamLRBA IamLRBA commented Dec 29, 2025

Pull Request Title

feat(synkronus-portal): redesign dashboard UI with modern minimalist aesthetic

Description

This PR implements a comprehensive UI redesign of the Synkronus Portal dashboard, transforming it into a modern, minimalist, and futuristic interface. The redesign focuses on improving visual hierarchy, spacing, and user experience while maintaining all existing functionality.

Key Changes:

  • Replaced all emojis with appropriate Heroicons (outline icons for inactive states, solid icons for active states)
  • Implemented centered layouts for all dashboard sections (Overview, App Bundles, Users, Observations, Data Export, System)
  • Redesigned buttons with custom fading border effects and hover states
  • Added blurred background image layer for enhanced visual depth
  • Improved spacing and visual hierarchy across all components
  • Enhanced Create User modal with redesigned dropdown (custom arrow, better colors, improved styling)
  • Updated login page to match the new design system

##Screenshots
Before:
aa

After:
aaaaa

Login Page Before and After:
a
aaaa

Type of Change

  • New Feature / Enhancement
  • Bug Fix
  • Refactor / Code Cleanup
  • Documentation Update
  • Maintenance / Chore
  • Other (please specify):

Component(s) Affected

  • formulus (React Native mobile app)
  • formulus-formplayer (React web app)
  • synkronus (Go backend server)
  • synkronus-cli (Command-line utility)
  • Documentation
  • DevOps / CI/CD
  • synkronus-portal

Testing

  • Unit tests added/updated
  • Integration tests added/updated
  • Manually tested
  • Tested on multiple platforms (if applicable)
  • Not applicable

Manual Testing Performed:

  • Verified all dashboard sections render correctly
  • Tested button interactions and hover states
  • Confirmed modal functionality (Create User, Reset Password, etc.)
  • Verified responsive behavior
  • Tested login page functionality
  • Confirmed all icons display correctly

Breaking Changes

  • This PR introduces breaking changes
  • This PR does NOT introduce breaking changes

If breaking changes, please describe migration steps:


Documentation Updates

  • Documentation has been updated
  • Documentation update is not required

Checklist

  • Code follows project style guidelines
  • All existing tests pass
  • New tests added for new functionality
  • PR title follows Conventional Commits format

Thank you for contributing to Open Data Ensemble (ODE)!

@IamLRBA IamLRBA force-pushed the Synkronus-Portal-UI branch 2 times, most recently from 6d204c2 to a7e6b90 Compare December 29, 2025 04:16
@Mishael-2584
Copy link
Contributor

@IamLRBA It looks to be issues with missing dependencies or components. Did you run npm run build before push locally?

@IamLRBA
Copy link
Contributor Author

IamLRBA commented Jan 3, 2026

@Mishael-2584 you were absolutely right, the build is failing because the @ode/components package my portal app depends on hasn’t been merged yet (it's in PR #78).
So when the GitHub Actions runner checks out the main dev branch to build the portal, it can’t find the module.
In short: the portal build is failing because it’s trying to use something that doesn’t exist yet in the main codebase. 😂

IamLRBA and others added 6 commits January 4, 2026 15:49
- Add missing components package files from PR #78
- Add Input and Badge components
- Resolve merge conflicts in Button.tsx and utils.ts
- Fix Dockerfile for monorepo build structure
- Update portal imports to use @ode/components package
- Fix TypeScript errors and type imports
- Resolve binary conflict for ode_logo.png
- Update CI workflow for monorepo context

Resolves merge conflicts and ensures build passes in CI/CD
The prepare script runs during npm ci and requires style-dictionary.config.js, config.json, and src directory. Copy these files before running npm ci to prevent MODULE_NOT_FOUND error.
- Use type-only imports for types when verbatimModuleSyntax is enabled

- Remove unused variables (createFadeMask, hasValue, Button import)

- Exclude react-native components from TypeScript build (not needed for portal)

- Fix unused parameter warning in getButtonTextColor
@Mishael-2584 Mishael-2584 merged commit cabddfa into OpenDataEnsemble:dev Jan 5, 2026
8 checks passed
@IamLRBA
Copy link
Contributor Author

IamLRBA commented Jan 5, 2026

Thanks for making this PR a success @Mishael-2584 🚀

@IamLRBA IamLRBA deleted the Synkronus-Portal-UI branch January 5, 2026 12:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants