From 294f669cfb64eca465defe2b0f31e59e5dff0759 Mon Sep 17 00:00:00 2001
From: russell-rozenbaum <rjrozenbaum@gmail.com>
Date: Tue, 25 Jun 2024 14:38:02 -0400
Subject: [PATCH] updated UI with pencil icon wobble and positioning

---
 src/haz3lweb/view/ExerciseMode.re | 12 ++++++++----
 src/haz3lweb/www/style.css        | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/haz3lweb/view/ExerciseMode.re b/src/haz3lweb/view/ExerciseMode.re
index 9f3481d6e0..f0f943566a 100644
--- a/src/haz3lweb/view/ExerciseMode.re
+++ b/src/haz3lweb/view/ExerciseMode.re
@@ -77,7 +77,7 @@ let view =
   let title_view = {
     Cell.simple_cell_view([
       div(
-        ~attr=Attr.class_("title-cell"),
+        ~attr=Attr.many([Attr.class_("title-cell")]),
         [
           settings.instructor_mode
             ? settings.editing_title
@@ -86,7 +86,6 @@ let view =
                       Attr.many([
                         Attr.class_("title-text"),
                         Attr.value(eds.title),
-                        Attr.id("title-input"),
                         Attr.on_keydown(evt =>
                           if (evt##.keyCode === 13) {
                             let new_title = Obj.magic(evt##.target)##.value;
@@ -109,8 +108,13 @@ let view =
                     ~attr=Attr.many([Attr.class_("title-text")]),
                     [
                       text(eds.title),
-                      Widgets.button(Icons.pencil, _ =>
-                        inject(Set(EditingTitle))
+                      div(
+                        ~attr=Attr.class_("pencil-icon"),
+                        [
+                          Widgets.button(Icons.pencil, _ =>
+                            inject(Set(EditingTitle))
+                          ),
+                        ],
                       ),
                     ],
                   )
diff --git a/src/haz3lweb/www/style.css b/src/haz3lweb/www/style.css
index b4d299f19b..fa0ac1aa24 100644
--- a/src/haz3lweb/www/style.css
+++ b/src/haz3lweb/www/style.css
@@ -714,12 +714,27 @@ select {
 
 .title-cell {
   padding-left: 1em;
+  display: flex;
+  align-items: center;
 }
 
 .title-cell .title-text {
   font-size: 1.5rem;
   font-weight: bold;
   color: var(--light-text-color);
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+}
+
+.title-cell .pencil-icon {
+  margin-left: 0.5em;
+  cursor: pointer;
+  color: #7a6219;
+}
+
+.title-cell .pencil-icon:hover {
+  animation: wobble 0.6s ease 0s 1 normal forwards;
 }
 
 .cell-prompt {