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

---
 resources/scripts/components/BreakAlert.vue | 35 ++++++++++++++-------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/resources/scripts/components/BreakAlert.vue b/resources/scripts/components/BreakAlert.vue
index 8f9dd49..0a3a243 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,23 +41,36 @@ 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;