Improve style

Signed-off-by: Tulir Asokan <tulir@maunium.net>

res/css/views/emojipicker/_EmojiPicker.scss

@@ -36,6 +36,16 @@ limitations under the License.
     border-bottom: 1px solid $message-action-bar-border-color;
 }
 
+.mx_EmojiPicker button > svg {
+    width: 100%;
+    height: 100%;
+    fill: $primary-fg-color;
+}
+
+.mx_EmojiPicker button:disabled > svg {
+    fill: $focus-bg-color;
+}
+
 .mx_EmojiPicker_anchor {
     border: none;
     padding: 8px 8px 6px;
@@ -43,14 +53,11 @@ limitations under the License.
     background-color: transparent;
     border-radius: 4px 4px 0 0;
 
-    svg {
-        width: 20px;
-        height: 20px;
-        fill: $primary-fg-color;
-    }
+    width: 36px;
+    height: 38px;
 
-    &:disabled svg {
-        fill: $focus-bg-color;
+    &:not(:disabled) {
+        cursor: pointer;
     }
 
     &:not(:disabled):hover {
@@ -80,32 +87,33 @@ limitations under the License.
     button {
         border: none;
         background-color: inherit;
-        padding: 0;
-        margin: 8px;
-
-        svg {
-            align-self: center;
-            width: 16px;
-            height: 16px;
-        }
+        margin: 0;
+        padding: 8px;
+        align-self: center;
+        width: 32px;
+        height: 32px;
     }
 }
 
+.mx_EmojiPicker_search_clear {
+    cursor: pointer;
+}
+
 .mx_EmojiPicker_category {
     padding: 0 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
-    font-size: 16px;
-    font-weight: 600;
-    margin: 0;
+.mx_EmojiPicker_category_label {
+    width: 304px;
 }
 
 .mx_EmojiPicker_list {
+    width: 304px;
     padding: 0;
     margin: 0;
-    // TODO the emoji rows need to be center-aligned, but the individual emojis shouldn't be.
-    //text-align: center;
 }
 
 .mx_EmojiPicker_item {
@@ -125,6 +133,12 @@ limitations under the License.
     }
 }
 
+.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+}
+
 .mx_EmojiPicker_footer {
     border-top: 1px solid $message-action-bar-border-color;
     height: 72px;

src/components/views/emojipicker/EmojiPicker.js

@@ -168,7 +168,6 @@ class EmojiPicker extends React.Component {
     }
 
     scrollToCategory(category) {
-        const index = this.categories.findIndex(cat => cat.id === category);
         this.bodyRef.current.querySelector(`[data-category-id="${category}"]`).scrollIntoView();
     }
 
@@ -179,7 +178,10 @@ class EmojiPicker extends React.Component {
                 emojis = id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[id];
             }
             this.memoizedDataByCategory[id] = emojis.filter(emoji => emoji.filterString.includes(filter));
-            this.categories.find(cat => cat.id === id).enabled = this.memoizedDataByCategory[id].length > 0;
+            const cat = this.categories.find(cat => cat.id === id);
+            cat.enabled = this.memoizedDataByCategory[id].length > 0;
+            // The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...
+            cat.ref.current.disabled = !cat.enabled;
         }
         this.setState({ filter });
         // Header underlines need to be updated, but updating requires knowing

src/components/views/emojipicker/Search.js

@@ -30,7 +30,8 @@ class Search extends React.PureComponent {
             <div className="mx_EmojiPicker_search">
                 <input type="text" placeholder="Search" value={this.props.query}
                     onChange={ev => this.props.onChange(ev.target.value)}/>
-                <button onClick={() => this.props.onChange("")}>
+                <button onClick={() => this.props.onChange("")}
+                    className={this.props.query ? "mx_EmojiPicker_search_clear" : ""}>
                     {this.props.query ? icons.search.delete() : icons.search.search()}
                 </button>
             </div>