Rwq3/style migration

frontend/src/components/AddRideButton/AddRideButton.tsx

@@ -3,7 +3,6 @@
 import { createEmptyRide } from '../../util/modelFixtures';
 import { RideType } from '@carriage-web/shared/types/ride';
 import { useRides } from '../../context/RidesContext';
-import buttonStyles from '../../styles/button.module.css';
 
 const AddRideButton: React.FC = () => {
   const [open, setOpen] = useState(false);
@@ -21,7 +20,7 @@
     setOpen(false);
   };
 
   const handleRideCreated = (newRide: RideType) => {
     refreshRides();
     setOpen(false);
   };
@@ -29,11 +28,8 @@
   return (
     <>
       <button
-        style={{
-          width: '8rem',
-        }}
         onClick={handleOpenModal}
-        className={`${buttonStyles.buttonLarge} ${buttonStyles.button} ${buttonStyles.buttonPrimary}`}
+        className="w-32 h-10 flex items-center justify-center cursor-pointer rounded text-base whitespace-nowrap pl-6 pr-6 border border-[#303030] bg-black text-white transition-all duration-100 hover:bg-[#333] active:bg-[#555]"
       >
         + Add ride
       </button>

frontend/src/components/AnalyticsOverview/AnalyticsOverview.tsx

@@ -1,4 +1,4 @@
 import React, { useEffect, useState } from 'react';
 import { TableData } from '../../types';
 import StatsBox, { StatsBoxProps } from './StatsBox';
 import {
@@ -7,7 +7,6 @@
   nightRide,
   noShow,
 } from '../../icons/analytics/index';
-import styles from './AnalyticsOverview.module.css';
 import { useEmployees } from '../../context/EmployeesContext';
 
 type AnalyticsOverviewProps = {
@@ -81,9 +80,9 @@
   }, [data, drivers, type]);
 
   return (
-    <div className={styles.analyticsOverview}>
-      <p className={styles.overviewName}>Overview [{label}]</p>
-      <div className={styles.statsContainer}>
+    <div className="inline-block w-full mb-8">
+      <p className="font-bold text-[1.2rem]">Overview [{label}]</p>
+      <div className="flex gap-6 items-center bg-white p-6 px-8 rounded-lg shadow-[0_4px_12px_rgba(0,0,0,0.1)]">
         {stats.map((stat, idx) => (
           <StatsBox key={idx} {...stat} />
         ))}

frontend/src/components/AnalyticsOverview/StatsBox.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styles from './StatsBox.module.css';
 
 export type ColorVariant = 'green' | 'gray' | 'red' | 'default';
 
@@ -12,38 +11,66 @@ export interface StatsBoxProps {
   variant?: ColorVariant;
 }
 
+const getVariantStyles = (variant: ColorVariant) => {
+  const iconBgMap: Record<ColorVariant, string> = {
+    green: 'bg-[rgba(34,197,94,0.1)]',
+    gray: 'bg-[rgba(107,114,128,0.1)]',
+    red: 'bg-[rgba(246,59,59,0.1)]',
+    default: 'bg-[rgba(0,0,0,0.04)]',
+  };
+  const statColorMap: Record<ColorVariant, string> = {
+    green: 'text-[#16a34a]',
+    gray: 'text-[#4b5563]',
+    red: 'text-[#eb2525]',
+    default: 'text-[#111827]',
+  };
+  return {
+    iconBg: iconBgMap[variant],
+    statColor: statColorMap[variant],
+  };
+};
+
 const StatsBox: React.FC<StatsBoxProps> = ({
   icon,
   alt,
   stats,
   description,
   className = '',
   variant = 'default',
-}) => (
-  <div className={`${styles.statsbox} ${styles[variant]} ${className}`}>
-    <div className={styles.left}>
-      {icon ? (
-        <div className={`${styles.iconWrapper} ${styles[`icon-${variant}`]}`}>
-          <img
-            className={styles.icon}
-            src={icon}
-            alt={alt}
-            width={40}
-            height={40}
+}) => {
+  const { iconBg, statColor } = getVariantStyles(variant);
+  return (
+    <div
+      className={`flex items-center p-5 px-6 min-w-45 bg-white rounded-lg transition-all duration-200 ${className}`}
+    >
+      <div className="flex items-center justify-center mr-4 shrink-0">
+        {icon ? (
+          <div
+            className={`rounded-full w-10 h-10 flex items-center justify-center ${iconBg} transition-all duration-200`}
+          >
+            <img
+              className="w-6 h-6 object-contain"
+              src={icon}
+              alt={alt}
+              width={40}
+              height={40}
+            />
+          </div>
+        ) : (
+          <div
+            className={`rounded-full w-10 h-10 flex items-center justify-center ${iconBg} transition-all duration-200`}
+            aria-hidden="true"
           />
-        </div>
-      ) : (
-        <div
-          className={`${styles.iconWrapper} ${styles[`icon-${variant}`]}`}
-          aria-hidden="true"
-        />
-      )}
-    </div>
-    <div className={styles.right}>
-      <p className={`${styles.stats} ${styles[`stats-${variant}`]}`}>{stats}</p>
-      <p className={styles.description}>{description}</p>
+        )}
+      </div>
+      <div className="flex flex-col items-center text-center w-full">
+        <p className={`text-2xl font-semibold m-0 leading-tight ${statColor}`}>
+          {stats}
+        </p>
+        <p className="text-sm text-[#6b7280] m-0 mt-1">{description}</p>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default StatsBox;

frontend/src/components/AnalyticsTable/AnalyticsTable.tsx

@@ -5,7 +5,6 @@ import { ObjectType, TableData } from '../../types';
 import { useEmployees } from '../../context/EmployeesContext';
 import editIcon from './edit.svg';
 import checkIcon from './check.svg';
-import styles from './analyticstable.module.css';
 import axios from '../../util/axios';
 
 type Cell = string | number;
@@ -44,14 +43,11 @@ const Row = ({ data, index, isEditing, onEdit }: RowProps) => {
   };
 
   return (
-    <tr
-      className={styles.row}
-      style={{ backgroundColor: index % 2 ? undefined : '#EBEAEA' }}
-    >
+    <tr style={{ backgroundColor: index % 2 ? undefined : '#EBEAEA' }}>
       {data.map((d, cellIndex) => (
         <td
           key={cellIndex}
-          className={styles.cell}
+          className="py-4.5 px-2 text-center"
           style={{ borderRadius: getBorderRadius(cellIndex, data.length) }}
         >
           {isEditing && cellIndex >= 2 ? ( // excluding first two columns
@@ -61,7 +57,7 @@ const Row = ({ data, index, isEditing, onEdit }: RowProps) => {
                 type="number"
                 min={0}
                 id={`${index}${cellIndex}`}
-                className={styles.input}
+                className="bg-[#f2f2f2] border border-black box-border rounded-[10px] text-center w-14 text-base"
                 defaultValue={d}
                 onInput={(e) => handleEdit(e, cellIndex)}
               />
@@ -204,9 +200,9 @@ const Table = ({ type, data, refreshTable }: TableProps) => {
   }, [data, driverNames, drivers, type]);
 
   return (
-    <div className={styles.analyticsTable}>
+    <div className="relative p-7.5 shadow-[2px_4px_15px_rgba(0,0,0,0.1)]">
       <button
-        className={styles.editBtn}
+        className="absolute top-5 right-8.5 border-none bg-none p-0"
         aria-label={!isEditing ? 'Edit' : 'Submit'}
         onClick={!isEditing ? () => setIsEditing(true) : handleSubmit}
       >
@@ -216,10 +212,10 @@ const Table = ({ type, data, refreshTable }: TableProps) => {
           <img src={checkIcon} alt="checkmark" />
         )}
       </button>
-      <div className={styles.tableContainer}>
-        <table className={styles.table}>
+      <div className="overflow-auto whitespace-nowrap">
+        <table className="w-full border-collapse">
           <thead>
-            <tr className={styles.row}>
+            <tr>
               {type === 'ride'
                 ? rideTableHeader.map((title, idx) => {
                     let color;
@@ -232,8 +228,8 @@ const Table = ({ type, data, refreshTable }: TableProps) => {
                     return (
                       <th
                         key={idx}
-                        className={cn(styles.cell, {
-                          [styles.sticky]: idx < 2,
+                        className={cn('py-4.5 px-2 text-center', {
+                          'sticky left-0': idx < 2,
                         })}
                         style={{ color }}
                       >
@@ -244,7 +240,9 @@ const Table = ({ type, data, refreshTable }: TableProps) => {
                 : driverTableHeader.map((title, idx) => (
                     <th
                       key={idx}
-                      className={cn(styles.cell, { [styles.sticky]: idx < 2 })}
+                      className={cn('py-4.5 px-2 text-center', {
+                        'sticky left-0': idx < 2,
+                      })}
                     >
                       {title}
                     </th>