Optimize mobile listings and depth iconography

frontend/src/components/AdvancedDiveProfileChart.jsx

@@ -11,7 +11,6 @@ import {
   X,
   Contrast,
   Upload,
-  TrendingUp,
   Loader2,
   Wind,
 } from 'lucide-react';
@@ -34,6 +33,8 @@ import api from '../api';
 import { useResponsive } from '../hooks/useResponsive';
 import { formatGases } from '../utils/textHelpers';
 
+import DepthIcon from './ui/DepthIcon';
+
 /**
  * Custom Tooltip component for the chart
  */
@@ -713,17 +714,15 @@ const AdvancedDiveProfileChart = ({
               </span>
             </div>
             <div className='flex items-center gap-2'>
-              <TrendingUp
-                className={`${isMobileLandscape ? 'h-3 w-3' : 'h-5 w-5'} text-blue-500`}
-              />
+              <DepthIcon className='text-divemap-blue' size={isMobileLandscape ? 14 : 22} />
               <span
                 className={`${isMobileLandscape ? 'text-xs' : 'text-sm'} font-medium text-gray-700`}
               >
                 Max: {metrics.maxDepth.toFixed(1)}m
               </span>
             </div>
             <div className='flex items-center gap-2'>
-              <TrendingUp className={`${isMobileLandscape ? 'h-3 w-3' : 'h-5 w-5'} text-red-500`} />
+              <DepthIcon className='text-red-500' size={isMobileLandscape ? 14 : 22} />
               <span
                 className={`${isMobileLandscape ? 'text-xs' : 'text-sm'} font-medium text-gray-700`}
               >

frontend/src/components/DiveInfoGrid.jsx

@@ -1,11 +1,12 @@
 import { Row, Col } from 'antd';
 import { Grid } from 'antd-mobile';
-import { Calendar, Clock, Eye, TrendingUp, User, Notebook, Wind, Droplets } from 'lucide-react';
+import { Calendar, Clock, Eye, User, Notebook, Wind, Droplets } from 'lucide-react';
 import React from 'react';
 
 import { getTagColor } from '../utils/tagHelpers';
 import { formatGases } from '../utils/textHelpers';
 
+import DepthIcon from './ui/DepthIcon';
 import DifficultyBadge from './ui/DifficultyBadge';
 
 const DiveInfoGrid = ({ dive, hasDeco, isMobile, formatDate, formatTime }) => {
@@ -122,7 +123,7 @@ const DiveInfoGrid = ({ dive, hasDeco, isMobile, formatDate, formatTime }) => {
                   Max Depth
                 </span>
                 <div className='flex items-center gap-1.5'>
-                  <TrendingUp className='w-4 h-4 text-blue-500' />
+                  <DepthIcon className='text-divemap-blue' size={18} />
                   <span className='text-sm font-bold text-gray-900'>
                     {dive.max_depth || '-'}
                     <span className='text-xs font-normal text-gray-400 ml-0.5'>m</span>
@@ -257,7 +258,7 @@ const DiveInfoGrid = ({ dive, hasDeco, isMobile, formatDate, formatTime }) => {
                     Max Depth
                   </span>
                   <div className='flex items-center gap-1.5'>
-                    <TrendingUp className='w-4 h-4 text-blue-500' />
+                    <DepthIcon className='text-divemap-blue' size={18} />
                     <span className='text-sm font-bold text-gray-900'>
                       {dive.max_depth || '-'}
                       <span className='text-xs font-normal text-gray-400 ml-0.5'>m</span>
@@ -349,7 +350,7 @@ const DiveInfoGrid = ({ dive, hasDeco, isMobile, formatDate, formatTime }) => {
               {dive.average_depth && (
                 <Col xs={24} sm={12} md={6}>
                   <div className='flex items-center gap-2'>
-                    <TrendingUp size={15} className='text-blue-500' />
+                    <DepthIcon size={18} className='text-divemap-blue' />
                     <span className='text-sm text-gray-600'>Avg Depth:</span>
                     <span className='font-medium'>{dive.average_depth}m</span>
                   </div>

frontend/src/components/DiveSiteCard.jsx

@@ -1,4 +1,4 @@
-import { Globe, User, TrendingUp, Fish, ChevronRight, Route } from 'lucide-react';
+import { Globe, User, Fish, ChevronRight, Route } from 'lucide-react';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -8,6 +8,7 @@ import { slugify, getDiveSiteSlug } from '../utils/slugify';
 import { getTagColor } from '../utils/tagHelpers';
 import { renderTextWithLinks } from '../utils/textHelpers';
 
+import DepthIcon from './ui/DepthIcon';
 import DifficultyBadge from './ui/DifficultyBadge';
 
 export const DiveSiteListCard = ({
@@ -79,8 +80,8 @@ export const DiveSiteListCard = ({
           {/* Content Row: Description, Stats and Mobile Thumbnail */}
           <div className='flex gap-3 items-start'>
             <div className='flex-1 min-w-0 flex flex-col'>
-              {/* BODY: Description - More aggressive clamp on mobile */}
-              {site.description && (
+              {/* BODY: Description - Completely removed on mobile view */}
+              {!isMobile && site.description && (
                 <div
                   className={`text-gray-600 leading-snug line-clamp-2 mb-1.5 ${compactLayout ? 'text-xs sm:text-sm' : 'text-xs sm:text-sm'}`}
                 >
@@ -95,7 +96,7 @@ export const DiveSiteListCard = ({
               <div className='flex flex-wrap items-center gap-x-3 gap-y-1 py-1 sm:py-1.5 border-t border-gray-50'>
                 {site.max_depth && (
                   <div className='flex items-center gap-1'>
-                    <TrendingUp className='w-3 h-3 text-gray-400' />
+                    <DepthIcon className='text-divemap-blue font-bold' size={15} />
                     <span className='text-xs sm:text-sm font-bold text-gray-900'>
                       {site.max_depth}m
                     </span>
@@ -167,6 +168,8 @@ export const DiveSiteGridCard = ({
   getThumbnailUrl,
   handleFilterChange,
 }) => {
+  const { isMobile } = useResponsive();
+
   return (
     <div
       className={`dive-item rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(0,114,178)] flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 bg-white ${compactLayout ? 'h-full' : ''}`}
@@ -227,7 +230,7 @@ export const DiveSiteGridCard = ({
         <div className='flex items-center gap-4 mb-3 pb-3 border-b border-gray-50'>
           {site.max_depth && (
             <div className='flex items-center gap-1'>
-              <TrendingUp className='w-3.5 h-3.5 text-gray-400' />
+              <DepthIcon className='text-divemap-blue font-bold' size={16} />
               <span className='text-xs font-bold text-gray-700'>{site.max_depth}m</span>
             </div>
           )}
@@ -240,7 +243,7 @@ export const DiveSiteGridCard = ({
         </div>
 
         {/* Description */}
-        {site.description && (
+        {!isMobile && site.description && (
           <p className='text-xs text-gray-500 line-clamp-2 mb-4 leading-relaxed'>
             {decodeHtmlEntities(site.description)}
           </p>

frontend/src/components/DivesMap.jsx

@@ -1,7 +1,7 @@
 import DOMPurify from 'dompurify';
 import L, { Icon } from 'leaflet';
 import escape from 'lodash/escape';
-import { Calendar, Clock, TrendingUp, Star } from 'lucide-react';
+import { Calendar, Clock, Star } from 'lucide-react';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import 'leaflet.markercluster';
@@ -14,6 +14,7 @@ import { formatDate, formatTime } from '../utils/dateHelpers';
 import { getDifficultyLabel, getDifficultyColorClasses } from '../utils/difficultyHelpers';
 import { slugify } from '../utils/slugify';
 
+import DepthIcon from './ui/DepthIcon';
 import DifficultyBadge from './ui/DifficultyBadge';
 
 // Fix default marker icons
@@ -373,7 +374,7 @@ const DivesMap = ({ dives = [], onViewportChange }) => {
                     <div className='flex items-center gap-4 text-sm text-gray-600'>
                       {dive.max_depth && (
                         <div className='flex items-center gap-1'>
-                          <TrendingUp size={14} />
+                          <DepthIcon className='text-divemap-blue' size={16} />
                           <span>{dive.max_depth}m max</span>
                         </div>
                       )}

frontend/src/components/LeafletMapView.jsx

@@ -1,7 +1,7 @@
 import DOMPurify from 'dompurify';
 import L, { Icon } from 'leaflet';
 import escape from 'lodash/escape';
-import { Info, Phone, Mail, Globe, TrendingUp, TrendingDown, Clock } from 'lucide-react';
+import { Info, Phone, Mail, Globe, Clock } from 'lucide-react';
 import React, { useMemo, useCallback, useEffect, useRef, useState } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
@@ -21,6 +21,7 @@ import {
   formatWindDirection,
 } from '../utils/windSuitabilityHelpers';
 
+import DepthIcon from './ui/DepthIcon';
 import WindDataError from './WindDataError';
 import WindOverlay from './WindOverlay';
 import WindOverlayLegend from './WindOverlayLegend';
@@ -31,8 +32,8 @@ const ICONS = {
   Phone: renderToStaticMarkup(<Phone size={16} className='text-gray-600 hover:text-gray-800' />),
   Mail: renderToStaticMarkup(<Mail size={16} className='text-gray-600 hover:text-gray-800' />),
   Globe: renderToStaticMarkup(<Globe size={16} className='text-gray-600 hover:text-gray-800' />),
-  AverageDepth: renderToStaticMarkup(<TrendingDown size={16} className='text-gray-400' />),
-  MaxDepth: renderToStaticMarkup(<TrendingUp size={16} className='text-gray-400' />),
+  AverageDepth: renderToStaticMarkup(<DepthIcon size={18} className='text-divemap-blue' />),
+  MaxDepth: renderToStaticMarkup(<DepthIcon size={18} className='text-divemap-blue' />),
   Duration: renderToStaticMarkup(<Clock size={16} className='text-gray-400' />),
 };
 

frontend/src/components/TripCard.jsx

@@ -3,7 +3,6 @@ import {
   Clock,
   Euro,
   Users,
-  TrendingUp,
   MapPin,
   Building,
   Edit,
@@ -21,6 +20,7 @@ import { slugify, getDiveSiteSlug, getDivingCenterSlug } from '../utils/slugify'
 import { getStatusColorClasses, getDisplayStatus } from '../utils/tripHelpers';
 import { generateTripName } from '../utils/tripNameGenerator';
 
+import DepthIcon from './ui/DepthIcon';
 import DifficultyBadge from './ui/DifficultyBadge';
 
 /**
@@ -323,7 +323,7 @@ const TripCard = ({
               )}
               {trip.max_depth ? (
                 <div className='flex items-center text-gray-600 p-1.5 sm:p-2 lg:p-1.5 bg-gray-50/50 rounded-lg border border-gray-100'>
-                  <TrendingUp className='h-3.5 w-3.5 mr-2 text-blue-400 flex-shrink-0' />
+                  <DepthIcon className='mr-2 text-divemap-blue flex-shrink-0' size={16} />
                   <div className='min-w-0'>
                     <div className='text-xs text-gray-500 uppercase tracking-wide leading-tight'>
                       Max Depth

frontend/src/components/UserChat/MessageBubble.jsx

@@ -1,5 +1,5 @@
 import { format } from 'date-fns';
-import { Edit2, Check, CheckCheck, Clock, MapPin, TrendingUp } from 'lucide-react';
+import { Edit2, Check, CheckCheck, Clock, MapPin } from 'lucide-react';
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -11,6 +11,7 @@ import { slugify, getDiveSiteSlug } from '../../utils/slugify';
 import Avatar from '../Avatar';
 import ChatbotIcon from '../Chat/ChatbotIcon.jsx';
 import CurrencyIcon from '../ui/CurrencyIcon';
+import DepthIcon from '../ui/DepthIcon';
 
 import LinkPreview from './LinkPreview';
 
@@ -239,7 +240,7 @@ const MessageBubble = ({
                         )}
                         {tripData.max_depth && (
                           <div className='flex items-center space-x-1'>
-                            <TrendingUp className='w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 text-blue-500 shrink-0' />
+                            <DepthIcon className='text-divemap-blue shrink-0' size={16} />
                             <span className='font-medium text-gray-900 dark:text-gray-100 truncate'>
                               {tripData.max_depth}m
                             </span>

frontend/src/components/ui/DepthIcon.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const DepthIcon = ({ className = '', size = 16, strokeWidth = 2.5, ...props }) => {
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth={strokeWidth}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      width={size}
+      height={size}
+      className={className}
+      {...props}
+    >
+      {/* Ocean waves at the top */}
+      <path d='M2 6c.6.5 1.2 1 2.5 1s1.9-.5 2.5-1c.6-.5 1.2-1 2.5-1s1.9.5 2.5 1c.6.5 1.2 1 2.5 1s1.9-.5 2.5-1c.6-.5 1.2-1 2.5-1s1.9.5 2.5 1c.6.5 1.2 1 2.5 1' />
+      {/* Vertical descending line */}
+      <path d='M12 10v10' />
+      {/* Downward pointing arrowhead */}
+      <polyline points='8 16 12 20 16 16' />
+    </svg>
+  );
+};
+
+DepthIcon.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  strokeWidth: PropTypes.number,
+};
+
+export default DepthIcon;

frontend/src/pages/DiveSiteDetail.jsx

@@ -54,6 +54,7 @@ import SEO from '../components/SEO';
 import ShareButton from '../components/ShareButton';
 import StickyRateBar from '../components/StickyRateBar';
 import Button from '../components/ui/Button';
+import DepthIcon from '../components/ui/DepthIcon';
 import DifficultyBadge from '../components/ui/DifficultyBadge';
 import RichText from '../components/ui/RichText';
 import StarfishRating from '../components/ui/StarfishRating';
@@ -582,7 +583,7 @@ const DiveSiteDetail = () => {
               <div className='flex flex-wrap items-center gap-x-4 gap-y-1.5'>
                 {dive.max_depth && (
                   <div className='flex items-center gap-1'>
-                    <TrendingUp className='w-3 h-3 text-gray-300' />
+                    <DepthIcon className='text-divemap-blue font-bold' size={14} />
                     <span className='text-gray-700 font-medium'>{dive.max_depth}m</span>
                   </div>
                 )}
@@ -874,7 +875,7 @@ const DiveSiteDetail = () => {
                     Max Depth
                   </span>
                   <div className='flex items-center gap-1'>
-                    <TrendingUp className='w-3.5 h-3.5 text-gray-400' />
+                    <DepthIcon className='text-divemap-blue font-bold' size={16} />
                     <span className='text-xs sm:text-sm font-bold text-gray-900'>
                       {diveSite.max_depth}
                       <span className='text-[10px] font-normal text-gray-400 ml-0.5'>m</span>

frontend/src/pages/DiveSites.jsx

@@ -7,7 +7,6 @@ import {
   ChevronRight,
   Star,
   MapPin,
-  TrendingUp,
   Compass,
   Globe,
   List,

frontend/src/pages/DiveTrips.jsx

@@ -14,7 +14,6 @@ import {
   Tag,
   List,
   Grid,
-  TrendingUp,
   DollarSign,
   Star,
   ChevronDown,

frontend/src/pages/Dives.jsx

@@ -15,7 +15,6 @@ import {
   Filter,
   Upload,
   Calendar,
-  TrendingUp,
   Grid,
   Route,
   User,
@@ -44,6 +43,7 @@ import PageHeader from '../components/PageHeader';
 import RateLimitError from '../components/RateLimitError';
 import ResponsiveFilterBar from '../components/ResponsiveFilterBar';
 import SEO from '../components/SEO';
+import DepthIcon from '../components/ui/DepthIcon';
 import DifficultyBadge from '../components/ui/DifficultyBadge';
 import InfiniteScrollTrigger from '../components/ui/InfiniteScrollTrigger';
 import { useAuth } from '../contexts/AuthContext';
@@ -946,7 +946,7 @@ const Dives = () => {
                       <div className='flex flex-wrap items-center gap-x-3 sm:gap-x-8 gap-y-1 py-1 sm:py-3 border-y border-gray-50'>
                         {dive.max_depth && (
                           <div className='flex items-center gap-1'>
-                            <TrendingUp className='w-3 h-3 text-gray-400' />
+                            <DepthIcon className='text-divemap-blue font-bold' size={15} />
                             <span className='text-xs sm:text-sm font-semibold text-gray-700'>
                               {dive.max_depth}m
                             </span>
@@ -1075,7 +1075,7 @@ const Dives = () => {
                       {/* Stats Grid (Simplified for Grid layout) */}
                       <div className='grid grid-cols-2 gap-4 py-3 border-y border-gray-50 mb-4'>
                         <div className='flex items-center gap-2'>
-                          <TrendingUp className='w-4 h-4 text-gray-400' />
+                          <DepthIcon className='text-divemap-blue font-bold' size={18} />
                           <div>
                             <p className='text-xs text-gray-400 uppercase font-medium leading-none mb-0.5'>
                               Depth