Merge pull request #60 from theredmoose/feature/green-theme-redesign

Green theme redesign + mobile UX improvements

Author: theredmoose

src/App.tsx

@@ -252,27 +252,28 @@ function App() {
       default: // 'family'
         return (
           <div className="flex flex-col min-h-0 flex-1">
-            {/* Blue app header */}
-            <div className="px-6 py-4 bg-blue-700 border-b border-blue-800 shadow-sm flex items-center justify-between">
-              <div>
-                <h1 className="text-lg font-black text-white tracking-tight">Gear Guru</h1>
-                <p className="text-blue-200 text-xs">Sports equipment sizing</p>
-              </div>
-              <div className="flex items-center gap-3">
-                <span className="text-blue-200 text-xs truncate max-w-[100px]">
-                  {user.displayName || user.email}
-                </span>
+            {/* App header */}
+            <div className="px-6 bg-white border-b border-slate-100 shadow-sm">
+              {/* spacing row above */}
+              <div className="h-5" />
+              {/* centered logo row */}
+              <div className="flex items-center justify-center relative">
+                <h1 className="text-xl font-black text-slate-900 tracking-tighter uppercase text-center">
+                  Gear <span style={{ color: '#008751' }}>Guru</span>
+                </h1>
                 <button
                   onClick={() => setView('settings')}
-                  className="p-1.5 hover:bg-blue-600 rounded-full transition-colors"
+                  className="absolute right-0 p-3 bg-slate-50 border border-slate-100 rounded-2xl text-emerald-700 shadow-sm hover:bg-white transition-all"
                   aria-label="Open settings"
                 >
-                  <Settings className="w-5 h-5 text-white" />
+                  <Settings className="w-5 h-5" />
                 </button>
               </div>
+              {/* spacing row below */}
+              <div className="h-5" />
             </div>
 
-            <div className="flex-1 overflow-y-auto bg-white px-6 py-6">
+            <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 py-6">
               {loading && <p className="loading">Loading...</p>}
               {error && <p className="error-state">{getOperationErrorMessage(error, 'load')}</p>}
 

src/components/BottomNav.tsx

@@ -16,19 +16,19 @@ const TABS: { id: TopLevelTab; label: string; Icon: React.ElementType }[] = [
 
 export function BottomNav({ activeTab, onChange }: BottomNavProps) {
   return (
-    <div className="bg-blue-700 border-t border-blue-800 px-4 py-3 flex justify-between items-center rounded-t-3xl shadow-[0_-8px_20px_-5px_rgba(0,0,0,0.2)]">
+    <div className="bg-white border-t border-slate-100 px-8 py-5 flex justify-between items-center shadow-[0_-4px_20px_-5px_rgba(0,0,0,0.08)]">
       {TABS.map(({ id, label, Icon }) => {
         const active = activeTab === id;
         return (
           <button
             key={id}
             onClick={() => onChange(id)}
-            className={`flex flex-col items-center gap-1 transition-all min-w-[56px] ${
-              active ? 'text-white scale-110' : 'text-blue-300 opacity-70 hover:opacity-100'
+            className={`flex flex-col items-center gap-2 transition-all min-w-[56px] ${
+              active ? 'text-[#008751] scale-110' : 'text-slate-300 hover:text-emerald-400'
             }`}
           >
             <Icon className="w-6 h-6" />
-            <span className="text-[10px] font-bold">{label}</span>
+            <span className="text-[10px] font-black uppercase tracking-tighter">{label}</span>
           </button>
         );
       })}

src/components/GearCard.tsx

@@ -64,7 +64,7 @@ export function GearCard({
 
   return (
     <div
-      className="gear-card bg-white border border-slate-200 rounded-2xl p-3.5 flex items-center gap-3 shadow-sm hover:shadow-md active:scale-[0.98] transition-all cursor-pointer mb-3"
+      className="gear-card bg-white border border-slate-200 rounded-3xl p-3.5 flex items-center gap-3 shadow-sm hover:shadow-md active:scale-[0.98] transition-all cursor-pointer mb-3"
       onClick={() => onEdit(item)}
     >
       {/* Icon tile or photo */}
@@ -159,7 +159,7 @@ export function GearCard({
       {/* Actions */}
       <div className="flex flex-col gap-1 flex-shrink-0">
         <button
-          className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors text-slate-400 hover:text-blue-600"
+          className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors text-slate-400 hover:text-[#008751]"
           onClick={handleEdit}
           aria-label="Edit gear"
         >

src/components/GearInventory.tsx

@@ -44,17 +44,17 @@ export function GearInventory({
 
   return (
     <div className="flex flex-col min-h-0 flex-1">
-      {/* Blue app header */}
-      <div className="px-6 py-4 bg-blue-700 border-b border-blue-800 shadow-sm flex items-center gap-3">
+      {/* Header */}
+      <div className="px-6 py-4 bg-white border-b border-slate-100 shadow-sm flex items-center gap-3">
         <button
-          className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-blue-600 transition-colors text-white flex-shrink-0"
+          className="p-3 bg-slate-50 border border-slate-100 rounded-2xl text-emerald-700 shadow-sm hover:bg-white transition-all flex-shrink-0"
           onClick={onBack}
           aria-label="Back"
         >
           <ChevronLeft className="w-5 h-5" />
           <span className="sr-only">← Home</span>
         </button>
-        <h1 className="text-lg font-black text-white tracking-tight flex-1">Family Gear</h1>
+        <h1 className="text-base font-black text-slate-900 uppercase tracking-tight flex-1">Family Gear</h1>
       </div>
 
       {/* Filter bar */}
@@ -66,7 +66,7 @@ export function GearInventory({
           id="owner-filter"
           value={filterOwnerId}
           onChange={(e) => setFilterOwnerId(e.target.value)}
-          className="flex-1 text-sm font-bold text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
+          className="flex-1 text-sm font-bold text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#008751]/30"
         >
           <option value="all">All Members</option>
           {members.map((member) => (
@@ -78,7 +78,7 @@ export function GearInventory({
       </div>
 
       {/* Content */}
-      <div className="flex-1 overflow-y-auto bg-white px-6 py-4">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 py-6">
         {filteredItems.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 gap-4">
             <p className="text-slate-400 font-bold text-sm">No gear found.</p>
@@ -102,7 +102,7 @@ export function GearInventory({
                     {member.name}
                   </h2>
                   <button
-                    className="text-xs font-bold text-blue-600 hover:text-blue-800 transition-colors"
+                    className="text-xs font-bold text-[#008751] hover:text-emerald-800 transition-colors"
                     onClick={() => onAddGear(member.id)}
                   >
                     + Add

src/components/MeasureScreen.tsx

@@ -12,7 +12,7 @@ export function MeasureScreen({ members, onSelectMember }: MeasureScreenProps) {
   return (
     <div className="flex flex-col min-h-0 flex-1">
       <ScreenHeader title="Measure" />
-      <div className="flex-1 overflow-y-auto bg-white px-6 py-6">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 py-6">
         <p className="text-[11px] text-slate-400 font-bold uppercase tracking-widest mb-4">
           Select a member to update measurements
         </p>
@@ -22,7 +22,7 @@ export function MeasureScreen({ members, onSelectMember }: MeasureScreenProps) {
             No family members yet. Add someone on the Family tab.
           </p>
         ) : (
-          <div className="space-y-3">
+          <div className="space-y-4">
             {members.map((member) => {
               const { measurements } = member;
               const showWarning = shouldWarnGrowth(member);
@@ -37,11 +37,13 @@ export function MeasureScreen({ members, onSelectMember }: MeasureScreenProps) {
                 <button
                   key={member.id}
                   onClick={() => onSelectMember(member)}
-                  className="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 flex items-center justify-between shadow-sm hover:shadow-md active:scale-[0.98] transition-all text-left"
+                  className="w-full bg-slate-50 border border-slate-100 rounded-3xl p-4 flex items-center justify-between shadow-sm hover:shadow-md active:scale-[0.98] transition-all text-left"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-full bg-blue-700 flex items-center justify-center text-white font-black text-lg">
-                      {member.name.charAt(0).toUpperCase()}
+                    <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-50 to-slate-100 border border-slate-100 flex items-center justify-center flex-shrink-0">
+                      <span className="text-xl font-black text-[#008751] select-none">
+                        {member.name.charAt(0).toUpperCase()}
+                      </span>
                     </div>
                     <div>
                       <p className="text-sm font-black text-slate-900">
@@ -53,7 +55,7 @@ export function MeasureScreen({ members, onSelectMember }: MeasureScreenProps) {
                       </p>
                     </div>
                   </div>
-                  <span className="text-[10px] font-black text-blue-700 uppercase tracking-widest">
+                  <span className="text-[10px] font-black text-[#008751] uppercase tracking-widest">
                     Edit →
                   </span>
                 </button>

src/components/MemberCard.tsx

@@ -45,13 +45,13 @@ export function MemberCard({ member, onSelect, onEdit, onDelete }: MemberCardPro
 
   return (
     <div
-      className="bg-white border border-slate-200 rounded-2xl p-4 flex items-center justify-between shadow-sm hover:shadow-md active:scale-[0.98] transition-all cursor-pointer mb-3"
+      className="bg-white border border-slate-200 rounded-3xl p-4 flex items-center justify-between shadow-sm hover:shadow-md active:scale-[0.98] transition-all cursor-pointer mb-3"
       onClick={() => onSelect(member)}
     >
       <div className="flex items-center gap-3">
         {/* Avatar */}
-        <div className="w-11 h-11 rounded-full bg-blue-700 flex items-center justify-center flex-shrink-0">
-          <span className="text-lg font-black text-white">
+        <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-50 to-slate-100 border border-slate-100 flex items-center justify-center flex-shrink-0">
+          <span className="text-2xl font-black text-[#008751] select-none">
             {member.name.charAt(0).toUpperCase()}
           </span>
         </div>
@@ -71,7 +71,7 @@ export function MemberCard({ member, onSelect, onEdit, onDelete }: MemberCardPro
       {/* Actions */}
       <div className="flex items-center gap-1">
         <button
-          className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors text-slate-400 hover:text-blue-600"
+          className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors text-slate-400 hover:text-[#008751]"
           onClick={handleEdit}
           aria-label="Edit member"
         >