From 3d1817618d83b519c865a2c5c92ecb574ca6fbd1 Mon Sep 17 00:00:00 2001
From: George Kargiotakis <kargig@void.gr>
Date: Sun, 7 Jun 2026 15:57:15 +0300
Subject: [PATCH 1/2] Optimize mobile listings and depth iconography

Remove text descriptions from dive site and diving center listing views
on mobile viewports to increase data density, save screen real estate,
and prevent scrolling fatigue.

Introduce a custom thematic 'DepthIcon' component portraying an ocean
waves boundary and a downward-pointing arrow to semantically represent
all water depth metrics. Standardize this icon across dive cards,
grids, maps, and profile charts.

Unify the contact buttons (Website, Email, and Phone) inside diving
center cards using the official 'text-divemap-blue' brand color and a
consistent subtle background tint. This streamlines the action palette
and reduces visual complexity.
---
 .../components/AdvancedDiveProfileChart.jsx   |  9 +++--
 frontend/src/components/DiveInfoGrid.jsx      |  9 ++---
 frontend/src/components/DiveSiteCard.jsx      | 15 ++++----
 frontend/src/components/DivesMap.jsx          |  5 +--
 frontend/src/components/LeafletMapView.jsx    |  7 ++--
 frontend/src/components/TripCard.jsx          |  4 +--
 .../src/components/UserChat/MessageBubble.jsx |  5 +--
 frontend/src/components/ui/DepthIcon.jsx      | 34 +++++++++++++++++++
 frontend/src/pages/DivingCenters.jsx          | 30 ++++++++--------
 9 files changed, 79 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/components/ui/DepthIcon.jsx

diff --git a/frontend/src/components/AdvancedDiveProfileChart.jsx b/frontend/src/components/AdvancedDiveProfileChart.jsx
index f3c118d..8bc62a0 100644
--- a/frontend/src/components/AdvancedDiveProfileChart.jsx
+++ b/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,9 +714,7 @@ 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`}
               >
@@ -723,7 +722,7 @@ const AdvancedDiveProfileChart = ({
               </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`}
               >
diff --git a/frontend/src/components/DiveInfoGrid.jsx b/frontend/src/components/DiveInfoGrid.jsx
index 04e743e..4f1a8d0 100644
--- a/frontend/src/components/DiveInfoGrid.jsx
+++ b/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>
diff --git a/frontend/src/components/DiveSiteCard.jsx b/frontend/src/components/DiveSiteCard.jsx
index 3d460bb..499f6fb 100644
--- a/frontend/src/components/DiveSiteCard.jsx
+++ b/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>
diff --git a/frontend/src/components/DivesMap.jsx b/frontend/src/components/DivesMap.jsx
index e3e947c..6eb54cd 100644
--- a/frontend/src/components/DivesMap.jsx
+++ b/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>
                       )}
diff --git a/frontend/src/components/LeafletMapView.jsx b/frontend/src/components/LeafletMapView.jsx
index 2981af1..d358542 100644
--- a/frontend/src/components/LeafletMapView.jsx
+++ b/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' />),
 };
 
diff --git a/frontend/src/components/TripCard.jsx b/frontend/src/components/TripCard.jsx
index d3b81c9..f34e03a 100644
--- a/frontend/src/components/TripCard.jsx
+++ b/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
diff --git a/frontend/src/components/UserChat/MessageBubble.jsx b/frontend/src/components/UserChat/MessageBubble.jsx
index b062eae..649e114 100644
--- a/frontend/src/components/UserChat/MessageBubble.jsx
+++ b/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>
diff --git a/frontend/src/components/ui/DepthIcon.jsx b/frontend/src/components/ui/DepthIcon.jsx
new file mode 100644
index 0000000..ce88047
--- /dev/null
+++ b/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;
diff --git a/frontend/src/pages/DivingCenters.jsx b/frontend/src/pages/DivingCenters.jsx
index 97099e2..811f486 100644
--- a/frontend/src/pages/DivingCenters.jsx
+++ b/frontend/src/pages/DivingCenters.jsx
@@ -488,9 +488,9 @@ const DivingCenters = () => {
                                 )}
                               </div>
 
