Add a dangerButton css class.

Apply new class to some buttons.
Fix the style on the delete merchant modal.
Move modal.ejs to the ejs folder.

views/dashboardPage/dashboard.ejs

@@ -51,7 +51,7 @@
         </div>
 
         <% include ../shared/loader %>
-        <% include ./modal %>
+        <% include ./ejs/modal.ejs %>
 
         <script>
             let data = {

views/dashboardPage/modal.ejs → views/dashboardPage/ejs/modal.ejs

@@ -38,7 +38,7 @@
             </form>
 
             <div id="modalConfirm" style="display:none;">
-                <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <circle cx="12" cy="12" r="10"></circle>
                     <line x1="12" y1="8" x2="12" y2="12"></line>
                     <line x1="12" y1="16" x2="12.01" y2="16"></line>
@@ -49,7 +49,7 @@
                 <div class="buttonBox">
                     <button id="modalConfirmNoButton" class="button">CANCEL</button>
 
-                    <button id="modalConfirmButton" class="button">YES</button>
+                    <button id="modalConfirmButton" class="dangerButton">DELETE</button>
                 </div>
             </div>
 
@@ -58,7 +58,7 @@
 
                 <div id="squareLocationsButtons"></div>
 
-                <button id="squareLocationsCancel" class="button">CANCEL</button>
+                <button id="squareLocationsCancel" class="dangerButton">CANCEL</button>
             </div>
         </div>
     </div>

views/dashboardPage/ejs/strands/account.ejs

@@ -47,7 +47,7 @@
                 <h2>SECURITY</h2>
             </div>
 
-            <button id="deleteMerchant" class="button">DELETE THIS MERCHANT</button>
+            <button id="deleteMerchant" class="dangerButton">DELETE THIS MERCHANT</button>
 
             <button id="accountShowPassword" class="button">CHANGE PASSWORD</button>
 

views/shared/shared.css

@@ -202,6 +202,30 @@ button::-moz-focus-inner{
         background: rgb(240, 252, 255);
     }
 
+.dangerButton{
+    display: initial;
+    background: rgb(255, 99, 107);
+    border: none;
+    text-decoration: none;
+    padding: 2px 10px;
+    color: black;
+    cursor: pointer;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    min-width: 100px;
+    margin: 5px;
+    max-height: 52px;
+}
+
+    .dangerButton:hover{
+        background: rgb(255, 129, 137);
+    }
+
+    .dangerButton:active{
+        background: rgb(240, 252, 255);
+    }
+
 .linkButton{
     background: none;
     border: none;