fix: more styling

src/svelte/categories.js

@@ -4,7 +4,7 @@ export const categories = [
   { group: 1, emoji: '👋', name: 'people-body' },
   { group: 3, emoji: '🐱', name: 'animals-nature' },
   { group: 4, emoji: '🍎', name: 'food-drink' },
-  { group: 5, emoji: '🚗', name: 'travel-places' },
+  { group: 5, emoji: '🏠️', name: 'travel-places' },
   { group: 6, emoji: '⚽', name: 'activities' },
   { group: 7, emoji: '✏', name: 'objects' },
   { group: 8, emoji: '✅', name: 'symbols' },

src/svelte/components/Picker/Picker.html

@@ -5,17 +5,21 @@
   bind:this={rootElement}
   style="--lep-num-columns: {numColumns};"
 >
-  <div>
-    <input
-      id="lep-search"
-      class="lep-search"
-      type="text"
-      placeholder={i18n.search}
-      autocapitalize="none"
-      spellcheck="true"
-      bind:value={rawSearchText}
-    >
-    <label class="lep-sr-only" for="lep-search">{i18n.search}</label>
+  <div class="lep-search-row">
+    <div class="lep-search-wrapper">
+      <input
+        id="lep-search"
+        class="lep-search"
+        type="text"
+        placeholder={i18n.search}
+        autocapitalize="none"
+        spellcheck="true"
+        bind:value={rawSearchText}
+      >
+      <label class="lep-sr-only" for="lep-search">{i18n.search}</label>
+    </div>
+    <button class="lep-emoji lep-skintone-button">👍</button>
+
   </div>
   <div class="lep-nav" role="tablist" aria-label={i18n.categoriesLabel}>
     {#each categories as category (category.group)}
@@ -23,6 +27,7 @@
             class="lep-nav-button lep-emoji"
             aria-controls="lep-tab-{category.group}"
             aria-label={i18n.categories[category.name]}
+            aria-selected={currentCategory.group === category.group}
             title={i18n.categories[category.name]}
             on:click={() => handleCategoryClick(category)}>
       {category.emoji}

src/svelte/components/Picker/Picker.js

@@ -22,6 +22,7 @@ let rootElement
 let baselineEmojiWidth
 let baselineEmoji
 let darkMode = 'auto'
+let resolvedDarkMode // eslint-disable-line no-unused-vars
 
 $: resolvedDarkMode = darkMode === 'auto' ? matchMedia('(prefers-color-scheme: dark)').matches : !!darkMode
 

src/svelte/components/Picker/Picker.scss

@@ -33,6 +33,8 @@
 
 .lep-nav {
   display: flex;
+  border-bottom: 1px solid var(--lep-border-color);
+  contain: content;
 }
 
 button.lep-nav-button.lep-emoji {
@@ -44,10 +46,30 @@ button.lep-nav-button.lep-emoji {
   min-height: 0;
   flex: 1;
   display: flex;
+  contain: content;
 }
 
 button.lep-tabpanel-emoji.lep-emoji {
-  padding: 0.5rem 0;
+
+}
+
+.lep-search-row {
+  display: flex;
+  align-items: center;
+  contain: content;
+}
+
+.lep-search-wrapper {
+  flex: 1;
+  min-width: 0;
+  padding-left: 0.5rem;
+}
+
+button.lep-emoji {
+  padding: 0.5rem 0.5rem;
+}
+
+button.lep-emoji.lep-skintone-button {
 }
 
 input.lep-search {
@@ -55,6 +77,7 @@ input.lep-search {
   border-radius: 0.5rem;
   border: 1px solid var(--lep-input-border-color);
   background-color: var(--lep-background-color);
+  width: 100%;
 
   &::placeholder {
     color: var(--lep-placeholder-color);

src/svelte/styles/global.scss

@@ -15,6 +15,7 @@
   flex-direction: column;
   max-height: 100%;
   background: var(--lep-background-color);
+  border: 1px solid var(--lep-border-color);
 }
 
 // via https://stackoverflow.com/a/19758620

src/svelte/styles/variables.scss

@@ -1,17 +1,20 @@
 @mixin vars($dark) {
-  $border: #999 !default;
+  $border: #e0e0e0 !default;
   $bg: #fff !default;
   $placeholder: #999 !default;
   $outline: rgb(43, 110, 180) !default; // Chrome default focus color
+  $input-border: #999 !default;
 
   @if $dark {
-    $border: #ccc;
-    $bg: #111;
+    $border: #444;
+    $bg: #222;
     $placeholder: #ccc;
     $outline: #fff;
+    $input-border: #ccc;
   }
 
-  --lep-input-border-color: #{$border};
+  --lep-border-color: #{$border};
+  --lep-input-border-color: #{$input-border};
   --lep-background-color: #{$bg};
   --lep-placeholder-color: #{$placeholder};
   --lep-outline-color: #{$outline};