feat: Apply hover active, hover, active-hover effects on warning button (#909)

Fixes: [AC-961](https://sendbird.atlassian.net/browse/AC-961)

### Changelogs
- Added `labelType`, and `labelColor` props to `ButtonProps`

[AC-961]:
https://sendbird.atlassian.net/browse/AC-961?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Ahyoung Ryu <[email protected]>

Author: chohongm

src/modules/Channel/components/MessageFeedbackModal/index.tsx

@@ -62,10 +62,12 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
           <div className='sendbird-message-feedback-modal-footer__root'>
             {
               !isMobile && message?.myFeedback && selectedFeedback === message.myFeedback.rating
-                ? <Button type={ButtonTypes.WARNING} onClick={onRemove}>
-                  <Label type={LabelTypography.BUTTON_3} color={LabelColors.ERROR}>
-                    {stringSet.BUTTON__REMOVE_FEEDBACK}
-                  </Label>
+                ? <Button
+                  type={ButtonTypes.WARNING}
+                  onClick={onRemove}
+                  labelType={LabelTypography.BUTTON_3}
+                >
+                  {stringSet.BUTTON__REMOVE_FEEDBACK}
                 </Button>
                 : <div/>
             }

src/styles/_color-themes.scss

@@ -78,6 +78,7 @@ $themes: (
     primary--1-bg--7: var(--sendbird-light-primary-100),
     secondary--3-2: var(--sendbird-light-secondary-300),
     error--3-2: var(--sendbird-light-error-300),
+    error--4-1: var(--sendbird-light-error-400),
     on-bg-4--bg-6: var(--sendbird-light-onlight-04),
   ),
   dark: (
@@ -157,6 +158,7 @@ $themes: (
     primary--1-bg--7: var(--sendbird-dark-background-700),
     secondary--3-2: var(--sendbird-dark-secondary-200),
     error--3-2: var(--sendbird-dark-error-200),
+    error--4-1: var(--sendbird-dark-error-100),
     on-bg-4--bg-6: var(--sendbird-dark-background-600),
   ),
 );

src/ui/Button/index.scss

@@ -194,32 +194,40 @@
 
   .sendbird-button__text {
     @include themed() {
-      color: t(on-content-1);
+      color: t(error--3-2);
     }
   }
 
   &:hover {
     @include themed() {
-      border-color: t(error-4);
+      border-color: t(error--4-1);
+    }
+    .sendbird-button__text {
+      @include themed() {
+        color: t(error--4-1);
+      }
     }
   }
 
   &:focus {
     @include themed() {
-      border-color: var(--sendbird-button-border-focus);
-      box-shadow: 0 0 0 2px t(error-3);
+      border-color: t(primary-3);
+      .sendbird-button__text {
+        @include themed() {
+          color: t(error--3-2);
+        }
+      }
     }
   }
 
   &:hover &:focus {
     @include themed() {
-      box-shadow: 0 0 0 2px t(error-4);
-    }
-  }
-
-  &:active &:focus {
-    @include themed() {
-      box-shadow: 0 0 0 2px t(error-5);
+      border-color: t(primary-3);
+      .sendbird-button__text {
+        @include themed() {
+          color: t(error--4-1);
+        }
+      }
     }
   }
 }

src/ui/Button/index.tsx

@@ -4,6 +4,8 @@ import './index.scss';
 import Label, { LabelTypography, LabelColors } from '../Label';
 import { changeTypeToClassName, changeSizeToClassName } from './utils';
 import { ButtonTypes, ButtonSizes } from './types';
+import { ObjectValues } from '../../utils/typeHelpers/objectValues';
+import { Typography } from '../Label/types';
 
 export interface ButtonProps {
   className?: string | Array<string>;
@@ -12,6 +14,8 @@ export interface ButtonProps {
   children: string | ReactElement;
   disabled?: boolean;
   onClick?: () => void;
+  labelType?: ObjectValues<typeof Typography>;
+  labelColor?: ObjectValues<typeof LabelColors>;
 }
 
 export default function Button({
@@ -21,6 +25,8 @@ export default function Button({
   children = 'Button',
   disabled = false,
   onClick = () => { /* noop */ },
+  labelType = LabelTypography.BUTTON_1,
+  labelColor = LabelColors.ONCONTENT_1,
 }: ButtonProps): ReactElement {
   const injectingClassNames = [
     ...((Array.isArray(className)) ? className : [className]),
@@ -39,8 +45,8 @@ export default function Button({
     >
       <Label
         className="sendbird-button__text"
-        type={LabelTypography.BUTTON_1}
-        color={LabelColors.ONCONTENT_1}
+        type={labelType}
+        color={labelColor}
       >
         {children}
       </Label>