From 77d2c276a1494eec3655c0ce45ea4d4e9ae35a5c Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sat, 21 Aug 2021 16:59:52 +0300
Subject: [PATCH] Composer: More fixes for icons

---
 .../middle/composer/ComposerEmbeddedMessage.scss    | 12 ++++++++----
 .../middle/composer/ComposerEmbeddedMessage.tsx     |  2 +-
 src/components/middle/composer/WebPagePreview.scss  | 13 +++++++++----
 src/components/middle/composer/WebPagePreview.tsx   |  2 +-
 src/components/ui/Button.scss                       |  2 +-
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/middle/composer/ComposerEmbeddedMessage.scss b/src/components/middle/composer/ComposerEmbeddedMessage.scss
index 546277304..abea0c91a 100644
--- a/src/components/middle/composer/ComposerEmbeddedMessage.scss
+++ b/src/components/middle/composer/ComposerEmbeddedMessage.scss
@@ -18,16 +18,20 @@
     display: flex;
     align-items: center;
     padding-right: 0.625rem;
-    padding-top: 0.45rem;
+    padding-top: 0.1875rem;
   }
 
   & > div > .Button {
     flex-shrink: 0;
     background: none !important;
-    width: 2.125rem;
-    height: 2.125rem;
-    margin: 0 0.625rem;
+    width: 3.5rem;
+    height: 2.875rem;
+    margin: 0 -0.0625rem 0 0;
     padding: 0;
     align-self: center;
+
+    @media (max-width: 600px) {
+      width: 2.875rem;
+    }
   }
 }
diff --git a/src/components/middle/composer/ComposerEmbeddedMessage.tsx b/src/components/middle/composer/ComposerEmbeddedMessage.tsx
index 5bf85f704..8619bc26c 100644
--- a/src/components/middle/composer/ComposerEmbeddedMessage.tsx
+++ b/src/components/middle/composer/ComposerEmbeddedMessage.tsx
@@ -97,7 +97,7 @@ const ComposerEmbeddedMessage: FC<StateProps & DispatchProps> = ({
   return (
     <div className={className}>
       <div>
-        <Button round color="translucent" ariaLabel="Cancel replying" onClick={clearEmbedded}>
+        <Button round faded color="translucent" ariaLabel="Cancel replying" onClick={clearEmbedded}>
           <i className="icon-close" />
         </Button>
         <EmbeddedMessage
diff --git a/src/components/middle/composer/WebPagePreview.scss b/src/components/middle/composer/WebPagePreview.scss
index 8c55d7f10..7771c857b 100644
--- a/src/components/middle/composer/WebPagePreview.scss
+++ b/src/components/middle/composer/WebPagePreview.scss
@@ -14,11 +14,12 @@
     height: 0 !important;
   }
 
+  // TODO Remove duplication with `.ComposerEmbeddedMessage`
   & > div {
     display: flex;
     align-items: center;
     padding-right: 0.625rem;
-    padding-top: 0.45rem;
+    padding-top:  0.1875rem;
   }
 
   --accent-color: var(--color-primary);
@@ -30,11 +31,15 @@
   & > div > .Button {
     flex-shrink: 0;
     background: none !important;
-    width: 2.125rem;
-    height: 2.125rem;
-    margin: 0 0.625rem;
+    width: 3.5rem;
+    height: 2.875rem;
+    margin: 0 -0.0625rem 0 0;
     padding: 0;
     align-self: center;
+
+    @media (max-width: 600px) {
+      width: 2.875rem;
+    }
   }
 
   .WebPage {
diff --git a/src/components/middle/composer/WebPagePreview.tsx b/src/components/middle/composer/WebPagePreview.tsx
index d89dda96f..6505e6b7c 100644
--- a/src/components/middle/composer/WebPagePreview.tsx
+++ b/src/components/middle/composer/WebPagePreview.tsx
@@ -100,7 +100,7 @@ const WebPagePreview: FC<OwnProps & StateProps & DispatchProps> = ({
   return (
     <div className={buildClassName('WebPagePreview', transitionClassNames)}>
       <div>
-        <Button round color="translucent" ariaLabel="Clear Webpage Preview" onClick={handleClearWebpagePreview}>
+        <Button round faded color="translucent" ariaLabel="Clear Webpage Preview" onClick={handleClearWebpagePreview}>
           <i className="icon-close" />
         </Button>
         <WebPage message={messageStub} inPreview />
diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss
index 4e7ed67a1..8eefd51e4 100644
--- a/src/components/ui/Button.scss
+++ b/src/components/ui/Button.scss
@@ -154,7 +154,7 @@
   }
 
   &.faded {
-    opacity: 0.75;
+    opacity: 0.8;
 
     @include active-styles() {
       opacity: 1;