Add CTA button to modal

jouni-kantola · Apr 1, 2024 · 8f9d04b · 8f9d04b
1 parent c05e06a
commit 8f9d04b
Showing 1 changed file with 24 additions and 11 deletions.
diff --git 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;