collapse on header only

1 files changed, 9 insertions, 3 deletions

diff --git a/src/ui.js b/src/ui.js
index c7f1090..dc21943 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -66,6 +66,13 @@ section > header {
 
   color: var(--theme-header-fg);
   background: var(--theme-header-bg);
+
+	cursor: pointer;
+  transition: opacity 0.3s;
+}
+
+section > header:hover {
+  opacity: 0.5;
 }
 
 section > header.small {
@@ -119,11 +126,10 @@ export const Note = ({ id, type, attributedTo, published, content, smallHeader =
       css={{ '--theme-header-bg': backgroundColor }}
       class={type === 'Tombstone' ? 'tombstone' : ''}
       dataset={{ id }}
-      onClick={onHide}
     >
       {smallHeader
-        ? <header class="small" />
-        : <header>
+        ? <header class="small" onClick={onHide} />
+        : <header onClick={onHide}>
             <img src={new URL(attributedTo.icon.url, attributedTo.id)} />
             <span class="user">{username}</span>
             <Space />