From b555c395eb4323ba367cb72717ab6d75ffab48b3 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <sleepwalkingnarcolepticinsomniac@outlook.com>
Date: Thu, 9 Mar 2017 07:53:00 -0500
Subject: [PATCH] Edit/delete as buttons with icons

The icons I used are from right here on Github. They're SVG, so there should't be reliability issues. Wanted to see how they'd look, and I really kinda like it. Thoughts?
---
 popup.css  | 26 ++++++++++++++++++++++++--
 popup.html | 12 ++++++++++--
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/popup.css b/popup.css
index c69033d0..a5d6182b 100644
--- a/popup.css
+++ b/popup.css
@@ -24,7 +24,6 @@ input[type=checkbox] {
 .style-name {
   cursor: default;
   font-weight: bold;
-  margin-bottom: 2px;
   display: block;
 }
 a, a:visited {
@@ -37,6 +36,7 @@ a, a:visited {
   vertical-align: top;
 }
 .left-gutter input {
+  margin-bottom: 1px;
   margin-top: 0;
   margin-left: 0;
 }
@@ -66,7 +66,29 @@ body.blocked > DIV {
   text-decoration: line-through;
 }
 #installed .actions a {
-  margin-right: 0.2em;
+  text-decoration: none;
+}
+#installed .style-edit-link, #installed .delete {
+  height: 22px;
+  width: 22px;
+  -webkit-appearance: button;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.svg-icon {
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+}
+.svg-icon path,
+.svg-icon polygon,
+.svg-icon rect {
+  fill: hsl(0, 0%, 20%);
+}
+.svg-icon circle {
+  stroke: hsl(0, 0%, 20%);
+  stroke-width: 1;
 }
 body > .actions {
   margin-top: 0.5em;
diff --git a/popup.html b/popup.html
index 639f63ff..30e3ddde 100644
--- a/popup.html
+++ b/popup.html
@@ -14,8 +14,16 @@
                 <div class="actions">
                     <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
                     <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
-                    <a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>
-                    <a href="#" class="delete" i18n-text="deleteStyleLabel"></a>
+                    <a class="style-edit-link" href="edit.html?id=">
+					    <svg class="svg-icon" viewBox="0 0 14 16">
+							<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
+						</svg>
+					</a>
+                    <a href="#" class="delete">
+					    <svg class="svg-icon" viewBox="0 0 14 16">
+							<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
+						</svg>
+				    </a>
                 </div>
             </div>
         </div>