Merge branch 'glitch'

Conflicts:
	yarn.lock: caniuse-lite has been outdated in upstream for
	awhile, and we fixed it a few weeks ago in our fork

4 files changed, 63 insertions, 11 deletions

diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index cdf2d116b..2cc43afec 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/about.scss
@@ -324,7 +324,6 @@ $small-breakpoint: 960px;
     font-family: $font-sans-serif, sans-serif;
     font-size: 16px;
     font-weight: 400;
-    font-size: 16px;
     line-height: 30px;
     margin-bottom: 12px;
     color: $darker-text-color;
diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
index dcc551c5b..0089445e1 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
@@ -48,6 +48,8 @@
   overflow: hidden;
   transition: color .1s ease-out;
   cursor: pointer;
+  background: transparent;
+  border: 0;
 
   &:hover {
     color: darken($lighter-text-color, 4%);
@@ -106,11 +108,13 @@
   padding: 10px;
   padding-right: 45px;
   background: $simple-background-color;
+  position: relative;
 
   input {
     font-size: 14px;
     font-weight: 400;
     padding: 7px 9px;
+    padding-right: 25px;
     font-family: inherit;
     display: block;
     width: 100%;
@@ -131,6 +135,30 @@
   }
 }
 
+.emoji-mart-search-icon {
+  position: absolute;
+  top: 18px;
+  right: 45px + 5px;
+  z-index: 2;
+  padding: 2px 5px 1px;
+  border: 0;
+  background: none;
+  transition: all 100ms linear;
+  transition-property: opacity;
+  pointer-events: auto;
+  opacity: 0.7;
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.3;
+  }
+
+  svg {
+    fill: $action-button-color;
+  }
+}
+
 .emoji-mart-category .emoji-mart-emoji {
   cursor: pointer;
 
@@ -169,9 +197,36 @@
   }
 }
 
+/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
+.emoji-mart-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.emoji-mart-category-list {
+  margin: 0;
+  padding: 0;
+}
+
+.emoji-mart-category-list li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}
+
 .emoji-mart-emoji {
   position: relative;
   display: inline-block;
+  background: transparent;
+  border: 0;
+  padding: 0;
   font-size: 0;
 
   span {
@@ -182,19 +237,17 @@
 
 .emoji-mart-no-results {
   font-size: 14px;
+  color: $light-text-color;
   text-align: center;
+  padding: 5px 6px;
   padding-top: 70px;
-  color: $light-text-color;
-
-  .emoji-mart-category-label {
-    display: none;
-  }
 
-  .emoji-mart-no-results-label {
+ .emoji-mart-no-results-label {
     margin-top: .2em;
   }
 
   .emoji-mart-emoji:hover::before {
+    cursor: default;
     content: none;
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 16045d5ee..24f750e1d 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1232,7 +1232,6 @@ button.icon-button.active i.fa-retweet {
   span {
     display: block;
     float: left;
-    margin-left: 50%;
     transform: translateX(-50%);
     margin: 82px 0 0 50%;
     white-space: nowrap;
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index b397844a2..06bf55e1e 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .hero-widget {
   margin-bottom: 10px;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@@ -489,10 +491,10 @@ $fluid-breakpoint: $maximum-width + 20px;
   }
 
   &__item {
-    width: (960px - 20px) / 3;
+    width: math.div(960px - 20px, 3);
 
     @media screen and (max-width: $fluid-breakpoint) {
-      width: (940px - 20px) / 3;
+      width: math.div(940px - 20px, 3);
     }
 
     @media screen and (max-width: 640px) {
@@ -584,7 +586,6 @@ $fluid-breakpoint: $maximum-width + 20px;
     display: block;
     font-weight: 500;
     padding: 15px;
-    overflow: hidden;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;