From e4ec019b2a031feaf73ea96845eee9aba4470a6b Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Wed, 27 Oct 2021 09:40:22 +0900
Subject: [PATCH 1/2] Add Icon color type gray and apply it for video play
 button

---
 src/ui/Icon/index.jsx                     | 2 ++
 src/ui/Icon/index.scss                    | 4 ++++
 src/ui/ThumbnailMessageItemBody/index.tsx | 8 +++++---
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/ui/Icon/index.jsx b/src/ui/Icon/index.jsx
index 11766aa2d..abde77c4e 100644
--- a/src/ui/Icon/index.jsx
+++ b/src/ui/Icon/index.jsx
@@ -67,6 +67,7 @@ const Colors = {
   CONTENT: 'CONTENT',
   CONTENT_INVERSE: 'CONTENT_INVERSE',
   WHITE: 'WHITE',
+  GRAY: 'GRAY',
   SENT: 'SENT',
   READ: 'READ',
   ON_BACKGROUND_1: 'ON_BACKGROUND_1',
@@ -83,6 +84,7 @@ function changeColorToClassName(color) {
     case Colors.CONTENT: return 'sendbird-icon-color--content';
     case Colors.CONTENT_INVERSE: return 'sendbird-icon-color--content-inverse';
     case Colors.WHITE: return 'sendbird-icon-color--white';
+    case Colors.GRAY: return 'sendbird-icon-color--gray';
     case Colors.SENT: return 'sendbird-icon-color--sent';
     case Colors.READ: return 'sendbird-icon-color--read';
     case Colors.ON_BACKGROUND_1: return 'sendbird-icon-color--on-background-1';
diff --git a/src/ui/Icon/index.scss b/src/ui/Icon/index.scss
index 9c6dd5ef0..f46d01429 100644
--- a/src/ui/Icon/index.scss
+++ b/src/ui/Icon/index.scss
@@ -43,6 +43,10 @@
   fill: #ffffff;
 }
 
+.sendbird-icon-color--gray [class*='fill'] {
+  fill: rgba(0, 0, 0, 0.5);
+}
+
 .sendbird-icon-color--sent [class*='fill'] {
   @include themed() {
     fill: t(inverse-on-content-3);
diff --git a/src/ui/ThumbnailMessageItemBody/index.tsx b/src/ui/ThumbnailMessageItemBody/index.tsx
index 9e88a5c53..00ba1883b 100644
--- a/src/ui/ThumbnailMessageItemBody/index.tsx
+++ b/src/ui/ThumbnailMessageItemBody/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useState } from 'react';
 // import { FileMessage } from 'sendbird';
 import { FileMessage } from '../../sendbird.min.js';
 import './index.scss';
@@ -24,6 +24,7 @@ export default function ThumbnailMessageItemBody({
 }: Props): ReactElement {
   const { thumbnails = [] } = message;
   const thumbnailUrl: string = thumbnails.length > 0 ? thumbnails[0]?.url : '';
+  const [imageRendered, setImageRendered] = useState(false);
 
   return (
     <div
@@ -42,6 +43,7 @@ export default function ThumbnailMessageItemBody({
         alt={message?.type}
         width="360px"
         height="270px"
+        onLoad={() => { setImageRendered(true) }}
         placeHolder={(style) => (
           <div
             className="sendbird-thumbnail-message-item-body__placeholder"
@@ -59,7 +61,7 @@ export default function ThumbnailMessageItemBody({
         )}
       />
       {
-        (isVideoMessage(message) && !thumbnailUrl) && (
+        (isVideoMessage(message) && !thumbnailUrl) && !imageRendered && (
           <video className="sendbird-thumbnail-message-item-body__video">
             <source src={message?.url} type={message?.type} />
           </video>
@@ -72,7 +74,7 @@ export default function ThumbnailMessageItemBody({
             <div className="sendbird-thumbnail-message-item-body__icon-wrapper__icon">
               <Icon
                 type={isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF}
-                fillColor={IconColors.ON_BACKGROUND_2}
+                fillColor={IconColors.GRAY}
                 width="34px"
                 height="34px"
               />

From 8115c926d4dea9486881f276933b35e708d59b57 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Wed, 27 Oct 2021 09:40:54 +0900
Subject: [PATCH 2/2] Add a color theme and use it for tooltip background color

---
 src/styles/_color-themes.scss | 2 ++
 src/ui/Tooltip/index.scss     | 9 ++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/styles/_color-themes.scss b/src/styles/_color-themes.scss
index 8c377d11d..8fa4c0a40 100644
--- a/src/styles/_color-themes.scss
+++ b/src/styles/_color-themes.scss
@@ -73,6 +73,7 @@ $themes: (
     bg--2-5: var(--sendbird-light-background-200),
     bg--2-7: var(--sendbird-light-background-200),
     bg--3-3: var(--sendbird-light-background-300),
+    bg--7-3: var(--sendbird-light-background-700),
 
     primary--1-bg--7: var(--sendbird-light-primary-100),
     secondary--3-2: var(--sendbird-light-secondary-300),
@@ -150,6 +151,7 @@ $themes: (
     bg--2-5: var(--sendbird-dark-background-500),
     bg--2-7: var(--sendbird-dark-background-700),
     bg--3-3: var(--sendbird-dark-background-300),
+    bg--7-3: var(--sendbird-dark-background-300),
 
     primary--1-bg--7: var(--sendbird-dark-background-700),
     secondary--3-2: var(--sendbird-dark-secondary-200),
diff --git a/src/ui/Tooltip/index.scss b/src/ui/Tooltip/index.scss
index fe6cab955..34fb5441c 100644
--- a/src/ui/Tooltip/index.scss
+++ b/src/ui/Tooltip/index.scss
@@ -7,7 +7,9 @@
   max-width: 200px;
   border-radius: 8px;
   padding: 8px 16px;
-  background-color: var(--sendbird-tooltip-background);
+  @include themed() {
+    background-color: t(bg--7-3);
+  }
 
   &::after {
     content: '';
@@ -16,7 +18,9 @@
     width: 8px;
     height: 8px;
     transform: rotate(45deg);
-    background-color: var(--sendbird-tooltip-background);
+    @include themed() {
+      background-color: t(bg--7-3);
+    }
   }
 
   &__text {
@@ -27,6 +31,5 @@
     font-style: normal;
     line-height: 1.33;
     letter-spacing: normal;
-    color: var(--sendbird-tooltip-text-color);
   }
 }