From 9deb59cf8fe10f6c4e6d71154ff19c5f9732f74c Mon Sep 17 00:00:00 2001
From: Jouni Kantola <jouni.kantola@nepa.com>
Date: Sun, 31 Mar 2024 20:42:53 +0200
Subject: [PATCH 1/4] Break alert as modal dialog

---
 resources/scripts/App.vue                     |  6 ++--
 .../components/{Alert.vue => BreakAlert.vue}  | 28 +++++++++++++------
 2 files changed, 23 insertions(+), 11 deletions(-)
 rename resources/scripts/components/{Alert.vue => BreakAlert.vue} (65%)

diff --git a/resources/scripts/App.vue b/resources/scripts/App.vue
index 6404c2a..fcf50fe 100644
--- a/resources/scripts/App.vue
+++ b/resources/scripts/App.vue
@@ -1,7 +1,7 @@
 <template>
-    <Alert
+    <BreakAlert
         v-if="onBreak"
-        :message="'🍵 Break time. Grab a tea!'"
+        :timeLeft="`${formatTime(timeRemaining)}`"
         @alertClosed="endBreak"
     />
     <Timer
@@ -39,7 +39,7 @@ import { PropType, reactive, ref } from "vue";
 import Timer from "./components/Timer.vue";
 import TeamMember from "./components/TeamMember.vue";
 import BreaksToggle from "./components/BreaksToggle.vue";