-                              {/* Description - expanded to fill space */}
-                              {center.description && (
-                                <p className='text-[10px] sm:text-sm text-gray-600 line-clamp-3 sm:line-clamp-4 leading-tight mt-1.5'>
+                              {/* Description - completely removed on mobile view */}
+                              {!isMobile && center.description && (
+                                <p className='text-xs sm:text-sm text-gray-600 line-clamp-3 sm:line-clamp-4 leading-tight mt-1.5'>
                                   {decodeHtmlEntities(center.description)}
                                 </p>
                               )}
@@ -507,37 +507,37 @@ const DivingCenters = () => {
                                   }
                                   target='_blank'
                                   rel='noopener noreferrer'
-                                  className='w-8 h-8 inline-flex items-center justify-center bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 active:scale-95 transition-all'
+                                  className='w-8 h-8 inline-flex items-center justify-center bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                   title='Website'
                                 >
-                                  <Globe className='w-4 h-4 text-blue-700 flex-shrink-0' />
+                                  <Globe className='w-4 h-4 text-divemap-blue flex-shrink-0' />
                                 </a>
                               )}
                               {center.email &&
                                 (isMobile ? (
                                   <a
                                     href={`mailto:${center.email}`}
-                                    className='w-8 h-8 inline-flex items-center justify-center bg-green-100 text-green-700 rounded-lg hover:bg-green-200 active:scale-95 transition-all'
+                                    className='w-8 h-8 inline-flex items-center justify-center bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                     title='Email'
                                   >
-                                    <Mail className='w-4 h-4 text-green-700 flex-shrink-0' />
+                                    <Mail className='w-4 h-4 text-divemap-blue flex-shrink-0' />
                                   </a>
                                 ) : (
                                   <MaskedEmail
                                     email={center.email}
                                     label=''
-                                    className='w-8 h-8 inline-flex items-center justify-center bg-green-100 text-green-700 rounded-lg hover:bg-green-200 active:scale-95 transition-all cursor-pointer'
+                                    className='w-8 h-8 inline-flex items-center justify-center bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all cursor-pointer'
                                   >
-                                    <Mail className='w-4 h-4 text-green-700 flex-shrink-0' />
+                                    <Mail className='w-4 h-4 text-divemap-blue flex-shrink-0' />
                                   </MaskedEmail>
                                 ))}
                               {center.phone && (
                                 <a
                                   href={`tel:${center.phone}`}
-                                  className='w-8 h-8 inline-flex items-center justify-center bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 active:scale-95 transition-all'
+                                  className='w-8 h-8 inline-flex items-center justify-center bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                   title='Call'
                                 >
-                                  <Phone className='w-4 h-4 text-indigo-700 flex-shrink-0' />
+                                  <Phone className='w-4 h-4 text-divemap-blue flex-shrink-0' />
                                 </a>
                               )}
                               <Link
@@ -612,8 +612,8 @@ const DivingCenters = () => {
                               )}
                             </div>
 
