added fancier buttons

README.md

@@ -16,7 +16,6 @@ The tracker's information is stored in the code block as JSON data. The names, s
 # 🛣️ Roadmap
 Super Simple Time Tracker is still in its early stages! There are a lot of plans for it, including:
 - A setting to link segments to corresponding daily notes automatically
-- A fancier Start and End button
 
 # 🙏 Acknowledgements
 If you like this plugin and want to support its development, you can do so through my website by clicking this fancy image!

src/tracker.ts

@@ -59,7 +59,9 @@ export function displayTracker(tracker: Tracker, element: HTMLElement, getSectio
     // add start/stop controls
     let running = isRunning(tracker);
     let btn = new ButtonComponent(element)
-        .setButtonText(running ? "End" : "Start")
+        .setClass("clickable-icon")
+        .setIcon(`lucide-${running ? "stop" : "play"}-circle`)
+        .setTooltip(running ? "End" : "Start")
         .onClick(async () => {
             if (running) {
                 endEntry(tracker);
@@ -102,10 +104,8 @@ export function displayTracker(tracker: Tracker, element: HTMLElement, getSectio
             nameBox.inputEl.hidden = true;
 
             row.createEl("td", { text: formatTimestamp(entry.startTime, settings) });
-            if (entry.endTime) {
-                row.createEl("td", { text: formatTimestamp(entry.endTime, settings) });
-                row.createEl("td", { text: formatDurationBetween(entry.startTime, entry.endTime) });
-            }
+            row.createEl("td", { text: entry.endTime ? formatTimestamp(entry.endTime, settings) : "" });
+            row.createEl("td", { text: entry.endTime ? formatDurationBetween(entry.startTime, entry.endTime) : "" });
 
             let entryButtons = row.createEl("td");
             let editButton = new ButtonComponent(entryButtons)

styles.css

@@ -20,6 +20,11 @@
 	margin-bottom: 10px;
 }
 
+.simple-time-tracker-btn svg {
+	width: 32px;
+	height: 32px;
+}
+
 .simple-time-tracker-bottom button {
 	margin: 10px 5px 10px 5px;
 }

test-vault/.obsidian/plugins/simple-time-tracker/styles.css

@@ -20,6 +20,11 @@
 	margin-bottom: 10px;
 }
 
+.simple-time-tracker-btn svg {
+	width: 32px;
+	height: 32px;
+}
+
 .simple-time-tracker-bottom button {
 	margin: 10px 5px 10px 5px;
 }