From 6e0f8de4fc943123aea257ae23dc40a7f2debcbc Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 25 Mar 2022 13:15:09 +0100
Subject: [PATCH] Chat: Fix verified badge color (#1790)

---
 src/assets/icon-verified.svg            | 1 -
 src/components/common/VerifiedIcon.scss | 7 +++----
 src/components/common/VerifiedIcon.tsx  | 6 +++++-
 src/components/left/main/Chat.scss      | 5 +++++
 4 files changed, 13 insertions(+), 6 deletions(-)
 delete mode 100644 src/assets/icon-verified.svg

diff --git a/src/assets/icon-verified.svg b/src/assets/icon-verified.svg
deleted file mode 100644
index bbb09673e..000000000
--- a/src/assets/icon-verified.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.3 2.9c.1.1.2.1.3.2.7.6 1.3 1.1 2 1.7.3.2.6.4.9.4.9.1 1.7.2 2.6.2.5 0 .6.1.7.7.1.9.1 1.8.2 2.6 0 .4.2.7.4 1 .6.7 1.1 1.3 1.7 2 .3.4.3.5 0 .8-.5.6-1.1 1.3-1.6 1.9-.3.3-.5.7-.5 1.2-.1.8-.2 1.7-.2 2.5 0 .4-.2.5-.6.6-.8 0-1.6.1-2.5.2-.5 0-1 .2-1.4.5-.6.5-1.3 1.1-1.9 1.6-.3.3-.5.3-.8 0-.7-.6-1.4-1.2-2-1.8-.3-.2-.6-.4-.9-.4-.9-.1-1.8-.2-2.7-.2-.4 0-.5-.2-.6-.5 0-.9-.1-1.7-.2-2.6 0-.4-.2-.8-.4-1.1-.6-.6-1.1-1.3-1.6-2-.4-.4-.3-.5 0-1 .6-.6 1.1-1.3 1.7-1.9.3-.3.4-.6.4-1 0-.8.1-1.6.2-2.5 0-.5.1-.6.6-.6.9-.1 1.7-.1 2.6-.2.4 0 .7-.2 1-.4.7-.6 1.4-1.2 2.1-1.7.1-.2.3-.3.5-.2z" fill="#33a8e5"/><path d="M16.4 10.1l-.2.2-5.4 5.4c-.1.1-.2.2-.4 0l-2.6-2.6c-.2-.2-.1-.3 0-.4.2-.2.5-.6.7-.6.3 0 .5.4.7.6l1.1 1.1c.2.2.3.2.5 0l4.3-4.3c.2-.2.4-.3.6 0 .1.2.3.3.4.5.2 0 .3.1.3.1z" fill="#f8fcfc"/></svg>
\ No newline at end of file
diff --git a/src/components/common/VerifiedIcon.scss b/src/components/common/VerifiedIcon.scss
index 7a6c5449c..d96af7b60 100644
--- a/src/components/common/VerifiedIcon.scss
+++ b/src/components/common/VerifiedIcon.scss
@@ -3,8 +3,7 @@
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
-  background-image: url('../../assets/icon-verified.svg');
-  background-repeat: no-repeat;
-  background-size: 100%;
-  background-position: center;
+
+  --color-fill: var(--color-primary);
+  --color-checkmark: #fff;
 }
diff --git a/src/components/common/VerifiedIcon.tsx b/src/components/common/VerifiedIcon.tsx
index f6dc5bb0a..c17f70aab 100644
--- a/src/components/common/VerifiedIcon.tsx
+++ b/src/components/common/VerifiedIcon.tsx
@@ -2,9 +2,13 @@ import React, { FC } from '../../lib/teact/teact';
 
 import './VerifiedIcon.scss';
 
+// eslint-disable-next-line max-len
+const VERIFIED_ICON = { __html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.3 2.9c.1.1.2.1.3.2.7.6 1.3 1.1 2 1.7.3.2.6.4.9.4.9.1 1.7.2 2.6.2.5 0 .6.1.7.7.1.9.1 1.8.2 2.6 0 .4.2.7.4 1 .6.7 1.1 1.3 1.7 2 .3.4.3.5 0 .8-.5.6-1.1 1.3-1.6 1.9-.3.3-.5.7-.5 1.2-.1.8-.2 1.7-.2 2.5 0 .4-.2.5-.6.6-.8 0-1.6.1-2.5.2-.5 0-1 .2-1.4.5-.6.5-1.3 1.1-1.9 1.6-.3.3-.5.3-.8 0-.7-.6-1.4-1.2-2-1.8-.3-.2-.6-.4-.9-.4-.9-.1-1.8-.2-2.7-.2-.4 0-.5-.2-.6-.5 0-.9-.1-1.7-.2-2.6 0-.4-.2-.8-.4-1.1-.6-.6-1.1-1.3-1.6-2-.4-.4-.3-.5 0-1 .6-.6 1.1-1.3 1.7-1.9.3-.3.4-.6.4-1 0-.8.1-1.6.2-2.5 0-.5.1-.6.6-.6.9-.1 1.7-.1 2.6-.2.4 0 .7-.2 1-.4.7-.6 1.4-1.2 2.1-1.7.1-.2.3-.3.5-.2z" style="fill: var(--color-fill)"/><path class="lol" d="M16.4 10.1l-.2.2-5.4 5.4c-.1.1-.2.2-.4 0l-2.6-2.6c-.2-.2-.1-.3 0-.4.2-.2.5-.6.7-.6.3 0 .5.4.7.6l1.1 1.1c.2.2.3.2.5 0l4.3-4.3c.2-.2.4-.3.6 0 .1.2.3.3.4.5.2 0 .3.1.3.1z" style="fill: var(--color-checkmark)"/></svg>' };
+
 const VerifiedIcon: FC = () => {
   return (
-    <span className="VerifiedIcon" />
+    // eslint-disable-next-line react/no-danger
+    <span className="VerifiedIcon" dangerouslySetInnerHTML={VERIFIED_ICON} />
   );
 };
 
diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss
index b48db3b98..2d3ff0c64 100644
--- a/src/components/left/main/Chat.scss
+++ b/src/components/left/main/Chat.scss
@@ -44,6 +44,11 @@
     &.selected:hover {
       --background-color: var(--color-chat-active) !important;
 
+      .VerifiedIcon {
+        --color-fill: #fff;
+        --color-checkmark: var(--color-primary)
+      }
+
       .Avatar.online::after {
         border-color: var(--color-chat-active) !important;
         background: var(--color-white);