-                            {/* Description */}
-                            {center.description && (
+                            {/* Description - completely removed on mobile view */}
+                            {!isMobile && center.description && (
                               <p className='text-gray-600 text-sm line-clamp-3 mb-4 leading-relaxed'>
                                 {decodeHtmlEntities(center.description)}
                               </p>
@@ -625,7 +625,7 @@ const DivingCenters = () => {
                                 {center.phone && (
                                   <a
                                     href={`tel:${center.phone}`}
-                                    className='p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors'
+                                    className='p-2 bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                     title='Call'
                                   >
                                     <Phone className='w-4 h-4' />
@@ -640,7 +640,7 @@ const DivingCenters = () => {
                                     }
                                     target='_blank'
                                     rel='noopener noreferrer'
-                                    className='p-2 bg-gray-50 text-gray-600 rounded-lg hover:bg-gray-100 transition-colors'
+                                    className='p-2 bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                     title='Website'
                                   >
                                     <Globe className='w-4 h-4' />

From 339b0841150b5d8737de59bf60a689b633042cc0 Mon Sep 17 00:00:00 2001
From: George Kargiotakis <kargig@void.gr>
Date: Mon, 8 Jun 2026 10:41:46 +0300
Subject: [PATCH 2/2] Standardize depth icons across remaining pages

Replace remaining occurrences of 'TrendingUp' and 'TrendingDown' with
the custom thematic 'DepthIcon' component in log, site detail, trip
detail, and user profile views. This guarantees global visual
consistency for all water depth metrics.

Additionally, remove unused 'TrendingUp' imports from list pages
such as 'DiveSites.jsx' and 'DiveTrips.jsx' to clean up dead code.
---
 frontend/src/pages/DiveSiteDetail.jsx |  5 +++--
 frontend/src/pages/DiveSites.jsx      |  1 -
 frontend/src/pages/DiveTrips.jsx      |  1 -
 frontend/src/pages/Dives.jsx          |  6 +++---
 frontend/src/pages/Profile.jsx        |  5 +++--
 frontend/src/pages/TripDetail.jsx     |  4 ++--
 frontend/src/pages/UserProfile.jsx    | 11 +++++------
 7 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/DiveSiteDetail.jsx b/frontend/src/pages/DiveSiteDetail.jsx
index 82cf07b..77d0fb9 100644
--- a/frontend/src/pages/DiveSiteDetail.jsx
+++ b/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>
diff --git a/frontend/src/pages/DiveSites.jsx b/frontend/src/pages/DiveSites.jsx
index ab9790f..e1ca2c1 100644
--- a/frontend/src/pages/DiveSites.jsx
+++ b/frontend/src/pages/DiveSites.jsx
@@ -7,7 +7,6 @@ import {
   ChevronRight,
   Star,
   MapPin,
-  TrendingUp,
   Compass,
   Globe,
   List,
diff --git a/frontend/src/pages/DiveTrips.jsx b/frontend/src/pages/DiveTrips.jsx
index 0f62c01..0fe6808 100644
--- a/frontend/src/pages/DiveTrips.jsx
+++ b/frontend/src/pages/DiveTrips.jsx
@@ -14,7 +14,6 @@ import {
   Tag,
   List,
   Grid,
-  TrendingUp,
   DollarSign,
   Star,
   ChevronDown,
diff --git a/frontend/src/pages/Dives.jsx b/frontend/src/pages/Dives.jsx
index 7d4eee4..f8dcdfd 100644
--- a/frontend/src/pages/Dives.jsx
+++ b/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
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index 2c3746e..6c94937 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -45,6 +45,7 @@ import OrganizationLogo from '../components/OrganizationLogo';
 import SEO from '../components/SEO';
 import { getSocialMediaIcon } from '../components/SocialMediaIcons';
 import Button from '../components/ui/Button';
+import DepthIcon from '../components/ui/DepthIcon';
 import { useAuth } from '../contexts/AuthContext';
 import { getDivingCenters } from '../services/divingCenters';
 import { getFullAvatarUrl } from '../utils/avatarHelpers';
@@ -423,10 +424,10 @@ const Profile = () => {
       }
 
       features.push({
-        icon: <TrendingUp className='h-3 w-3' />,
+        icon: <DepthIcon className='text-divemap-blue font-bold' size={14} />,
         label: shortDepth,
         title: `Max Depth: ${max_depth}`,
-        color: 'bg-blue-50 text-blue-700 border-blue-100',
+        color: 'bg-blue-50 text-divemap-blue border-blue-100',
       });
     }
 
diff --git a/frontend/src/pages/TripDetail.jsx b/frontend/src/pages/TripDetail.jsx
index ad3eb33..437d6a4 100644
--- a/frontend/src/pages/TripDetail.jsx
+++ b/frontend/src/pages/TripDetail.jsx
@@ -9,7 +9,6 @@ import {
   Building,
   Ticket,
   LogIn,
-  TrendingUp,
   Edit,
   X,
   Upload,
@@ -27,6 +26,7 @@ import SEO from '../components/SEO';
 import TripFormModal from '../components/TripFormModal';
 import TripHeader from '../components/TripHeader';
 import Button from '../components/ui/Button';
+import DepthIcon from '../components/ui/DepthIcon';
 import RichText from '../components/ui/RichText';
 import { useAuth } from '../contexts/AuthContext';
 import { useSetting } from '../hooks/useSettings';
@@ -115,7 +115,7 @@ const DiveSiteInfo = ({ dive, index }) => {
           )}
         </h4>
         <div className='text-sm text-gray-500 font-medium flex items-center gap-1.5'>
-          <TrendingUp className='w-4 h-4 text-gray-400' />
+          <DepthIcon className='text-divemap-blue font-bold' size={16} />
           {diveSite?.max_depth ? `${diveSite.max_depth}m max` : 'Depth TBD'}
         </div>
       </div>
diff --git a/frontend/src/pages/UserProfile.jsx b/frontend/src/pages/UserProfile.jsx
index 272a28c..e126697 100644
--- a/frontend/src/pages/UserProfile.jsx
+++ b/frontend/src/pages/UserProfile.jsx
@@ -55,6 +55,7 @@ import Avatar from '../components/Avatar';
 import OrganizationLogo from '../components/OrganizationLogo';
 import SEO from '../components/SEO';
 import { getSocialMediaIcon } from '../components/SocialMediaIcons';
+import DepthIcon from '../components/ui/DepthIcon';
 import { useAuth } from '../contexts/AuthContext';
 import { formatDate } from '../utils/dateHelpers';
 import { formatGases } from '../utils/textHelpers';
@@ -303,10 +304,10 @@ const UserProfile = () => {
       }
 
       features.push({
-        icon: <TrendingUp className='h-3 w-3' />,
+        icon: <DepthIcon className='text-divemap-blue font-bold' size={14} />,
         label: shortDepth,
         title: `Max Depth: ${max_depth}`,
-        color: 'bg-blue-50 text-blue-700 border-blue-100',
+        color: 'bg-blue-50 text-divemap-blue border-blue-100',
       });
     }
 
@@ -470,9 +471,7 @@ const UserProfile = () => {
         >
           {stats.max_depth_str && (
             <StatCard
-              icon={
-                <TrendingUp className={`${isEmbedded ? 'h-4 w-4' : 'h-6 w-6'} text-blue-600`} />
-              }
+              icon={<DepthIcon className='text-divemap-blue' size={isEmbedded ? 16 : 24} />}
               value={stats.max_depth_str}
               label='Max Depth'
               color='blue'
@@ -885,7 +884,7 @@ const UserProfile = () => {
                         value={profile.diving_stats.max_depth || 0}
                         suffix={<span className='text-xs font-normal opacity-50'>m</span>}
                         precision={1}
-                        prefix={<TrendingUp className='h-3.5 w-3.5 inline mr-1 text-blue-500' />}
+                        prefix={<DepthIcon className='inline mr-1 text-divemap-blue' size={16} />}
                         styles={{ content: { fontSize: '18px', fontWeight: 'bold' } }}
                       />
                     </Card>