Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance UI/UX with modern styling and animations #1725

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

PranshuLakhotia
Copy link

Changes Included:

Icon Enhancements:
Added rounded corners and subtle shadows to icons.
Introduced hover effects (zoom and brightness) for better interactivity.
Improved the disabled state with a semi-transparent overlay.

Icon Button Improvements:
Modernized the button design with rounded corners, shadows, and hover effects.
Added smooth transitions for hover and click interactions.
Improved text spacing and readability.

Palette Modernization:
Redesigned the palette with a clean white background, rounded corners, and soft shadows.
Added smooth fade-in and slide-down animations for opening and closing the palette.
Introduced hover effects for palette items and improved header styling.

Loading Spinner and Status Bar:
Added a loading spinner with a smooth animation to indicate loading states.
Introduced a status bar at the bottom of the screen to display the app's current state (e.g., "Loading...", "Connected", "Ready").

Notification System:
Added a notification system to display messages (e.g., "Activities loaded", "Connection failed").
Notifications appear at the bottom-right corner and fade out after a few seconds.

How to Test
Icons: Hover over icons to see the zoom and brightness effects.
Buttons: Click and hover over icon buttons to observe the transitions and hover effects.
Palette: Open and close the palette to see the smooth animations.
Notifications: Trigger notifications to see them appear and fade out.

@llaske
Copy link
Owner

llaske commented Feb 8, 2025

You should take in consideration few things about Sugar/Sugarizer

  • It's targeted for children between 6 and 12, some of them can't read (so we tend to avoid "text") and some of them have never used a computer before (so applying what you think as "usual" icon is not necessarily a good idea).
  • It works both on computer and touch devices so concept of tooltip/hover effect and cursor are not always appropriate
  • It was thought for children that could have visual disability so a colorful screen is not always the best thing to do
  • We expect that children could focus on activities so we tend to avoid multiple windows

I don't think your suggestions are interesting in our context.

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.

2 participants