From 05dfb0c45d7bbda5392a10369e517bffaa4e3cf3 Mon Sep 17 00:00:00 2001
From: Badiuzzaman <folkgraphein@gmail.com>
Date: Tue, 2 May 2023 22:07:00 +0600
Subject: [PATCH 1/2] div replaced with button element

---
 flex/05-flex-modal/index.html             | 2 +-
 flex/05-flex-modal/solution/solution.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/flex/05-flex-modal/index.html b/flex/05-flex-modal/index.html
index 3f523e2..3b4a06f 100644
--- a/flex/05-flex-modal/index.html
+++ b/flex/05-flex-modal/index.html
@@ -11,7 +11,7 @@
     <div class="modal">
       <div class="icon">!</div>
       <div class="header">Are you sure you want to do that?</div>
-      <div class="close-button">✖</div>
+      <button class="close-button">✖</button>
       <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
       <button class="continue">Continue</button>
       <button class="cancel">Cancel</button>
diff --git a/flex/05-flex-modal/solution/solution.html b/flex/05-flex-modal/solution/solution.html
index 818e5f3..1c1f3cb 100644
--- a/flex/05-flex-modal/solution/solution.html
+++ b/flex/05-flex-modal/solution/solution.html
@@ -12,7 +12,7 @@
       <div class="icon">!</div>
       <div class="container">
         <div class="header">Are you sure you want to do that?
-          <div class="close-button">✖</div>
+          <button class="close-button">✖</button>
         </div>
         <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
         <button class="continue">Continue</button>

From 20086b657bf6237a015954a6b72ab0598b52e46b Mon Sep 17 00:00:00 2001
From: Badiuzzaman <folkgraphein@gmail.com>
Date: Tue, 2 May 2023 22:10:33 +0600
Subject: [PATCH 2/2] cursor and border added to button

`cursor: pointer` property added to global button.  `close-button` class now has two new property to achieve design goal.
---
 flex/05-flex-modal/solution/solution.css | 3 +++
 flex/05-flex-modal/style.css             | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/flex/05-flex-modal/solution/solution.css b/flex/05-flex-modal/solution/solution.css
index d60d5ef..cc353e9 100644
--- a/flex/05-flex-modal/solution/solution.css
+++ b/flex/05-flex-modal/solution/solution.css
@@ -46,9 +46,12 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid #eee;
+  padding: 0;
 }
 
 button {
+  cursor: pointer;
   padding: 8px 16px;
   border-radius: 8px;
 }
diff --git a/flex/05-flex-modal/style.css b/flex/05-flex-modal/style.css
index 58fda8b..780b355 100644
--- a/flex/05-flex-modal/style.css
+++ b/flex/05-flex-modal/style.css
@@ -46,9 +46,12 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid #eee;
+  padding: 0;
 }
 
 button {
+  cursor: pointer;
   padding: 8px 16px;
   border-radius: 8px;
 }