From dde3ce4abc783e0c0e8417516f576759abb78e94 Mon Sep 17 00:00:00 2001
From: Victoria Wang <violasongoo@gmail.com>
Date: Tue, 28 Oct 2014 11:22:45 -0700
Subject: [PATCH] Cleaned up modal dialogs

---
 sass/_helper-sass/_buttons.scss       |  6 +++++-
 sass/_project-sass/_project-Base.scss | 28 +++++++++++++++++++++++++++
 sass/_project-sass/_project-Main.scss |  2 +-
 views/_tags.erb                       |  9 ++++-----
 views/dashboard.erb                   | 15 ++++++--------
 views/plan/_pricing.erb               |  4 ++--
 views/settings/account.erb            |  4 ++--
 views/settings/site.erb               |  4 ++--
 views/site.erb                        | 10 +++++-----
 9 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/sass/_helper-sass/_buttons.scss b/sass/_helper-sass/_buttons.scss
index e4e15c8a..85ed9aae 100644
--- a/sass/_helper-sass/_buttons.scss
+++ b/sass/_helper-sass/_buttons.scss
@@ -28,6 +28,11 @@
     }
     
     &:visited{color:$c-Lighter;}
+    
+    &.cancel {
+      background: #999;
+      text-shadow: none;
+    }
 }
 
 