-import Alert from "./components/Alert.vue";
+import BreakAlert from "./components/BreakAlert.vue";
 
 import {
     updateTray,
diff --git a/resources/scripts/components/Alert.vue b/resources/scripts/components/BreakAlert.vue
similarity index 65%
rename from resources/scripts/components/Alert.vue
rename to resources/scripts/components/BreakAlert.vue
index d5a6038..8f9dd49 100644
--- a/resources/scripts/components/Alert.vue
+++ b/resources/scripts/components/BreakAlert.vue
@@ -1,6 +1,8 @@
 <template>
     <div class="alert">
-        <p>{{ message }}</p>
+        <output>{{ timeLeft }}</output>
+        <p>Break time</p>
+        <p>🍵 Grab a tea!</p>
         <button aria-label="Close" @click="close">
             <span aria-hidden="true">&times;</span>
         </button>
@@ -9,9 +11,9 @@
 
 <script setup lang="ts">
 defineProps({
-    message: {
+    timeLeft: {
         type: String,
-        required: true
+        required: true,
     },
 });
 
@@ -28,31 +30,41 @@ function close() {
     top: 0;
     left: 0;
     right: 0;
+    bottom: 0;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
     align-items: center;
+    justify-content: center;
     padding: 15px 20px;
     margin: 10px;
     background-color: var(--secondary);
-    opacity: 0.9;
     border-radius: 3px;
+    z-index: 1;
+    text-align: center;
+    gap: 1rem;
 }
 
 p,
-button {
+button,
+output {
     width: auto;
     margin: 0;
     color: var(--primary-inverse);
+    font-weight: 600;
+    font-size: 3rem;
 }
 
 button {
+    position: absolute;
+    top: 0;
+    right: 10px;
     background-color: transparent;
     border: none;
-    padding: 10px 0 10px 10px;
+    padding: 0 10px 10px 10px;
     font-weight: 600;
 }
 
 button:hover {
     color: var(--primary);
 }
-</style>
\ No newline at end of file
+</style>

From c05e06a72d75168695f742b9e043d7f3e901ba36 Mon Sep 17 00:00:00 2001
From: Jouni Kantola <jouni@kantola.se>
Date: Mon, 1 Apr 2024 18:13:09 +0200
Subject: [PATCH 2/4] Fade break modal

---
 resources/scripts/App.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/resources/scripts/App.vue b/resources/scripts/App.vue
index fcf50fe..2a7d3d1 100644
--- a/resources/scripts/App.vue
+++ b/resources/scripts/App.vue
@@ -1,9 +1,11 @@
 <template>
-    <BreakAlert
-        v-if="onBreak"
-        :timeLeft="`${formatTime(timeRemaining)}`"
-        @alertClosed="endBreak"
-    />
+    <Transition name="fade">
+        <BreakAlert
+            v-if="onBreak"
+            :timeLeft="`${formatTime(timeRemaining)}`"
+            @alertClosed="endBreak"
+        />
+    </Transition>
     <Timer
         :minutes="timeRemaining[0]"
         :seconds="timeRemaining[1]"
@@ -250,4 +252,14 @@ async function randomizeTeamOrder() {
     padding: 0 0.5rem;
     margin: 0;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease-in;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
 </style>

From 6bdd131fdaa3336626b05b7c05f9c50c3da24298 Mon Sep 17 00:00:00 2001
From: Jouni Kantola <jouni@kantola.se>
Date: Mon, 1 Apr 2024 19:01:48 +0200
Subject: [PATCH 3/4] Add CTA button to modal

---
 resources/scripts/components/BreakAlert.vue | 39 ++++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/resources/scripts/components/BreakAlert.vue b/resources/scripts/components/BreakAlert.vue
index 8f9dd49..71a23a0 100644
--- a/resources/scripts/components/BreakAlert.vue
+++ b/resources/scripts/components/BreakAlert.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="alert">
-        <output>{{ timeLeft }}</output>
-        <p>Break time</p>
-        <p>🍵 Grab a tea!</p>
-        <button aria-label="Close" @click="close">
+        <h1>🍵 Break</h1>
+        <output class="timer">{{ timeLeft }}</output>
+        <button class="close" aria-label="Close" @click="close">
             <span aria-hidden="true">&times;</span>
         </button>
+        <button @click="close">Skip break</button>
     </div>
 </template>
 
@@ -41,30 +41,43 @@ function close() {
     border-radius: 3px;
     z-index: 1;
     text-align: center;
-    gap: 1rem;
+    gap: 3rem;
 }
 
-p,
-button,
-output {
-    width: auto;
-    margin: 0;
+.timer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
+    border: 3px solid var(--primary-inverse);
+    border-radius: 100px;
+    font-size: 6rem;
     color: var(--primary-inverse);
+    width: 100%;
     font-weight: 600;
-    font-size: 3rem;
 }
 
+h1,
+p,
 button {
+    color: var(--primary-inverse);
+    font-size: 3rem;
+    font-weight: 400;
+    margin: 0;
+}
+
+.close {
     position: absolute;
     top: 0;
     right: 10px;
+    width: auto;
     background-color: transparent;
     border: none;
     padding: 0 10px 10px 10px;
-    font-weight: 600;
 }
 
-button:hover {
+.close:hover,
+.close:active {
     color: var(--primary);
 }
 </style>

From 580e0ce3089738d3addbdf62fc855ad5209f2fc4 Mon Sep 17 00:00:00 2001
From: Jouni Kantola <jouni.kantola@nepa.com>
Date: Mon, 1 Apr 2024 22:45:50 +0200
Subject: [PATCH 4/4] Correct stacking order for overlay

---
 resources/scripts/App.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/resources/scripts/App.vue b/resources/scripts/App.vue
index 2a7d3d1..6691896 100644
--- a/resources/scripts/App.vue
+++ b/resources/scripts/App.vue
@@ -1,11 +1,4 @@
 <template>
-    <Transition name="fade">
-        <BreakAlert
-            v-if="onBreak"
-            :timeLeft="`${formatTime(timeRemaining)}`"
-            @alertClosed="endBreak"
-        />
-    </Transition>
     <Timer
         :minutes="timeRemaining[0]"
         :seconds="timeRemaining[1]"
@@ -34,6 +27,14 @@
             class="grid"
         />
     </form>
+
+    <Transition name="fade">
+        <BreakAlert
+            v-if="onBreak"
+            :timeLeft="`${formatTime(timeRemaining)}`"
+            @alertClosed="endBreak"
+        />
+    </Transition>
 </template>
 <script setup lang="ts">
 import { PropType, reactive, ref } from "vue";