Adding institutional colors and logos.

src/app/Campaign/_components/CampaignDashboard/CampaignDashboard.tsx

@@ -19,22 +19,28 @@ const CampaignDashboard: React.FC<CampaignDashboardProps> = ({
 
   return (
     <QueryWrapper isLoading={isLoading} error={error}>
-      <div className="mx-auto max-w-screen-xl px-4 lg:px-8">
-        {/* Header Section */}
-        <header className="mb-8">
-          {/* <Navigation /> */}
-          <div className="mt-6">
-            <h1 className="text-3xl font-bold">{campaign?.name}</h1>
-            <p className="text-gray-600">
-              {campaign?.startDate?.toLocaleDateString()} -{' '}
-              {campaign?.endDate?.toLocaleDateString()}
-            </p>
+      <div className="px-4 md:px-8 lg:px-12 lg:py-12 lg:h-5/6 py-12 bg-secondary-100">
+        <div className="mx-auto max-w-screen-xl px-4 lg:px-8">
+          <div className='breadcrumbs'>
+            <a href='/'>Explore campaigns</a>
+            <span>&gt;</span>
+            <a href='#' className='active'>{campaign?.name}</a>
           </div>
-        </header>
+          {/* Header Section */}
+          <header className="mb-8">
+            {/* <Navigation /> */}
+            <div className="mt-6">
+              <h1 className="text-3xl font-bold">{campaign?.name}</h1>
+              <p className="text-gray-600">
+                {campaign?.startDate?.toLocaleDateString()} -{' '}
+                {campaign?.endDate?.toLocaleDateString()}
+              </p>
+            </div>
+          </header>
 
-        {hasValidGeometry(campaign) && (
-            <section className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8 h-96">
-              <div className="bg-white rounded-lg shadow-md p-6">
+          {hasValidGeometry(campaign) && (
+            <section className="col-span-2 grid grid-cols-1 gap-8 mb-8 h-96 w-full">
+              <div className="bg-white rounded-lg shadow-md p-6 w-full">
                 <h2 className="text-xl font-semibold mb-4">
                   Campaign Coverage
                 </h2>
@@ -46,25 +52,30 @@ const CampaignDashboard: React.FC<CampaignDashboardProps> = ({
               </div>
             </section>
           )}
+        </div>
+      </div>
 
-        <section className="bg-white rounded-lg shadow-md p-6 mb-8">
-          <h2 className="text-xl font-semibold">Stations</h2>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            {campaign &&
-              campaign?.stations?.map((station) => (
-                <StationCard
-                  key={station.id}
-                  station={station}
-                  to={`/campaigns/${campaignId}/stations/${station.id}`}
-                />
-              ))}
-          </div>
-          <div className="flex gap-4">
-            {/* <FilterControls /> */}
-            {/* <ExportButton onExport={() => {}} /> */}
-          </div>
-          {/* <HeatMap campaignId={campaignId} /> */}
-        </section>
+      <div className="px-4 md:px-8 lg:px-12 lg:py-12 lg:h-5/6 py-12">
+        <div className="mx-auto max-w-screen-xl px-4 lg:px-8">
+          <h2 className="text-xl font-semibold mb-4">Stations</h2>
+          <section>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {campaign &&
+                campaign?.stations?.map((station) => (
+                  <StationCard
+                    key={station.id}
+                    station={station}
+                    to={`/campaigns/${campaignId}/stations/${station.id}`}
+                  />
+                ))}
+            </div>
+            <div className="flex gap-4">
+              {/* <FilterControls /> */}
+              {/* <ExportButton onExport={() => {}} /> */}
+            </div>
+            {/* <HeatMap campaignId={campaignId} /> */}
+          </section>
+        </div>
       </div>
     </QueryWrapper>
   );

src/app/HeatMap/HeatMap.tsx

@@ -49,7 +49,7 @@ export default function HeatMap({ measurements, intervals }: HeatMapProps) {
   ];
 
   return (
-    <div className="h-screen w-full ">
+    <div className="h-map w-full ">
       <MapContainer center={center} zoom={9} className="h-full w-full">
         <Tile />
         <CarLine measurements={filteredMeasurements} />

src/app/Home/_components/CampaignFilterToolbar/_components/FilteringVariables/FilteringVariablesModal/FilteringVariablesModal.tsx

@@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react';
 import 'leaflet/dist/leaflet.css';
 import Modal from '../../../../../../common/Modal';
 import { useList } from '../../../../../../../hooks/sensorVariables/useList';
+import { renderChm } from '../../../../../../../utils/helpers';
 
 interface FilteringModalProps {
   isOpen: boolean;
@@ -66,7 +67,7 @@ const FilteringVariablesModal: React.FC<FilteringModalProps> = ({
     setSearchTerm(e.target.value);
     setCurrentPage(1); // Reset to first page when searching
   };
-
+  
   return (
     <Modal
       isOpen={isOpen}
@@ -113,7 +114,7 @@ const FilteringVariablesModal: React.FC<FilteringModalProps> = ({
                       htmlFor={variable}
                       className="text-gray-700 cursor-pointer select-none"
                     >
-                      {variable}
+                      {renderChm(variable)}
                     </label>
                   </div>
                 ))}

src/app/Home/_components/CampaignList/CampaignList.tsx

@@ -71,10 +71,13 @@ const CampaignList: React.FC = () => {
 
   return (
     <div
-      className="px-4 md:px-8 lg:px-12 lg:my-12 lg:py-12 lg:h-5/6 my-12 py-12 bg-secondary-100"
+      className="px-4 md:px-8 lg:px-12 lg:py-12 lg:h-5/6 py-12 bg-secondary-100"
       id="campaign-list"
     >
       <section className="mx-auto max-w-screen-xl px-4 lg:px-8 flex flex-col gap-10">
+        <div className='breadcrumbs'>
+          <a href='#' className='active'>Explore campaigns</a>
+        </div>
         <h2 className="text-2xl font-bold text-gray-900 md:text-3xl">
           Explore campaigns
         </h2>

src/app/LineConfidenceChart/LineConfidenceChart.tsx

@@ -138,19 +138,27 @@ const LineConfidenceChart: React.FC<LineConfidenceChartProps> = ({
 
   // Quick validation checks
   if (data.length === 0) {
-    return <div>No data available</div>;
-  }
+    return <div className='text-gray-600 text-lg flex justify-center items-center p-4'>
+      No data available
+    </div>;
+  } 
 
   if (!scales) {
-    return <div>Cannot calculate chart scales</div>;
+    return <div className='text-gray-600 text-lg flex justify-center items-center p-4'>
+      Cannot calculate chart scales
+      </div>;
   }
 
   if (!paths) {
-    return <div>Cannot calculate chart paths</div>;
+    return <div className='text-gray-600 text-lg flex justify-center items-center p-4'>
+      Cannot calculate chart paths
+    </div>;
   }
 
   if (!axisTicks) {
-    return <div>Cannot calculate chart axis ticks</div>;
+    return <div className='text-gray-600 text-lg flex justify-center items-center p-4'>
+      Cannot calculate chart axis ticks
+    </div>;
   }
 
   return (

src/app/Login/Login.tsx

@@ -20,12 +20,15 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-xl shadow-lg">
+    <div className="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-login">
+      <div className="max-w-md w-full space-y-8 p-8 bg-white shadow-lg">
         <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-            Sign in to your account
+          <h2 className="mt-6 text-center text-2xl font-extrabold text-gray-900">
+            Log in
           </h2>
+          <h4 className="mt-6 text-center text-md font-bold text-gray-700">
+            to continue to the upstream portal
+          </h4>
         </div>
         <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
           {error && (
@@ -66,7 +69,7 @@ const Login: React.FC = () => {
                 name="email"
                 type="text"
                 required
-                className="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                className="appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                 placeholder="TACC Username"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
@@ -81,7 +84,7 @@ const Login: React.FC = () => {
                 name="password"
                 type="password"
                 required
-                className="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                className="appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                 placeholder="Password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
@@ -95,7 +98,7 @@ const Login: React.FC = () => {
               disabled={isLoading}
               className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 disabled:opacity-50"
             >
-              {isLoading ? 'Signing in...' : 'Sign in'}
+              {isLoading ? 'Log in...' : 'Log in'}
             </button>
           </div>
         </form>

src/app/Sensor/viz/HeatMapViz.tsx

@@ -2,6 +2,10 @@ import HeatMap from '../../HeatMap/HeatMap';
 import { useList } from '../../../hooks/measurements/useList';
 import QueryWrapper from '../../common/QueryWrapper';
 import { useMemo } from 'react';
+import {useDetail as campaignInfo} from '../../../hooks/campaign/useDetail';
+import { useDetail as stationInfo } from '../../../hooks/station/useDetail';
+import { useDetail } from '../../../hooks/sensor/useDetail';
+import { renderChm } from '../../../utils/helpers';
 
 const HeatMapViz = ({
   campaignId,
@@ -20,6 +24,10 @@ const HeatMapViz = ({
     5000,
   );
 
+  const { campaign } = campaignInfo(campaignId);
+  const { station } = stationInfo(campaignId, stationId);
+  const { data:sensor } = useDetail(campaignId, stationId, sensorId);
+
   const intervals = useMemo(() => {
     if (!data?.items || data.items.length === 0) return [];
 
@@ -56,6 +64,22 @@ const HeatMapViz = ({
       {data && intervals && (
         <HeatMap measurements={data?.items || []} intervals={intervals} />
       )}
+
+      <div className="absolute top-[110px] left-12 z-[1000] bg-white py-1 px-3 rounded-md shadow-lg">
+        <div className='breadcrumbs text-xs'>
+          <a href='/'>Campaigns</a>
+          <span>&gt;</span>
+          <a href={'/campaigns/' + campaignId}>{ campaign?.name || "campaign " + campaignId + " ..." }</a>
+          <span>&gt;</span>
+          <a href={'/campaigns/' + campaignId + "/stations/" + stationId}>{ station?.name || "station " + campaignId + " ..." }</a>
+          <span>&gt;</span>
+          <a href={'/campaigns/' + campaignId + "/stations/" + stationId + '/sensors/' + sensorId}>
+            {renderChm(sensor?.variablename || sensor?.alias || 'sensor ' + sensorId)}
+          </a>
+          <span>&gt;</span>
+          <a href='#' className='active'>Heat Map</a>
+        </div>
+      </div>
     </QueryWrapper>
   );
 };

src/app/Sensor/viz/LineConfidenceViz/LineConfidenceViz.tsx

@@ -8,6 +8,10 @@ import {
 } from './context/LineConfidenceContext';
 import Controls from './_components/Controls';
 import SensorFilteringModal from './_components/SensorFilteringModal';
+import {useDetail as campaignInfo} from '../../../../hooks/campaign/useDetail';
+import { useDetail as stationInfo } from '../../../../hooks/station/useDetail';
+import { useDetail } from '../../../../hooks/sensor/useDetail';
+import { renderChm } from '../../../../utils/helpers';
 
 interface MeasurementsSummaryProps {
   campaignId: string;
@@ -21,14 +25,35 @@ const LineConfidenceViz = ({
   stationId,
   sensorId,
 }: MeasurementsSummaryProps) => {
+  const { campaign } = campaignInfo(campaignId);
+  const { station } = stationInfo(campaignId, stationId);
+  const { data:sensor } = useDetail(campaignId, stationId, sensorId);
+
   return (
-    <LineConfidenceProvider
-      campaignId={campaignId}
-      stationId={stationId}
-      sensorId={sensorId}
-    >
-      <LineConfidenceContent />
-    </LineConfidenceProvider>
+    <div className="px-4 md:px-8 lg:px-12 lg:py-12 lg:h-5/6 py-12">
+      <div className="mx-auto max-w-screen-xl px-4 lg:px-8 mb-6">
+        <div className='breadcrumbs text-xs'>
+          <a href='/'>Campaigns</a>
+          <span>&gt;</span>
+          <a href={'/campaigns/' + campaignId}>{ campaign?.name || "campaign " + campaignId + " ..." }</a>
+          <span>&gt;</span>
+          <a href={'/campaigns/' + campaignId + "/stations/" + stationId}>{ station?.name || "station " + campaignId + " ..." }</a>
+          <span>&gt;</span>
+          <a href={'/campaigns/' + campaignId + "/stations/" + stationId + '/sensors/' + sensorId}>
+            {renderChm(sensor?.variablename || sensor?.alias || 'sensor ' + sensorId)}
+          </a>
+          <span>&gt;</span>
+          <a href='#' className='active'>Confidence</a>
+        </div>
+      </div>
+      <LineConfidenceProvider
+        campaignId={campaignId}
+        stationId={stationId}
+        sensorId={sensorId}
+      >
+        <LineConfidenceContent />
+      </LineConfidenceProvider>
+    </div>
   );
 };