From e5748b974f03d47de1a1e413acd7885b0941c27b Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 1 Apr 2016 15:15:02 -0700
Subject: [PATCH] Harmonize x/close buttons

// FREEBIE
---
 background.html                |  6 ++---
 stylesheets/_conversation.scss |  3 +++
 stylesheets/_global.scss       | 48 +++++++++++----------------------
 stylesheets/manifest.css       | 49 +++++++++++++++-------------------
 4 files changed, 43 insertions(+), 63 deletions(-)

diff --git a/background.html b/background.html
index 90c18a24..a3817dce 100644
--- a/background.html
+++ b/background.html
@@ -108,7 +108,7 @@
   </script>
   <script type='text/x-tmpl-mustache' id='attachment-preview'>
         <img src='{{ source }}' class='preview' />
-        <div class='close'>x</div>
+        <div class='x close'></div>
   </script>
   <script type='text/x-tmpl-mustache' id='hasRetry'>
     {{ messageNotSent }}
@@ -331,7 +331,7 @@
   <script type='text/x-tmpl-mustache' id='debug-log'>
     <div class='content'>
       <div>
-        <a class='x close'>&times;</a>
+        <a class='x close'></a>
         <h1> {{ title }} </h1>
         <p> {{ debugLogExplanation }}</p>
       </div>
@@ -348,7 +348,7 @@
   </script>
   <script type='text/x-tmpl-mustache' id='settings'>
     <div class='content'>
-      <a class='x close'>&times;</a>
+      <a class='x close'></a>
       <h3>{{ notifications }}</h3>
       <p>{{ notificationSettingsDialog }}</p>
       <div>
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 7f82598f..ddd7696e 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -496,6 +496,9 @@
     }
 
     .close {
+      position: absolute;
+      top: 5px;
+      right: 2px;
       background: #999;
 
       &:hover {
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index fdfd76b6..44aabe84 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -169,23 +169,6 @@ button.back {
     cursor: pointer;
     z-index: 1;
   }
-
-  .close {
-    font-family: sans-serif;
-    color: white;
-    position: absolute;
-    top: 5px;
-    right: 2px;
-    cursor: pointer;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    padding: 0px;
-
-    background: #666;
-    color: #fff;
-    text-align: center;
-  }
 }
 
 .dropoff {
@@ -487,23 +470,24 @@ $avatar-size: 44px;
     overflow: auto;
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
   }
+}
 
-  a.x {
-    display: inline-block;
-    float: right;
-    cursor: pointer;
+.x {
+  display: inline-block;
+  float: right;
+  cursor: pointer;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  padding: 3px;
+  background: $grey;
 
-    font-family: sans-serif;
-    color: white;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    padding: 0px;
-
-    background: #666;
-    color: #fff;
-    text-align: center;
-    font-size: 19px;
+  &:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    @include color-svg('/images/x.svg', white);
   }
 }
 
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index f359f078..8fba31e1 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -172,20 +172,6 @@ button.back {
     left: 0;
     cursor: pointer;
     z-index: 1; }
-  .file-input .close {
-    font-family: sans-serif;
-    color: white;
-    position: absolute;
-    top: 5px;
-    right: 2px;
-    cursor: pointer;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    padding: 0px;
-    background: #666;
-    color: #fff;
-    text-align: center; }
 
 .dropoff {
   outline: solid 1px #2090ea; }
@@ -412,20 +398,24 @@ img.emoji {
     border-radius: 5px;
     overflow: auto;
     box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
-  .modal a.x {
-    display: inline-block;
-    float: right;
-    cursor: pointer;
-    font-family: sans-serif;
-    color: white;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    padding: 0px;
-    background: #666;
-    color: #fff;
-    text-align: center;
-    font-size: 19px; }
+
+.x {
+  display: inline-block;
+  float: right;
+  cursor: pointer;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  padding: 3px;
+  background: #616161; }
+  .x:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    -webkit-mask: url("/images/x.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: white; }
 
 input[type=text]:active, input[type=text]:focus, input[type=search]:active, input[type=search]:focus, textarea:active, textarea:focus {
   outline: 1px solid #2090ea; }
@@ -1026,6 +1016,9 @@ input.search {
       border-radius: 5px;
       max-height: 100px; }
     .bottom-bar .attachment-previews .close {
+      position: absolute;
+      top: 5px;
+      right: 2px;
       background: #999; }
       .bottom-bar .attachment-previews .close:hover {
         background: #616161; }