OSP Projects

Tag: compliance

  • 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