From f6062ebfccb5a3653844fd69d0b8afdf820524cb Mon Sep 17 00:00:00 2001
From: ZappoMan <brad@highfidelity.io>
Date: Fri, 19 Jan 2018 16:00:08 -0800
Subject: [PATCH] new icon and button layout

---
 .../icons/tablet-icons/EmoteAppIcon.svg       | 21 ++++++++++++++++++
 scripts/system/emote.js                       |  2 +-
 scripts/system/html/EmoteApp.html             | 22 +++++++++----------
 3 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 interface/resources/icons/tablet-icons/EmoteAppIcon.svg

diff --git a/interface/resources/icons/tablet-icons/EmoteAppIcon.svg b/interface/resources/icons/tablet-icons/EmoteAppIcon.svg
new file mode 100644
index 0000000000..340f0fcd2f
--- /dev/null
+++ b/interface/resources/icons/tablet-icons/EmoteAppIcon.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100.8" style="enable-background:new 0 0 100 100.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M26.7,83.9c7.3,1.2,14.8,1.8,22.1,1.8c0.4,0,0.8,0,1.2,0c7.8-0.1,15.6-0.8,23.4-2.2l0,0
+	c5.7-1.1,11.3-6.6,12.5-12.3C87.3,64.2,88,57,88,50s-0.7-14.2-2.1-21.2c-1.2-5.6-6.8-11.1-12.5-12.2c-7.7-1.4-15.6-2.2-23.4-2.2
+	c-7.7-0.1-15.6,0.5-23.4,1.8c-5.7,1-11.4,6.5-12.6,12.3c-1.4,7.2-2.1,14.4-2.1,21.6s0.7,14.4,2.1,21.7
+	C15.3,77.4,20.9,82.9,26.7,83.9z M20.9,29.8c0.6-2.9,4-6.3,6.9-6.8c7-1.1,14-1.7,21-1.7c0.4,0,0.8,0,1.2,0
+	c7.4,0.1,14.8,0.8,22.1,2.1c2.9,0.6,6.4,3.9,6.9,6.7c1.3,6.6,1.9,13.3,1.9,19.9c0,6.6-0.6,13.3-1.9,19.8c-0.6,2.8-4,6.2-6.9,6.8
+	c-7.3,1.3-14.8,2.1-22.1,2.1c-7.4,0.1-14.8-0.5-22.1-1.7c-2.9-0.5-6.3-3.9-6.9-6.7c-1.3-6.7-2-13.5-2-20.3
+	C19,43.3,19.6,36.4,20.9,29.8z"/>
+<path class="st0" d="M32.3,61.4c-0.5,1.3-0.1,2.8,0.9,3.8c0.3,0.3,7.2,6.6,15.9,6.6c0.8,0,1.7-0.1,2.6-0.2
+	c9.8-1.5,15.5-11.1,15.8-11.5c0.7-1.2,0.6-2.8-0.2-3.9c-0.9-1.1-2.3-1.6-3.7-1.3c-9.2,2.5-18.6,3.9-28.1,4.2
+	C34,59.1,32.8,60,32.3,61.4z"/>
+<circle class="st0" cx="36.5" cy="42.8" r="9"/>
+<path class="st0" d="M61.4,44.1h6.1c1.9,0,3.3-1.5,3.3-3.3c0-1.9-1.5-3.3-3.3-3.3h-6.1c-1.9,0-3.3,1.5-3.3,3.3
+	C58.1,42.7,59.6,44.1,61.4,44.1z"/>
+</svg>
diff --git a/scripts/system/emote.js b/scripts/system/emote.js
index f1f739c126..139870fd63 100644
--- a/scripts/system/emote.js
+++ b/scripts/system/emote.js
@@ -43,7 +43,7 @@ var activeTimer = false; // used to cancel active timer if a user plays an amima
 var activeEmote = false; // to keep track of the currently playing emote
 
 button = tablet.addButton({
-    //icon: "icons/tablet-icons/emote.svg", // TODO - we need graphics for this
+    icon: "icons/tablet-icons/EmoteAppIcon.svg",
     text: EMOTE_LABEL,
     sortOrder: EMOTE_APP_SORT_ORDER
 });
diff --git a/scripts/system/html/EmoteApp.html b/scripts/system/html/EmoteApp.html
index 30ef3e17a1..0a423b9b6c 100644
--- a/scripts/system/html/EmoteApp.html
+++ b/scripts/system/html/EmoteApp.html
@@ -44,11 +44,11 @@
             input[type=button] {
                 font-family: 'Raleway';
                 font-weight: bold;
-                font-size: 13px;
+                font-size: 20px;
                 text-transform: uppercase;
                 vertical-align: top;
-                height: 28px;
-                min-width: 120px;
+                height: 105px;
+                min-width: 190px;
                 padding: 0px 18px;
                 margin-right: 6px;
                 border-radius: 5px;
@@ -98,14 +98,14 @@
         </div>
         <div class="content">
             <p>Click an emotion to Emote:<p>
-            <p><input type="button" class="emote-button white" value="Crying"></p>
-            <p><input type="button" class="emote-button white" value="Surprised"></p>
-            <p><input type="button" class="emote-button white" value="Dancing"></p>
-            <p><input type="button" class="emote-button white" value="Cheering"></p>
-            <p><input type="button" class="emote-button white" value="Waving"></p>
-            <p><input type="button" class="emote-button white" value="Fall"></p>
-            <p><input type="button" class="emote-button white" value="Pointing"></p>
-            <p><input type="button" class="emote-button white" value="Clapping"></p>
+            <p><input type="button" class="emote-button white" value="Crying">
+               <input type="button" class="emote-button white" value="Surprised"></p>
+            <p><input type="button" class="emote-button white" value="Dancing">
+               <input type="button" class="emote-button white" value="Cheering"></p>
+            <p><input type="button" class="emote-button white" value="Waving">
+               <input type="button" class="emote-button white" value="Fall"></p>
+            <p><input type="button" class="emote-button white" value="Pointing">
+               <input type="button" class="emote-button white" value="Clapping"></p>
         </div>
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>