Merge pull request #26 from GetStream/develop

fix(): update button styles

Author: zacheryconverse

src/styles/Gallery.scss

@@ -11,6 +11,9 @@
     background: var(--white);
     margin-bottom: 1px;
     margin-right: 1px;
+    border: none;
+    padding: 0;
+    display: flex;
 
     &:hover {
       cursor: -moz-zoom-in;
@@ -61,10 +64,13 @@
         cursor: -moz-zoom-in;
         cursor: -webkit-zoom-in;
         cursor: zoom-in;
+        cursor: pointer;
+        border: none;
 
         p {
           position: relative;
           z-index: 1;
+          font-size: 16px;
         }
 
         &::after {

src/styles/LoadMoreButton.scss

@@ -39,5 +39,6 @@
 
 .str-chat__load-more-button__button {
   display: flex;
+  align-items: center;
   justify-content: center;
 }

src/styles/Message.scss

@@ -687,6 +687,9 @@
         align-items: center;
         height: 10px;
         cursor: pointer;
+        background-color: transparent;
+        border: none;
+        padding: 0;
 
         svg {
           fill: var(--black);
@@ -707,6 +710,13 @@
         &--options {
           position: relative;
           display: none;
+
+          > button {
+            cursor: pointer;
+            background-color: transparent;
+            border: none;
+            padding: 3px 0;
+          }
         }
 
         &--options.str-chat-angular__message-simple__actions__action--options--editing {
@@ -724,6 +734,10 @@
       .str-chat__message-simple__actions__action--reactions {
         display: flex;
       }
+
+      .str-chat__message-simple__actions__action--reactions {
+        display: flex;
+      }
     }
 
     &-text {
@@ -815,6 +829,11 @@
     &:hover {
       .str-chat__message-simple__actions__action--options {
         display: flex;
+
+        button {
+          display: flex;
+          align-items: center;
+        }
       }
 
       .str-chat__message-simple__actions__action--reactions {

src/styles/MessageActions.scss

@@ -100,4 +100,9 @@
 
 .str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--options {
   display: flex;
+
+  button {
+    display: flex;
+    align-items: center;
+  }
 }

src/styles/MessageInputFlat.scss

@@ -126,6 +126,10 @@
     position: absolute;
     top: calc(100% - 45px);
     left: 25px;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    background-color: transparent;
 
     svg {
       fill: var(--black);

src/styles/Modal.scss

@@ -32,6 +32,8 @@
     cursor: pointer;
     display: flex;
     align-items: center;
+    background-color: transparent;
+    border: none;
 
     svg {
       position: relative;
@@ -54,6 +56,8 @@
     position: relative;
     top: unset;
     right: unset;
+    padding: 0;
+    width: auto;
   }
 }
 

src/styles/ReactionList.scss

@@ -37,6 +37,13 @@
       justify-content: center;
       margin: -1px -16px 0 0;
       z-index: 888;
+
+      button {
+        cursor: pointer;
+        background-color: transparent;
+        border: none;
+        display: flex;
+      }
     }
 
     .emoji-mart-emoji {

src/styles/ReactionSelector.scss

@@ -93,6 +93,13 @@
   }
 }
 
+button.str-chat__message-reactions-list-item {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+}
+
 .str-chat__reaction-selector {
   z-index: 999;
   height: 60px;

src/styles/SmallMessageInput.scss

@@ -19,9 +19,20 @@
     width: 100%;
   }
 
+  &-fileupload {
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+  }
+
   &-emojiselect {
     bottom: 10px;
     right: 6px;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background-color: transparent;
   }
 
   .rfu-file-upload-button {