Moving the add timer button to title bar

3 files changed, 31 insertions, 25 deletions

diff --git a/design/design.css b/design/design.css
index 53a2eed..40eeaad 100644
--- a/design/design.css
+++ b/design/design.css
@@ -1,22 +1,27 @@
-h1 {
-  font-size: 70px;
-  padding: 20px;
+.title {
   background-color: #111111;
   color: white;
-  letter-spacing: 10px;
-  padding: 30px;
   margin-bottom: 20px;
+  height: 150px;
+  line-height: 150px;
+  font-size: 70px;
+  padding-left: 30px;
 }
 
-button.addTimer {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  color: #33AA22;
-  border: 5px solid #33AA22;
-  background-color: white;
-  border-radius: 5px;
+.title > h1 {
+  letter-spacing: 10px;
+  float: left;
+}
+
+.title > button {
+  float: right;
+  color: white;
+  border: 5px solid white;
+  background-color: #111111;
+  border-radius: 10px;
   font-size: 50px;
+  margin-top: 35px;
+  margin-right: 30px;
 }
 
 .timers {
diff --git a/src/View/Timer.elm b/src/View/Timer.elm
index e38b6cb..6925e42 100644
--- a/src/View/Timer.elm
+++ b/src/View/Timer.elm
@@ -22,7 +22,7 @@ timerView (id, timer) =
     [ button
         [ class "name block" ]
         [ text timer.name ]
-    , div
+    , button
         [ class <| "time block" ]
         [ text (timeView timer.currentTime) ]
     , button
diff --git a/src/View/View.elm b/src/View/View.elm
index 2f12902..f915952 100644
--- a/src/View/View.elm
+++ b/src/View/View.elm
@@ -23,8 +23,7 @@ view : Model -> Html
 view model =
   div
     []
-    [ h1 [] [ text "Timer" ]
-    , addTimer
+    [ title
     , model.timers
         |> Dict.toList
         |> List.sortBy (.creationTime << snd)
@@ -32,15 +31,17 @@ view model =
         |> timers
     ]
 
-addTimer : Html
-addTimer =
-  button
-    [ class "addTimer"
-    , onClick (Signal.send updates AddNewTimer)
-    ]
-    [ i
-        [ class "fa fa-fw fa-plus" ]
-        []
+title : Html
+title =
+  div
+    [ class "title" ]
+    [ h1 [] [ text "Timer" ]
+    , button
+        [ onClick (Signal.send updates AddNewTimer) ]
+        [ i
+            [ class "fa fa-fw fa-plus" ]
+            []
+        ]
     ]
 
 onEnter : Signal.Message -> Attribute