add new confirm dialog styles

resources/styles/framework.scss

@@ -69,10 +69,9 @@
 .btn-gray {
   @extend %btn;
   background: $color-gray;
-  color: $color-gray-dark;
+  color: $color-white;
   &:hover {
     background: $color-gray-dark;
-    color: $color-gray-darker;
   }
 }
 

resources/styles/partials/lightbox.scss

@@ -195,7 +195,11 @@
 
 }
 
-// Project Settings
+// Confirm dialog
-.settings {
+.confirm-dialog {
-
+  .btn-gray,
+  .btn-success,
+  .btn-delete {
+    margin: 2rem 1rem 0 1rem;
+  }
 }

src/uxbox/ui/confirm.cljs

@@ -26,15 +26,20 @@
               (on-cancel (dissoc ctx :on-accept :on-cancel))))]
     (html
      [:div.lightbox-body.confirm-dialog
-      [:span "HERE"]
+      [:h3 "Are you sure?"]
-      [:input
+      [:span "You're going to delete __PAGENAME__"]
-       {:type "button"
+      [:div.row-flex
-        :value "Ok"
+       [:input.btn-success.btn-small
-        :on-click accept}]
+        {:type "button"
-      [:input
+         :value "Ok"
-       {:type "button"
+         :on-click accept}]
-        :value "Cancel"
+       [:input.btn-delete.btn-small
-        :on-click cancel}]])))
+        {:type "button"
+         :value "Cancel"
+         :on-click cancel}]]
+         [:a.close {:href "#"
+                :on-click #(do (dom/prevent-default %)
+                               (udl/close!))} i/close]])))
 
 (def confirm-dialog
   (mx/component