feat: adapt styles for modal rendered at the top of the chat component tree (#341)

Author: MartinCupela

src/v2/styles/Modal/Modal-theme.scss

@@ -74,14 +74,11 @@
   }
 }
 
-// stream-chat-react image gallery does not show the modal inner container. It has to be reset to
-// width of its content in order the modal can be closed when clicked on overlay
-.str-chat__message-attachment--card,
-.str-chat__message-attachment--image,
-.str-chat__message-attachment--gallery {
-  .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner {
+@mixin image-on-modal {
+  .str-chat__modal__inner.str-chat-react__modal__inner {
     background-color: transparent;
     width: unset;
+    max-width: unset;
     height: unset;
     padding: 0;
 
@@ -92,3 +89,21 @@
     }
   }
 }
+
+// stream-chat-react image gallery does not show the modal inner container. It has to be reset to
+// width of its content in order the modal can be closed when clicked on overlay
+// todo: remove this rule once only GlobalModal is used and old Modal is removed from stream-chat-react
+.str-chat__message-attachment--card,
+.str-chat__message-attachment--image,
+.str-chat__message-attachment--gallery {
+  .str-chat__modal--open {
+    @include image-on-modal;
+  }
+}
+
+.str-chat-react__modal.str-chat__modal--open {
+  &.str-chat__image-modal,
+  &.str-chat__gallery-modal {
+    @include image-on-modal;
+  }
+}

src/v2/styles/Poll/Poll-layout.scss

@@ -46,14 +46,28 @@
     flex-direction: column;
     align-items: center;
 
-    .str-chat__poll-action {
-      padding: 0.675rem;
-      font: var(--str-chat__subtitle-text);
-      color: var(--str-chat__primary-color);
-    }
   }
 }
 
+.str-chat__poll-action {
+  padding: 0.675rem;
+  font: var(--str-chat__subtitle-text);
+  color: var(--str-chat__primary-color);
+}
+
+.str-chat__poll-results-modal,
+.str-chat__poll-answer-list-modal,
+.str-chat__add-poll-answer-modal,
+.str-chat__suggest-poll-option-modal,
+.str-chat__poll-options-modal {
+  button {
+    @include utils.button-reset;
+    cursor: pointer;
+  }
+}
+
+
+
 .str-chat__poll-option-list--full,
 .str-chat__modal__poll-results {
   .str-chat__amount-bar {
@@ -145,7 +159,7 @@
   }
 }
 
-.str-chat__poll-actions .str-chat__modal {
+.str-chat-react__modal.str-chat__poll-action-modal, .str-chat__poll-actions .str-chat__modal {
   .str-chat__modal__close-button {
     display: none;
   }

src/v2/styles/Poll/Poll-theme.scss

@@ -44,14 +44,14 @@
       }
     }
   }
+}
 
-  .str-chat__poll-option-list--full,
-  .str-chat__poll-answer,
-  .str-chat__modal__poll-option-list__title,
-  .str-chat__modal__poll-results .str-chat__modal__poll-results__title,
-  .str-chat__modal__poll-results .str-chat__poll-option {
-    border-radius: 0.75rem;
-  }
+.str-chat__poll-option-list--full,
+.str-chat__poll-answer,
+.str-chat__modal__poll-option-list__title,
+.str-chat__modal__poll-results .str-chat__modal__poll-results__title,
+.str-chat__modal__poll-results .str-chat__poll-option {
+  border-radius: 0.75rem;
 }
 
 .str-chat__poll-option-list--full {
@@ -66,7 +66,7 @@
   }
 }
 
-.str-chat__poll-actions .str-chat__modal {
+.str-chat__modal, .str-chat__poll-actions .str-chat__modal {
   .str-chat__poll-answer__text,
   .str-chat__modal__poll-option-list__title,
   .str-chat__modal__poll-results__title {