From 4f5a8090e946a5a6e8a5756a44463420ecf7df17 Mon Sep 17 00:00:00 2001
From: Hyungu Kang | Airen <gusrn1423@naver.com>
Date: Wed, 11 Sep 2024 18:47:01 +0900
Subject: [PATCH] [AC-3788] chore: file support design qa (#357)

## Changes
- Design QA changes

ticket: [AC-3788]

## Additional Notes
-

## Checklist
Before requesting a code review, please check the following:
- [x] **[Required]** CI has passed all checks.
- [x] **[Required]** A self-review has been conducted to ensure there
are no minor mistakes.
- [x] **[Required]** Unnecessary comments/debugging code have been
removed.
- [x] **[Required]** All requirements specified in the ticket have been
accurately implemented.
- [ ] Ensure the ticket has been updated with the sprint, status, and
story points.


[AC-3788]:
https://sendbird.atlassian.net/browse/AC-3788?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 src/components/FormInput.tsx         | 10 ++++++++++
 src/components/chat/ui/ChatInput.tsx | 23 +++++++++++++----------
 src/components/chat/ui/index.tsx     |  9 +++++++--
 src/components/ui/FileViewer.tsx     | 11 +----------
 4 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
index f2aec4fb9..8d82a6a87 100644
--- a/src/components/FormInput.tsx
+++ b/src/components/FormInput.tsx
@@ -113,6 +113,11 @@ const Chip = styled.div<ChipProps>`
             outline: 'none',
             'box-shadow': `0 0 0 1px ${theme.borderColor.formChip.focus}`,
           },
+          '&:active': {
+            color: theme.textColor.formChip.selected,
+            backgroundColor: theme.bgColor.formChip.selected,
+            border: `1px solid ${theme.borderColor.formChip.selected}`,
+          },
         };
       }
       case 'selected': {
@@ -133,6 +138,11 @@ const Chip = styled.div<ChipProps>`
             outline: 'none',
             'box-shadow': `0 0 0 1px ${theme.borderColor.formChip.focus}`,
           },
+          '&:active': {
+            color: theme.textColor.formChip.selected,
+            backgroundColor: theme.bgColor.formChip.selected,
+            border: `1px solid ${theme.borderColor.formChip.selected}`,
+          },
         };
       }
       case 'submittedDefault': {
diff --git a/src/components/chat/ui/ChatInput.tsx b/src/components/chat/ui/ChatInput.tsx
index 230b5919a..b9a51588f 100644
--- a/src/components/chat/ui/ChatInput.tsx
+++ b/src/components/chat/ui/ChatInput.tsx
@@ -74,11 +74,13 @@ const container = css`
       display: flex;
       align-items: center;
       .sendbird-message-input-text-field {
-        min-height: 40px;
+        min-height: 36px;
         max-height: 100px;
-        height: 40px;
+        height: 36px;
         overflow-y: auto;
-        padding: 8px 16px;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        padding-inline-start: 16px;
         border-radius: 20px;
         // Not to zoom in on mobile set font-size to 16px which blocks the zooming on iOS
         // @link: https://weblog.west-wind.com/posts/2023/Apr/17/Preventing-iOS-Safari-Textbox-Zooming
@@ -99,17 +101,18 @@ const container = css`
         bottom: unset;
         background-color: transparent;
       }
-      .sendbird-iconbutton__inner {
-        height: unset;
-      }
       .sendbird-message-input--attach {
         right: unset;
         bottom: unset;
         inset-inline-end: 12px;
-        inset-block-start: 50%;
-        transform: translateY(-50%);
-        path {
-          fill: ${themedColors.onbackground1};
+        inset-block-end: 2px;
+        & .sendbird-iconbutton__inner {
+          height: 16px;
+        }
+        &:hover {
+          path {
+            fill: ${themedColors.oncontent_inverse1};
+          }
         }
       }
       .sendbird-message-input--placeholder {
diff --git a/src/components/chat/ui/index.tsx b/src/components/chat/ui/index.tsx
index 979ca6414..decbaebf9 100644
--- a/src/components/chat/ui/index.tsx
+++ b/src/components/chat/ui/index.tsx
@@ -3,7 +3,7 @@ import { css, cx } from '@linaria/core';
 import { ChatHeader } from './ChatHeader';
 import { ChatInput } from './ChatInput';
 import { ChatMessageList } from './ChatMessageList';
-import { themedColors, themedColorVars } from '../../../foundation/colors/css';
+import { themedColorVars } from '../../../foundation/colors/css';
 import { useDragDropArea } from '../../../tools/hooks/useDragDropFiles';
 import { PoweredByBanner } from '../../ui/PoweredByBanner';
 
@@ -26,8 +26,13 @@ const container = css`
   font-family: var(--sendbird-font-family-default);
   height: 100%;
   width: 100%;
-  background-color: ${themedColors.bg1};
   display: flex;
   flex-direction: column;
   flex: 1;
+  .sendbird-theme--light & {
+    background-color: var(--sendbird-light-background-50);
+  }
+  .sendbird-theme--dark & {
+    background-color: var(--sendbird-dark-background-700);
+  }
 `;
diff --git a/src/components/ui/FileViewer.tsx b/src/components/ui/FileViewer.tsx
index a984cc959..84ede8d87 100644
--- a/src/components/ui/FileViewer.tsx
+++ b/src/components/ui/FileViewer.tsx
@@ -2,20 +2,11 @@ import { FileMessage } from '@sendbird/chat/message';
 
 import { FileViewerView } from '@uikit/modules/GroupChannel/components/FileViewer/FileViewerView';
 
-import { useChatContext } from '../chat/context/ChatProvider';
-
 interface Props {
   message: FileMessage;
   onClose: () => void;
 }
 // TODO: Remove UIKit
 export const FileViewer = ({ message, onClose }: Props) => {
-  const { dataSource } = useChatContext();
-  return (
-    <FileViewerView
-      message={message}
-      deleteMessage={(message: any) => dataSource.deleteMessage(message)}
-      onCancel={onClose}
-    />
-  );
+  return <FileViewerView message={message} onCancel={onClose} />;
 };