UI/UX Improvements: Tab Colors, Text Size, Spacing, and Scroll Adjustments

[mariobehling]

Several layout and usability issues need to be refined in the Badge Magic App to improve the overall user interface and ensure consistency with design standards.

🧩 Tasks / Fixes Needed

1. Tab Styling

   • Change the color of the tabs to better match the app’s theme and improve visibility.

2. Text Size

   • Increase text size as much as possible without causing truncation or clipping.

3. Default Text and Text Field Spacing

   • Add sufficient whitespace between the default text label and the text input field for clarity.

4. Dropdown Layout

   • Adjust dropdown width to fit the maximum text width comfortably.
   • Ensure dropdown does not touch the screen edge.
   • Dropdown highlight color should match the sidebar grey, while the rest of the dropdown background remains white (similar to the expected design).

5. Scrolling and Screen Behavior

   • Implement a scroll feature on the home screen if content overflows.
   • Add a scrollbar on the emoji section for easier navigation.
   • Investigate the clipart section—check layout and display issues (possible scaling or scroll problem).

6. Editing Flow

   • Review why the editing flow was changed recently— this was caused by a regression.

7. Button Spacing

   • Increase space between buttons to improve usability and avoid accidental taps.

---

🧠 Expected Outcome

A more accessible, visually consistent, and responsive interface across all sections (Tabs, Home, Emoji, Clipart, and Edit screens).

---

🧪 References

• Compare to previous UI builds before the editing flow change.
• Check spacing and colors against the sidebar grey color standard in the design system.