Add standards legend to offset order page with proper positioning
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m23s

- Move StandardsLegend from calculator input page to OffsetOrder page
- Position after project cards and before offset amount slider
- Update Wren certification link to https://www.wren.co/certification
- Add vertical spacing (mb-8) below the dropdown for better layout
This commit is contained in:
Matt 2025-11-04 16:09:18 +01:00
parent ab096c6878
commit 848a8be995
3 changed files with 7 additions and 9 deletions

View File

@ -4,7 +4,6 @@ import { useState } from 'react';
import { TripCalculator } from '../src/components/TripCalculator'; import { TripCalculator } from '../src/components/TripCalculator';
import { QRCalculatorLoader } from '../src/components/QRCalculatorLoader'; import { QRCalculatorLoader } from '../src/components/QRCalculatorLoader';
import { OffsetOrder } from '../src/components/OffsetOrder'; import { OffsetOrder } from '../src/components/OffsetOrder';
import { StandardsLegend } from './StandardsLegend';
import { useHasQRData } from '../src/hooks/useQRDecoder'; import { useHasQRData } from '../src/hooks/useQRDecoder';
import type { VesselData } from '../src/types'; import type { VesselData } from '../src/types';
@ -74,11 +73,6 @@ export function CalculatorClient() {
onOffsetClick={handleOffsetClick} onOffsetClick={handleOffsetClick}
/> />
)} )}
{/* Standards Legend - Learn about Wren's offset standards */}
<div className="w-full">
<StandardsLegend />
</div>
</div> </div>
</div> </div>
); );

View File

@ -7,7 +7,7 @@ export function StandardsLegend() {
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
return ( return (
<div className="mt-8 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-6 border border-blue-200 print:hidden"> <div className="mt-8 mb-8 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-6 border border-blue-200 print:hidden">
{/* Header */} {/* Header */}
<button <button
onClick={() => setIsExpanded(!isExpanded)} onClick={() => setIsExpanded(!isExpanded)}
@ -145,7 +145,7 @@ export function StandardsLegend() {
{/* Learn More */} {/* Learn More */}
<div className="text-center"> <div className="text-center">
<a <a
href="https://www.wren.co/certification-standards" href="https://www.wren.co/certification"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline" className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline"

View File

@ -15,6 +15,7 @@ import { PortfolioDonutChart } from './PortfolioDonutChart';
import { getProjectColor } from '../utils/portfolioColors'; import { getProjectColor } from '../utils/portfolioColors';
import { CertificationBadge } from './CertificationBadge'; import { CertificationBadge } from './CertificationBadge';
import { useCalculatorState } from '../hooks/useCalculatorState'; import { useCalculatorState } from '../hooks/useCalculatorState';
import { StandardsLegend } from '../../components/StandardsLegend';
interface Props { interface Props {
tons: number; tons: number;
@ -464,6 +465,9 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
</motion.div> </motion.div>
</div> </div>
{/* Standards Legend - Learn about Wren's certification standards */}
<StandardsLegend />
{/* Offset Percentage Slider */} {/* Offset Percentage Slider */}
{!monetaryAmount && ( {!monetaryAmount && (
<motion.div <motion.div