TODO¶

• Navbar dropdown option design figma accurate
• Loading state for upload from cloud
• Google/Drop drive instantly show error while picking
• Scrollbar always showing
• Compressing loader responsive in mobile
• Download card header alignment
• Default medium compress level
• Gradient work
• Update logo
• Share, print, icon color change for dark mode
• Star rating fix
• Keep remove/keep image active when clicked on remove
• Softeko product line in footer
• Name update trigger using enter
• Change font source (replace next font with Google Fonts)
• Modal will close upon deleting
• Modal will close upon rating

Objective¶

The objective is to enhance several functionalities on the website, improving the overall user experience. This includes handling loading states for cloud uploads, adjusting icons for dark mode, improving mobile responsiveness for the compressing loader, and refining modal behaviors. Additionally, UI components such as the Navbar dropdown and footer will be addressed, and Google Fonts will replace Next Fonts to resolve font loading issues.

Task Checklist¶

General Features¶

• Implement loading state for upload from Google Drive and Dropbox.
• Display instant error when selecting a file with Google/Dropbox that exceeds file size limits.
• Ensure scrollbar is always showing.
• Make compressing loader responsive on mobile.
• Align download card headers properly.
• Set medium compression level as default.
• Update the logo to the latest version.
• Implement gradient for the background.
• Change icon colors (share, print, etc.) for dark mode.
• Fix star rating component.
• Make the remove/keep image option remain active when clicked.
• Update Softeko product line in the footer.
• Ensure the name update is triggered on pressing Enter.
• Replace Next.js Font integration with Google Fonts for consistent font loading.

Modal Behavior¶

• Close the modal upon deleting a file.
• Close the modal upon rating.

Success Criteria¶

• The Navbar dropdown is implemented and functional.
• File uploads from Google Drive and Dropbox display the appropriate loading state, and errors show instantly during file selection.
• Scrollbars appear correctly across all relevant components.
• Compressing loader is fully responsive and adjusts smoothly on mobile screens.
• Download card headers are properly aligned.
• The default compression level is set to medium for a better user experience.
• The updated logo is reflected across the site.
• Icon colors adjust correctly for dark mode to improve visual consistency.
• Star rating functionality is fully fixed and works across environments.
• Remove/keep image options remain active when clicked.
• Softeko product line is updated in the footer section.
• Name changes can be submitted by pressing the Enter key.
• Google Fonts are used as the font source, improving consistency.
• Modals will close when deleting a file or submitting a rating.

In Scope¶

• UI and UX adjustments to loading states, dropdowns, and modals.
• Visual enhancements like icons, colors, and gradients.
• Improving the responsiveness and layout of key components.
• Replacing Next.js Fonts with Google Fonts.
• Fixing issues with modals not closing upon certain actions.

Out of Scope¶

• Backend changes beyond managing API errors for file uploads.
• Redesigning the entire Navbar or Footer.
• Changing existing API integrations or storage mechanisms.

GitHub Issue Link¶

• GitHub Issue #42