MM-23660 - Updating emoji popup on desktop and mobile

sass/components/_emojisprite.scss

@@ -18,6 +18,7 @@
  height: 64px;
  max-width: none;
  width: 64px;
+ flex: 0 0 64px;
 }
 
 .emojisprite-loading {

sass/components/_emoticons.scss

@@ -262,54 +262,6 @@
  vertical-align: top;
  }
 
- .emoji-picker__item {
- border-radius: 3px;
- cursor: pointer;
- display: inline-block;
- height: 26px;
- margin: 0;
- overflow: hidden;
- padding: 2px;
- position: relative;
- vertical-align: middle;
- width: 26px;
- margin: 0 3px 1px;
-
- &.selected,
- &:hover {
- background-color: v(center-channel-color-15);
- }
-
- &:active {
- background-color: v(center-channel-color-30);
- }
-
- > div {
- text-align: center;
-
- > img {
- left: -21px;
- position: relative;
- top: -21px;
-
- &.emoji-shipit {
- left: -26px;
- top: -28px;
- }
-
- &.emoji-category--custom {
- @include transform(scale(1));
- height: auto;
- left: auto;
- max-height: 22px;
- max-width: 22px;
- top: auto;
- width: auto;
- }
- }
- }
- }
-
  .emoji-picker-items__container {
  > span {
  border-radius: 6px;
@@ -340,6 +292,49 @@
  }
 }
 
+.emoji-picker__item {
+ border-radius: 3px;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 26px;
+ margin: 0;
+ overflow: hidden;
+ padding: 2px;
+ position: relative;
+ vertical-align: middle;
+ width: 26px;
+ margin: 0 3px 4px;
+
+ &.selected,
+ &:hover {
+ background-color: v(center-channel-color-15);
+ }
+
+ &:active {
+ background-color: v(center-channel-color-30);
+ }
+
+ > div {
+ text-align: center;
+ }
+
+ img {
+ position: relative;
+
+ &.emoji-category--custom {
+ @include transform(scale(1));
+ height: auto;
+ left: auto;
+ max-height: 22px;
+ max-width: 22px;
+ top: auto;
+ width: auto;
+ }
+ }
+}
+
 .emoji-picker__preview {
  align-items: stretch;
  border-top: 1px solid;

sass/responsive/_mobile.scss

@@ -28,6 +28,7 @@
 
 
  .backstage-list__item {
+
  .item-actions,
  .actions {
  margin: 10px 0;
@@ -103,34 +104,29 @@
  height: auto !important;
  flex-grow: 1;
 
- .emoji-picker-items__container {
-
- .emoji-picker__category-header {
- font-size: 14px;
- padding-top: 8px;
- }
-
- .emoji-picker__item {
- margin: calc(100% / 45);
- padding: 0;
- padding-top: calc(100% / 15);
- width: calc(100% / 15);
- height: auto;
+ .emoji-picker__category-header {
+ font-size: 14px;
+ padding-top: 8px;
+ }
+ }
 
- >div {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 30px;
- height: 30px;
- transform: translate(-50%, -50%);
+ .emoji-picker__item {
+ margin: calc(100% / 45);
+ padding: 0;
+ padding-top: calc(100% / 15);
+ width: calc(100% / 15);
+ height: auto;
 
- >img {
- top: -17px;
- left: -17px;
- }
- }
- }
+ > div {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 30px;
+ height: 30px;
+ transform: translate(-50%, -50%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
  }
  }
 
@@ -189,8 +185,9 @@
  }
 
  .MenuItem {
- > button,
- > a {
+
+ >button,
+ >a {
  height: auto;
  padding: 3px 16px;
  font-size: 15px;
@@ -214,10 +211,12 @@
  >li {
  >div {
  border-top-color: var(--center-channel-color-10) !important;
+
  .SubMenu__icon {
  padding: 0 5px 0 8px !important;
  }
  }
+
  >div,
  >button {
  @include border-radius(0);
@@ -227,6 +226,7 @@
  }
 
  &:first-child {
+
  div,
  button {
  border: none;
@@ -1538,7 +1538,7 @@
  border: none;
  width: 290px;
 
- + .inner-wrap #app-content {
+ +.inner-wrap #app-content {
  margin-left: 0;
  }
 
@@ -1600,7 +1600,8 @@
  .SidebarChannel {
  height: 45px;
 
- a, button {
+ a,
+ button {
  height: 45px;
  }
 
@@ -1807,11 +1808,12 @@
  margin-left: 0;
  }
 
- #SidebarContainer + .inner-wrap #app-content {
+ #SidebarContainer+.inner-wrap #app-content {
  margin-left: 0;
  }
 
- .sidebar--left, #SidebarContainer {
+ .sidebar--left,
+ #SidebarContainer {
  left: 0;
 
  &.move--right {
@@ -2109,14 +2111,10 @@
  left: 50px !important;
  }
 
- .emoji-picker__items {
- .emoji-picker-items__container {
- .emoji-picker__item {
- margin: 0;
- padding-top: calc(100% / #{$emoji-per-row});
- width: calc(100% / #{$emoji-per-row});
- }
- }
+ .emoji-picker__item {
+ margin: 0;
+ padding-top: calc(100% / #{$emoji-per-row});
+ width: calc(100% / #{$emoji-per-row});
  }
 
  .post {
@@ -2142,15 +2140,6 @@
  }
  }
 
- .emoji-picker {
- &.emoji-picker--single {
- .emoji-picker__inner {
- margin-top: 59px;
- height: calc(100vh - 60px);
- }
- }
- }
-
  .sidebar--right {
  .post {
  &.post--compact {
@@ -2222,7 +2211,8 @@
  }
  }
 
- .sidebar--left, #SidebarContainer {
+ .sidebar--left,
+ #SidebarContainer {
  @include translate3d(-260px, 0, 0);
  width: 260px;
 
@@ -2339,7 +2329,9 @@
  }
 
  .multi-teams {
- .sidebar--left, #SidebarContainer {
+
+ .sidebar--left,
+ #SidebarContainer {
  width: 220px;
 
  .nav-pills__unread-indicator {
@@ -2444,6 +2436,7 @@ label {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
+
  select,
  textarea,
  input {