@@ -78,7 +83,6 @@
     &:hover{
       @include linear-gradient(top, #d51c3a, #841526);
     }
-    
     .fa {
       margin-right:5px;
     }
diff --git a/sass/_project-sass/_project-Base.scss b/sass/_project-sass/_project-Base.scss
index fd9c5097..dd23a5b8 100644
--- a/sass/_project-sass/_project-Base.scss
+++ b/sass/_project-sass/_project-Base.scss
@@ -62,3 +62,31 @@ a{
 .alert{
    background-color:#F5BA00; color:#fff;
 }
+
+.modal {
+  &.fade.in {
+    top: 20%;
+  }
+  form {
+    margin-bottom: 0;
+  }
+  @include border-radius(20px 20px 6px 6px);
+}
+.modal-header {
+  background: #5e95a1;
+  padding: 12px 16px 9px 23px;
+  @include border-radius(6px 6px 0px 0px);
+  
+  h3 {
+    color: white;
+    font-size: 1.6em;
+  }
+}
+.modal-body {
+  padding: 20px 23px 0 23px;
+}
+.modal-footer {
+  border: 0;
+  background: none;
+  padding: 0 23px 19px 0;
+}
\ No newline at end of file
diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index 8b120f46..b9f355a5 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -321,7 +321,7 @@
   display: block;
   margin-left: 5px;
 }
-.overlay .fa-trash {
+.overlay .fa-trash, .modal .fa-trash {
   vertical-align: 1px;
 }
 .overlay {
diff --git a/views/_tags.erb b/views/_tags.erb
index b52062b0..5b41a8d3 100644
--- a/views/_tags.erb
+++ b/views/_tags.erb
@@ -21,18 +21,17 @@
   <form method="POST" action="/tags/add">
     <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
+      <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
       <h3 id="addTagLabel">Add a Tag</h3>
     </div>
     <div class="modal-body">
       <p>
         A tag can only be a single word, and can only contain letters and numbers.
       </p>
-      <p>Tag:</p>
       <input type="text" name="tags" class="typeahead">
     </div>
     <div class="modal-footer">
-      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
       <button type="submit" class="btn btn-Action">Add Tag</button>
     </div>
   </form>
@@ -42,7 +41,7 @@
   <form method="POST" action="/tags/remove">
     <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
+      <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
       <h3 id="removeTagLabel">Remove Tags</h3>
     </div>
     <div class="modal-body">
@@ -55,7 +54,7 @@
       <% end %>
     </div>
     <div class="modal-footer">
-      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
       <button type="submit" class="btn btn-Action">Remove Tag(s)</button>
     </div>
   </form>
diff --git a/views/dashboard.erb b/views/dashboard.erb
index c34a2d1e..a8efa2c8 100644
--- a/views/dashboard.erb
+++ b/views/dashboard.erb
@@ -170,15 +170,15 @@
 
       <div class="modal hide fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
         <div class="modal-header">
-          <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
+          <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
           <h3 id="deleteConfirmModalLabel">Confirm deletion</h3>
         </div>
         <div class="modal-body">
           <p>You are about to delete "<span id="deleteFileName"></span>". Are you sure?</p>
         </div>
         <div class="modal-footer">
-          <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
-          <button class="btn btn-danger" onclick="fileDelete()">Delete</button>
+          <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
+          <button class="btn btn-Action btn-danger" onclick="fileDelete()"><i class="fa fa-trash" title="Delete"></i>Delete</button>
         </div>
       </div>
 
@@ -255,18 +255,15 @@
     <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
     <input type="hidden" value="<%= @dir %>" name="dir">
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
+      <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
       <h3 id="createDirLabel">Create Folder</h3>
     </div>
     <div class="modal-body">
-      <p>
-        Folder name:
-      </p>
-      <input name="name" type="text" placeholder="images">
+      <input name="name" type="text" placeholder="folder_name">
     </div>
     <div class="modal-footer">
+      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
       <button type="submit" class="btn btn-Action">Create</button>
-      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
     </div>
   </form>
 </div>
\ No newline at end of file
diff --git a/views/plan/_pricing.erb b/views/plan/_pricing.erb
index 1123e3d6..c26e1c2e 100644
--- a/views/plan/_pricing.erb
+++ b/views/plan/_pricing.erb
@@ -364,7 +364,7 @@
     <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
     <input type="hidden" value="" name="plan_type" id="upgradePlanType">
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
+      <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
       <h3 id="planSignupLabel">
         <% if parent_site && parent_site.plan_type == 'free' %>
           Upgrade
@@ -422,7 +422,7 @@
         <% end %>
     </div>
     <div class="modal-footer">
-      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
       <button type="submit" class="btn btn-Action">Upgrade</button>
     </div>
   </form>
diff --git a/views/settings/account.erb b/views/settings/account.erb
index 5fa8e008..22372e92 100644
--- a/views/settings/account.erb
+++ b/views/settings/account.erb
@@ -62,7 +62,7 @@
   <form method="POST" action="/site/delete">
     <%== csrf_token_input_html %>
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
+      <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
       <h3 id="deleteSiteLabel">Permanently Delete Site</h3>
     </div>
     <div class="modal-body">
@@ -73,7 +73,7 @@
       <input class="input-Area" name="username" type="text">
     </div>
     <div class="modal-footer">
-      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
       <button type="submit" class="btn btn-Action">Permanently Delete Site</button>
     </div>
   </form>
diff --git a/views/settings/site.erb b/views/settings/site.erb
index a2e744c8..192e789e 100644
--- a/views/settings/site.erb
+++ b/views/settings/site.erb
@@ -62,7 +62,7 @@
   <form method="POST" action="/site/delete">
     <%== csrf_token_input_html %>
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
+      <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
       <h3 id="deleteSiteLabel">Permanently Delete Site</h3>
     </div>
     <div class="modal-body">
@@ -73,7 +73,7 @@
       <input class="input-Area" name="username" type="text">
     </div>
     <div class="modal-footer">
-      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
       <button type="submit" class="btn btn-Action">Permanently Delete Site</button>
     </div>
   </form>
diff --git a/views/site.erb b/views/site.erb
index baf13192..34840dee 100644
--- a/views/site.erb
+++ b/views/site.erb
@@ -133,7 +133,7 @@
   <form method="POST" action="/site/<%= site.username %>/report">
     <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
+      <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
       <h3 id="reportLabel">Report Site</h3>
     </div>
     <div class="modal-body">
@@ -149,10 +149,10 @@
         </select>
       </p>
       <p>Comments:</p>
-      <textarea name="comments" type="text" style="width: 400px"></textarea>
+      <textarea name="comments" type="text" style="width: 400px; margin-bottom: 20px;"></textarea>
     </div>
     <div class="modal-footer">
-      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
       <button type="submit" class="btn btn-Action">Report</button>
     </div>
   </form>
@@ -162,7 +162,7 @@
   <form method="POST" action="/site/<%= site.username %>/block">
     <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
+      <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
       <h3 id="blockLabel">Block Site</h3>
     </div>
     <div class="modal-body">
@@ -178,7 +178,7 @@
       <p>Are you sure you want to do this?</p>
     </div>
     <div class="modal-footer">
-      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
       <button type="submit" class="btn btn-Action">Block Site</button>
     </div>
   </form>