OSP Projects

Tag: styling

  • Time Clock – Daily Changelog – October 2, 2025

    Time Clock – Daily Changelog – October 2, 2025

    Daily Changelog – October 2, 2025

    Improvements

    • Removed all video game and arcade aesthetic CSS from globals.css including neon effects, pixel animations, glitch effects, and arcade-themed classes
    • Eliminated Orbitron font family from tailwind config in favor of Inter and Alderwood typography
    • Reduced globals.css from 1073 lines to 115 lines by removing aggressive color override rules and simplifying design token system
    • Simplified color token system to use only gray-1 through gray-12 and two yellow accent variables (yellow-9, yellow-11) instead of full 12-shade palettes
    • Removed all CSS rules using !important that forced color conversions from blue/purple/cyan to yellow
    • Removed semantic color tokens (success, info, danger, alert, neutral) from CSS in favor of intentional Tailwind class usage in components
    • Updated @layer base styles to use Tailwind @apply directives for better consistency with design tokens
    • Removed glassmorphism effects from Card component in favor of solid backgrounds with subtle shadows
    • Simplified Card component from rounded-xl with backdrop-blur to clean rounded-lg with shadow-sm styling
    • Updated Button component to use clean minimal variants removing all semantic color options (info, success, danger, alert, neutral)
    • Removed arcade styling from Button component including shadow animations and active state transforms
    • Changed Button base class to use simple transition-colors instead of complex transition-all with duration
    • Rewrote StatusBadge component to use class-variance-authority with clean solid backgrounds instead of semi-transparent overlays
    • Updated StatusBadge variants to success, warning, error, neutral, and info with proper contrast ratios
    • Changed StatusBadge styling to pill-shaped (rounded-full) badges with consistent spacing and clean typography
    • Modernized homepage heading from arcade-style neon effect to clean professional greeting with simple date display
    • Simplified homepage stats cards with subtle gray icon backgrounds (bg-neutral/10) instead of bright colored circles
    • Reduced homepage hero section complexity removing uppercase styling, Orbitron font, and arcade status text
    • Streamlined homepage footer from multi-line status display to single version number line
    • Removed gradient background and backdrop filters from CustomNavbar in favor of clean solid background with subtle border
    • Reduced navbar height from h-20 to h-16 for more compact professional appearance
    • Simplified navbar hover states from bg-accent/60 to bg-muted/50 for subtler interaction feedback
    • Changed navbar link styling to use text-muted-foreground with hover:text-foreground instead of opacity-based colors
    • Updated admin console styling to use consistent muted backgrounds and simplified transitions
    • Removed duration-200 and transition-all animations from navbar in favor of simple transition-colors
    • Replaced arcade-card class with bg-card border border-border rounded-lg across 12 TSX files
    • Replaced arcade-btn class with px-4 py-2 rounded-md transition-colors button styling sitewide
    • Replaced arcade-loader class with standard animate-spin spinner implementation
    • Removed all neon-* classes (neon-cyan, neon-pink, neon-purple, neon-orange, neon-green) from entire codebase
    • Removed all pixel-* animation classes from components
    • Removed all glitch effect classes from headers and titles
    • Removed all Orbitron font-family inline styles from TSX files
    • Replaced arcadeStyles object in TimeEntryEditModal with clean styles object using standard Tailwind classes
    • Replaced arcadeStyles object in time-entry/new page with professional styles removing uppercase and tracking classes
    • Replaced arcadeStyles object in settings/pay-periods page with clean professional styling
    • Changed homepage greeting initialization from “TIME CLOCK ARCADE” to “Good Day”
    • Updated time-entry/new page header from “ADD NEW ENTRY” to “Add New Entry” with descriptive subtitle
    • Changed schedules/nexus page title from “[SCHEDULING ARCADE]” to “Schedule Nexus”
    • Replaced gaming color variables (neon-pink, neon-cyan gradients) with semantic theme colors (text-primary, text-info)
    • Updated TimeEntryEditModal title from “EDIT TIME ENTRY” to “Edit Time Entry” with reduced icon size
    • Simplified all loading states from arcade-themed to standard spinner with “Loading…” text
    • Removed “PERSONNEL TIME LOGGING SYSTEM” arcade-style subtitle in favor of plain English descriptions
    • Standardized all rounded corners from rounded-xl and rounded-2xl to consistent rounded-lg across all pages
    • Unified main container padding from py-8 to py-12 for consistent page spacing
    • Standardized card padding from p-8 to p-6 across all cards and panels
    • Changed grid gaps from gap-8 to gap-6 for more compact, professional layouts
    • Reduced large margins from mt-16 to mt-12 for better visual rhythm
    • Removed all backdrop-blur effects for cleaner, simpler card styling
    • Removed shadow-sm and shadow-xl in favor of simple border-based separation
    • Updated time-clock page to use container mx-auto px-4 py-12 max-w-7xl for consistent width
    • Changed employees page container padding from py-8 to py-12
    • Standardized payroll page grid from gap-8 to gap-6
    • Updated payroll card transition from transition-all duration-200 to simple transition-colors
    • Fixed error state layouts to use consistent container and card spacing
    • Ensured all section spacing uses mb-6, mb-8, or mb-12 from Tailwind scale
    • Standardized all page titles (h1) to text-3xl font-semibold across all pages
    • Changed section headings (h2) from text-2xl font-bold to text-xl font-semibold
    • Updated subsection headings (h3) from text-xl font-bold to text-lg font-semibold or text-base font-semibold
    • Replaced all font-bold with font-semibold for headings and labels (except display numbers)
    • Removed all uppercase text transforms for more natural, readable typography
    • Removed tracking-wide and tracking-wider letter-spacing for cleaner text
    • Fixed homepage h1 from text-4xl to text-3xl for consistency
    • Updated time-clock page h1 from text-2xl to text-3xl for proper hierarchy
    • Changed quick action labels from font-bold to font-medium
    • Standardized error messages and alerts to use font-semibold
    • Fixed text-muted-foreground900 typos to text-muted-foreground
    • Ensured proper text contrast with semantic foreground colors
    • Replaced standard Tailwind colors in button.tsx with brand colors (bg-red-600 → bg-[#8F4224], hover:bg-red-700 → hover:bg-[#7E371B])
    • Updated status-badge.tsx to use brand colors: success (#718F24), warning (#E5B919), error (#8F4224), info (#3978AC)
    • Fixed palette validation build errors by ensuring all background colors use approved brand hex values
    • Fixed syntax error in payroll/pay-periods/page.tsx by removing stray comma from style object
    • Fixed syntax error in schedules/nexus/page.tsx by removing stray comma from style object
    • Fixed syntax error in time-clock/page.tsx by adding missing closing div tag and fixing indentation
    • Updated StatusBadge variant from “alert” to “warning” in employee/components/ClockPanel.tsx
    • Changed StatusBadge variant from “alert” to “warning” in time-off-requests/page.tsx
    • Updated StatusBadge variant from “alert” to “warning” in entries/page.tsx for consistency
    • Changed Button variant from “error” to “destructive” in schedules/weekly-schedules/[weekStart]/page.tsx
    • Updated SemanticVariant type in variant-map.tsx from alert/danger to warning/error
    • Fixed statusToVariant function to return warning instead of alert for pending/paused statuses
    • Fixed priorityToVariant function to return error/warning instead of danger/alert
    • Updated getVariantIcon function to handle warning and error variants
    • Replaced all StatusBadge variant=”danger” with variant=”error” across entire codebase
    • Replaced all StatusBadge variant=”alert” with variant=”warning” across entire codebase
    • Fixed variant comparisons in entries/page.tsx to use warning/error instead of alert/danger
    • Updated sick-days page to use error/warning variants instead of danger/alert
    • Updated tasks page subtask badges to use error/warning variants
    • Removed withIcon prop from StatusBadge components (not supported by component)
    • Replaced all CSS color variables with warm palette from mama-tried-fulfillment app (#8F6624 primary, #E5B919 accent, #8F4224 destructive)
    • Updated light theme colors to use warm off-white (#FDFDFC) background with warm foreground (#120E07) for better color temperature
    • Updated dark theme colors to use warm dark brown backgrounds (#120E07, #1A1612) instead of cold grays
    • Changed muted backgrounds from gray (#eff0f3) to warm beige (#F4F3F1) for warmer overall appearance
    • Updated border colors from neutral gray (#d8d9e0) to warm tan (#D1CDC7) matching fulfillment app
    • Added primary color scale (100-900) to Tailwind config with warm amber/gold shades from fulfillment app
    • Added gray color scale (100-900) with warm gray tones matching fulfillment app palette
    • Updated Button component to match fulfillment app exactly with gap-2, svg sizing, and ring-offset-2 focus states
    • Changed Button hover states from opacity changes to bg-primary with opacity-90 for consistent warm feel
    • Added primary and success button variants to match fulfillment app button options
    • Updated Input component to match fulfillment app with file:text-foreground styling and responsive text sizing (text-base md:text-sm)
    • Changed Table wrapper from rounded-xl with backdrop-blur to rounded-md with solid bg-white/dark:bg-card matching fulfillment app
    • Updated Table default zebra striping to false to match cleaner fulfillment app table aesthetic
    • Changed TableRow hover state from hover:bg-muted to hover:bg-muted/50 for subtler interaction
    • Updated TableHeader and TableHead backgrounds from bg-muted/30 to full bg-muted for stronger header contrast
    • Changed container padding to match fulfillment app exactly (px-4 md:px-8 lg:px-16)
    • Updated navbar styling from backdrop-blur to solid bg-card with shadow-sm for cleaner appearance
    • Changed navbar padding to match fulfillment app container width system
    • Applied font-alderwood and text-primary to all major page headings for consistent brand typography
    • Updated EmployeePageHeader to use primary colors instead of info blue for brand consistency
    • Changed homepage greeting to use Alderwood font with primary color for warm branded appearance
    • Updated task management page title to use Alderwood font with primary color
    • Changed employee portal welcome header to use Alderwood font with primary color for brand identity
    • Fixed palette validation error by replacing bg-green-600/bg-green-700 with approved brand green colors (#718F24/#627E1B)
    • Updated Textarea component to match fulfillment app with responsive text sizing (text-base md:text-sm)
    • Updated Badge component variants to use approved brand colors from brand_colors.svg palette
    • Changed Badge warning variant to use Alert palette (#F7F0D4 light, #614D05 text, #F5E3A3 hover)
    • Updated Badge success variant to use Success palette (#F3F5F0 light, #42570F text, #D3DBBD hover)
    • Changed Badge info variant to use Info palette (#F0F3F5 light, #0F3757 text, #BDCEDB hover)
    • Updated Badge processing variant to use warm gray tones for neutral status indication
    • Added dark mode variants for all Badge colors maintaining brand palette consistency

    Notes

    • Design system now follows modern SaaS aesthetic similar to Linear, Vercel, and Notion with minimal styling and intentional color usage
    • Components now use proper Tailwind utilities and design tokens without fighting CSS override rules
    • Color decisions are now made at the component level rather than forced through global CSS overrides
    • All pages now use consistent spacing scale (p-4, p-6, gap-4, gap-6, mb-6, mb-8, mb-12) for professional rhythm
    • Container widths standardized with max-w-7xl for main content areas and max-w-6xl for centered grids
    • Spacing system creates breathable layouts with predictable visual hierarchy
    • Typography hierarchy now consistent: h1 (text-3xl font-semibold), h2 (text-xl font-semibold), h3 (text-lg/base font-semibold)
    • All uppercase transforms and excessive letter-spacing removed for natural readability
    • Font weights simplified to semibold for headings, medium for labels, normal for body text
    • Time Clock app now visually matches mama-tried-fulfillment app with identical color palette, warm temperature, and consistent component styling
    • Both apps share warm amber/gold primary colors (#8F6624), warm backgrounds, and Alderwood font for headers creating unified Orchard Street Press brand identity
    • Table styling now consistent between apps with clean borders, muted headers, and subtle hover states
    • Button and input components use identical styling patterns for seamless cross-app consistency
    • Container widths and padding match exactly between apps for unified layout experience
  • Deco Order Manager – Daily Changelog – September 30, 2025

    Deco Order Manager – Daily Changelog – September 30, 2025

    Changelog – September 30, 2025

    Email Communication System Implementation

    Overview

    Implemented comprehensive email communication system using Mailgun for user management workflows.

    New Features

    1. User Deletion

    • Added “Delete User” button to User Management page
    • Confirmation dialog to prevent accidental deletions
    • Permanently removes user and all associated data
    • Useful for cleaning up test accounts and unactivated users

    2. Email Integration with Mailgun

    • Integrated Mailgun email service using HTTP API
    • Created email service utility (/src/lib/email.ts)
    • Implemented three types of automated emails:
    Email Types:
    1. Signup Notification (Admin)
    • Sent to admin when new user signs up
    • Includes user details and link to user management
    • Helps admins quickly respond to new signups
    1. User Invitation Email
    • Sent when admin creates a new user account
    • Includes assigned stores and login link
    • Professional welcome message with HTML formatting
    1. Account Approval Email
    • Sent when admin activates a user account
    • Notifies user they can now access the system
    • Includes direct login link

    Technical Changes

    New Files

    • src/lib/email.ts – Email service with Mailgun integration
    • EMAIL_SETUP.md – Comprehensive email setup documentation
    • HEROKU_ENV_SETUP.md – Quick reference for Heroku configuration

    Modified Files

    • src/app/api/auth/signup/route.ts – Added admin notification email
    • src/app/api/admin/users/route.ts – Added invitation email on user creation
    • src/app/api/users/route.ts – Added approval email when user activated
    • src/app/dashboard/users/page.tsx – Added delete user functionality
    • package.json – Added mailgun.js and form-data dependencies

    New Dependencies

    • mailgun.js – Official Mailgun API client
    • form-data – Required for mailgun.js

    Environment Variables Required

    MAILGUN_API_KEY          # Provided by Heroku Mailgun addon
MAILGUN_DOMAIN           # Provided by Heroku Mailgun addon
MAILGUN_FROM_EMAIL       # Set manually: "Deco Order Manager <noreply@domain.com>"
ADMIN_EMAIL              # Set manually: admin email for notifications

    Setup Instructions

    1. Install Dependencies:
       npm install
    1. Configure Environment Variables on Heroku:
       heroku config:set ADMIN_EMAIL="your-admin@email.com"
   heroku config:set MAILGUN_FROM_EMAIL="Deco Order Manager <noreply@yourdomain.com>"
    1. Verify Mailgun Config:
       heroku config | grep MAILGUN
    1. Deploy:
       git add .
   git commit -m "Add email communication and user deletion"
   git push heroku main

    Testing

    1. Test Signup Email:
    • Visit signup page
    • Create a test account
    • Admin should receive notification email
    1. Test Invitation Email:
    • Log in as admin
    • Create a new user
    • Check new user’s email inbox
    1. Test Approval Email:
    • Log in as admin
    • Activate a pending user
    • Check user’s email inbox
    1. Test User Deletion:
    • Log in as admin
    • Go to User Management
    • Click “Delete User” on a test account
    • Confirm deletion

    Important Notes

    • Emails are sent asynchronously and won’t block user operations
    • Email failures are logged but don’t prevent user operations
    • Mailgun sandbox domains require recipient authorization
    • For production, verify a custom domain in Mailgun
    • All emails include both HTML and plain text versions

    Benefits

    1. Better User Experience:
    • Users know when their account is approved
    • New users receive proper onboarding
    • Clear communication at each step
    1. Improved Admin Workflow:
    • Instant notifications of new signups
    • Automated invitation emails save time
    • No manual communication needed
    1. Professional Image:
    • Branded email templates
    • Timely automated responses
    • Consistent communication

    Additional Updates (Later in Day)

    3. Mailgun Production Upgrade

    • Upgraded Mailgun from sandbox to production plan (50k emails/month)
    • Fixed email delivery issues by removing sandbox restrictions
    • Now supports sending to any email address

    4. Password Reset/Set Functionality

    • Implemented /api/auth/reset-password endpoint
    • Created /set-password page for users to set/reset passwords
    • Added “Forgot Password” link on login page
    • Includes password strength validation (12+ chars, uppercase, special char)

    5. User Invitation Workflow Simplification

    • Changed from creating accounts to sending invitation emails
    • Users now sign up normally with their own password
    • Simplified “Add User” dialog – only requires email address
    • Users fill in name, password, store name during their own signup
    • More secure and less admin overhead

    6. UI/UX Improvements

    • Fixed table hover states for both light and dark modes
    • Updated email branding from “Deco Order Manager” to “Orchard Street Press – Store Manager”
    • Improved invitation email content and formatting
    • Added proper CSS context awareness for theme switching

    7. Bug Fixes

    • Fixed syntax error in users table component
    • Resolved build failures from missing imports
    • Fixed email domain configuration issues
    • Corrected table hover visibility in dark mode

    Technical Files Updated

    • src/app/api/auth/reset-password/route.ts – New password reset endpoint
    • src/app/set-password/page.tsx – New password setting page
    • src/app/page.tsx – Added “Forgot Password” link
    • src/app/globals.css – Fixed table hover for both themes
    • src/lib/email.ts – Updated branding and invitation workflow
    • src/app/dashboard/users/page.tsx – Simplified user creation dialog

    Current Status

    ✅ Email system fully functional with production Mailgun
    ✅ Password reset/set functionality working
    ✅ User invitation workflow streamlined
    ✅ UI hover states fixed for all themes
    ✅ Branding consistent across login and emails
    ✅ All build errors resolved

    Next Steps (Optional Enhancements)

    • Store assignment notification emails
    • Order status notification emails
    • Weekly summary emails for admins
    • Email template customization interface
  • Deco Order Manager – Daily Changelog – September 29, 2025

    Deco Order Manager – Daily Changelog – September 29, 2025

    Daily Change Log – September 29, 2025

    Color Visibility & Accessibility Improvements

    Overview

    Comprehensive overhaul of the application’s color scheme to address visibility issues in both light and dark modes. All changes focused on improving contrast ratios, readability, and overall user experience.

    Files Modified

    • src/app/globals.css – Core color system updates
    • src/components/ui/button.tsx – Button component color improvements
    • src/components/ui/badge.tsx – Badge component color fixes
    • src/components/navbar.tsx – Status indicator color updates
    • src/app/dashboard/campaigns/[id]/page.tsx – Campaign details color fixes
    • src/app/dashboard/campaigns/[id]/verify/page.tsx – Verification page color improvements

    Key Changes

    1. Enhanced Color Contrast System

    • Light Mode Improvements:
    • Updated muted text from --osp-gray-600 to --osp-gray-700 for better readability
    • Enhanced border visibility with --osp-gray-400 instead of --osp-gray-300
    • Improved primary colors using --osp-primary-600 for stronger contrast
    • Enhanced secondary and status colors for better visibility
    • Dark Mode Overhaul:
    • Switched to midnight blue palette for background (--midnight-blue-950)
    • Used card background --midnight-blue-900 for better layering
    • Enhanced muted text with --midnight-blue-300 for improved contrast
    • Brightened accent colors (--osp-primary-400, --osp-blue-400) for dark backgrounds

    2. Global Table Styling Enhancements

    • Added comprehensive table styles with proper border collapse
    • Enhanced table headers with better background colors and font weights
    • Improved row hover states for better user interaction
    • Added consistent border styling using semantic color tokens

    3. Component Color Improvements

    • Button Components:
    • Fixed destructive button text to use --destructive-foreground instead of generic foreground
    • Enhanced outline button borders and focus states
    • Improved ghost button hover states
    • Badge Components:
    • Corrected destructive badge text colors for better contrast
    • Enhanced focus and hover states

    4. Semantic Color Token Migration

    Replaced all hardcoded color classes with semantic tokens:

    • bg-red-500 → bg-danger
    • text-red-600 → text-danger
    • bg-green-500 → bg-success
    • text-green-600 → text-success
    • bg-blue-500 → bg-info
    • text-blue-600 → text-info
    • bg-yellow-500 → bg-alert
    • text-yellow-600 → text-alert

    5. Enhanced Status Indicators

    • Updated scheduler status indicators in navbar to use semantic colors
    • Improved order status badges with proper contrast ratios
    • Enhanced error/success message styling throughout the application

    6. CSS Override System

    Added comprehensive CSS overrides for common color classes to ensure consistency:

    • Global text color overrides for better semantic color usage
    • Enhanced background color classes with proper transparency support
    • Improved hover and focus states across all interactive elements

    Technical Details

    Color Variables Updated

    /* Light Mode Enhancements */
--muted: var(--osp-gray-200);           /* Was: --osp-gray-100 */
--muted-foreground: var(--osp-gray-700); /* Was: --osp-gray-600 */
--primary: var(--osp-primary-600);      /* Was: --osp-primary-500 */
--border: var(--osp-gray-400);          /* Was: --osp-gray-300 */

/* Dark Mode Improvements */
--background: var(--midnight-blue-950); /* Was: --osp-gray-900 */
--card: var(--midnight-blue-900);       /* Was: --osp-gray-800 */
--muted: var(--midnight-blue-800);      /* Was: --osp-gray-700 */
--primary: var(--osp-primary-400);      /* Was: --osp-primary-500 */

    New CSS Rules Added

    • Enhanced table styling for better visibility
    • Improved button hover states
    • Semantic color class overrides
    • Better support for semi-transparent backgrounds using color-mix()

    Impact & Benefits

    • Accessibility: Improved contrast ratios meet WCAG guidelines
    • Consistency: Unified color system across all components
    • Maintainability: Centralized color management through semantic tokens
    • User Experience: Better visual hierarchy and readability
    • Theme Support: Enhanced dark mode with proper contrast ratios

    Testing Notes

    • No linting errors introduced
    • All semantic color tokens properly mapped
    • Button and badge components maintain proper contrast in both themes
    • Table styling enhanced without breaking existing layouts

    Future Considerations

    • Color system now easily extensible through CSS custom properties
    • Semantic tokens allow for easy theme variations
    • Global overrides ensure consistency even with legacy hardcoded classes
  • Time Clock – Daily Changelog – September 24, 2025

    Time Clock – Daily Changelog – September 24, 2025

    Daily Changelog – September 24, 2025 – little changes

    Fixes

    • Fixed dark header backgrounds in entries page by changing from bg-card to bg-muted2 for better light mode contrast
    • Fixed missing header backgrounds in employees page by changing from bg-card to bg-muted2 for better light mode visibility
    • Fixed dark header backgrounds in schedule pages by changing from bg-info to bg-muted2 for better light mode contrast
    • Fixed dark header backgrounds in shared table component by changing from bg-card to bg-muted2 for better light mode contrast across all tables

    Improvements

    • Improved light mode readability across entries, employees, and schedule pages with consistent header styling
    • Standardized header background tokens to use muted variants for better contrast in both light and dark modes
    • Created shared DepartmentHeader component to ensure all department headers use identical styling across the app
    • Removed alternating background colors from entries page that created visual inconsistency
    • Debugged color token system to identify why bg-muted wasn’t visible (very light yellow color)
  • Time Clock – Daily Changelog – September 18, 2025

    Time Clock – Daily Changelog – September 18, 2025

    Daily Changelog – September 18, 2025

    Fixes

    • Fixed missing calendar entries causing schedule generation failures by adding auto-creation of calendar entries in generateWeeklySchedulesRefactored function
    • Resolved “generate more weeks” functionality breaking when calendar entries don’t exist for future dates
    • Added defensive programming to schedule generation to automatically create missing calendar dates instead of failing
    • Fixed PTO requests API to return date fields as plain text strings using ::text casting to prevent timezone conversion of date-only values
    • Resolved date display issues where manual PTO requests showed incorrect dates due to UTC timestamp conversion in API layer

    Improvements

    • Enhanced schedule generation robustness by ensuring calendar entries exist before attempting to generate schedules
    • Added automatic calendar entry creation for any missing dates during schedule generation process
    • Cleaned up import modal styling by removing unprofessional emojis and fixing contrast issues with yellow file upload button
    • Improved schedule page layout with proper button grouping, spacing between header and content, and better department section separation
    • Fixed cramped UI elements across multiple pages by adding appropriate gaps and breathing room
    • Enhanced payroll export page to automatically select the most recent relevant pay period instead of defaulting to blank selection
    • Fixed payroll export SQL GROUP BY error by adding missing columns to GROUP BY clause
    • Added CSV export functionality to payroll export API with proper Content-Disposition headers for file downloads
    • Simplified payroll export query to resolve complex recursive CTE issues causing data retrieval failures
    • Added defensive programming to payroll export frontend to handle non-numeric values with Number() conversion