Mobayilo Architecture & UX Audit

Mobayilo Architecture & UX Audit

Task 1: Architecture Review

1. UI Consistency

• Configuration: The project leverages a CSS-first configuration in app/assets/stylesheets/application.tailwind.css using the @theme directive, rather than a root tailwind.config.js.
• Design System: There is a centralized token system defining semantic colors (e.g., --color-action-green: #22C55E, --color-dark-bg, --color-card).
• Entry Point: app/assets/stylesheets/application.tailwind.css is the single source of truth for global styles and theme variables.

2. Interactive Patterns

• VoIP Integration: The core logic resides in app/javascript/controllers/twilio_dialer_controller.js.
• State Management:
  • It uses localStorage (mobayilo_dialer_online) to persist “Online” status across page reloads.
  • It relies on auto-reconnection logic on page load rather than a persistent frame (like a global Turbo Frame) to keep calls alive during navigation.
• Key Controllers: twilio_dialer_controller handles the calling logic, while country_select_controller manages international prefix logic.

3. Layouts

• Main Layout: app/views/layouts/application.html.erb.
• Responsive Strategy: It uses a “Mobile-First” approach where the desktop navbar and footer are hidden on mobile, replaced by a shared/mobile_nav partial.
• Persistence: Navigation does not persist sidebars or players visually; the layout re-renders shared partials on every Turbo visit.

---

Task 2: Inconsistency Deep-Dive (UI Debt)

1. Hardcoded Colors & Spacing (Theme Violations)

• Landing Page (home.html.erb):
  • CRITICAL: Line 62 uses bg-[oklch(98.5%_0.002_247.839)]. This raw value should be replaced with a token (e.g., --color-gray-50).
• Credits Page (credits.html.erb):
  • Uses border-gray-200 (Light mode gray) in a Dark mode context (lines 109, 122), clashing with the border-white/10 used elsewhere.
• Dialer Component (_iphone_dialer.html.erb):
  • Uses a specific hardcoded shadow: shadow-[0_25px_60px_-20px_rgba(15,23,42,0.7)].
  • Dialpad buttons use bg-white/10 directly instead of a semantic token like --color-keypad-btn.

2. Inconsistent Button/Form Styles

• Borders:
  • Sign In: Uses border-gray-600 for inputs.
  • Credits/Dashboard: Uses border-white/10 (translucent white). This creates a visual disconnect between “Auth” and “App” states.
• Inputs:
  • Sign In: Inputs have a solid bg-dark-bg.
  • Credits: Inputs have bg-dark-bg but differ in border opacity and placeholder colors (gray-500 vs gray-400).

3. VoIP Specific Deviations

• Skeuomorphism vs Flat: The iPhone Dialer component uses md:rounded-[48px] to mimic a phone, contrasting with the rounded-2xl or rounded-xl used for cards and buttons elsewhere.
• Overlay Consistency: The “Go Online” overlay in the dialer correctly uses backdrop-blur-sm, but the “Sign In to view balance” overlay in the Credits page lacks this, using only a simple dashed border.

---

Task 3: Senior Front-end Engineer Prompt

Role: Senior Front-end Engineer (Rails 8 / Tailwind CSS / Hotwire / ViewComponent)

Objective: Create a high-conversion Landing Page for “Mobayilo” to onboard our first beta testers. The page must strictly adhere to our existing “Action Green” Dark Mode aesthetic and act as a polished wrapper for our VoIP functionality.

Context: We have an existing codebase using Rails 8, Tailwind CSS (configured via CSS variables in application.tailwind.css), and Stimulus.

• Core Color: Action Green (#22C55E / --color-action-green)
• Background: Dark Slate (#0F172A / --color-dark-bg)
• Cards: Dark Card (#1E293B / --color-dark-card) or Translucent (bg-white/5 with border-white/10)
• Typography: ‘Cormorant Garamond’ (Headings) and ‘Inconsolata’ (Body)

Requirements:

1. Visual Style (Strict Adherence):

   • Backgrounds: MUST use bg-dark-bg for the main page background.
   • Borders: MUST use border-white/10 for subtle dividers and cards (Avoid gray-200 or explicit light-mode grays).
   • Buttons: Primary buttons must be bg-action-green text-dark-bg rounded-2xl font-semibold.
   • Typography: Use font-heading for all section titles and font-sans (Inconsolata) for body text.

2. Page Structure:

   • Hero Section:
     • Headline: “The Future of Browser Calling.”
     • Subtext: “Join the exclusive beta.”
     • Call to Action: An email capture form styled as a dark input (bg-dark-bg border-white/10 text-white) with an Action Green submit button.
   • Live Demo Container:
     • Incorporate the existing shared/iphone_dialer partial concept.
     • Visual Constraint: Ensure the container holding the dialer maintains the md:rounded-[48px] “phone silhouette” style to match the existing component’s look and feel.
   • Feature Grid:
     • 3-column layout highlighting: “No Apps Required,” “Crystal Clear Audio,” and “Pay-as-you-go.”
     • Cards should use bg-dark-card or bg-white/5 with border border-white/10.

3. Technical Constraints:

   • Output pure HTML/ERB that can be pasted into app/views/pages/landing.html.erb.
   • Do NOT use hardcoded hex values. Use our Tailwind utility classes (e.g., text-gray-400, text-white, text-action-green).
   • Respect the application layout: the page will be rendered inside layouts/application.html.erb, so assume the shared navbar is present (or hide it if you prefer a dedicated landing layout).

4. Beta Access Form:

   • Build a simple form_with block for capturing the email.
   • Ensure input focus states match the existing app (focus:border-action-green focus:ring-action-green).

Deliverable: Provide the complete ERB code for app/views/pages/landing.html.erb.