From 474b6e6dade7c156e812c96fe96ae14aec92c199 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 28 Mar 2018 08:56:35 -0700
Subject: [PATCH] replace &times; with svg x icon

---
 bin/svgs.js                                  |  3 ++-
 routes/_components/compose/ComposeMedia.html | 16 +++++++++-------
 routes/_components/dialog/ModalDialog.html   | 13 ++++++++-----
 templates/2xx.html                           |  1 +
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/bin/svgs.js b/bin/svgs.js
index ec5e841..8855872 100644
--- a/bin/svgs.js
+++ b/bin/svgs.js
@@ -32,5 +32,6 @@ module.exports = [
   {id: 'fa-check', src: 'node_modules/font-awesome-svg-png/white/svg/check.svg', title: 'Check'},
   {id: 'fa-trash', src: 'node_modules/font-awesome-svg-png/white/svg/trash-o.svg', title: 'Delete'},
   {id: 'fa-hourglass', src: 'node_modules/font-awesome-svg-png/white/svg/hourglass.svg', title: 'Follow requested'},
-  {id: 'fa-pencil', src: 'node_modules/font-awesome-svg-png/white/svg/pencil.svg', title: 'Compose'}
+  {id: 'fa-pencil', src: 'node_modules/font-awesome-svg-png/white/svg/pencil.svg', title: 'Compose'},
+  {id: 'fa-times', src: 'node_modules/font-awesome-svg-png/white/svg/times.svg', title: 'Close'}
 ]
diff --git a/routes/_components/compose/ComposeMedia.html b/routes/_components/compose/ComposeMedia.html
index 2b7b15b..2a5d93c 100644
--- a/routes/_components/compose/ComposeMedia.html
+++ b/routes/_components/compose/ComposeMedia.html
@@ -5,9 +5,11 @@
         <img src="{{mediaItem.data.preview_url}}" alt="{{mediaItem.file.name}}"/>
         <div class="compose-media-delete">
           <button class="compose-media-delete-button"
-                  data-a11y-dialog-hide aria-label="Delete {{mediaItem.file.name}}"
+                  aria-label="Delete {{mediaItem.file.name}}"
                   on:click="onDeleteMedia(i)" >
-            <span aria-hidden="true">&times;</span>
+            <svg class="compose-media-delete-button-svg">
+              <use xlink:href="#fa-times" />
+            </svg>
           </button>
         </div>
         <div class="compose-media-alt">
@@ -74,17 +76,17 @@
     margin: 2px;
   }
   .compose-media-delete-button {
-    padding: 0 0 7px;
+    padding: 10px;
     background: none;
     border: none;
   }
   .compose-media-delete-button:hover {
     background: var(--toast-border);
   }
-  .compose-media-delete-button span {
-    padding: 0 10px 7px;
-    font-size: 32px;
-    color: var(--button-text);
+  .compose-media-delete-button-svg {
+    fill: var(--button-text);
+    width: 18px;
+    height: 18px;
   }
 </style>
 <script>
diff --git a/routes/_components/dialog/ModalDialog.html b/routes/_components/dialog/ModalDialog.html
index c40e3a8..2bdc871 100644
--- a/routes/_components/dialog/ModalDialog.html
+++ b/routes/_components/dialog/ModalDialog.html
@@ -15,7 +15,9 @@
       <div class="close-dialog-button-wrapper">
         <button class="close-dialog-button"
                 data-a11y-dialog-hide aria-label="Close dialog">
-          <span class="close-dialog-button-span" aria-hidden="true">&times;</span>
+          <svg class="close-dialog-button-svg">
+            <use xlink:href="#fa-times" />
+          </svg>
         </button>
       </div>
     </div>
@@ -88,10 +90,11 @@
     justify-content: center;
     align-items: center;
   }
-  .close-dialog-button-span {
-    padding: 0 10px 5px;
-    font-size: 32px;
-    color: var(--button-primary-text);
+  .close-dialog-button-svg {
+    padding: 10px;
+    fill: var(--button-primary-text);
+    width: 24px;
+    height: 24px;
     flex: 1;
   }
   .muted-style .modal-dialog-header {
diff --git a/templates/2xx.html b/templates/2xx.html
index a7e9194..ae1efe7 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -110,6 +110,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
 <symbol id="fa-trash" viewBox="0 0 1792 1792"><title>Delete</title><path d="M704 736v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23V736q0-14 9-23t23-9h64q14 0 23 9t9 23zm256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23V736q0-14 9-23t23-9h64q14 0 23 9t9 23zm256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23V736q0-14 9-23t23-9h64q14 0 23 9t9 23zm128 724V512H448v948q0 22 7 40.5t14.5 27 10.5 8.5h832q3 0 10.5-8.5t14.5-27 7-40.5zM672 384h448l-48-117q-7-9-17-11H738q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5H480q-66 0-113-58.5T320 1464V512h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z"></path></symbol>
 <symbol id="fa-hourglass" viewBox="0 0 1792 1792"><title>Follow requested</title><path d="M1632 1600q14 0 23 9t9 23v128q0 14-9 23t-23 9H160q-14 0-23-9t-9-23v-128q0-14 9-23t23-9h1472zm-1374-64q3-55 16-107t30-95 46-87 53.5-76 64.5-69.5 66-60 70.5-55T671 939t65-43q-43-28-65-43t-66.5-47.5-70.5-55-66-60-64.5-69.5-53.5-76-46-87-30-95-16-107h1276q-3 55-16 107t-30 95-46 87-53.5 76-64.5 69.5-66 60-70.5 55T1121 853t-65 43q43 28 65 43t66.5 47.5 70.5 55 66 60 64.5 69.5 53.5 76 46 87 30 95 16 107H258zM1632 0q14 0 23 9t9 23v128q0 14-9 23t-23 9H160q-14 0-23-9t-9-23V32q0-14 9-23t23-9h1472z"></path></symbol>
 <symbol id="fa-pencil" viewBox="0 0 1792 1792"><title>Compose</title><path d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832H128v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"></path></symbol>
+<symbol id="fa-times" viewBox="0 0 1792 1792"><title>Close</title><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"></path></symbol>
 </svg><!-- end insert svg here -->
   </svg>
   <!-- The application will be rendered inside this element,