diff --git a/www/__tests__/diaryHelper.test.ts b/www/__tests__/diaryHelper.test.ts
index 429fbd08e..822b19bba 100644
--- a/www/__tests__/diaryHelper.test.ts
+++ b/www/__tests__/diaryHelper.test.ts
@@ -1,5 +1,4 @@
-import { getFormattedSectionProperties, getFormattedDate, motionTypeOf, isMultiDay, getFormattedDateAbbr, getFormattedTimeRange, getPercentages } from "../js/diary/diaryHelper";
-import { useImperialConfig } from "../js/config/useImperialConfig";
+import { getFormattedDate, isMultiDay, getFormattedDateAbbr, getFormattedTimeRange, getDetectedModes, getBaseModeByKey, modeColors } from "../js/diary/diaryHelper";
 
 it('returns a formatted date', () => {
   expect(getFormattedDate("2023-09-18T00:00:00-07:00")).toBe("Mon September 18, 2023");
@@ -19,10 +18,10 @@ it('returns a human readable time range', () => {
   expect(getFormattedTimeRange("", "2023-09-18T00:00:00-09:30")).toBeFalsy();
 });
 
-it("returns a MotionType object", () => {
-  expect(motionTypeOf("WALKING")).toEqual({ name: "WALKING", icon: "walk", color: '#0068a5' });
-  expect(motionTypeOf("MotionTypes.WALKING")).toEqual({ name: "WALKING", icon: "walk", color: '#0068a5' });
-  expect(motionTypeOf("I made this type up")).toEqual({ name: "UNKNOWN", icon: "help", color: '#484848'});
+it("returns a Base Mode for a given key", () => {
+  expect(getBaseModeByKey("WALKING")).toEqual({ name: "WALKING", icon: "walk", color: modeColors.blue });
+  expect(getBaseModeByKey("MotionTypes.WALKING")).toEqual({ name: "WALKING", icon: "walk", color: modeColors.blue });
+  expect(getBaseModeByKey("I made this type up")).toEqual({ name: "UNKNOWN", icon: "help", color: modeColors.grey });
 });
 
 it('returns true/false is multi day', () => {
@@ -41,25 +40,24 @@ let myFakeTrip2 = {sections: [
   { "sensed_mode_str": "BICYCLING", "distance": 715.3078629361006 }
 ]};
 
-let myFakePcts = [
+let myFakeDetectedModes = [
   { mode: "BICYCLING",
     icon: "bike",
-    color: '#007e46',
+    color: modeColors.green,
     pct: 89 },
   { mode: "WALKING",
     icon: "walk",
-    color: '#0068a5',
+    color: modeColors.blue,
     pct: 11 }];
 
-let myFakePcts2 = [
+let myFakeDetectedModes2 = [
   { mode: "BICYCLING",
     icon: "bike",
-    color: '#007e46',
+    color: modeColors.green,
     pct: 100 }];
 
-it('returns the percetnages by mode for a trip', () => {
-  expect(getPercentages(myFakeTrip)).toEqual(myFakePcts);
-  expect(getPercentages(myFakeTrip2)).toEqual(myFakePcts2);
-  expect(getPercentages({})).toEqual({});
+it('returns the detected modes, with percentages, for a trip', () => {
+  expect(getDetectedModes(myFakeTrip)).toEqual(myFakeDetectedModes);
+  expect(getDetectedModes(myFakeTrip2)).toEqual(myFakeDetectedModes2);
+  expect(getDetectedModes({})).toEqual([]); // empty trip, no sections, no modes
 })
-
diff --git a/www/js/diary/diaryHelper.ts b/www/js/diary/diaryHelper.ts
index 75dfe8bae..746d2014d 100644
--- a/www/js/diary/diaryHelper.ts
+++ b/www/js/diary/diaryHelper.ts
@@ -4,7 +4,7 @@
 import moment from "moment";
 import { DateTime } from "luxon";
 
-const modeColors = {
+export const modeColors = {
   pink: '#d43678',        // oklch(59% 0.2 0)       // e-car
   red: '#b9003d',         // oklch(50% 0.37 15)     // car
   orange: '#b25200',      // oklch(55% 0.37 50)     // air, hsr