fix: Apply the center alignment to the Badge and Button (#914)

### Issue
[SBISSUE-14550](https://sendbird.atlassian.net/browse/SBISSUE-14550)
We've used `display: inline-block` inside of the Badge and Button.
But it breaks the center alignment in the **FireFox** browser, so need
to change to using `display: inline-flex` and add more properties for
center alignment

### Fix
* Apply the center alignment to the Badge and Button components (in
FireFox)

[SBISSUE-14550]:
https://sendbird.atlassian.net/browse/SBISSUE-14550?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: HoonBaek

src/ui/Badge/index.scss

@@ -4,7 +4,9 @@
   height: 20px;
   min-width: 20px;
   border-radius: 10px;
-  display: inline-block;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   @include themed() {
     background-color: t(primary-3);
   }

src/ui/Button/index.scss

@@ -4,9 +4,11 @@
   border-radius: 4px;
   box-shadow: none;
   cursor: pointer;
-  display: inline-block;
   font-family: var(--sendbird-font-family-default);
   padding: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 
   &:hover {
     box-shadow: none;