Post-review adjustments

Author: arnautov-anton

src/components/Reactions/MessageReactionsDetail.tsx

@@ -210,7 +210,10 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
                           await contextHandleReaction(type, e);
 
                           // was 1, should be 0 after removal, display all reactions
-                          if (reactionCountBeforeRemoval <= 1) {
+                          if (
+                            selectedReactionType !== null &&
+                            reactionCountBeforeRemoval <= 1
+                          ) {
                             onSelectedReactionTypeChange?.(null);
                           } else {
                             refetch();
@@ -222,7 +225,7 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
                     )}
                   </div>
                   <span className='str-chat__message-reactions-detail__user-list-item-icon'>
-                    {EmojiComponent && !selectedReactionType && <EmojiComponent />}
+                    {!selectedReactionType && EmojiComponent && <EmojiComponent />}
                   </span>
                 </div>
               );

src/components/Reactions/styling/MessageReactionsDetail.scss

@@ -29,10 +29,14 @@
     width: 100%;
     bottom: 0;
     inset-inline-start: 0;
-    height: var(--size-12);
+    height: var(--size-16);
     border-end-end-radius: inherit;
     border-end-start-radius: inherit;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 130%);
+    background: linear-gradient(
+      to bottom,
+      transparent 5%,
+      var(--background-core-elevation-0) 95%
+    );
   }
 
   font-family: var(--typography-font-family-sans);
@@ -65,7 +69,7 @@
   .str-chat__message-reactions-detail__reaction-type-list {
     list-style: none;
     margin: 0;
-    padding-inline: var(--spacing-xs);
+    padding-inline: var(--spacing-md);
     padding-block: var(--spacing-xs);
     display: flex;
     flex-wrap: wrap;