From 5d822e6c7ebed56a035aab2e5201a1e58cc58702 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@umami.is>
Date: Thu, 27 Aug 2026 00:17:25 -0700
Subject: [PATCH] Add annotation modal headings and restore row button styling

---
 .../annotations/AnnotationsButton.tsx         |  1 +
 .../annotations/AnnotationsModal.tsx          | 31 +++++++++++++------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/annotations/AnnotationsButton.tsx b/src/app/(main)/websites/[websiteId]/annotations/AnnotationsButton.tsx
index 3236b6d88..9d04d5617 100644
--- a/src/app/(main)/websites/[websiteId]/annotations/AnnotationsButton.tsx
+++ b/src/app/(main)/websites/[websiteId]/annotations/AnnotationsButton.tsx
@@ -15,6 +15,7 @@ export function AnnotationsButton({ websiteId }: { websiteId: string }) {
     <DialogButton
       icon={<MessageSquareText />}
       label={t(labels.notes)}
+      title={null}
       variant="quiet"
       width="800px"
     >
diff --git a/src/app/(main)/websites/[websiteId]/annotations/AnnotationsModal.tsx b/src/app/(main)/websites/[websiteId]/annotations/AnnotationsModal.tsx
index 5ea5179d6..62c02b7c1 100644
--- a/src/app/(main)/websites/[websiteId]/annotations/AnnotationsModal.tsx
+++ b/src/app/(main)/websites/[websiteId]/annotations/AnnotationsModal.tsx
@@ -1,4 +1,13 @@
-import { Button, Column, DataColumn, DataTable, Loading, Row, Text } from '@umami/react-zen';
+import {
+  Button,
+  Column,
+  DataColumn,
+  DataTable,
+  Heading,
+  Loading,
+  Row,
+  Text,
+} from '@umami/react-zen';
 import { useState } from 'react';
 import { formatAnnotationDate } from '@/components/charts/ChartAnnotationMarkers';
 import { Empty } from '@/components/common/Empty';
@@ -54,12 +63,15 @@ export function AnnotationsModal({
 
   if (view.mode !== 'list') {
     return (
-      <AnnotationEditForm
-        websiteId={websiteId}
-        annotation={view.mode === 'edit' ? view.annotation : undefined}
-        onSave={showList}
-        onClose={showList}
-      />
+      <Column gap>
+        <Heading size="xl">{t(labels.notes)}</Heading>
+        <AnnotationEditForm
+          websiteId={websiteId}
+          annotation={view.mode === 'edit' ? view.annotation : undefined}
+          onSave={showList}
+          onClose={showList}
+        />
+      </Column>
     );
   }
 
@@ -71,7 +83,8 @@ export function AnnotationsModal({
 
   return (
     <Column gap>
-      <Row justifyContent="end">
+      <Row alignItems="center" justifyContent="space-between">
+        <Heading size="xl">{t(labels.notes)}</Heading>
         <Button variant="primary" onPress={() => setView({ mode: 'add' })}>
           <Plus />
           {t(labels.addNote)}
@@ -83,7 +96,7 @@ export function AnnotationsModal({
         <DataTable data={rows}>
           <DataColumn id="date" label={t(labels.date)} width="200px">
             {(row: Annotation) => (
-              <Button variant="quiet" onPress={() => handleSelect(row)}>
+              <Button onPress={() => handleSelect(row)}>
                 {formatAnnotationDate(
                   { id: row.id, date: toLocalDate(row), label: row.note, allDay: row.allDay },
                   locale,