Merge pull request #87 from bsychen/fix/tabbed-info

freddien03 · web-flow · commit 3bb7ac8e820e · 2025-06-17T17:56:51.000+01:00
Fix/tabbed info
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -53,7 +53,10 @@ const SearchResult = memo(({ product, onSelect }: { product: ProductSearchResult
         className="text-xs"
         style={{ color: colours.text.muted }}
       >
-        ID: {product.id}
+        <span className="font-semibold">
+           {product.brandName}
+        </span>
+       
       </div>
     </Link>
   );
diff --git a/src/components/CreatePostModal.tsx b/src/components/CreatePostModal.tsx
diff --git a/src/components/PriceSpectrum.tsx b/src/components/PriceSpectrum.tsx
@@ -6,9 +6,9 @@ import { colours } from '@/styles/colours';
 const getPositionColor = (price: number, q1: number, q3: number) => {
   if (price <= q1) {
     return {
-      bg: colours.status.success.background,
+      bg: `${colours.status.success.border}80`, // Green with transparency
       border: colours.status.success.border,
-      text: colours.status.success.text
+      text: colours.button.success.text
     };
   } else if (price >= q3) {
     return {
@@ -51,13 +51,11 @@ const PriceSpectrum: React.FC<PriceSpectrumProps> = ({
   const getPrice = (p: Product) => p.price || p.expectedPrice || 0;
   const productPrice = getPrice(product);
 
-  // If no real prices available, use sample data
+  // If no real prices available, show simple message
   if (productPrice === 0) {
     return (
-      <div className="w-full h-24 flex items-center justify-center text-sm rounded-lg" style={{ 
-        color: colours.text.muted, 
-        backgroundColor: colours.background.secondary,
-        border: `1px solid ${colours.card.border}`
+      <div className="w-full h-24 flex items-center justify-center text-sm" style={{ 
+        color: colours.text.secondary
       }}>
         Price data unavailable
       </div>
@@ -125,40 +123,40 @@ const PriceSpectrum: React.FC<PriceSpectrumProps> = ({
           }}
         >
           {/* Product box with shadow and border */}
-          <div className="rounded-md shadow-xl px-2 py-1 mb-1" style={{
+          <div className="rounded-full shadow-lg px-2 py-1 mb-1 border-2 border-black" style={{
             backgroundColor: colors.bg,
-            border: `1px solid ${colors.border}`
+            borderColor: colors.border
           }}>
             <div className="text-xs font-medium whitespace-nowrap" style={{ color: colors.text }}>
               £{productPrice.toFixed(2)}
             </div>
           </div>
           {/* Triangle pointer */}
           <div 
-            className="w-0 h-0 border-l-[6px] shadow-xl border-l-transparent border-r-[6px] border-r-transparent border-t-[6px]"
+            className="w-0 h-0 border-l-[5px] shadow-lg border-l-transparent border-r-[5px] border-r-transparent border-t-[5px]"
             style={{ borderTopColor: colors.border }}
           />
         </div>          
         {/* Price labels with buttons */}
-        <div className="absolute -bottom-6 left-[0%]">
+        <div className="absolute -bottom-4 left-[0%]">
           <button 
-            className="rounded-md shadow-xl px-2 py-1 text-xs font-medium transition-colors"
+            className="rounded-full shadow-lg px-2 py-1 text-xs font-medium transition-colors border-2 border-dotted"
             style={{
-              backgroundColor: colours.status.success.background,
-              border: `2px solid ${colours.status.success.border}`,
-              color: colours.status.success.text
+              backgroundColor: `${colours.status.success.border}50`, // 30% opacity for transparency
+              borderColor: colours.status.success.border,
+              color: colours.button.success.text
             }}
             onClick={onMinClick}
           >
             £{priceStats.min.toFixed(2)}
           </button>
         </div>
-        <div className="absolute -bottom-6 right-[0%]">
+        <div className="absolute -bottom-4 right-[0%]">
           <button 
-            className="rounded-md shadow-xl px-2 py-1 text-xs font-medium transition-colors"
+            className="rounded-full shadow-lg px-2 py-1 text-xs font-medium transition-colors border-2 border-dotted"
             style={{
-              backgroundColor: colours.status.error.background,
-              border: `2px solid ${colours.status.error.border}`,
+              backgroundColor: `${colours.status.error.background}50`, // 30% opacity for transparency
+              borderColor: colours.status.error.border,
               color: colours.status.error.text
             }}
             onClick={onMaxClick}
diff --git a/src/components/TabbedInfoBox.tsx b/src/components/TabbedInfoBox.tsx
@@ -225,14 +225,14 @@ const TabbedInfoBox: React.FC<TabbedInfoBoxProps> = ({
   useEffect(() => {
     if (isCollapsed) {
       // When collapsed, only show the tabs height (no margin below)
-      setBoxHeight(30); // Just the tab height without bottom margin
+      setBoxHeight(28); // Just the tab height without bottom margin
     } else if (contentRef.current) {
       // When expanded, calculate content height
       const newHeight = contentRef.current.scrollHeight;
       
       // Use requestAnimationFrame to ensure smooth height transition
       requestAnimationFrame(() => {
-        setBoxHeight(newHeight + 50); // Add tab height
+        setBoxHeight(newHeight + 40); // Add tab height
       });
     }
   }, [activeTab, product, reviewSummary, showMinProduct, showMaxProduct, isCollapsed, calculateBrandStats]);
@@ -271,19 +271,19 @@ const TabbedInfoBox: React.FC<TabbedInfoBoxProps> = ({
 
   return (
     <div
-      className="w-full max-w-xl mt-8 rounded-2xl shadow-lg border-2 border-black p-3 transition-colors duration-300"
+      className="w-full max-w-xl mt-8 rounded-2xl shadow-lg border-2 border-black p-2 transition-colors duration-300"
       style={{
         backgroundColor: getCategoryBackground(),
         border: `2px solid ${colours.content.border}`,
-        height: boxHeight ? boxHeight + 32 : undefined,
-        minHeight: isCollapsed ? 40 : 280,
+        height: boxHeight ? boxHeight + 24 : undefined,
+        minHeight: isCollapsed ? 36 : 260,
         transition: "height 0.4s cubic-bezier(0.4,0,0.2,1), background-color 0.3s ease",
         position: "relative"
       }}
     >
       {/* Tab Headers */}
       <div 
-        className={`flex ${isCollapsed ? 'mb-0' : 'mb-4'} ${!isCollapsed ? 'border-b' : ''} justify-center gap-2 relative`}
+        className={`flex ${isCollapsed ? 'mb-0' : 'mb-2'} ${!isCollapsed ? 'border-b' : ''} justify-center gap-2 relative`}
         style={{ borderColor: isCollapsed ? 'transparent' : colours.content.border }}
       >
         {/* Sliding  Bar - only show when expanded */}
@@ -327,7 +327,7 @@ const TabbedInfoBox: React.FC<TabbedInfoBoxProps> = ({
       {!isCollapsed && (
         <div 
           ref={contentRef} 
-          className="relative px-4 pb-4"
+          className="relative px-3 pb-3"
           style={{ 
             opacity: 1, 
             transition: 'opacity 0.2s ease-in-out, height 0.3s ease-in-out'
diff --git a/src/components/tabs/BrandTabContent.tsx b/src/components/tabs/BrandTabContent.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import { Product } from "@/types/product";
 import { colours } from "@/styles/colours";
 
@@ -134,41 +135,71 @@ const BrandTabContent: React.FC<BrandTabContentProps> = ({
             <div className="w-full">
               <div className="space-y-3">
                 {[
-                  { label: 'Price', value: calculateBrandStats.price, color: '#ECCC36' },
-                  { label: 'Quality', value: calculateBrandStats.quality, color: '#D24330' },
-                  { label: 'Nutrition', value: calculateBrandStats.nutrition, color: '#3b82f6' },
-                  { label: 'Sustainability', value: calculateBrandStats.sustainability, color: '#309563' }
-                ].map((stat, index) => (
-                  <div key={stat.label} className="flex items-center gap-3">
-                    <span 
-                      className="text-xs font-medium w-20 text-right"
-                      style={{ color: colours.text.secondary }}
-                    >
-                      {stat.label}
-                    </span>
-                    <div className="flex-1 max-w-24">
-                      <div 
-                        className="flex items-center h-4 rounded-full overflow-hidden"
-                        style={{ backgroundColor: colours.content.surfaceSecondary }}
-                      >
-                        <div
-                          className="h-full rounded-full transition-all duration-1000 ease-out opacity-0 animate-fade-in"
+                  { 
+                    label: 'Price', 
+                    value: calculateBrandStats.price, 
+                    color: '#fef3c7', // yellow-100
+                    svg: '/pound-svgrepo-com.svg' 
+                  },
+                  { 
+                    label: 'Quality', 
+                    value: calculateBrandStats.quality, 
+                    color: '#fee2e2', // red-100
+                    svg: '/quality-supervision-svgrepo-com.svg' 
+                  },
+                  { 
+                    label: 'Nutrition', 
+                    value: calculateBrandStats.nutrition, 
+                    color: '#dbeafe', // blue-100
+                    svg: '/meal-svgrepo-com.svg' 
+                  },
+                  { 
+                    label: 'Sustainability', 
+                    value: calculateBrandStats.sustainability, 
+                    color: '#ecfccb', // lime-100
+                    svg: '/leaf-svgrepo-com.svg' 
+                  }
+                ].map((stat, index) => {
+                  const percentage = ((stat.value - 1) / 4) * 100;
+                  return (
+                    <div key={stat.label} className="flex items-center gap-3">
+                      <Image 
+                        src={stat.svg} 
+                        alt={stat.label} 
+                        width={16} 
+                        height={16} 
+                        className="flex-shrink-0"
+                        style={{ color: colours.text.secondary }}
+                      />
+                      <div className="flex-1">
+                        <div 
+                          className="relative rounded-lg overflow-hidden"
                           style={{
-                            width: `${(stat.value / 5) * 100}%`,
-                            backgroundColor: stat.color,
-                            animationDelay: `${0.3 + index * 0.1}s`
+                            backgroundColor: colours.bargraph.background,
+                            border: `2px dotted ${colours.card.border}30`,
+                            height: '28px',
                           }}
-                        />
+                        >
+                          <div 
+                            className="transition-all duration-1000 ease-out absolute inset-0 rounded-lg opacity-0 animate-fade-in"
+                            style={{ 
+                              width: `${percentage}%`,
+                              backgroundColor: stat.color,
+                              border: `2px solid ${colours.card.border}`,
+                              animationDelay: `${0.3 + index * 0.1}s`
+                            }}
+                          />
+                        </div>
                       </div>
+                      <span 
+                        className="text-xs font-medium w-8 text-right flex-shrink-0"
+                        style={{ color: colours.text.primary }}
+                      >
+                        {stat.value.toFixed(1)}
+                      </span>
                     </div>
-                    <span 
-                      className="text-xs font-medium w-8"
-                      style={{ color: colours.text.primary }}
-                    >
-                      {stat.value.toFixed(1)}
-                    </span>
-                  </div>
-                ))}
+                  );
+                })}
               </div>
               <div 
                 className="text-xs mt-3 text-center"
diff --git a/src/components/tabs/NutritionTabContent.tsx b/src/components/tabs/NutritionTabContent.tsx
@@ -49,15 +49,15 @@ const NutritionTabContent: React.FC<NutritionTabContentProps> = ({
                 borderColor: (() => {
                   const score = animatedNutrition;
                   const grade = product.combinedNutritionGrade;
-                  if (!grade) return colours.text.muted; // Grey for missing nutriscore
+                  if (!grade || grade === 'unknown') return colours.text.muted; // Grey for missing/unknown nutriscore
                   if (score <= 2) return colours.score.low;
                   if (score <= 3) return colours.score.medium;
                   return colours.score.high;
                 })(),
                 backgroundColor: (() => {
                   const score = animatedNutrition;
                   const grade = product.combinedNutritionGrade;
-                  if (!grade) return colours.text.muted + '20'; // Grey for missing nutriscore
+                  if (!grade || grade === 'unknown') return colours.text.muted + '20'; // Grey for missing/unknown nutriscore
                   if (score <= 2) return colours.score.low + '20'; // 20% opacity
                   if (score <= 3) return colours.score.medium + '20';
                   return colours.score.high + '20';
@@ -72,14 +72,18 @@ const NutritionTabContent: React.FC<NutritionTabContentProps> = ({
                     stroke={(() => {
                       const score = animatedNutrition;
                       const grade = product.combinedNutritionGrade;
-                      if (!grade) return colours.text.muted; // Grey for missing nutriscore
+                      if (!grade || grade === 'unknown') return colours.text.muted; // Grey for missing/unknown nutriscore
                       if (score <= 2) return colours.score.low;
                       if (score <= 3) return colours.score.medium;
                       return colours.score.high;
                     })()}
                     strokeWidth="3"
                     strokeDasharray={Math.PI * 2 * 18}
-                    strokeDashoffset={Math.PI * 2 * 18 * (1 - (animatedNutrition / 5))}
+                    strokeDashoffset={Math.PI * 2 * 18 * (1 - (() => {
+                      const grade = product.combinedNutritionGrade;
+                      if (!grade || grade === 'unknown') return 0; // No fill for missing/unknown nutriscore
+                      return animatedNutrition / 5;
+                    })())}
                     strokeLinecap="round"
                     style={{
                       transition: 'stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1), stroke 0.7s cubic-bezier(0.4,0,0.2,1)',
@@ -95,14 +99,18 @@ const NutritionTabContent: React.FC<NutritionTabContentProps> = ({
                       color: (() => {
                         const score = animatedNutrition;
                         const grade = product.combinedNutritionGrade;
-                        if (!grade) return colours.text.muted; // Grey for missing nutriscore
+                        if (!grade || grade === 'unknown') return colours.text.muted; // Grey for missing/unknown nutriscore
                         if (score <= 2) return colours.score.low;
                         if (score <= 3) return colours.score.medium;
                         return colours.score.high;
                       })()
                     }}
                   >
-                    {product.combinedNutritionGrade?.toUpperCase() || '--'}
+                    {(() => {
+                      const grade = product.combinedNutritionGrade;
+                      if (!grade || grade === 'unknown') return '--';
+                      return grade.toUpperCase();
+                    })()}
                   </span>
                 </div>
               </span>
diff --git a/src/components/tabs/PriceTabContent.tsx b/src/components/tabs/PriceTabContent.tsx
@@ -45,7 +45,14 @@ const PriceTabContent: React.FC<PriceTabContentProps> = ({
       >
         Price Range
       </h2>
-      <div className="w-full opacity-0 animate-slide-in-bottom" style={{ animationDelay: '0.15s' }}>
+      <div 
+        className="w-full p-4 sm:p-5 rounded-xl border-2 mb-4 opacity-0 animate-slide-in-bottom" 
+        style={{ 
+          animationDelay: '0.15s',
+          backgroundColor: '#f1f5fb', // baby blue
+          borderColor: colours.content.border
+        }}
+      >
         <PriceSpectrum 
           product={product} 
           priceStats={priceStats}
diff --git a/src/components/tabs/QualityTabContent.tsx b/src/components/tabs/QualityTabContent.tsx
@@ -34,13 +34,13 @@ const QualityTabContent: React.FC<QualityTabContentProps> = ({
               className="text-lg font-medium"
               style={{ color: colours.text.primary }}
             >
-              Quality Score
+                Average Score
             </span>
             <span 
               className="text-[10px]"
               style={{ color: colours.text.muted }}
             >
-              Based on user reviews and ratings
+              Based on user review ratings
             </span>
           </div>
           <div className="flex-shrink-0">
@@ -124,17 +124,12 @@ const QualityTabContent: React.FC<QualityTabContentProps> = ({
                       {count}
                     </span>
                     <div
-                      className="rounded w-6 transition-all duration-700 animate-bar-grow"
+                      className="rounded w-6 transition-all duration-700 animate-bar-grow border-2"
                       style={{ 
                         height: `${height}px`, 
                         transition: 'height 0.7s cubic-bezier(0.4,0,0.2,1), background-color 0.3s ease',
-                        backgroundColor: colours.score.medium
-                      }}
-                      onMouseEnter={(e) => {
-                        e.currentTarget.style.backgroundColor = colours.score.high
-                      }}
-                      onMouseLeave={(e) => {
-                        e.currentTarget.style.backgroundColor = colours.score.medium
+                        backgroundColor: colours.status.warning.background + '80', // 80% opacity like filled stars
+                        borderColor: colours.status.warning.background,
                       }}
                     />
                     <span 
diff --git a/src/components/tabs/SustainabilityTabContent.tsx b/src/components/tabs/SustainabilityTabContent.tsx
diff --git a/src/utils/allergens.ts b/src/utils/allergens.ts
