Improve UI of example site

4 years ago · 6936302817
2 changed files with 19 additions and 12 deletions
--- a/examples/public/index.html
+++ b/examples/public/index.html
@ -8,6 +8,7 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
+    <div id="emoji-header">😎</div>
    <h1>Emoji Button</h1>
    <p>Vanilla JavaScript emoji picker</p>
    <p>By <a href="https://joeattardi.codes">Joe Attardi</a>.</p>
@ -16,6 +17,6 @@
      <a href="https://www.npmjs.com/package/@joeattardi/emoji-button"><img src="https://img.shields.io/npm/v/@joeattardi/emoji-button" /></a>
    </div>
    <input type="text" id="emoji-input" placeholder="Enter some text and emojis...">
-    <button id="emoji-button"><img src="smiley.png" /></button>
+    <button id="emoji-button">😎</button>
  </body>
 </html>
--- a/examples/public/style.css
+++ b/examples/public/style.css
@ -6,23 +6,20 @@ body {
 }

 #emoji-button {
-  padding: 0.25em 0.5em;
-  font-size: 1em;
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
  background: #EEEEEE;
-  border-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
  cursor: pointer;
-  outline: none;
  border: none;
-  background: transparent;
+  background: #DDDDDD;
  position: relative;
-  left: -3rem;
-  top: 2px;
+  left: -3.5rem;
+  top: 1px;
  display: inline-flex;
  align-items: center;
-}
-
-#emoji-button img {
-  height: 1rem;
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
 }

 #emoji-input {
@ -30,8 +27,17 @@ body {
  font-size: 1rem;
  height: 1rem;
  padding-right: 2rem;
+  outline: none;
  width: 20rem;
  margin: 1rem;
  border: 1px solid #DDDDDD;
  border-radius: 5px;
 }
+
+#emoji-header {
+  font-size: 10rem;
+}
+
+h1 {
+  margin: 0;
+}